技能介绍

解决什么问题

AI 生成的界面很容易滑向一种"通用模板感"：紫色渐变、默认无衬线字体、均匀的留白，一看就像批量产出。问题不在某个组件写得不好，而是缺少一套有约束的设计语言——颜色、字号、间距、动效各自为政，最终只能拼出平均值。这个技能要解决的，就是让设计令牌（design token）和组件规范先于页面存在。

技能如何工作

它按五个步骤推进：

建立品牌输入：从需求简报、现有站点或参考站点中提炼 3–5 个性格形容词、受众与使用场景、已有品牌资产，以及明确的反参考（anti-references）。默认规则是：调色板禁用紫色，UI 中不使用 emoji，改用 Lucide 或 Heroicons 图标集并作为令牌声明，整体偏向暖色/大地色系并提供深色表面方案。
构建令牌层：颜色按 hue 生成真实的 50–900 ramp，并定义 surface、text、muted、accent、border、success/warn/danger 等语义令牌，正文对比度验证到 WCAG AA。字体采用模块化比例尺而非随机 px，同时给出 line-height 与 tracking；间距、容器宽度、栅格、断点构成一套尺度；圆角、边框、阴影保持小而一致；动效同样被令牌化——duration、easing、命名模式（entrance、emphasis、transition）以及 prefers-reduced-motion 立场。
规范组件：对 button、input、card、nav、section、badge、modal 等核心组件，定义变体、状态、尺寸和无障碍说明，所有取值都引用令牌，不允许出现一次性值。
导出真实文件：产出 tailwind.config 扩展（Tailwind v4 用 @theme）、tokens.css（CSS 自定义属性，亮色+深色），以及 design-system.md 使用文档，包含调色板与对比度、字号比例尺、间距、动效、组件规格，并附上 do/don't 示例来指出需要避开的 AI 痕迹。
交接：给出一屏摘要，并指向后续动作——用 claude-landing-composer 基于这套令牌构建页面，或用 claude-design-critic 对现有 UI 做合规审查。