SOC 직업 분류 기준
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
직접 명령은 검토 Prompt를 거치지 않습니다. 실행하기 전에 소스를 확인하세요.
npx skills add https://github.com/bage2014/study --skill common-ui-design-spec명령은 한 줄로 유지됩니다. 복사하기 전에 가로로 스크롤해 전체 내용을 확인하세요.
로컬 사본을 원하시나요? SkillsMP에서 현재 제공할 수 있는 파일을 다운로드하세요.
SKILL.md 표시 중
项目规范技能，提供项目结构、文档管理、代码忽略等方面的标准和最佳实践
MCP Apps项目规范 - 后端驱动UI渲染架构。所有页面由后端生成HTML通过MCP协议返回渲染。Invoke when developing or maintaining MCP Apps projects, especially when creating new pages, tools, or stores.
简洁风格技能，禁止废话，采用caveman式简短直接的表达方式
| 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"
参考来源：