claude-design-system-architect

Claude Design System Architect

设计系统决定了一个网站看起来是量身打造的，还是和其他 AI 生成的落地页如出一辙。这项技能会构建 Token 层和组件语言，让后续的一切都显得经过精心设计，然后按你的技术栈实际使用的格式导出。

与 claude-landing-composer（使用这些 Token 构建页面）和 claude-design-critic（根据这些 Token 进行审查）配合使用。

第 1 步 — 明确品牌输入

从简报、现有网站（WebFetch / 截图）或用户喜欢的几个参考网站中获取：

• 个性 — 3–5 个形容词（例如“温暖、有编辑感、自信、沉静”）。后续每项决策都由此驱动。
• 受众与情境 — 谁会使用、使用什么设备、当时是什么心境。
• 既有品牌资产 — 已在使用的 Logo、固定配色和字体。
• 反向参考 — 绝对不能呈现的风格。

默认值与基本规则

除非品牌明确提出相反要求：

• 调色板中任何地方都不要使用紫色。
• UI 中不要使用 Emoji——使用图标集（Lucide / Heroicons），并将其指定为 Token。
• 倾向于温暖 / 大地色调（沙色、赤陶色、陶土色），并考虑提供深色表面选项。
• 动效是系统的一部分，而非事后补充。

第 2 步 — 构建 Token

有意识地设计每一层，并记录原因：

• 颜色 — 每种色相都应有完整色阶（50–900）、语义 Token（surface、text、muted、accent、border、success/warn/danger），并验证对比度（正文文本至少达到 WCAG AA）。包含深色模式配色。后续不要散落任意的十六进制颜色——所有颜色都必须映射到 Token。
• 字体 — 说明字体搭配的理由，采用模块化比例（而非随意的 px 值），为不同字号设置行高和字距，并指定字重。优先选择有个性且易读的搭配，避免使用一眼就像“AI 做的”的默认系统字体栈。
• 间距与布局 — 间距比例、容器宽度、网格和断点。宽裕且不对称的留白显得高端；拥挤且统一的内边距则显得像是自动生成的。
• 圆角 / 边框 / 层次 — 采用小而一致的一组样式。阴影应符合品牌的视觉分量（温暖的品牌使用柔和阴影，偏技术感的品牌使用清晰利落的阴影）。
• 动效 — 时长与缓动 Token、命名模式（入场、强调、过渡），以及减少动态效果的方案。这些让界面充满活力。

第 3 步 — 规范组件

针对核心组件（按钮、输入框、卡片、导航、区块、徽章、模态框），明确其变体、状态（悬停 / 焦点 / 激活 / 禁用）、尺寸和无障碍说明——所有内容都必须使用上述 Token 表达，绝不使用一次性数值。

第 4 步 — 导出

生成实际文件，而非文字说明：

• tailwind.config 扩展（或 Tailwind v4 的 @theme），接入每个 Token。
• tokens.css — CSS 自定义属性（浅色 + 深色）。
• design-system.md — 用法文档：包含十六进制颜色值和对比度的调色板、字体比例、间距、动效、组件规范，以及指出应避免哪些 AI 风格特征的正反示例。

第 5 步 — 交接

最后提供一屏内可读的摘要和下一步操作：使用 claude-landing-composer 基于这些 Token 构建页面，或使用 claude-design-critic 将现有 UI 改造为符合这些 Token 的设计。

高端设计与生成式设计的区别（将以下原则融入设计）

• 有意克制的调色板——不要使用 6 种相互竞争的强调色。
• 完整的字体比例和有个性的字体——不要只用默认无衬线字体，设 3 种字号了事。
• 不对称且宽裕的留白——不要到处使用统一内边距。
• 充满个性的动效——不要让每个元素都使用同样的向上淡入效果。
• 一种自信的强调色——不要使用彩虹渐变（更不能默认使用紫色）。

防护规则回顾

每个数值都必须是 Token，不得使用任意值 · 对比度达到 AA · 包含深色模式 + 减少动态效果方案 · 除非品牌要求，否则不使用紫色 / Emoji · 导出真实的配置文件，而非描述。