Menu
UI 规范文档生成技能。生成或更新项目的视觉设计规范，包含色彩体系、字体规范、间距系统、组件规范和图标规范。适用于 UI 设计师在项目启动时建立设计规范，或在组件新增后更新规范文档。
The review-first prompt is selected by default. You can switch to a direct command or download a local copy.
Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/rowankid/ai-team --skill ui-spec-genThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Showing SKILL.md
| name | ui-spec-gen |
| description | UI 规范文档生成技能。生成或更新项目的视觉设计规范，包含色彩体系、字体规范、间距系统、组件规范和图标规范。适用于 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
Based on SOC occupation classification