界面设计工坊

解决的具体问题

开发中常见的界面痛点是：设计与开发脱节导致反复修改，设计token（间距、圆角、阴影）不统一，响应式适配靠堆断点，动效无意义。本技能解决的是“如何用系统化规范快速生成或优化符合大厂审美、有温度且细节一致的界面”。

核心能力与工作步骤

本技能基于 Material 3、Apple HIG、Microsoft Fluent 等规范，核心是意图优先的设计价值观：

• 决策树驱动：根据需求自动分流至优化（audit.md）、生成（generate.md）或组件（component.md）流程，避免无效沟通。
• 系统性 Token：强制 4/8pt 网格，间距均为 4 的倍数；圆角、触控高度（≥44px）、阴影层级有明确标准，如弹层圆角 20-24px。
• 风格与细节：字体采用 Space Grotesk / Inter / Noto Sans SC，字阶用 clamp() 而非断点；动效优先 transform/opacity，使用 --ease-spring 曲线。

适用边界与注意点

• 必须校验：产出 HTML/CSS 后需运行强制校验层，未通过不得交付。
• 避免红线：禁止彩虹渐变按钮、廉价单层阴影（如 0 4px 8px rgba(0,0,0,0.5)）、触控目标 <44px。
• 适用场景：适合需要高级简约、Pinterest 审美的产品界面；若需极复杂自定义风格，需自行扩展 references/ 中的 Token。