用途：为任何涉及 UI 的项目提供从结构到落地的完整设计流程，强调先结构后视觉，避免直接生成代码。
主要能力与步骤： Step 0 结构线框：先用 ASCII 为每个屏幕画线框图，强制先思考层级、分区与流程，经确认后再进入下一步。 Step 1 设计 PRD：写 UI 代码前先写设计 PRD，保存到项目规划文档处（如 docs/design/prd-design.md），需包含页面清单、布局结构、组件拆分、配色/字体/间距系统、响应式断点、交互状态、无障碍要求、每屏数据流，用表格与列表清晰表达。若装有专门的设计方向技能，可在此调用。 Step 2 模型稿（可选，依赖 Stitch MCP）：不使用 Google Stitch 可跳过，手写 HTML 模型稿亦可。连接 Stitch MCP 后可用 generate_screen_from_text 按 PRD 逐屏生成，用 extract_design_context 提取设计令牌供后续复用，用 fetch_screen_code 取回 HTML/CSS。安装需自备 Google Cloud 凭据：gcloud auth login、gcloud config set project YOUR_PROJECT_ID、gcloud auth application-default set-quota-project YOUR_PROJECT_ID、gcloud beta services mcp enable stitch.googleapis.com、gcloud auth application-default login，再执行 claude mcp add stitch --scope user -e GOOGLE_CLOUD_PROJECT=YOUR_PROJECT_ID -- npx -y stitch-mcp。 Step 3 集成：以生成代码与设计上下文为基础，引用设计令牌保持多屏一致，偏离 PRD 需说明理由。
最佳实践：优先使用 shadcn/ui 组件而非自造基础件，用 npx shadcn@latest add button card dialog 添加，未初始化先运行 npx shadcn@latest init；把颜色、间距、字体、圆角、阴影编码为 CSS 自定义属性（设计令牌），存于 globals.css，采用 shadcn 与 Tailwind v4 模式及 OKLCH；采用“先批评再重设计”循环；用 Playwright MCP 等做浏览器视觉反馈；参考 2 至 5 张截图拆解设计；明确所有交互状态。
反 AI 味检查清单：不用 emoji 当图标，改用 Phosphor 或 Lucide；不让 AI 选颜色与布局；避免冗余 KPI 卡、渐变头像；表单字段少时用弹窗；定价层级最多 3 至 4 档；落地页需真实产品截图；保持代码整洁。
限制：Step 2 依赖外部 MCP 服务器与个人 Google Cloud 凭据，属按用户配置；其余步骤无需外部工具。资料未提供收费、价格或效果保证等信息。