version: "1.0.2" name: hf-ui-design description: UI 设计技能。绑定阶段: to-spec、implement、code-review。触发条件: 特性包含用户界面(页面、组件、可视交互)。内置设计层：先定美学方向（调用 ui-ux-pro-max 风格匹配 + frontend-design 确认）、按 taste-skill 三旋钮校准、绿地创建 DESIGN.md、真实渲染截图评审闭环；含反 AI 粗制滥造视觉纪律、交互三态覆盖、可访问性底线、动效性能护栏。详细检查清单见 references/ui-checklist.md，设计层细则见 references/design-rules.md。

UI 设计

有 UI 的特性在 to-spec / implement / 代码评审时加载本技能。

加载

• 绑定阶段: to-spec、implement、code-review
• 触发条件: 特性包含用户界面(页面 / 组件 / 可视交互)

设计层（先于一切视觉工作执行）

本技能在进入具体 UI 工作前，必须先过设计层三件事：

1. 确定美学方向（禁止"默认模板脸"）

• 任何 UI 特性先选定单一明确的美学方向：editorial（编辑风）、swiss/极简、brutalist、retro-futuristic、dark luxury、soft/极简暖色、neo-brutalism、有机形态 等，选一个并写进 spec.md 的 UI 设计节。
• 调用本合集的 ui-ux-pro-max 技能做风格与设计系统匹配（240+ 风格库、字体配对、UX 指南，含桌面），再调用 frontend-design 技能（官方版）做方向确认与真实排版配对（serif/sans/mono 的组合，拒绝只换一个无衬线字体）。
• 方向一旦确定，后续阶段禁止漂移回通用 SaaS 模板；评审时以此方向为基准。

2. 用 taste 旋钮校准

• 按 taste-skill 的 DESIGN_VARIANCE / MOTION_INTENSITY / VISUAL_DENSITY 三旋钮给出明确取值（默认 3/2/3，范围 1–5），写入 spec 或 DESIGN.md。
• 动效只服务交互语义；装饰性动效一律拒绝。

3. DESIGN.md

• 绿地项目（无既有设计系统 / 无 DESIGN.md）必须在 to-spec 阶段创建 DESIGN.md：一行品牌立场 + 色彩（含 OKLCH 推导）+ 字体配对 + 间距/圆角/阴影标尺 + 3 条以上禁止项。
• 有既有 DESIGN.md 或设计系统时，先冷读再复用，禁止另起炉灶。
• 生成与维护参考 references/design-rules.md 与 stitch-skill。

规格阶段 (to-spec) 规则

spec.md 的实现决策 / 测试决策或专设的 UI 设计 一节须覆盖：

信息架构与交互先行

• 先锁定页面结构、导航与内容分组，再进入组件与视觉细节
• 每个关键交互至少覆盖 loading / empty / error 三态；高风险交互补齐 disabled / success / focus
• 只绘制顺利路径视为不完整

视觉系统与令牌纪律

• 有既有设计系统 / 品牌规范或 DESIGN.md 时，必须先冷读并复用
• 颜色、字号、间距、圆角、阴影一律使用设计令牌，禁止硬编码字面量
• 有 DESIGN.md 或既有令牌文件时优先从中取值；没有时先在规格中命名令牌
• 缺资产时用语义占位符，不自画 SVG、不自编正文

反 AI 粗制滥造审美（硬拒绝项）

除非用户在决策记录/ADR 中明确要求，否则拒绝：无理由的紫色渐变、Inter/Roboto 默认字体、带左侧彩条的圆角卡片式提示框、用 emoji 充当图标、无理由的发光效果、装饰性动效、大面积玻璃拟态、无法回指需求的分区/徽标，以及没有 CTA 的空状态。

可访问性底线

• 正文对比度达到 WCAG AA；键盘可达且焦点可见；纯图标控件须有 aria-label；触控目标 ≥ 44×44px
• 详见 references/ui-checklist.md

实现阶段 (implement) 规则

• UI 相关票的测试覆盖交互三态可验证行为
• 令牌纪律延续到代码；在重构步骤中清理硬编码
• 按已确定的 DESIGN.md 与美学方向实现；色调、字体、间距全部来自令牌，不引入新的系统字体默认
• 提请进入 code-review 阶段前，加载 references/ui-checklist.md 自查

视觉验证闭环（实现完成 + 评审时强制执行）

只有单元测试不构成 UI 验证。每个含 UI 的特性必须走：

1. 真实渲染：启动应用并截图（Web 用浏览器截图，桌面用应用截图），覆盖主页面 + 至少一个三态。
2. 截图评审：把截图交给评审，按 references/design-rules.md 的评审框架逐项过：

• 方向一致性（是否回到"模板脸"）
• 排版节奏与字体配对是否成立
• 间距层次、留白、对齐网格
• 色彩对比与令牌使用
• 空状态 / loading / error 是否可看
• 平台规范（Web 或桌面各自的要求）

1. 回修：评审发现视觉硬伤 → 返回实现阶段修复 → 重新截图复验，直到无方向漂移、无模板脸、无视觉硬伤。

Desktop 平台规则

• 桌面应用先选平台设计语言：macOS 走 Apple HIG、Windows 走 Fluent、跨平台框架用平台原生控件与间距，不要把网页卡片布局直接套进桌面窗口。
• 复杂界面先出高保真 HTML 原型（本合集 huashu-design 可做）当视觉参照，再落桌面实现。
• 字体、字号、控件高度、边距按平台规范，标题栏/工具栏/对话框遵守平台约定。

代码评审阶段 (code-review) 规则

• 冒烟测试须包含真实渲染 + 截图评审验证；只有单元测试不构成 UI 冒烟测试
• 交互三态各有可核对的验证；无严重级别的可访问性自动检查问题
• 截图评审结果记录在评审结论中（通过 / 硬伤清单）

评审检查项

• [ ] （规格）UI 决策覆盖三态，视觉决策落实到令牌
• [ ] （规格）复用设计系统 / DESIGN.md，或有充分理由偏离
• [ ] （规格）排查反粗制滥造硬拒绝项
• [ ] （代码）无硬编码视觉样式；有落实可访问性的证据
• [ ] （代码）已完成真实渲染验证；三态与可访问性检查通过
• [ ] （视觉）已完成真实渲染截图评审，无方向漂移 / 模板脸 / 视觉硬伤