forge-ui-designlisted

# forge-ui-design — UI 美学设计 ## Goal 本 Skill 为 **UI 反 AI-slop 规范定义节点**。输出 `UI-DESIGN.md`，设定 Design Tokens 与禁忌规则；后续在 `forge-dev` (4) 实施编码期防范，在 `forge-review` (6) 执行交付期断言校验。 为前端项目决策"看起来怎样"，产出可直接落地的 design tokens 和组件规约。 ## Workflow ### 0. 判定 greenfield vs brownfield - **greenfield**：空项目 / 第一个 UI change / 用户明说"重新做 UI" → 跳过 1.5，直接进 1 - **brownfield**：已存在 UI，本次是加新页面/组件/改现有页面 → **必走 1.5 视觉语汇对齐** ### 1. 美学方向决策（greenfield 最重要） 按 4 个问题显式回答，缺一不可： - **目的**：界面解决什么问题？谁用？核心动作？ - **调性**：从 CHANGE.md「视觉调性」段读取已选项。**不允许在本阶段让用户重选。** - 无该字段（旧项目/跳过 0-change）→ 才按调性卡片让用户选 - 用户主动说"想换调性" → 引导回 0-change 改 CHANGE.md - **约束**：技术栈 / 性能预算 / 无障碍等级 / 品牌限定 - **差异化**：让人记住的"那一件事"是什么？ **反问**：上述 4 题任一答不出 → 停下来反问。 ### 1.5 brownfield 视觉语汇对齐（旧项目加 UI 必走） #### 1.5.1 挖出现有视觉语汇 优先读代码 >> 看截图。按顺序提取： 1. Token 源：grep tokens / theme / tailwind.config / :root 2. 实际色彩比例：打开 3-5 个代表页面记录 3. 交互反馈语言：grep hover / focus / transition 4. 动效语言：grep cubic-bezier / ease- / duration- 5. 结构语言：elevation 层级、卡片密度、rounded、布局模式 6. 图形与图标：图标库、插画风格 7. 文案调性 形成「观察报告」贴给用户校准。 #### 1.5.2 用户确认后再进步骤 2 - 用户修正 → 记录修正，重贴确认 - 用户说没问题 → 5 维决策默认势能调成"沿用观察到的" - 用户明确说"本次想远离原有风格" → 保留观察作为约束边界 ### 2. 美学维度决策 按 5 维度逐项决策，每个必须给理由： - **字体**：display + body，写出具体名称，**显式避开** Inter/Roboto/Arial/Helvetica/system-ui - **颜色**：用 OKLCH 写出主色 + 中性梯度 - **动效**：缓动曲线 + 时长档位 - **空间**：间距 scale（6~8 个非线性数值）+ 圆角词汇（<= 5 个值） - **质感**：背景策略 ### 3. v0 草稿确认（开工前纠偏） v0 = 占位符 + 关键布局 + 已选 token + 假设清单。30 秒内能读完的极简 Markdown。 贴给用户三种回复： - "可以 go" → 进步骤 4 - "某维度偏了" → 仅改该维，重贴 v0 - "全推了重