design-system-extract

name	design-system-extract
description	从用户提供的截图/URL/代码库/品牌资料中提取设计 Token（配色、字体、间距、圆角、阴影、卡片样式），并细化所有可复用组件的完整规范（变体、状态、尺寸）。一个技能覆盖 Token 抽取与组件细化两个阶段。
trigger	["用户提供了参考截图","用户提供了参考 URL","用户提供了现有代码库","用户提供了品牌资料（品牌指南、设计文件等）","DesignSystemManifest 完成后需要细化组件规范"]

设计系统抽取与组件细化（Design System Extract）

合并了 Token 抽取与组件细化两个阶段。从素材中提取设计 Token 整理成 DesignSystemManifest，再基于设计系统细化所有可复用组件的完整规范，产出 ComponentSpec。

触发时机

• 用户提供了参考素材（截图/URL/代码库/品牌资料）
• DesignSystemManifest 完成后，需要细化组件规范
• 用户要求整理组件库

第一部分：设计 Token 抽取

从提供的素材中系统性地提取设计 Token，整理成 DesignSystemManifest 格式。

1. 配色方案抽取

• 主色（Primary）：页面中出现频率最高、面积最大的品牌色
• 辅色（Secondary）：用于支撑主色的次要颜色
• 强调色（Accent）：用于 CTA、高亮、关键交互的颜色
• 语义色（Semantic）：success（绿）、warning（黄）、danger（红）、info（蓝）
• 中性色（Neutral）：文本色、背景色、边框色、禁用色
• 标注方式：同时用 oklch 和 hex 标注，oklch 便于程序化调色，hex 便于直接使用
• 缺失处理：如果素材中无法区分辅色和强调色，标注为"缺失"并询问用户

2. 字体抽取

• 字体族：识别标题字体和正文字体（截图识别注明置信度，代码库读取 CSS font-family）
• 字重：提取使用的字重值（如 400、500、700）
• 字号梯度：按比例排列（H1/H2/H3/H4/Body/Small/Caption），标注比例系统（1.250/1.333/1.5）
• 行高 / 字间距：提取标题和正文使用的行高值
• 缺失处理：无法确定字体时，提供 2-3 个风格匹配的候选并询问用户

3. 间距抽取

• 基础间距单位：判断 4px 还是 8px（测量元素间距找最小公约数）
• 间距标尺：xs(4px) / sm(8px) / md(16px) / lg(24px) / xl(32px) / 2xl(48px) / 3xl(64px)
• 缺失处理：无法判断时默认 8px 并标注"推断值"

4. 圆角抽取

• 圆角标尺：0px（直角）、4px（微）、8px（小）、12px（中）、16px（大）、9999px（胶囊）
• 按组件标注：不同组件可能使用不同圆角

5. 阴影抽取

• 阴影层级：sm（细微浮起）、md（中等浮起）、lg（强浮起）
• 标注方式：box-shadow 完整 CSS 值

6. 卡片样式抽取

• 容器样式：背景色、边框、圆角、内边距、阴影
• 内容布局：标题区域、内容区域、操作区域的排布方式

输出：DesignSystemManifest

# DesignSystemManifest

> 来源：{素材类型和描述}
> 抽取时间：{日期}
> 置信度：{高/中/低}

## 1. 配色方案
| 角色 | 色名 | OKLCH | HEX | 用途 |

## 2. 字体
| 层级 | 字体族 | 字重 | 字号 | 行高 | 用途 |

## 3. 间距标尺
| 标记 | 值 | 用途 |

## 4. 圆角
| 标记 | 值 | 适用组件 |

## 5. 阴影
| 层级 | CSS 值 | 用途 |

## 6. 卡片样式

## 7. 组件清单（初步）
| 组件 | 用途 | 备注 |

## 缺失项
- [ ] {缺失项1} — {询问内容}

缺失项处理规则

• 信息不全时用 checklist 标注缺失项，每个附一句具体询问内容
• 一次性集中询问，不反复追问
• 可从上下文合理推断的值标注"推断值"并继续，不阻塞流程

---

第二部分：组件细化

基于 DesignSystemManifest，列出所有识别到的可复用组件，每个组件标注完整规范。

每个组件的标注结构

1. 组件名称：语义化命名（PascalCase，如 PrimaryButton、ProductCard）

2. 用途：一句话说明 + 使用场景

3. 变体（Variants）

• 尺寸：sm / md / lg
• 风格：primary / secondary / ghost / outline
• 布局：horizontal / vertical
• 状态：editable / read-only

4. 状态（States）

• default：默认状态 — 背景/文字色/边框/阴影
• hover：悬停 — 变化项（颜色变化、阴影提升、微动效）
• active：按下/选中 — 变化项
• focus：键盘聚焦 — focus ring 样式（必须有可见焦点指示器）
• disabled：禁用 — 透明度、色彩变化
• error：错误状态（表单组件）— 错误色应用方式和提示位置

5. 间距和尺寸规范

• 外尺寸：宽高（固定值或 min/max 约束）
• 内边距：上/右/下/左，引用间距标尺
• 元素间距：组件内部 gap
• 最小触控区域：移动端 ≥ 44px

输出：ComponentSpec

# ComponentSpec

> 来源：{DesignSystemManifest / 截图 / 原型代码}
> 组件总数：{N}
> 生成时间：{日期}

## 组件 1：{ComponentName}

### 用途
{一句话说明}

### 变体
| 变体名 | 差异说明 | 使用场景 |

### 状态
| 状态 | 背景 | 文字色 | 边框 | 阴影 | 其他 |

### 尺寸规范
- 宽度：{值或约束}
- 内边距：{上} {右} {下} {左}（引用间距标尺）
- 最小触控区域：{值}px

### Token 引用
- 主色 → `{color-token}`
- 字体 → `{font-token}`
- 圆角 → `{radius-token}`
- 阴影 → `{shadow-token}`

## 组件清单汇总
| # | 组件名 | 类别 | 变体数 | 状态数 |

## 缺失项
- [ ] {缺失项} — {说明}

组件类别参考

类别	常见组件
按钮	PrimaryButton、SecondaryButton、GhostButton、IconButton
表单	Input、Textarea、Select、Checkbox、Radio、Switch、Slider
反馈	Toast、Alert、Modal、Tooltip、Badge
导航	Tabs、Breadcrumbs、Pagination、NavBar、SideBar
展示	Card、Table、List、Avatar、Tag、Chip
布局	Container、Grid、Stack、Divider
媒体	Image、VideoPlayer、Carousel、Gallery

提取规则

1. 从截图提取：识别视觉上重复出现的 UI 模式，推断组件边界和状态
2. 从代码提取：读取组件目录结构，解析 props 和 CSS 类名推断变体和状态
3. 从 DesignSystemManifest 提取：根据设计系统中的组件规范章节细化
4. 不要遗漏状态：即使素材中没展示所有状态，也必须推断并标注完整状态，标注"推断"来源
5. 所有色值引用 Token：不直接写 hex 值，引用 DesignSystemManifest 中定义的 Token 名

注意事项

• 从截图提取时色彩识别可能有偏差，标注置信度
• 从代码库提取时优先读取 CSS 变量定义和 Tailwind config
• 从 URL 提取时分析 CSS 计算样式而非内联样式
• 抽取结果必须与素材一致，不要"美化"或"修正"原始设计
• 如果素材本身存在设计系统不一致的问题，如实标注
• 如果发现素材中存在未在 DesignSystemManifest 中定义的新 Token，回溯更新 DesignSystemManifest
• 组件规范中的所有数值必须引用设计系统的 Token，不临时发明