design-system

设计系统生成器

分析用户提供的设计参考（图像、屏幕截图、PDF、链接、文字描述或现有代码），并生成一套完整的 3 个文件的设计系统文档。

输入

接受任意组合的以下内容：

• 图像：UI 屏幕截图、模型图、设计工具导出文件
• PDF：品牌指南、风格指南、设计规范
• 链接：设计系统文档、组件库或在线网站的 URL
• 文字描述：对设计语言的书面描述
• 现有代码：CSS 文件、主题配置、Tailwind 配置、设计令牌

如果用户提供链接，使用 WebFetch 获取内容。如果用户提供文件路径，则读取该文件。

输出

在用户的工作目录（或指定路径）中恰好生成 3 个 Markdown 文件：

1. design.md — 令牌参考
2. design-guidelines.md — 无障碍设计与注意事项
3. design-components.md — 组件规范

文件规范

design.md — 令牌参考

# [System Name] Design System — Token Reference

> Always read this file first. For component specs see [design-components.md](design-components.md). For accessibility and do's/don'ts see [design-guidelines.md](design-guidelines.md).

[1-2 sentence intro: design language, core architecture, primary typeface, base spacing unit, platform coverage]

必需章节：

颜色

按语义角色分组，并使用 H3 子标题（例如，### 强调色 — 主色、### 表面与中性色、### 语义色/状态色）。

角色	Hex	用途
primary	#6442d6	高强调度填充、文本、图标
on-primary	#ffffff	主色上的文本/图标

在可识别时，注明浅色/深色 Hex 值。

字体排印

默认字体系列及回退链。

样式	大小	字重	行高	字距
Display Large	57sp	400	64sp	-0.25sp
Body Medium	14sp	400	20sp	0.25sp

列出所有比例级别（Display、Headline、Title、Body、Label 或等效级别）。

形状

令牌	圆角半径	组件
Small	8dp	芯片、提示条
Medium	12dp	卡片
Full	50%	按钮、搜索栏

阴影层级

级别	dp	CSS 阴影	用途
0	0	none	基础表面
1	1	0 1px 2px rgb(0 0 0/.3), 0 1px 3px 1px rgb(0 0 0/.15)	卡片

交互状态

状态	图层不透明度	说明
启用	0%	静止状态
悬停	8%	光标悬停其上
焦点	10%	键盘焦点
按下	10%	点击/轻触
禁用	内容 38%，容器 12%	不可操作

布局

类别	宽度	窗格	导航
紧凑	< 600dp	1	导航栏
中等	600–839dp	1–2	导航轨道或导航栏
展开	840–1199dp	1–2	导航轨道或抽屉

动效

缓动曲线（CSS cubic-bezier 值）、时长令牌（短/中/长）、过渡类型。

图标

图标系统规范：样式、尺寸、网格、描边粗细。无法识别时省略。

设计令牌

命名约定格式（例如，md.sys.color.primary）。

---

design-guidelines.md — 无障碍设计与注意事项

# [System Name] Guidelines — Accessibility & Do's/Don'ts

> See [design.md](design.md) for token values. See [design-components.md](design-components.md) for component specs.

必需章节：

无障碍设计

• 对比度要求：包含“要求 | 比率”两列的表格，然后是“组件 | 对比度至少为 3:1”表格
• 触控目标：最小尺寸、间距规则、密度限制
• 键盘导航：包含“按键 | 操作”两列的表格
• 辅助技术：屏幕阅读器规则、标签、角色

手势

包含“手势 | 用途”两列的表格（轻触、双击、长按、滚动、滑动、拖动、捏合）。

内容设计

写作规则：语气、大小写、行长、标签限制。

应做与不应做

按类别组织，并使用 H3 子标题：颜色、形状、阴影层级、交互、布局、字体排印、动效、组件。

格式：

• 应做 将主色用于最重要的单个操作
• 不应做 在同一组的多个按钮上使用主色填充

---

design-components.md — 组件规格

# [System Name] Components

> Full specifications for all [N] components. Grouped by workflow.
> For tokens see [design.md](design.md). For rules & accessibility see [design-guidelines.md](design-guidelines.md).

找出提供的参考资料中所有可识别的组件，不要局限于固定列表。

按工作流类别使用 H2 标题进行整理：

• 操作

• 输入

• 导航

• 容器

• 数据展示

• 反馈

每个组件作为一个 H3 章节：

### Button

**Types:** Filled (primary) > Tonal (secondary) > Elevated > Outlined > Text.
Height 40dp. Target 48dp. Label: 14sp/500. Sentence case.

| Property | Value |
|---|---|
| Contrast | 4.5:1 text, 3:1 icons/borders |
| States | Rest, Hover, Pressed, Focus, Disabled |
| Touch target | 48x48dp min |

**Do:** Use sentence case; keep labels concise (1-3 words).
**Don't:** Use "Click here"; end with punctuation.

---

需要涵盖的典型组件：

• 操作： Button、Icon Button、FAB、Toolbar、Link
• 输入： Text Field、Checkbox、Radio、Switch、Slider、Dropdown/Select、Combobox、Picker、Textarea
• 导航： Navigation Bar/Rail/Drawer、Tabs、Breadcrumb、Menu、Search、App Bar
• 容器： Card、Dialog、Bottom Sheet、Drawer、Popover、Accordion、Divider
• 数据展示： Avatar、Badge、List、Carousel、Icon、Image、Tag/Chip、Skeleton、Tooltip
• 反馈： Progress Indicator、Spinner、Snackbar/Toast、Message Bar

通用规则

• 提供具体信息：以 dp/sp/px 为单位的尺寸、十六进制颜色、CSS box-shadow 值
• 如果无法从参考资料中确定某个值，请根据设计语言进行合理推断，并标注“（推断）”
• 优先使用表格而非段落，确保内容易于浏览
• 每个文件目标为 150–400 行
• 每个文件都必须在开头的引用块中交叉引用另外两个文件
• 使用水平分隔线（---）分隔组件
• 全文保持 Markdown 格式一致

工作流

1. 收集用户提供的所有参考资料（读取文件、获取 URL）
2. 分析设计语言：识别颜色、排版、间距模式和组件清单
3. 生成全部 3 个文件
4. 将每个文件写入指定目录
5. 总结生成内容：系统名称、令牌数量、组件数量