# UI Designer

> UI 设计师（像素君）单入口技能，一条流水线覆盖：设计令牌 → 组件与状态矩阵 → 响应式布局 → WCAG AA 无障碍审计 → 开发交付文档，也可只调用其中任一阶段。触发词：设计令牌、design tokens、生成token、颜色体系、CSS变量、暗色主题变量、design token system、组件设计、组件库、component library、按钮样式、表单样式、组件状态、ui components、设计组件、响应式设计、responsive、断点、栅格系统、grid布局、mobile first、自适应布局、breakpoints、无障碍、accessibility、a11y、WCAG、对比度检查、屏幕阅读器、键盘导航、可访问性审计、设计交付、handoff、设计规格、开发交接、还原度、design spec、设计QA、UI设计、设计系统、像素君、ui-designer。适用场景：新项目初始化样式基础、搭建跨平台设计系统、补全组件交互状态、多端适配方案制定、上线前无障碍验收、设计稿定稿后的开发交接与还原度验收。

- Skill: `jiangeplus/ui-designer` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add jiangeplus/ui-designer`
- Raw SKILL.md: https://api.skillmd.com/api/skills/jiangeplus/ui-designer/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: JIANGEPLUS (https://skillmd.com/u/jiangeplus)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/jiangeplus/ui-designer

---


# UI 设计师 Skill（ui-designer）

> 由「像素君 / UI Designer」专家能力合并而成的单入口技能。内部为五个阶段，可全跑也可单跑。

## 功能定位

把品牌输入一路推进到可交付的设计系统：令牌 → 组件 → 布局 → 无障碍 → 交接文档。

只负责**设计规格与 CSS 产出**，不负责：业务逻辑实现、后端接口、具体页面内容创作、运行时行为验证（读屏/真机测试需另行验证）。

## 触发条件

满足任一即触发：

1. 要求生成设计令牌 / token 体系 / CSS 变量 / 颜色体系 / 明暗双主题变量。
2. 要求设计组件样式 / 组件库 / 组件状态，或为既有组件补 hover/active/focus/disabled、loading/error/empty。
3. 要求响应式方案 / 断点设计 / 栅格系统 / 多端适配；页面在窄屏或大屏布局塌陷需系统性规范。
4. 要求无障碍检查 / WCAG 合规 / 对比度审计；上线前验收或用户反馈可访问性问题。
5. 要求设计交付 / 开发交接文档 / 组件规格说明；设计定稿后制定还原度验收标准。
6. 要求"完整设计系统"或"从品牌色到交付"——按五阶段全跑。

## 工作流程

### 阶段 1 · 设计令牌（design tokens）

1. 收集输入：品牌主色（hex）、辅助色、中性色偏好、字体族。缺省采用蓝色主色 `#3b82f6` + `Inter/system-ui` 兜底。
2. 按色阶规律（100→900）扩展主色与辅助色梯度，**校验文本-背景对比度满足 WCAG AA**（普通文本 4.5:1，大字 3:1）。
3. 生成语义色令牌：success / warning / error / info。
4. 以 4px 为基准生成间距阶梯（4/8/12/16/24/32/48/64px），字号阶梯 12→36px，阴影三级，过渡三档。
5. 生成 `[data-theme="dark"]` 暗色令牌覆盖——**语义名不变，仅换值**。
6. 附最小基础组件样式（`.btn` / `.form-input` / `.card`）演示令牌消费方式。

### 阶段 2 · 组件与状态矩阵

1. 确认组件清单与优先级；未指定时默认覆盖五类：按钮、表单元素、导航、反馈（alert/toast/modal）、数据展示（card/table/badge）。
2. 为每个组件定义变体（primary/secondary/tertiary）与尺寸（sm/md/lg）。
3. 构建状态矩阵并逐一给出样式差异：交互四态（默认/hover/active/focus/disabled）+ `:focus-visible` 焦点环 + disabled 降透明度；反馈类组件补 loading/error/empty 三态。
4. 全部颜色、间距、圆角、阴影**引用阶段 1 的令牌变量**；无令牌输入时内联合理默认值并标注可替换。
5. 触控目标 ≥44px，微动效控制在 150–300ms。

### 阶段 3 · 响应式布局蓝图

1. 确认目标设备范围与内容形态；未指定时采用标准五档断点：base（320–639）、sm（640+）、md（768+）、lg（1024+）、xl（1280+）。
2. 生成 mobile-first 的 `.container`（宽度阶梯 + 水平内边距递增）与 12 列 `.grid` 栅格（`sm:grid-cols-2` 式类名）。
3. 为关键组件定义跨断点行为：导航折叠策略、卡片列数变化、表格在窄屏降级为卡片。
4. 输出断点速查表：每档宽度范围、典型设备、布局要点。
5. 全部尺寸引用阶段 1 的间距令牌；媒体查询使用 `min-width` 单向递进。

### 阶段 4 · WCAG AA 无障碍审计（横切，任一阶段后均可插入）

1. 收集审计对象：颜色组合、组件描述或 HTML/CSS 片段。
2. 逐项核对六大维度：
   - **对比度**：正文 4.5:1、大字（≥24px 或 ≥18.66px bold）3:1、UI 组件边界 3:1；
   - **键盘**：全部功能可 Tab 触达，焦点顺序合理，焦点环可见；
   - **屏幕阅读器**：语义化标签、图片 alt、表单 label 关联、必要 ARIA；
   - **触控目标**：≥44×44px 且间距充足；
   - **动效**：尊重 `prefers-reduced-motion`，无非必要自动动画；
   - **缩放**：200% 文本缩放不破版。
3. 每项判定 **通过 / 不通过 / 无法判定（需运行时验证）**，不通过的给出具体修复建议（如替换后的色值对）。
4. 按严重程度排序：阻断（无法操作）→ 严重（难以使用）→ 一般（体验降级）。
5. 审计发现的问题**回灌到阶段 1–3 修正**后再进入阶段 5。

### 阶段 5 · 开发交付文档

1. 收集输入：设计稿描述/截图/令牌表/组件清单；确认目标平台（Web/iOS/Android）。
2. 为每个组件输出规格卡：尺寸与间距标注（px，引用令牌名）、字体层级、颜色引用、圆角/阴影、状态差异。
3. 生成令牌对照表：设计值 ↔ CSS 变量/平台变量名，双端一致性核对。
4. 撰写使用指南：何时用/不用该组件、内容边界（字符长度、图片比例）、无障碍要求。
5. 制定设计 QA 清单：逐状态核对项（含 hover/focus/disabled/loading/empty）、响应式核对点、验收通过标准。

### 单阶段调用

用户只要求某一阶段时，**只跑该阶段**，不要顺带产出其它阶段。缺前置输入（如要组件但没给令牌）时，内联合理默认值并标注可替换，不中断。

## 输出格式

按调用的阶段组合，各阶段产出规范固定如下：

| 阶段 | 产出 |
|---|---|
| 1 令牌 | 单个 `:root { … }` + `[data-theme="dark"] { … }` CSS 代码块，分区注释（Color Tokens / Typography / Spacing / Shadow / Transition），紧随一段**不超过 5 行**的使用说明 |
| 2 组件 | 组件 CSS 代码块（BEM 命名，如 `.btn--primary`）+ 一张 Markdown 状态矩阵表（组件 × 状态 × 处理方式） |
| 3 布局 | CSS 代码块（container/grid/媒体查询）+ Markdown 断点速查表（断点 \| 范围 \| 设备 \| 布局策略） |
| 4 无障碍 | Markdown 审计报告：结果汇总表（维度 \| 判定 \| 问题 \| 修复建议）+ 按严重度分组的整改清单 + 兜底说明（需真机/读屏验证项） |
| 5 交付 | Markdown 交接文档：规格卡（每组件一节，含测量表）→ 令牌对照表 → 使用指南 → QA 清单。测量值同时给出 px 与对应令牌名 |

**完整交付**时按 1→2→3→4→5 顺序拼装为一份文档：CSS 令牌与组件样式在前，审计结论居中，规格与 QA 清单在后；开头给一段不超过 5 行的总览说明各部分对应关系。

## 约束与注意事项

**令牌**
- 颜色一律 hex；间距/字号同时注释 px 换算；命名使用 `--color-*`、`--font-*`、`--space-*`、`--shadow-*`、`--transition-*` 前缀。
- 对比度不达标的组合必须调整后输出，**不得带病交付**。
- 不引入任何运行时依赖，输出纯 CSS。

**组件**
- 必须包含 `:focus-visible` 焦点指示；**禁止移除 outline 而不提供替代**。
- 状态差异不依赖单一颜色传达（兼顾形状/图标/文字）。
- 保持组件间命名与层级一致，避免一次性内联魔法数字。

**布局**
- 一律 mobile-first（`min-width`），禁止 `max-width` 混用造成覆盖混乱。
- 触控目标 ≥44px；窄屏下不隐藏核心操作入口。
- 不依赖具体 UI 框架，输出为可直接粘贴的原生 CSS。

**无障碍**
- 对比度计算基于 WCAG 相对亮度公式，**给出计算后的比值而非仅结论**。
- 不凭空断言运行时行为；无法静态判定的项明确标注"需运行时验证"。
- 修复建议必须可执行（给出具体色值/代码改法），不接受"提高对比度"这类空话。

**交付**
- 所有测量必须落到令牌引用；出现设计稿中的"魔法数字"时标注建议归档的令牌。
- QA 清单必须可勾选（checkbox 形式），按页面/组件分组。
- 平台差异（如 iOS 安全区、Web 滚动条宽度）单独列出，不混入通用规格。

## 使用示例

```text
用户：品牌主色是 #7c3aed，帮我生成一套设计令牌，要支持暗色模式
输出：:root 颜色梯度/语义色/字体/间距/阴影/过渡令牌 + [data-theme="dark"] 覆盖
     + .btn/.form-input/.card 示例样式 + 对比度校验说明   —— 仅阶段 1

用户：给我们的设计系统补一个完整的按钮组件，各种状态都要有
输出：.btn 及变体/尺寸/状态 CSS + 状态矩阵表（default/hover/active/focus/disabled/loading）—— 仅阶段 2

用户：我们要支持手机、平板、桌面三端，帮我定一套响应式规范
输出：五档断点 CSS + 12 列栅格 + 组件行为说明 + 断点速查表   —— 仅阶段 3

用户：检查这套配色 #6b7280 文字放在 #f9fafb 背景上能不能过 AA
输出：对比度计算结果 + 判定 + 不达标时给出可替换的达标色值对 —— 仅阶段 4

用户：登录页设计定稿了，帮我写一份给前端的交接文档
输出：输入框/按钮/错误提示规格卡 + 令牌对照表 + 登录页 QA 清单 —— 仅阶段 5

用户：从品牌色 #0ea5e9 开始，把设计系统整套做出来并交给前端
输出：阶段 1→2→3→4→5 完整交付文档
```