Menu
UI设计规范技能，提供设计系统、配色方案、排版规则、无障碍标准等专业UI设计指导
Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.
简洁风格技能，禁止废话，采用caveman式简短直接的表达方式
个人文档管理技能，管理变更记录、方案设计Spec文档、测试报告等，统一存放在docs目录下
项目启动管理技能，支持Java Spring Boot和Vue项目的启动、重启、关闭操作，保持原有端口不变
方案调研技能，对方案设计、功能实现进行多方案比对分析，至少3个方案，建议5个左右的方案比对，包括业界标杆方案、大厂实现方案等
基于OpenAPI规范生成API文档，支持Swagger UI和ReDoc展示
提供后端单元测试指导和生成能力，支持JUnit 5、Mockito等框架
| name | common-ui-design-spec |
| description | UI设计规范技能，提供设计系统、配色方案、排版规则、无障碍标准等专业UI设计指导 |
| trigger | 需要创建或遵循UI设计规范时 |
| disable-when | 已有成熟的设计系统且无需变更时 |
| category | common |
| tags | ["ui","design","spec","system","accessibility","wcag"] |
UI设计规范技能提供专业的设计系统指导，包括配色方案、排版规则、间距系统、组件规范、无障碍标准等。基于业界最佳实践，帮助团队建立统一的视觉语言和交互规范。
颜色分类：
├── Primary（主色）- 品牌识别色
├── Secondary（辅色）- 辅助功能色
├── Neutral（中性色）- 文本和背景
├── Semantic（语义色）- 成功/警告/错误/信息
└── Accent（强调色）- 点缀和突出
颜色规范示例：
| 颜色 | 用途 | 十六进制 |
|---|---|---|
| Primary | 品牌主色 | #0052CC |
| Primary Light | 主色浅版 | #E5F0FF |
| Secondary | 辅色 | #F2F4F7 |
| Success | 成功状态 | #36B37E |
| Warning | 警告状态 | #FFAB00 |
| Error | 错误状态 | #E53935 |
| Info | 信息提示 | #177FFF |
字号层级：
├── Display 1 - 超大标题（48px）
├── Display 2 - 大标题（36px）
├── Heading 1 - 一级标题（24px）
├── Heading 2 - 二级标题（20px）
├── Heading 3 - 三级标题（18px）
├── Body Large - 大正文（16px）
├── Body - 正文（14px）
├── Body Small - 小正文（12px）
└── Caption - 说明文字（11px）
排版规范：
| 元素 | 字号 | 行高 | 字重 |
|---|---|---|---|
| 标题 H1 | 24px | 1.2 | 600 |
| 标题 H2 | 20px | 1.3 | 600 |
| 正文 | 14px | 1.5 | 400 |
| 小文字 | 12px | 1.4 | 400 |
间距令牌（基于4px基准）：
├── 0 - 0px
├── xs - 4px
├── sm - 8px
├── md - 16px
├── lg - 24px
├── xl - 32px
├── 2xl - 48px
└── 3xl - 64px
| 层级 | 用途 | CSS值 |
|---|---|---|
| Shadow 0 | 无阴影 | none |
| Shadow 1 | 卡片悬浮 | 0 2px 4px rgba(0,0,0,0.06) |
| Shadow 2 | 卡片默认 | 0 4px 12px rgba(0,0,0,0.08) |
| Shadow 3 | 弹窗 | 0 8px 24px rgba(0,0,0,0.12) |
| Shadow 4 | 模态框 | 0 16px 48px rgba(0,0,0,0.16) |
| 大小 | 用途 | CSS值 |
|---|---|---|
| none | 直角 | 0 |
| sm | 小圆角 | 4px |
| md | 默认圆角 | 8px |
| lg | 大圆角 | 12px |
| xl | 超大圆角 | 16px |
| full | 圆形 | 9999px |
| 原则 | 描述 | 关键要求 |
|---|---|---|
| Perceivable | 可感知 | 对比度4.5:1、替代文本、字幕 |
| Operable | 可操作 | 键盘导航、44px触摸目标、跳过链接 |
| Understandable | 可理解 | 清晰标签、错误提示、一致导航 |
| Robust | 健壮性 | 语义HTML、ARIA、屏幕阅读器兼容 |
| 文本类型 | AA标准 | AAA标准 |
|---|---|---|
| 正常文本（<18pt） | 4.5:1 | 7:1 |
| 大文本（≥18pt） | 3:1 | 4.5:1 |
| UI组件/图形 | 3:1 | 4.5:1 |
| 参数名 | 类型 | 必填 | 说明 |
|---|---|---|---|
| projectType | String | 是 | 项目类型（saas/ecommerce/enterprise/consumer等） |
| brandColor | String | 否 | 品牌主色，十六进制 |
| colorScheme | String | 否 | 配色方案（light/dark/system） |
| fontSizeBase | Number | 否 | 基础字号，默认14 |
| accessibilityLevel | String | 否 | 无障碍级别（aa/aaa），默认aa |
{
"designSystem": {
"colors": {
"primary": "#0052CC",
"secondary": "#F2F4F7",
"success": "#36B37E"
},
"typography": {
"fontFamily": "Inter, -apple-system, sans-serif",
"baseSize": 14,
"lineHeight": 1.5
},
"spacing": {
"xs": 4,
"sm": 8,
"md": 16
},
"accessibility": {
"contrastRatio": "4.5:1",
"touchTarget": "44px"
}
}
}
参考来源：