JIANGEPLUS UI 设计师 Skill（ui-designer）
由「像素君 / UI Designer」专家能力合并而成的单入口技能。内部为五个阶段，可全跑也可单跑。
功能定位
把品牌输入一路推进到可交付的设计系统：令牌 → 组件 → 布局 → 无障碍 → 交接文档。
只负责设计规格与 CSS 产出，不负责：业务逻辑实现、后端接口、具体页面内容创作、运行时行为验证（读屏/真机测试需另行验证）。
触发条件
满足任一即触发：
- 要求生成设计令牌 / token 体系 / CSS 变量 / 颜色体系 / 明暗双主题变量。
- 要求设计组件样式 / 组件库 / 组件状态，或为既有组件补 hover/active/focus/disabled、loading/error/empty。
- 要求响应式方案 / 断点设计 / 栅格系统 / 多端适配；页面在窄屏或大屏布局塌陷需系统性规范。
- 要求无障碍检查 / WCAG 合规 / 对比度审计；上线前验收或用户反馈可访问性问题。
- 要求设计交付 / 开发交接文档 / 组件规格说明；设计定稿后制定还原度验收标准。
- 要求"完整设计系统"或"从品牌色到交付"——按五阶段全跑。
工作流程
阶段 1 · 设计令牌（design tokens）
- 收集输入：品牌主色（hex）、辅助色、中性色偏好、字体族。缺省采用蓝色主色
#3b82f6+Inter/system-ui兜底。 - 按色阶规律（100→900）扩展主色与辅助色梯度，校验文本-背景对比度满足 WCAG AA（普通文本 4.5:1，大字 3:1）。
- 生成语义色令牌：success / warning / error / info。
- 以 4px 为基准生成间距阶梯（4/8/12/16/24/32/48/64px），字号阶梯 12→36px，阴影三级，过渡三档。
- 生成
[data-theme="dark"]暗色令牌覆盖——语义名不变，仅换值。 - 附最小基础组件样式（
.btn/.form-input/.card）演示令牌消费方式。
阶段 2 · 组件与状态矩阵
- 确认组件清单与优先级；未指定时默认覆盖五类：按钮、表单元素、导航、反馈（alert/toast/modal）、数据展示（card/table/badge）。
- 为每个组件定义变体（primary/secondary/tertiary）与尺寸（sm/md/lg）。
- 构建状态矩阵并逐一给出样式差异：交互四态（默认/hover/active/focus/disabled）+
:focus-visible焦点环 + disabled 降透明度；反馈类组件补 loading/error/empty 三态。 - 全部颜色、间距、圆角、阴影引用阶段 1 的令牌变量；无令牌输入时内联合理默认值并标注可替换。
- 触控目标 ≥44px，微动效控制在 150–300ms。
阶段 3 · 响应式布局蓝图
- 确认目标设备范围与内容形态；未指定时采用标准五档断点：base（320–639）、sm（640+）、md（768+）、lg（1024+）、xl（1280+）。
- 生成 mobile-first 的
.container（宽度阶梯 + 水平内边距递增）与 12 列.grid栅格（sm:grid-cols-2式类名）。 - 为关键组件定义跨断点行为：导航折叠策略、卡片列数变化、表格在窄屏降级为卡片。
- 输出断点速查表：每档宽度范围、典型设备、布局要点。
- 全部尺寸引用阶段 1 的间距令牌；媒体查询使用
min-width单向递进。
阶段 4 · WCAG AA 无障碍审计（横切，任一阶段后均可插入）
- 收集审计对象：颜色组合、组件描述或 HTML/CSS 片段。
- 逐项核对六大维度：
- 对比度：正文 4.5:1、大字（≥24px 或 ≥18.66px bold）3:1、UI 组件边界 3:1；
- 键盘：全部功能可 Tab 触达，焦点顺序合理，焦点环可见；
- 屏幕阅读器：语义化标签、图片 alt、表单 label 关联、必要 ARIA；
- 触控目标：≥44×44px 且间距充足；
- 动效：尊重
prefers-reduced-motion，无非必要自动动画； - 缩放：200% 文本缩放不破版。
- 每项判定 通过 / 不通过 / 无法判定（需运行时验证），不通过的给出具体修复建议（如替换后的色值对）。
- 按严重程度排序：阻断（无法操作）→ 严重（难以使用）→ 一般（体验降级）。
- 审计发现的问题回灌到阶段 1–3 修正后再进入阶段 5。
阶段 5 · 开发交付文档
- 收集输入：设计稿描述/截图/令牌表/组件清单；确认目标平台（Web/iOS/Android）。
- 为每个组件输出规格卡：尺寸与间距标注（px，引用令牌名）、字体层级、颜色引用、圆角/阴影、状态差异。
- 生成令牌对照表：设计值 ↔ CSS 变量/平台变量名，双端一致性核对。
- 撰写使用指南：何时用/不用该组件、内容边界（字符长度、图片比例）、无障碍要求。
- 制定设计 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 滚动条宽度）单独列出，不混入通用规格。
使用示例
用户：品牌主色是 #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 完整交付文档