Menu
Le prompt qui vérifie d'abord la source est sélectionné par défaut. Vous pouvez passer à une commande directe ou télécharger une copie locale.
Lisez SKILL.md et les fichiers associés affichés par SkillsMP avant de décider de l'installer.
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.
Une commande directe contourne le prompt de vérification. Examinez la source avant de l'exécuter.
npx skills add https://github.com/bage2014/study --skill common-ui-design-specLa commande reste sur une seule ligne. Faites défiler horizontalement pour la vérifier avant de la copier.
Vous préférez une copie locale ? Téléchargez les fichiers actuellement disponibles dans SkillsMP.
Basé sur la classification professionnelle SOC
Affichage de SKILL.md
| name | common-ui-design-spec |
| description | UI设计规范技能，提供设计系统、配色方案、排版规则、无障碍标准等专业UI设计指导 |
| trigger | 需要创建或遵循UI设计规范时 |
| disable-when | 已有成熟的设计系统且无需变更时 |
| category | common |
| tags | ["ui","design","spec","system","accessibility","wcag"] |
UI设计规范技能提供专业的设计系统指导，包括配色方案、排版规则、间距系统、组件规范、无障碍标准等。基于业界最佳实践，帮助团队建立统一的视觉语言和交互规范。
描述：用于接收用户输入的文本框
组件结构：
┌─────────────────────────────────┐
│ [图标] 输入占位符 [清除按钮] │
└─────────────────────────────────┘
状态定义：
| 状态 | 样式 | 说明 |
|---|---|---|
| 默认 | 灰色边框 | 未交互状态 |
| 聚焦 | 主色边框 + 阴影 | 用户点击或Tab进入 |
| 悬停 | 边框变深 | 鼠标悬停 |
| 禁用 | 灰色背景 + 禁用光标 | 不可输入 |
| 错误 | 红色边框 + 错误图标 | 输入校验失败 |
| 成功 | 绿色边框 + 成功图标 | 输入校验通过 |
尺寸规格：
| 尺寸 | 高度 | 字体大小 |
|---|---|---|
| xs | 32px | 12px |
| sm | 36px | 13px |
| md | 40px | 14px |
| lg | 48px | 16px |
交互行为：
无障碍要求：
描述：用于输入密码的安全输入框
组件结构：
┌─────────────────────────────────┐
│ [锁图标] ******** [眼睛图标] │
└─────────────────────────────────┘
状态定义：同输入框
尺寸规格：同输入框
交互行为：
密码强度等级：
| 等级 | 颜色 | 条件 |
|---|---|---|
| 弱 | 红色 | < 6位或单一字符类型 |
| 中 | 橙色 | 6-8位或两种字符类型 |
| 强 | 绿色 | ≥ 8位且三种字符类型 |
无障碍要求：同输入框
描述：用于从选项列表中选择值
组件结构：
┌─────────────────────────────────┐
│ 请选择 [下拉箭头] │
└─────────────────────────────────┘
▼
┌─────────────────────────────────┐
│ [勾选] 选项1 │
│ [勾选] 选项2 │
│ [勾选] 选项3 │
└─────────────────────────────────┘
状态定义：同输入框
尺寸规格：同输入框
交互行为：
无障碍要求：
描述：用于切换两种状态（开/关）
组件结构：
┌───────┐ ┌─────────────┐
│ ● │ │ ● │
└───────┘ └─────────────┘
关闭状态 开启状态
状态定义：
| 状态 | 样式 | 说明 |
|---|---|---|
| 开启 | 主色背景，圆点在右 | 状态为真 |
| 关闭 | 灰色背景，圆点在左 | 状态为假 |
| 禁用 | 半透明 | 不可切换 |
尺寸规格：
| 尺寸 | 宽度 | 高度 |
|---|---|---|
| sm | 32px | 18px |
| md | 40px | 22px |
| lg | 48px | 26px |
交互行为：
无障碍要求：
描述：用于表示操作正在进行中
组件结构：
┌─────────────────────────────────┐
│ ○○○ │ ← 旋转动画
│ 加载中... │
└─────────────────────────────────┘
类型：
| 类型 | 说明 | 适用场景 |
|---|---|---|
| 旋转器 | 圆形旋转动画 | 轻量级加载 |
| 骨架屏 | 占位骨架 | 页面级加载 |
| 进度条 | 进度指示 | 文件上传、任务进度 |
| 按钮加载 | 按钮内旋转器 | 提交操作 |
尺寸规格：
| 尺寸 | 直径 | 边框宽度 |
|---|---|---|
| sm | 20px | 2px |
| md | 28px | 3px |
| lg | 40px | 4px |
交互行为：
无障碍要求：
描述：用于向用户显示重要信息
组件结构：
┌─────────────────────────────────┐
│ [图标] 提示内容 [关闭按钮] │
└─────────────────────────────────┘
类型：
| 类型 | 颜色 | 图标 | 用途 |
|---|---|---|---|
| Info | 蓝色 | 信息图标 | 一般信息提示 |
| Success | 绿色 | 成功图标 | 操作成功提示 |
| Warning | 橙色 | 警告图标 | 需要注意的信息 |
| Error | 红色 | 错误图标 | 错误信息提示 |
状态定义：
| 状态 | 说明 |
|---|---|
| 默认 | 显示提示内容 |
| 关闭 | 点击关闭按钮隐藏 |
| 可关闭 | 显示关闭按钮 |
| 不可关闭 | 无关闭按钮 |
交互行为：
无障碍要求：
描述：用于短暂显示操作结果
组件结构：
┌─────────────────┐
│ [图标] 提示内容 │
└─────────────────┘
类型：同Alert
位置：
| 位置 | 说明 |
|---|---|
| top-center | 顶部居中 |
| top-right | 顶部右侧 |
| bottom-center | 底部居中 |
| bottom-right | 底部右侧 |
交互行为：
无障碍要求：
描述：用于显示任务进度
组件结构：
┌─────────────────────────────────┐
│ ████████████░░░░░░░░░░░░░░░░░ │
│ 50% │
└─────────────────────────────────┘
类型：
| 类型 | 说明 |
|---|---|
| 线性 | 水平进度条 |
| 环形 | 圆形进度指示器 |
| 仪表盘 | 半圆进度指示器 |
状态定义：
| 状态 | 样式 |
|---|---|
| 进行中 | 主色进度条 |
| 成功 | 绿色进度条 |
| 错误 | 红色进度条 |
| 暂停 | 橙色进度条 |
交互行为：
无障碍要求：
描述：用于展示结构化数据
组件结构：
┌──────┬──────┬──────┬──────┐
│ 列1 │ 列2 │ 列3 │ 操作 │ ← 表头（可固定）
├──────┼──────┼──────┼──────┤
│ 数据 │ 数据 │ 数据 │ [按钮] │ ← 数据行
│ 数据 │ 数据 │ 数据 │ [按钮] │
│ 数据 │ 数据 │ 数据 │ [按钮] │
├──────┼──────┼──────┼──────┤
│ 共100条 1/10 [上一页] [下一页] 页大小：[10 ▼] │ ← 分页器
└──────┴──────┴──────┴──────┘
分页规范：
| 项目 | 说明 |
|---|---|
| 默认页大小 | 10 |
| 可选页大小 | 10 / 20 / 50 |
| 分页器位置 | 底部居中 |
| 分页信息 | 显示总数、当前页/总页数 |
| 跳转 | 支持输入页码跳转 |
功能特性：
| 特性 | 说明 |
|---|---|
| 排序 | 点击表头切换升序/降序 |
| 筛选 | 表头下拉筛选 |
| 行选择 | 单选/多选（复选框） |
| 固定表头 | 滚动时表头固定 |
| 固定列 | 首列/末列固定 |
| 加载态 | 骨架屏或加载提示 |
| 空状态 | 无数据时显示空状态提示 |
状态定义：
| 状态 | 说明 |
|---|---|
| 正常 | 显示数据 |
| 加载中 | 骨架屏或加载动画 |
| 空状态 | 显示空状态图标和提示 |
| 错误状态 | 显示错误提示和重试按钮 |
尺寸规格：
| 项目 | 规格 |
|---|---|
| 行高 | 48px |
| 表头高度 | 44px |
| 表格边框 | 1px #E8E8E8 |
| 单元格内边距 | 12px 16px |
交互行为：
无障碍要求：
描述：用于分类和标记
组件结构：
┌──────────┐
│ 标签内容 [×] │
└──────────┘
类型：
| 类型 | 颜色 | 用途 |
|---|---|---|
| 默认 | 灰色 | 普通标签 |
| 主色 | 主色背景 | 重要标签 |
| 成功 | 绿色 | 成功状态 |
| 警告 | 橙色 | 警告状态 |
| 错误 | 红色 | 错误状态 |
状态定义：
| 状态 | 说明 |
|---|---|
| 默认 | 显示标签 |
| 可关闭 | 显示关闭按钮 |
| 选中 | 高亮显示 |
交互行为：
无障碍要求：
描述：用于显示通知数量
组件结构：
┌─┐
│5│ ← 徽章
┌───┴─┴───┐
│ 图标/按钮 │
└──────────┘
状态定义：
| 状态 | 说明 |
|---|---|
| 默认 | 显示数量 |
| 圆点 | 只显示红点（无数字） |
| 最大值 | 超过99显示99+ |
| 零值 | 隐藏或显示0 |
尺寸规格：
| 尺寸 | 宽度 | 高度 | 字体大小 |
|---|---|---|---|
| sm | 18px | 18px | 10px |
| md | 20px | 20px | 12px |
| lg | 24px | 24px | 14px |
交互行为：
无障碍要求：
描述：用于显示当前页面在层级结构中的位置
组件结构：
首页 / 产品中心 / 电子产品 / 手机 ← 当前页面
状态定义：
| 状态 | 样式 |
|---|---|
| 当前页 | 主色文字 |
| 可点击 | 灰色文字，悬停变主色 |
| 分隔符 | /（可自定义） |
交互行为：
无障碍要求：
描述：用于在同一区域切换不同内容
组件结构：
┌─────────────────────────────────┐
│ [标签1 ●] [标签2] [标签3] │ ← 标签栏
├─────────────────────────────────┤
│ │
│ 标签1的内容区域 │
│ │
└─────────────────────────────────┘
状态定义：
| 状态 | 样式 |
|---|---|
| 激活 | 主色文字 + 底部下划线 |
| 未激活 | 灰色文字 |
| 悬停 | 文字变深 |
| 禁用 | 灰色禁用样式 |
尺寸规格：
| 项目 | 规格 |
|---|---|
| 标签高度 | 48px |
| 标签间距 | 24px |
| 下划线宽度 | 与文字等宽 |
| 下划线高度 | 2px |
交互行为：
无障碍要求：
通用状态规范：
| 状态 | 定义 | 触发条件 |
|---|---|---|
| 默认 | 初始状态 | 页面加载完成 |
| 悬停 | 鼠标悬停 | onMouseEnter |
| 聚焦 | 键盘聚焦 | onFocus |
| 激活 | 点击按下 | onMouseDown |
| 禁用 | 不可交互 | disabled=true |
| 错误 | 校验失败 | 表单验证失败 |
| 成功 | 校验通过 | 表单验证通过 |
| 加载 | 数据加载中 | 异步请求中 |
状态优先级：
禁用 > 加载 > 错误 > 成功 > 聚焦 > 悬停 > 默认
过渡动画：
| 场景 | 动画类型 | 时长 |
|---|---|---|
| 组件显隐 | 淡入淡出 | 200ms |
| 展开收起 | 高度变化 | 300ms |
| 状态切换 | 颜色渐变 | 150ms |
| 弹出层 | 缩放 + 淡入 | 200ms |
交互反馈：
断点定义：
| 设备 | 断点 | 布局策略 |
|---|---|---|
| 手机 | < 576px | 单列布局，隐藏次要内容 |
| 平板 | 576px - 768px | 双列布局 |
| 桌面 | 768px - 992px | 标准布局 |
| 大屏 | ≥ 992px | 完整布局 |
组件响应式：
颜色分类：
├── 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 |
| components | Array | 否 | 需要生成规范的组件列表，默认全部 |
{
"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"
参考来源：