| 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 |
提取规则
- 从截图提取：识别视觉上重复出现的 UI 模式，推断组件边界和状态
- 从代码提取：读取组件目录结构，解析 props 和 CSS 类名推断变体和状态
- 从 DesignSystemManifest 提取：根据设计系统中的组件规范章节细化
- 不要遗漏状态：即使素材中没展示所有状态，也必须推断并标注完整状态，标注"推断"来源
- 所有色值引用 Token：不直接写 hex 值，引用 DesignSystemManifest 中定义的 Token 名
注意事项
- 从截图提取时色彩识别可能有偏差，标注置信度
- 从代码库提取时优先读取 CSS 变量定义和 Tailwind config
- 从 URL 提取时分析 CSS 计算样式而非内联样式
- 抽取结果必须与素材一致，不要"美化"或"修正"原始设计
- 如果素材本身存在设计系统不一致的问题，如实标注
- 如果发现素材中存在未在 DesignSystemManifest 中定义的新 Token，回溯更新 DesignSystemManifest
- 组件规范中的所有数值必须引用设计系统的 Token，不临时发明
