| name | ext-ui-design |
| description | UI 设计领域扩展。绑定阶段: plan、build、verify。触发条件: 特性包含用户界面(页面、组件、可视交互)。为计划阶段追加 UI 设计章节要求(信息架构、交互状态、design token、可访问性),为实现与验证阶段追加前端验收纪律(交互三态测试、真实渲染冒烟证据)。 |
UI 设计扩展
绑定
- 绑定阶段: plan、build、verify
- 触发条件: 特性包含用户界面(页面 / 组件 / 可视交互)
计划阶段 (plan) 规则
plan.md(或档位 3 的 design.md)追加 "UI 设计" 一节(置于测试策略之后、任务清单之前),必须覆盖:
信息架构与交互先行
- 先锁定页面结构、导航与内容分组,再进入组件与视觉细节
- 每个关键交互至少覆盖 loading / empty / error 三态;高风险交互补齐 disabled / success / focus
- 只画 happy path 的交互设计视为不完整
视觉系统
- 有既有 Design System / 品牌规范时必须先冷读并复用:色板、字体、间距、圆角、密度;偏离要显式说明理由
- 颜色、字号、间距、圆角、阴影一律走 design token,不硬编码;扩展色板从既有色域推导
- 缺图标/图片/文案资产时使用带语义的占位符(如
{{ image:hero, 16:9 }}),不自画 SVG、不自编正文
反 AI 默认审美
以下惯性产物一律拒绝,除非用户明确要求:
- 无理由的紫色/紫蓝渐变主色、Inter/Roboto 默认字体
- 千篇一律的"左彩条 + 圆角卡片" callout、emoji 当图标
- 需求没要求的装饰性动效、glassmorphism、多套阴影混用
- 未回指真实需求的 section、文案、数字徽标(每个元素要能说出对应哪条需求)
可访问性
- 文本对比度满足 WCAG AA;交互元素键盘可达、焦点可见
- 语义化 HTML / 正确的 ARIA;触控目标 ≥ 44×44px
实现阶段 (build) 规则
- UI 相关任务的测试设计需覆盖交互三态(loading/empty/error)的可验证行为
- token 纪律延续到代码:发现硬编码色值/字号即在 REFACTOR 步清理
验证阶段 (verify) 规则
- 运行时冒烟必须包含真实渲染证据:浏览器/模拟器中的截图存为
evidence/smoke-<描述>.png,或可自动化的渲染检查经 hf_gate.py run --label smoke 落盘;只有单元测试不构成 UI 冒烟
- 交互三态至少各有一份可核对的证据(截图或断言三态的测试)
评审检查项
以下条目追加到对应阶段 checklist:
