Menu
UI 规范文档生成技能。生成或更新项目的视觉设计规范，包含色彩体系、字体规范、间距系统、组件规范和图标规范。适用于 UI 设计师在项目启动时建立设计规范，或在组件新增后更新规范文档。
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.
Based on SOC occupation classification
接口文档生成技能。根据代码或口述描述，生成标准格式的 RESTful API 接口文档，包含请求方法、路径、参数、响应示例、错误码等完整信息。适用于后端工程师在接口开发完成后生成接口文档。
架构评审技能。对技术方案、系统设计、重构计划进行结构化评审，输出评审意见和修改建议。适用于架构师评审后端/前端/DevOps 提交的技术方案，CTO 对重大架构决策的把关，以及团队内部技术方案 Review。
缺陷与故障分析技能。对线上 Bug、测试缺陷、系统故障进行根因分析，输出分析报告和改进建议。适用于后端工程师分析线上 Bug、DevOps 进行故障复盘、QA 输出阶段质量分析报告。
商务技术方案生成技能。将客户需求转化为对外的技术商务方案文档，包含解决方案描述、技术优势、实施计划和报价说明。适用于 CTO 对客户进行技术方案展示和商务拓展场景。
代码审查技能。对提交的代码进行结构化检查，输出评审意见。适用于后端工程师、前端工程师提交 MR 前的自检，以及互相 Review 他人代码。包含逻辑正确性、异常处理、安全性、性能、可读性等维度。
部署检查清单技能。在每次生产环境上线前，生成并执行标准化的上线检查清单，确保代码、测试、数据库、回滚方案均已就绪。适用于 DevOps 工程师执行上线操作前的标准检查流程。
| 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