| name | ui-spec-gen |
| description | UI 规范文档生成技能。生成或更新项目的视觉设计规范,包含色彩体系、字体规范、间距系统、组件规范和图标规范。适用于 UI 设计师在项目启动时建立设计规范,或在组件新增后更新规范文档。 |
UI Spec Gen Skill — UI 规范文档生成技能
输出模板
# UI 设计规范 — [项目名]
版本: v1.0 | 日期: YYYY-MM-DD | 负责人: UI 设计师
## 色彩体系
| 色彩类型 | 色值 | 使用场景 |
|---------|------|---------|
| 主色 | #XXXXXX | 主要按钮、链接、高亮 |
| 辅色 | #XXXXXX | 次要操作、标签 |
| 成功色 | #XXXXXX | 成功状态 |
| 警告色 | #XXXXXX | 警告状态 |
| 错误色 | #XXXXXX | 错误状态 |
| 文字主色 | #XXXXXX | 正文 |
| 文字辅色 | #XXXXXX | 次要文字、提示 |
| 背景色 | #XXXXXX | 页面背景 |
## 字体规范
| 级别 | 字号 | 字重 | 行高 | 使用场景 |
|------|------|------|------|---------|
| H1 | 24px | 600 | 1.4 | 页面标题 |
| H2 | 20px | 600 | 1.4 | 区块标题 |
| 正文 | 14px | 400 | 1.6 | 普通文本 |
| 辅助 | 12px | 400 | 1.6 | 提示、标签 |
## 间距系统
基础单位: 4px
常用间距: 4 / 8 / 12 / 16 / 24 / 32 / 48px
## 组件规范
### 按钮
| 类型 | 背景色 | 文字色 | 高度 | 圆角 |
|------|--------|--------|------|------|
| 主按钮 | 主色 | #FFF | 36px | 4px |
| 次按钮 | 透明 | 主色 | 36px | 4px |
## 图标规范
- 格式: SVG
- 标准尺寸: 16px / 24px / 32px
- 命名规范: icon-[功能描述]-[尺寸].svg