用途
Claude Design System Architect 用于从品牌简报或已有网站生成完整、高级的设计系统。其核心目标是建立令牌层（token layer）与组件语言，使下游所有界面看起来经过刻意设计，而不是典型的 AI 生成落地页。
该技能可与 claude-landing-composer（消费这些令牌来构建页面）以及 claude-design-critic（依据这些令牌审查现有界面）配合使用。
主要能力
第一步：确立品牌输入
可从简报、现有网站（通过 WebFetch 或截图）或用户喜欢的参考站点中提取：
- 个性：3–5 个形容词（例如“温暖、编辑感、自信、平静”），用于驱动后续所有决策。
- 受众与情境：谁使用、在什么设备上、处于什么情绪状态。
- 既有资产：标志、已锁定颜色、正在使用的字体。
- 反向参考：它绝对不能看起来像什么。
默认与内部规则（除非品牌明确覆盖）：调色板中不使用紫色；UI 中不使用 emoji，而使用图标集（Lucide / Heroicons）并将其指定为令牌；倾向暖色/大地色系（沙色、陶土色、黏土色），并考虑深色表面选项；动效是系统的一部分，而非事后补充。
第二步：构建令牌
逐层设计并记录原因：
- 颜色：每个色相的真实色阶（50–900）、语义令牌（表面、文本、弱化、强调、边框、成功/警告/危险），并验证对比度（正文最低满足 WCAG AA）。包含深色模式集合。后续不散落任意十六进制值，一切映射到令牌。
- 字体：带有理由的字体搭配、模块化比例（而非随机 px）、每个字号的行高与字距、字重。优先选择有个性且清晰的搭配，而非默认系统字体栈。
- 空间与布局：间距比例、容器宽度、网格、断点。宽裕且不对称的留白显得高级；拥挤均匀的内边距显得像自动生成。
- 圆角/边框/阴影：一个小而一致的集合。阴影需匹配品牌的分量（暖色品牌用柔和阴影，技术品牌用清晰阴影）。
- 动效：时长与缓动令牌、命名模式（入场、强调、过渡）、减弱动效时的立场。这是让它感觉有生命力的关键。
第三步：指定组件
针对核心组件（按钮、输入框、卡片、导航、区块、徽章、弹窗），指定变体、状态（悬停/聚焦/激活/禁用）、尺寸和无障碍说明——全部使用上述令牌表达，绝不使用一次性值。
第四步：导出
产出真实文件，而非文字描述：
- tailwind.config 扩展（或 Tailwind v4 的 @theme），接入每个令牌。
- tokens.css——CSS 自定义属性（浅色 + 深色）。
- design-system.md——使用文档：包含十六进制值与对比度的调色板、字体比例、间距、动效、组件规范，以及指出需要避免的 AI 痕迹模式的正/反示例。
第五步：交接
以单屏摘要和下一步建议收尾：用 claude-landing-composer 基于这些令牌构建页面，或用 claude-design-critic 将现有 UI 改造到这些令牌上。
高级感与生成感的区别（内置要求）
- 有意图、克制的调色板——不是 6 种互相竞争的点缀色。
- 真实的字体比例与有个性的字体——不是默认无衬线体的 3 种字号。
- 不对称、宽裕的留白——不是到处均匀的内边距。
- 有性格的动效——不是每个元素都一样的上浮淡入。
- 一种自信的点缀色——不是彩虹渐变（也绝不默认紫色）。
护栏摘要
每个值都是令牌，没有任意值 · 对比度满足 AA · 包含深色模式与减弱动效 · 除非品牌要求，不使用紫色/emoji · 导出真实配置文件，而非描述。
适用场景
适合需要从品牌简报或现有网站快速生成一套完整、可导出的设计系统，并希望下游页面构建与设计审查都基于统一令牌的场景。
限制
资料未提供关于收费、价格、平台支持范围、具体效果指标或详细使用步骤的更多信息。