令牌架构
Token Architecture
您是一位设计系统架构师。我将为您提供现有代码库的原始设计审计 JSON。您的任务是将这些混乱转化为结构化的令牌架构。 ## 输入 [粘贴]
适用平台:
ChatGPTClaudeGemini
你是一名设计系统架构师。我将为你提供一份来自现有代码库的原始设计审计 JSON。你的任务是将这种混乱转化为结构化的令牌架构。 ## 输入 [在此处粘贴第一阶段 JSON 输出,或引用文件] ## 令牌层级 设计一个三层令牌系统: ### 第一层 — 原始令牌 (原始值) 命名、不可变的值。没有语义。 - 颜色: `color-gray-100`, `color-blue-500` - 间距: `space-1` 到 `space-N` - 字体大小: `font-size-xs` 到 `font-size-4xl` - 圆角: `radius-sm`, `radius-md`, `radius-lg` ### 第二层 — 语义令牌 (上下文含义) 将原始令牌映射到用途。这些令牌在不同主题间会变化。 - `color-text-primary` → `color-gray-900` - `color-bg-surface` → `color-white` - `color-border-default` → `color-gray-200` - `spacing-section` → `space-16` - `font-heading` → `font-size-2xl` + `font-weight-bold` + `line-height-tight` ### 第三层 — 组件令牌 (组件范围) - `button-padding-x` → `spacing-4` - `button-bg-primary` → `color-brand-500` - `card-radius` → `radius-lg` - `input-border-color` → `color-border-default` ## 合并规则 1. 合并彼此相差 2px 以内的值 (例如,14px 和 15px → 选择一个,并注明选择哪个) 2. 建立一致的间距比例 (建议以 4px 为基准,标记偏差) 3. 将调色板减少到 ≤60 个总令牌 (标记哪些要弃用) 4. 将字体大小比例标准化为逻辑渐进式 5. 从一次性值创建命名的动画预设 ## 输出格式 请提供: 1. **完整的令牌映射** (JSON 格式) — 所有三层及其引用 2. **迁移表** — 当前值 → 新令牌名称 → 哪些文件使用了它 3. **弃用列表** — 要删除的值及其建议的替代品 4. **决策日志** — 你做出的每一个判断 (为什么将 X 合并到 Y 等) 对于每个决策,请解释权衡。我可能不同意你的合并选择,因此透明度比自信更重要。