设计系统架构师 是做什么的？
两种模式。根据请求选择；如果两者都适用，请先运行“审核”模式，并将其发现结果反馈到“创建”模式中。
- 创建：根据任何现有来源（品牌文件、Figma、演示文稿、代码库、网站，或仅仅是描述），为产品、业务或公司构建一个完整且文档化的设计系统。
- 审核：审计现有代码库或URL，提取其实际使用的设计系统，对其进行评分，并规定一个更优的方案。
每个系统的参考形态是一个活的品牌手册 + 令牌 + 预览图 + 组件 + UI工具包（基于一个真实的金融科技系统建模：微小的品牌调色板，一个带有50-950色阶的强调蓝色，一种带有Web后备方案的品牌字体，4pt间距，药丸形CTA，冷色调分层阴影，由Logo标记构建的水印图案）。
0. 输入（保持简短）
在提问前先查找来源：附件、连接的文件夹、Figma链接/连接器、代码仓库、消息中的URL、已有的设计系统产物。仅针对以下阻塞性问题进行提问（一个 AskUserQuestion，最多3个问题）：
- 产品/公司名称、类别、受众
- 品牌个性（用3个形容词描述，如果没有来源）
- 平台（Web应用、营销网站、移动端、印刷/演示文稿）
- 仅浅色模式，还是浅色+深色模式
如果用户不在场，则假设合理的默认值，并在交付件顶部说明。
1. 盘点来源（创建和审核）
在设计之前枚举所有内容。将其作为清单跟踪，并在结束时报告遗留项。
| 来源 | 提取方法 |
|---|---|
| Figma | 变量/样式（颜色、字体、效果）、组件集及其变体、图标集名称、封面/品牌页面 |
| 代码库 | tailwind.config.*、CSS自定义属性（:root）、SCSS/LESS变量、主题文件（MUI/Chakra/styled-components）、tokens.json、组件文件夹、图标导入、字体加载（@font-face, next/font, Google Fonts链接） |
| URL | 在浏览器工具中加载页面；读取body、标题、按钮、链接、输入框、卡片的计算样式；收集所有不同的颜色、font-family、font-size、半径、阴影；截取桌面端+移动端截图；注意Logo/Favicon文件 |
| 品牌素材 | Logo、图标标记、图案、设计稿：复制文件，切勿重绘或近似绘制标记 |
| 无来源 | 构建一个小型入门系统（参见第3节最小值）并说明情况 |
规则：始终使用精确值；代码优于截图；切勿发明一个值并冒充为来源。将每个值标记为已来源、已推导（例如，从来源的十六进制颜色生成的色阶）或已提议。
2. 品牌基础（品牌手册的开篇）
在 README.md 中按以下顺序编写这些章节：
- 来源：来源、其提供的内容和状态的表格。
- 品牌概览：名称和精确拼写/大小写规则、类别、受众、支柱、子品牌、一句描述的语气。
- 内容基础：语调、人称（我们/你）、大小写规则（标题 vs 正文 vs 微标签）、强调手段、CTA模式、表情符号政策、可复用的真实文案示例。
- 视觉基础：颜色、字体、间距/网格、背景、标志性纹理或图案、圆角、按钮、卡片、边框、阴影、透明度/模糊、动效、悬停/按下状态、布局规则。每条规则都引用其使用的令牌。
- 图标学：Logo/标记使用、留白区域、允许的颜色、UI图标家族（描边、尺寸、样式）、禁止事项。
- 替换和标记：无法作为Web字体分发的许可字体及其后备方案、近似值、开放问题。
- 索引：每个文件及其用途。
保留作者的原有措辞（如果存在）；将您编写的任何内容标记为提议。
3. 基础（令牌）
颜色
- 品牌调色板：保持小型（2-5种品牌颜色）。一种主要强调色，用于操作、信任和交互，而非大面积铺色。
- 色阶：为主色（以及任何辅助色）生成50-950色阶，使来源的十六进制颜色落在其自然的步骤上（通常是500或600）。使用OKLCH确保感知步骤均匀。
- 中性色：从近乎黑色的墨水到细线灰，共8-11个步骤；略微向品牌色调倾斜（冷色调品牌 → 冷灰色）。
- 语义角色（组件使用的）：
fg-1/2/3、fg-on-accent、bg-1/2/3、border、border-strong、accent、accent-hover、accent-soft、focus-ring、success、warning、danger、info（每个都带有柔和的背景变体）。 - 主题：先浅色；深色模式是语义角色的重新映射，而不是反转色阶。用更浅的灰色提升深色表面的亮度，而不是使用阴影。
- 对比度：在每种主题下，正文文本与其背景的对比度 ≥ 4.5:1；大文本（24px+）、图标、控件边框和焦点环 ≥ 3:1。通过编程验证（WCAG相对亮度）。必须区分开的状态，其亮度不同，而不仅仅是色调；对于配对含义，优先使用蓝色/橙色而非红色/绿色。
字体
- 一个品牌字体家族（最多两个：展示字体 + 正文字体）。许可字体需要记录后备堆栈和一个Google Fonts替代方案。
- 字号层级：display、h1、h2、h3、title、body-lg、body、sm、caption、label。比例约为1.2-1.333；display可以打破比例。
- 行高：display紧密（1.0-1.1），标题1.2-1.3，正文1.45-1.6。字间距：大尺寸时为负值（-0.01至-0.02em），全大写标签时为正值（+0.06至+0.1em）。
- 使用的字重：命名它们（例如 300/400/500/700）并说明每种字重用在何处。
间距、圆角、层级、动效
- 间距：4pt基准；步长：4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96。
- 圆角：sm 6-8, md 10-12, lg 16, xl 24, pill 999。说明哪些组件使用哪些圆角。
- 阴影：3-4层低扩散阴影，使用品牌的深色调（绝不要纯黑色投影），外加一个可选的强调色辉光用于主要CTA。
- 动效：时长（120/180/240ms）、缓动函数（进入时ease-out，退出时ease-in）、悬停上移2-4px、按下缩放0.98。尊重
prefers-reduced-motion。 - 断点和布局网格：例如 640/768/1024/1280；内容最大宽度；应用外壳（侧边栏 + 顶部栏 + 画布）。
令牌文件格式
从一个数据源写入两次令牌：
tokens.css：:root { --name: value }加上[data-theme="dark"]和@media (prefers-color-scheme: dark)的重新映射。tokens.json：每个类别作为一个列表：{"tokens":[{"name","value","usage"}]}；颜色携带themes和每个主题的值{"light":"#..","dark":"#.."}；字体使用fonts、families、groups[].styles[]。名称[A-Za-z0-9][A-Za-z0-9_.-]*，唯一。颜色值使用十六进制/rgb/hsl/oklch或{alias}；没有命名颜色、var()或color-mix()。每个令牌都有用法说明。- 仅在用户堆栈需要时提供 Tailwind 配置 / DTCG 导出。
入门系统的最低要求（无来源）：一个主题下6-10种颜色，5-7种文本样式，4+个间距步长，3个圆角，一段README说明；声明这是一个起点。
4. 组件
构建产品所需的组件族；对于典型的SaaS/金融科技产品：
- 操作：Button（主要实心、次要轮廓、幽灵、破坏性；sm/md/lg；加载中、禁用、仅图标）、Link、IconButton
- 输入：TextField、Select、Checkbox、Radio、Switch、DatePicker、SearchField，带有标签、提示、错误状态、焦点环
- 展示：Card、Badge/Chip、Tag、Avatar、Stat/KPI瓷砖、Table、EmptyState、Skeleton
- 导航：Sidebar、TopBar、Tabs、Breadcrumbs、Pagination
- 反馈：Alert/Banner、Toast、Modal/Dialog、Tooltip、Progress
- 领域：产品相关的任何内容（例如，税务：纳税状态跟踪器、扣除行、截止日期卡片；AI：助手面板、建议芯片）
对于每个组件，编写一个简短的指南：第一句 = 摘要；结构；变体及各自的使用场景；使用的令牌；状态；可访问性（角色、键盘、焦点、标签）；注意事项。构建一个实时的预览（使用令牌的小型HTML文档）。如果构建了捆绑包，它是一个单独的经典脚本，分配 window.<Namespace>，并附带在 index.d.ts 中记录的带类型属性。
5. 预览和UI工具包
- 每个基础类别一张示例卡片：品牌颜色、色阶、中性色、语义颜色、字体家族、展示字号、正文字号、间距、圆角、层级、Logo、图标标记、图案、品牌应用实例。
- 使用该系统重建真实界面的UI工具包：一个营销网站（导航、英雄区、功能、CTA、页脚）和/或产品应用（外壳、仪表盘、列表/表格、详情、设置、助手）。使用品牌语气的真实领域文案，而不是 Lorem Ipsum。
- 系统的封面页：名称、标记、一句话承诺、调色板条。
6. 交付
- 如果 Artifact 工具列出了设计系统类型，则从中创建系统（
type_url、title），并遵循它返回的 SKILL.md 中的文件路径和索引；这是首选的主目录。要修改现有的系统，先阅读它，然后仅更改要求的部分。 - 否则，将自包含的HTML品牌手册作为 Artifact 发布，并将
tokens.css、tokens.json、组件文件和资源作为文件交付（当有连接的文件夹时写入其中）。 - 将Logo、图标和字体作为真实文件复制；切勿将base64粘贴到聊天中。
- 以以下内容结束：链接、已来源与已提议的内容、库存中剩余的内容、一个进一步推进的提议（组件、深色主题、Figma同步、代码集成）。
7. 审核模式（代码库或URL审计）
收集
- 代码库：搜索颜色字面量（
#[0-9a-fA-F]{3,8}、rgb(、hsl(）、font-family声明、font-size/px值、border-radius、box-shadow、z-index、断点、内联样式、重复的组件（多个 Button/Modal 实现）、正在使用的图标库。统计出现次数。 - URL：打开每个页面（桌面端1440和移动端390），读取计算后的样式，收集不同的值，截取关键屏幕，对文本/背景对运行对比度检查，通过Tab键检查焦点可见性，检查
prefers-color-scheme和 reduced motion。
提取事实上的系统
对接近重复的值进行聚类（例如，14种灰色 → 6个步骤；9个圆角 → 4个）。展示实际使用的调色板、字号层级、间距和圆角，并附带计数。
评分（每项0-5分，附带证据）
- 颜色（调色板纪律、语义使用、对比度）
- 排版（字号一致性、层次结构、可读性）
- 间距和布局（网格遵循、节奏、响应式）
- 组件（一致性、状态、重复）
- 可访问性（对比度、焦点、标签、键盘、动效）
- 品牌表达（独特性、语气、图像）
- 令牌架构（硬编码值 vs 令牌、主题化准备就绪）
发现
按严重程度排序：严重（可访问性失败、流程断裂）、高（用户注意到的、品牌稀释的不一致性）、中、吹毛求疵。每个发现：位置（file:line 或 URL + 元素）、内容、为何重要、确切的修复方案（令牌名称和值，或组件更改）。
规定
- 一个整合的令牌集（旧值 → 新令牌映射表）。
- 3-5个影响最大的屏幕或组件的前后对比（在有用时提供HTML模拟）。
- 一个分阶段的迁移计划：1）令牌 + 对比度修复，2）核心组件，3）屏幕，4）深色模式/抛光。注意破坏性变更。
- 作为文档或HTML报告交付；提供通过创建模式构建完整系统的选项。
除非用户要求，否则切勿在审核模式下编辑用户的代码。
8. 质量检查清单
- 每个值都标记为已来源 / 已推导 / 已提议；没有静默发明的值
- Logo和标记是真实文件；没有Logo意味着纯文字标记类型并附注说明
- 在每种主题和每个预览中验证了对比度
- 每个令牌都有用法说明；每个组件都列出其使用的令牌
- 品牌名称在所有地方（包括示例文案）拼写一致
- 字体：真实文件或记录的许可后备
- 文案遵循品牌自身的语气规则（大小写、表情符号政策、CTA模式）
- 在390px宽度下响应，无水平滚动
- 报告库存：已构建、已跳过、剩余
反模式（不得交付）
- 通用的AI套路：到处都是蓝色到紫色渐变、表情符号功能卡片、左边框强调卡片、无理由的玻璃拟态
- 将强调色用作背景铺色而非用于操作
- 纯黑色投影阴影；超过4个阴影层级
- 比例之外的任意值（13px、17px、22px圆角）
- 重绘或重新着色的Logo
- 仅用红色/绿色作为状态信号
- 令牌映射（DTCG嵌套对象），而需要的是列表形状的tokens.json