核心用法
本技能为前端设计全流程解决方案，覆盖Web、移动H5、iOS/Android/HarmonyOS原生APP、微信/支付宝小程序全端场景。采用「Junior → Full 两趟渲染」工作流：阶段1-2快速出骨架占位验证方向，阶段3补全真实内容精调细节，阶段4通过Claude in Chrome MCP或Playwright CLI自验证，可选阶段5接入设计评审。
8大美学流派必选其一：BOLD-MINIMAL（勇敢极简）、EDITORIAL（编辑杂志）、BRUTALIST（野兽派）、RETRO-FUTURE（复古未来）、ORGANIC（有机自然）、MOBILE-NATIVE（iOS HIG/Material Design 3/HarmonyOS三平台）。v4.1新增多流派并行对比模式，可并行输出3方向草稿供用户选择。
Design Tokens系统化（v4.0）：每流派配套扁平JSON规范（color/typography/spacing/radius/shadow），支持jq一行导出为CSS Variables、Tailwind Config或Figma Tokens Studio，实现多产品主题复用。
显著优点
- 反AI Slop硬红线：15条明确禁用项（系统字体、紫色渐变、emoji图标、玻璃形态滥用等），强制设计差异化
- 平台规范深度覆盖：移动端原生流派严格遵循iOS HIG、MD3、鸿蒙设计指南，小程序单独处理safe-area-inset与rpx适配
- 自验证闭环：优先Claude in Chrome MCP直接截图，降级Playwright CLI/微信开发者工具/支付宝IDE，确保真机效果
- 产出即运行：从
examples/<流派>/index.html起手，复制即起步，非空白起步
潜在缺点与局限
- 小程序字体受限：平台禁止
@font-face，无法应用web font，只能依赖系统字体（PingFang SC/思源黑体） - 多流派对比成本：并行3方向需Explore subagent隔离context，Token消耗显著增加
- MCP依赖：自验证首选路线需用户本地部署Claude in Chrome，否则降级CLI增加用户操作负担
- 本土化局限：HarmonyOS设计资源相对iOS/Android薄弱，部分组件需自行推导
适合人群
- 需要快速产出高保真原型的产品设计师与前端开发者
- 追求差异化视觉、拒绝AI同质化输出的设计团队
- 需同时交付Web+APP+小程序多端的独立开发者或外包团队
- 正在搭建跨产品Design System的设计系统负责人
常规风险
| 风险点 | 说明 |
|--------|------|
| 红线误判 | 过度禁用导致设计空间收窄，需合理运用`redLineWaiver`豁免机制 |
| 移动端适配遗漏 | 刘海屏、底部手势条、动态岛等safe-area处理易被忽视，必须跑自验证 |
| Tokens维护成本 | 8流派×3导出器×多产品场景，JSON schema变更需同步多仓 |
| MCP连接不稳定 | 浏览器MCP偶发断开，需熟练掌握fallback CLI命令 |
安全等级S：纯设计生成技能，无代码执行、无网络请求、无敏感数据处理，仅输出静态文件与CLI命令建议。