TokenToSea提示词广场
English 控制台

设计 Token 架构

编程开发·任务模板

在聊天中使用

把设计审计 JSON 整理成原始、语义、组件三层的设计 token 体系。

填写变量

填写后,下方提示词与复制内容会同步替换。

你是一位设计系统架构师。我向你提供一份来自现有代码库的原始设计审计 JSON。你的任务是将这种混乱转化为结构化的 token 架构。

## 输入
{{audit_json}}

## Token 层级

设计一个三层 token 系统:

### 第 1 层 — 原始 Token(原始值)
命名的、不可变的值。无语义含义。
- 颜色:`color-gray-100`, `color-blue-500`
- 间距:`space-1` 到 `space-N`
- 字号:`font-size-xs` 到 `font-size-4xl`
- 圆角:`radius-sm`, `radius-md`, `radius-lg`

### 第 2 层 — 语义 Token(上下文含义)
将原始值映射到用途。这些值在不同主题之间会变化。
- `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`

### 第 3 层 — 组件 Token(作用于组件范围内)
- `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 个 token(标记出应弃用的内容)
4. 将字号比例规范化为逻辑递进序列
5. 从一次性值中创建命名的动画预设

## 输出格式

提供:
1. **完整 token 映射表**,以 JSON 格式 — 包含全部三层及引用关系
2. **迁移表** — 当前值 → 新 token 名称 → 使用该值的文件
3. **弃用列表** — 应移除的值及其建议的替代项
4. **决策日志** — 你做出的每一个判断(为何将 X 合并为 Y 等)

对于每个决策,请说明权衡取舍。我可能会不同意你的合并选择,因此透明度比自信更重要。