用途：用于根据用户、任务、内容、产品类别和技术约束设计并实现合适的前端界面，判断标准是对上下文的适配度，而非固定视觉风格。
主要能力：提供设计模式路由（产品/工作台、营销/品牌、数据/仪表盘、编辑/内容、商业/服务、沉浸/实验），并给出决策权衡标准（用户任务契合、无障碍、可用性与信息架构、视觉一致性、响应式、性能韧性、交互状态完整、可维护性与验证）。
使用方式：先盘点现有产品、项目规范、设计系统、组件、内容与限制，明确目标用户、主任务、内容类型、平台与输入方式；选一个主设计模式，必要时加至多一个次要影响；复用既有设计系统与组件；实现完整状态模型与真实内容层级；在代表性宽度和输入方式下验证渲染结果。遵循紧凑流程，规划规模与改动成比例。
适用场景：React、Next.js、Vite 等前端栈的界面设计与组件评审，涵盖表单、对话框、复杂控件、密集数据、破坏性操作等。
限制与要求：以 WCAG 2.2 AA 为基线；不得用视觉惊艳掩盖键盘陷阱、不可用控件、不可读内容、严重响应式缺陷或无理由性能开销。性能目标为 LCP≤2.5s、INP≤200ms、CLS≤0.1，但需实测，未测量不得声称通过。不得编造指标、评价、库存或用户数据。
跨客户端：GitHub Copilot 需放入其可见技能路径；Claude Code 放入本地 skills 目录或兼容插件源；Codex 同步至 $CODEX_HOME/skills/frontend-design 并在大改后重启。无需 MCP，可用本地指令、工具与直接验证作为回退。
相关技能：web-design-reviewer、react-development、nextjs-development、vite-development、stitch-design、figma-implement-design。