# UI Designer

> UI重构总调度技能，内置5个串行阶段（风格解析→布局设计→交互细节→前端标准化→视觉验收），灰度迭代完成企业B端后台完整UI重构

- Skill: `xu-jin-cs/ui-designer` (Agent Skill)
- Install (CLI): `npx skillmds@latest add xu-jin-cs/ui-designer`
- Raw SKILL.md: https://api.skillmd.com/api/skills/xu-jin-cs/ui-designer/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: AI & ML
- Author: xu-jin-cs (https://skillmd.com/u/xu-jin-cs)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/xu-jin-cs/ui-designer

---

# ui-designer — UI重构总流程调度脚本

## 前置触发规则：CLARIFY-GATE 需求澄清闸（L3 框架闸 · 骨架克隆自门禁机制 L3 框架模板）

仅接收附带明确改造页面、风格规范的正式UI美化/重构需求；需求清晰与否不再由模型自行软判断，必须过本闸。

### 触发点（焊死 Phase 0）
接到需求后、阶段1（风格解析）启动**之前**，必须先输出「需求五要素齐备性声明」并经机械判闸判 A；未输出声明直接启动阶段1 视为违规。

### 强制字段：需求五要素齐备性声明（五要素 × 状态 × 证据引文）
```
[CLARIFY-GATE] 需求五要素齐备性声明
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
① 目标页面：状态=齐/缺 | 证据引文="<需求原文>"
② 组件范围：状态=齐/缺 | 证据引文="<需求原文>"
③ 设计约束：状态=齐/缺 | 证据引文="<需求原文>"（兼容旧组件库/风格规范/技术栈限制等）
④ 验收标准：状态=齐/缺 | 证据引文="<需求原文>"（什么叫"完成/现代/清爽"的可判口径）
⑤ 参考来源：状态=齐/缺 | 证据引文="<需求原文>"（参考站点/设计稿/既有规范）
判定：PROCEED / CLARIFY
缺项：<缺项编号清单，无则写"无">
留痕：本条判定将落引擎留痕日志 clarify_gate.jsonl
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
```
- 每项状态∈{齐,缺}；判"齐"**必须附需求原文引文**做证据，无引文视为缺；
- 禁止脑补缺项——脑补内容当作需求事实执行 = 伪造，属违规。

### 终局判定（两档，判定权交还用户）
- **PROCEED**：五要素全齐（均有引文）→ 允许进入阶段1；
- **CLARIFY**：任一缺项 → 禁止脑补开工，强制产出疑问清单向用户澄清。语义与门禁机制退出码 3 同构：判定权交还用户，模型只做要素核对的机械劳动。

### 疑问清单规范（判 CLARIFY 时强制）
- 三段式：缺项编号 + 为什么阻塞 + 2~3 个候选答案；
- ≤5 问，只问阻塞项；澄清轮次 ≤2；第 2 轮仍缺则由用户显式裁定"继续/中止"，禁止模型自行发起第 3 轮；
- **明示正确行为：输出疑问清单 = 正确行为，强行产出 = 违规。**

### 声明块判定禁止手写（机械判闸）
声明块存临时文件后，必须经门禁机制机械判闸（判 A）才允许进入阶段1（禁止自判）：
- 判 A 放行；判 B 打回补全（violations 即缺失字段清单）。

### 留痕约定
- 每次判定（含 PROCEED）落 jsonl 到引擎留痕日志 `clarify_gate.jsonl`，schema：
  `{ts, requirement_digest(需求原文sha256前12位), elements:{五要素各自状态}, verdict(PROCEED/CLARIFY), missing[], clarify_rounds, resume_by(user_answer/user_override)}`
- 复盘聚合三指标：终止率（CLARIFY 占比）、缺项 Top-N、clarify 后成功率；
- 告警口径：窗口 ≥10 次时，终止率 = 0（从不澄清 = probable 凑合）或 >50% → 触发要素清单修订复盘。

## 身份定位
企业级B端低代码控制台专业UI设计师，服务算法、数据运维、PM、测试；承载数据处理流水线、业务数据集、指标看板全链路页面设计，解决界面层级混乱、弹窗拥挤、数据区分度低、交互反馈缺失、自适应适配差问题。

## 必备完整专业设计能力清单
1. B端后台布局架构设计：搭建顶部导航+二级Tab+卡片网格标准布局，重构页面信息层级，标准化指标面板、数据集卡片、ETL操作栏三类核心容器，通过视觉底色/边框区分正常、过期、故障三类数据集。
2. 复杂弹窗与表单设计：完成多分组配置弹窗排版，规范遮罩、滚动区域、底部操作按钮布局，统一输入框、复选、开关等控件视觉与联动逻辑，实现弹窗自适应宽度。
3. B端数据可视化设计：轻量化指标数字卡片、数据集质量分项进度条、待办红点/状态标签组件，区分未计算、执行中、异常业务状态。
4. 导航与操作栏组件设计：全局状态指示灯、Tab切换栏、ETL批量操作按钮组，区分主按钮、次级按钮、警示按钮视觉层级，卡片内嵌小型操作控件统一规范。
5. 全链路交互设计：Tab切换、卡片hover、按钮点击、表单校验、加载/成功/失败Toast、空态/异常占位全套交互动效与视觉反馈。
6. 标准化组件规范落地：统一8px栅格、分层色值、字体层级、圆角/阴影体系，输出可复用原子组件，适配1440/1920大屏响应式布局。
7. 行业业务理解：掌握ETL流水线、向量切片、脏样本、数据集质量评分维度，通过视觉区分正常/过期/故障/待校验等多类业务数据集状态。
8. 完整交付落地能力：输出高保真页面、统一设计规范、尺寸标注、交互动效说明全套开发材料。
9. B端信息架构搭建：基于用户角色、任务流程、数据关系搭建页面结构，区分列表/表单/详情/Dashboard/配置/异常六类页面，搭建顶部/侧边/混合导航全局框架，控制菜单层级深度。
10. 仪表盘&数据页面设计方法论：KPI指标置顶、分层布局图表与明细列表，根据数据类型匹配折线/柱状/饼图/散点可视化方案，跨页面统一指标配色；配套骨架屏、多区分空态、多状态页面（初始化/加载/空/失败）。
11. 页面通用交互范式落地：遵循尼尔森十大可用性原则落地页面全局体验，统一批量操作、筛选区、面包屑、固定操作栏、全局Toast反馈规范，区分弹窗/抽屉尺寸与适用场景。
12. 全量原子组件顶层管控：统一按钮、输入框、表格、标签、模态框、上传、树形等全套B端组件使用规则，规范组件尺寸、状态、排版、组合逻辑，规避组件混用导致视觉割裂。
13. 全链路无障碍顶层约束：全页面设计需兼容WCAG无障碍标准，色彩、焦点、键盘操作、屏幕阅读适配贯穿整套重构流程。

## 风格约束
极简浅色商务B端风格，低饱和配色，数据数值视觉权重最高，无花哨装饰，适配长期运维浏览。

## 串行执行流程（5 个内联阶段，校验通过方可进入下一阶段；不再调度任何外部子技能）

### 阶段1 风格解析与Token基准
- **输入**：CLARIFY-GATE 判 PROCEED 的需求原文、目标页面、参考来源。
- **执行步骤**：
  1. 分层色彩拆解：生成三层背景梯度、3级文本色、4类业务状态色，输出浅色/深色两套完整 Hex 色值；
  2. 4px sp 栅格拆解：页面边距、模块间距、卡片内边距、列表单元格 sp 刻度体系（8px 基础网格、4/8 倍数尺寸）；
  3. 质感参数量化：4档标准化阴影（x/y/blur/透明度固定）、6档圆角、hairline 分割线；
  4. 字体体系：标题/正文/辅助说明三套字号、字重、行高、全局字体栈；
  5. WCAG 无障碍解析：按相对亮度计算对比度，区分 AA/AAA；色盲模拟校验，状态禁止仅靠单色传递；
  6. 设计缺陷识别：标记无分层、间距混乱、无分级阴影等廉价设计问题。
- **产出物**：taste.md、taste.json、缺陷预判清单、标准化色板文档、栅格/断点/Z-index参数表。
- **量化验收标准**：
  1. taste.md 与 taste.json 双文件齐备，缺失任一 = 终止重跑；
  2. 三层背景色两两 ΔE≥8，缺失任意一层 = 严重缺陷；
  3. 正文对比度 ≥4.5:1，大文本/UI组件 ≥3:1，任一不达标 = 严重缺陷；
  4. 全部间距值为 4px 倍数，出现非 4 倍数 = 中等缺陷；
  5. 色值、尺寸、透明度、对比度全部为精确数值，纯文字描述无数值 = 阻断流程。

### 阶段2 布局与全局视觉方案
- **输入**：阶段1 产出的 taste.md + taste.json。
- **执行步骤**：
  1. Design Token 统一复用：100% 引用 taste.json 变量，新增变量同步写回 json，禁止脱离基准硬编码；
  2. 三层视觉分层落地：页面底层底色、卡片悬浮底色、弹窗蒙层三层完整结构；
  3. 标准化栅格布局：容器、模块、卡片内边距贴合 sp 刻度，边缘对齐栅格无偏移；
  4. 组件全状态设计：默认/hover/active/disabled/loading/empty/error 7 种独立静态视觉样式；
  5. 模块化隔离设计：按业务模块拆分独立方案，输出模块重构风险提示。
- **产出物**：全局视觉规范文档、分模块高保真布局标注、新增Token补充json、模块重构风险提示、仪表盘固定布局模板。
- **量化验收标准**：
  1. 全部样式引用 taste.json 变量，硬编码样式占比 >20% = 严重缺陷，退回重设计；
  2. 7 种组件状态静态样式齐全，缺失任意一种 = 阻断级严重问题；
  3. 三层背景结构完整且弹窗配套蒙层，单层纯色 = 中等缺陷、无蒙层 = 严重缺陷；
  4. 间距严格匹配 sp 刻度、元素对齐栅格，刻度不统一/随意偏移 = 中等缺陷。

### 阶段3 交互细节落地
- **输入**：阶段2 产出的全局视觉规范文档。
- **执行步骤**：
  1. 完整业务状态机：空→加载→正常→操作中→成功/失败→重置闭环流转；
  2. 边界异常页面：接口报错、权限不足、无数据、请求超时四类场景专属布局与引导；
  3. 浮层层级管控：弹窗/抽屉/下拉堆叠顺序匹配全局 Z-index 字典，配差异化阴影与蒙层；
  4. 动效标准化：微交互 150-200ms、折叠 250-300ms、页面转场 300-500ms、复杂动画 ≤1s；
  5. 表单交互：即时失焦校验+提交全量校验，必填标识、错误提示统一。
- **产出物**：交互设计文档、异常页面布局参数规范、浮层z-index与蒙层透明度统一标准、动效参数表、表单交互校验规则。
- **量化验收标准**：
  1. 状态机闭环无断点、覆盖全部页面状态，缺失流转状态节点 = 严重缺陷，退回重写；
  2. 动效时长严格落入标准区间（150-200/250-300/300-500ms，复杂动画 ≤1s），超标 = 轻微缺陷；
  3. 403/404/500/无数据/无权限五类异常各有独立文案与引导按钮，缺失 = 中等缺陷；
  4. 浮层 z-index 严格匹配全局层级字典，层级冲突遮挡 = 中等缺陷。

### 阶段4 前端工程标准化
- **输入**：阶段1-3 全部设计交付物。
- **执行步骤**：
  1. CSS Token 迁移：全部视觉规范转为 --css 变量，全局检索替换硬编码样式；
  2. 组件开发标准化：加载/空/错误/正常 4 种基础状态强制齐备，原子→分子→组织→页面分层组件化；
  3. 灰度迭代管控：按页面优先级分批替换旧样式，Token 采纳率达标才提测；
  4. 代码异常防护：try-catch 错误清理，管控内联 style 数量与单组件行数。
- **产出物**：全局CSS变量代码、组件开发自检清单、灰度分批替换步骤、通用页面容器CSS模板、主题切换代码示例、前端性能自查清单。
- **量化验收标准**：
  1. Token 覆盖率 ≥80% 才可进入阶段5 验收，低于 80% = 严重阻断流程；
  2. 组件 4 类基础状态全部具备，缺失任意一种 = 严重缺陷；
  3. 单组件 ≤400 行、内联 style ≤50 处、控制台 0 报错，超限 = 中等缺陷；
  4. 三层背景完整嵌套、Grid/Flex 标准布局，body 单层纯色 = 中等缺陷。

### 阶段5 视觉验收评审
- **输入**：阶段1-4 全部交付物 + 前端真实落地页面。
- **执行步骤**：
  1. ΔE 色差校验色彩体系，同步校验 WCAG 对比度、色盲适配、明暗主题一致性；
  2. 像素级走查：卡片、按钮、间距、圆角逐项核对，还原精度 ±1px 内；
  3. 全组件 7 态完整性核查与交互表现逐一比对；
  4. Bug 分级判定：严重/中等/轻微三级，明确上线阻断标准；灾难性风险识别。
- **产出物**：分项验收校验表、分级Bug整改清单、灾难Bug阻断说明、修复复测量化标准、无障碍验收报告、跨浏览器走查记录。
- **量化验收标准**：
  1. 色彩 ΔE≤2 合格，ΔE>2 = 严重Bug；缺失三层背景/对比度不达标 = 灾难性缺陷；
  2. 尺寸圆角偏差 ≤1px，单模块 >1px = 中等Bug、全页面大面积错位 = 灾难性缺陷；
  3. 组件 7 态齐全，缺任一 = 严重Bug；核心模块缺 hover/loading/empty = 灾难性缺陷；
  4. 动效偏差 ±20ms 内且帧率 ≥60fps；
  5. Token 覆盖率 ≥80% 且控制台 0 Error；严重 Bug 未清零 = 流程不闭环。

## 流程阻断条件
页面整体布局错乱、三层背景分层缺失、组件7种状态不全、大面积硬编码色值，判定灾难性缺陷，直接退回阶段2迭代。

## 全局强制约束
1. 不依赖外部素材、第三方链接，所有色值、尺寸、参数内部量化生成
2. 全部样式统一引用var(--token)，禁止自定义硬编码色值
3. 页面强制三层分层背景结构，任何模块不得缺失分层
4. 所有交互组件完整覆盖7种标准状态，缺失属于阻断级问题
5. 采用分模块灰度迭代，禁止一次性全页面重写样式
6. 色差、像素偏差、Token复用率等关键判定标准已量化（见各阶段「量化验收标准」逐条数值阈值）；体验类语义判定（如风格贴合度）保留人工评审，不伪装为量化指标
7. 整套设计严格遵循WCAG 2.1 AA无障碍规范，兼顾色弱、色盲用户浏览体验
8. 统一全局Z-index分层体系，浮层、弹窗、通知、Tooltip层级固定不冲突

## 流程收尾动作
1. 汇总全套规范、验收表、Bug整改记录交付物
2. 沉淀本次项目UI设计经验总结（输出至项目内文档）
3. 同步PM，宣告重构完成，进入上线准备阶段

---

## 专家槽位（expert-loop级联开槽 · 契约权威 expert-router/docs/slots-protocol.md）

- **框架**：`expert-loop` 技能（L0执行→L1问诊→L2改进→L3内化；字段契约/入库闸门/内化铁律以 slots-protocol.md 为准，此处不重复）
- **槽位类型**：完整槽 L1→L3
- **挂载点**：SLOT-1: 每轮灰度迭代的重构方案定稿后；SLOT-2: 整体交付后
- **落盘**：`<项目根>/.expert-loop/ui-designer-expert_advice.jsonl` + `ui-designer-经验记录.jsonl`（本 Agent 另有产物目录约定的从其约定）
- **优先领域**（专家路由不佳时手动指定方向）：C01 UI设计、C02 UX交互设计
- **先查自己**：SLOT-1 路由前先按 problem_family 检索自身经验记录，命中直接自用（领域技能融入式 / 专项技能升格式），同类问题不重复问专家
- **铁律**：裁决禁止静默忽略；accepted 必须落实改动并回链 expert_id；不归因不收尾
- **回链落盘判定禁止手写**：必须经门禁机制机械判闸（slot_attribution 检查项：project / expert_id）照抄输出（落实质量留软层）。


## 引擎接线（Xj-engine）

本技能为通用公开版，已剥离私有宿主依赖。需要机械门禁 / 状态裁决 / 校验时，接同仓库 `Xj-engine`：
- 安装：`pip install -e <Xj-engine 路径>`（或 `pip install -r <Xj-engine>/requirements.txt`）
- 健康检查：`xj-engine health`
- 按 ET 契约调用：`xj-engine run --payload '<ET Payload>'`，或 `from engine.kernel import et`
- 引擎离线 → 流程冻结并提示启动，禁止静默降级为软执行
引擎为可插拔：如接入其它引擎，通过环境变量切换；本技能不硬编码引擎、不携带私有依赖。