Claude Skill

eo-design

项目设计能力，真相源为仓库根 DESIGN.md。触发：定设计系统 / 出几版视觉方案对比 / 做高保真页面 / 设计审计 / 配色 / 字体 / design / /eo-design。 NOT FOR: 具体功能的变更起草（走 /eo-change）；纯文案修改。

LLM Mart · 0 points · 8 0 0

Virus-scanned Reviewed automatically before listing.

Full trust report

Download simpleeve-eo-skills-eo-design-e6f1112.zip · 12 KB

simpleeve/eo-skills 31 6 forks MIT Updated 18d ago

Part of simpleeve/eo-skills — 16 skills

Install

skills CLI npx skills add https://github.com/SimpleEve/eo-skills/tree/main/eo-design

Claude Code claude plugin marketplace add https://llmmart.ai/marketplace.json && claude plugin install simpleeve-eo-skills@llmmart

Git git clone https://github.com/SimpleEve/eo-skills.git

The skills CLI installs just this skill, for any of its supported agents. Claude Code installs the whole simpleeve/eo-skills collection as a plugin from our marketplace. Git is the plain clone.

Skill manifest

eo-design — 设计系统与高保真预览

以仓库根 DESIGN.md 为项目级设计真相源的四模式技能。姿态是设计顾问，不是表单向导：主动提出完整连贯的提案让用户挑剔，而不是逐项让用户填空。

模式路由

模式	触发	职责
`init`	设计系统 / 从头定设计 / DESIGN.md 不存在时的默认	0→1 建立设计系统 → DESIGN.md + 约束注入
`variants`	出几版看看 / 对比方案 / 某屏幕的视觉发散	多变体 HTML 对比 → 结论进 DESIGN.md 决策日志
`apply`	落地 / 做成页面 / 生产级实现	选中方向 → 生产级 HTML/组件
`audit`	检查设计一致性 / 设计审计	实现 vs DESIGN.md 的偏差报告

无法判断时问一句。variants/apply/audit 在 DESIGN.md 不存在时提示先跑 init（用户可拒绝，则以当次对话约定为准并提示结论不会被沉淀约束）。

通用规则（四模式共用）

DESIGN.md 优先级最高：存在即为默认约束，高于任何临时发挥与从 mockup 反推的值；偏离必须经用户批准并记入 Decisions Log
上游 brief 握手：上游材料（brainstorming 记录的「设计 brief」节 / 所服务 change 的 change.md §1）只用于预填五维（给谁 / 核心任务 / 现状 / 所处流程 / 边界情况）——已钉项不重问，缺维照常采集；无可读引用（给不出路径）一律按无上游处理；方向说不清 → 按各模式的上下文门槛升级 /eo-brainstorming，不硬着头皮设计
预览一律自包含 HTML：内联全部 CSS/JS、不依赖外部服务；候选字体可用字体服务 link 标签加载。质量要求见 references/visual-craft.md
真实内容：用产品真实文案/数据渲染，禁 lorem ipsum
工件位置：过程产物 tmp/eo/design/<date>-<topic>/（可丢弃，见 ../eo-shared/conventions.md）；服务某个 change 的定稿另存 eo-doc/changes/<id>/design/
提问纪律：遵循 ../eo-shared/questioning.md；封闭选择按其 §4 协议带推荐项

init — 建立设计系统

预填充（静默）：读 README / CLAUDE.md / 已有 DESIGN.md，代码侧现状有 .codegraph/ 索引则用 codegraph explore 召回（不存在则目录收敛 + 源码直读）；能推断的（产品是什么、给谁用、项目类型）不问
一个合并问题：把预填充结论摆出来让用户确认/纠正，外加一个必问项——「你希望用户第一眼记住这个产品的什么？一句话」（memorable-thing：之后所有设计决策服务于它）
上下文门槛（硬性）：至此「产品是什么 / 给谁用 / memorable-thing / 本次设计边界」仍有 ≥2 项说不清（「说不清」= 既无仓库证据、用户也答不出可执行结论；不适用维度标 N/A 不计入）→ 停止出提案，建议先 /eo-brainstorming 钉方向（其记录的「设计 brief」节回来即预填）；用户拒绝升级 → 当场最小 brief（五维合并问，计入 questioning.md §2 预算），2 轮封顶，未答项按合理默认推进并显式标注「（假设）」
竞品视觉调研（可选）：用户同意且环境可联网时，搜 3-5 个同类产品提炼品类共识与差异化机会；不可用或用户跳过 → 直接下一步，不阻塞
一次性完整提案（SAFE/RISK 拆分）：给出覆盖 Aesthetic / Typography / Color / Spacing / Layout / Motion 的连贯系统，每项带一句 rationale；结构为「2-3 个跟随品类惯例的安全选择 + 至少 2 个刻意冒险（各说得失）」，核心问题问「在哪里冒险」而不是逐项选菜单
HTML 预览页：候选字体样张 + 色板 + 组件示例（按钮/卡片/表单/告警）+ 1-2 个用真实内容渲染的页面 mockup + 明暗模式切换，写入 tmp/eo/design/<date>-init/，请用户在浏览器确认；反馈迭代（每轮改预览页，不重开）
落地：按 references/design-md-template.md 写仓库根 DESIGN.md（目标 <90 行）；执行同文件中的约束注入（CLAUDE.md 的  段，幂等替换）
速报：DESIGN.md 路径 + 关键决策一句话清单 + 注入状态

variants — 多变体发散

建立 brief：按通用规则的上游握手预填五维，缺维在 2 轮封顶内补问（可标 N/A）；无上游 → 全量五维采集；连「该做什么屏幕 / 解决什么问题」都未定 → 建议先 /eo-brainstorming
性质声明（已有 DESIGN.md 时必做）：本轮是「系统内探索」（只在 DESIGN.md 未锁定的维度分道）还是「系统变更实验」（生成前明确列出拟突破的 token）；后者的选中结论须经用户批准偏离后方可沉淀
文字概念先行：先出 N 个（默认 3）纯文字设计概念让用户筛——反趋同硬要求见 visual-craft.md（像三个不同团队的方案，不是同一方案的三种浓度）；一次封闭选择确认要做的概念即生成，不在文字阶段多轮拉锯
逐概念生成自包含 HTML 变体（runtime 支持子 agent 时每变体一个并行生成、各自过 visual-craft.md 自检后回收；失败的重试 1 次，仍败 → 对比页标注缺失项并问用户是否补齐，全部失败 → 报错停止；不支持子 agent 则串行）+ 一张对比索引页（并排 iframe/链接），写入 tmp/eo/design/<date>-<topic>/
对比页即选择器：请用户看页拍板，不得退回口头 A/B/C 描述式问偏好；反馈按「每变体：保留 / 淘汰 / 杂交（注明取哪个维度：布局/配色/字体/密度）」结构化收集，迭代直接改对比页（不重开），直到选定
沉淀（分支硬规则）：有 DESIGN.md → 选中结论追加 Decisions Log（决策列写「<屏幕>: 选 <概念>（淘汰方向一句带过）」；系统变更实验须已获批准）；无 DESIGN.md（用户拒建）→ 不写任何持久文档，速报显式声明「结论仅当次有效、未沉淀」；服务 change 的定稿复制到 eo-doc/changes/<id>/design/，defer/未选方向记入该 change 的开放问题
速报：选中方向 + 沉淀状态（已入 Decisions Log / 仅当次有效）

apply — 生产级落地

输入路由：来自 variants 的选中稿 / DESIGN.md 直接驱动 / 用户自由描述
设计计划先行（按档位）：整页/新 surface → 按 visual-craft.md「设计计划」节全量列出（命名色板 / 分角色字体 / 布局概念 1-2 句 / Signature）；组件级小改 → 只列受影响 token + 状态差异，允许结论「无自由视觉维度」（此时跳过通用默认检查）；列完对照 brief 复审，「给任意同类页面都会这么写」的部分改掉再动手
生成生产级自包含 HTML/组件：DESIGN.md token 优先；语义化结构；响应式；明暗模式；过 visual-craft.md 黑名单与交付前核对后才交付
三种视口宽度自查（移动/平板/桌面），修到无横向滚动、无布局破碎；交互/可达性自查：键盘焦点可见、触达目标 ≥44px、disabled/loading/empty/error 状态齐全（utilitarian 页面必查）
产物位置由用途定：change 相关 → eo-doc/changes/<id>/design/；探索性 → tmp/eo/design/
速报：产物路径 + 遵循/偏离 DESIGN.md 的说明（偏离需已获批准并记 Decisions Log）

audit — 一致性审计

对指定页面/组件的实现，从渲染结果（截图或运行中的页面）而非源码提取实际使用的字体/色值/间距/圆角
逐项对照 DESIGN.md，产出偏差清单：P0（明显违背，如色板外颜色、字体错用）/ P1（token 不一致，如间距刻度外的魔法数）/ P2（可改进）
只报告不动手；修复建议标注对应 DESIGN.md 条目
对话速报（硬性，缺速报=流程未完成）：

结论：一致 / 偏差 N 项（P0 x / P1 y / P2 z）
P0：1. <一句话> — <位置>
下一步：<修复建议归属：直改（ui:）/ 开 change>
（详单见 <报告路径，写 tmp/eo/design/<date>-audit/report.md>）

关键约束

落盘白名单：本 skill 的全部写入仅限——仓库根 DESIGN.md、agent 配置文件的 eo-design 注入段、tmp/eo/design/、eo-doc/changes/<id>/design/；此外一律不写（含 .base 文件与任何其他项目文档）
Decisions Log 只追加不改写（日期｜决策｜理由）
联网调研永远可选，跳过不阻塞任何模式
偏离 DESIGN.md = 用户批准 + 记 Decisions Log，两者缺一不可

Files (eo-skills)

references

design-md-template.md 2.7 KB

# DESIGN.md 模板与约束注入

## DESIGN.md 模板（仓库根，目标 <90 行）

单文件承载「token + rationale + 决策日志」。**不含组件规格**——组件级细节属于实现，DESIGN.md 只钉系统级决策。

```markdown
# DESIGN.md — <项目名> 设计系统

> 本文件是项目设计真相源。任何视觉/UI 决策前先读它；偏离需用户批准并记入 Decisions Log。

## Product Context
- 产品：<一句话> ｜ 用户：<谁> ｜ 类型：<Web 应用 / 工具站 / 营销页…>
- Memorable thing：<用户第一眼要记住的那件事>

## Aesthetic Direction
- 方向名：<如「工程手账」>；装饰级别：<克制/适中/浓郁>；情绪：<3 个形容词>
- 参考：<站点/风格锚点，可选>

## Typography
| 角色 | 字体 | 理由 |
|------|------|------|
| Display | <font> | <一句> |
| Body | <font> | <一句> |
| Code/Data | <font> | <一句> |
- 加载策略：<系统栈 / 字体服务 link>；字号阶梯：<12/14/16/20/24/32px…>

## Color
- 策略：<一句，如「暖中性底 + 单强调色」>
- Primary：`#xxxxxx`；中性阶：`#...` ×N；语义色：success `#` / warn `#` / error `#`
- 暗色模式：<策略一句话>

## Spacing & Layout
- 基准：<4px/8px>；刻度：<4/8/12/16/24/32…>；密度：<紧凑/舒适>
- 网格/最大宽度：<如 1200px 居中>；圆角分级：<2/6/12px 用途>

## Motion
- 策略：<克制，仅状态反馈>；缓动：<ease-out>；时长：<120/200/300ms 分档>

## Decisions Log
| 日期 | 决策 | 理由 |
|------|------|------|
| YYYY-MM-DD | <初始系统确立 / 后续微决策> | <一句> |
```

Decisions Log **只追加不改写**——包括「light 模式强调色用 600 档因为 500 太亮」这类微决策，它们是防止反复横跳的记忆。

## 约束注入（agent 配置文件）

写完/更新 DESIGN.md 后，向项目的 agent 配置文件（CLAUDE.md，探测顺序与 eo-project 注入一致）幂等注入以下段落（`<!-- eo-design:start/end -->` 标记定位，重复执行整段替换）：

```markdown
<!-- eo-design:start -->
## Design System

本项目设计真相源为根目录 [DESIGN.md](DESIGN.md)：

- 任何视觉/UI 决策（新页面、组件、样式调整）**之前必须读 DESIGN.md**
- 不得未经用户批准偏离其 token（字体/色板/间距刻度/圆角/动效）；批准的偏离记入其 Decisions Log
- 发现现有实现不符合 DESIGN.md 时，标记出来（不静默将错就错）
<!-- eo-design:end -->
```

注入流程与验证同 [../../eo-doc-manager/references/claude-injection.md](../../eo-doc-manager/references/claude-injection.md) 的三场景规则（不存在则创建、无标记则追加、有标记则整段替换）。

visual-craft.md 8.3 KB

# 视觉工艺手册：正向规则 + 黑名单 + 自检门

> eo-design 各模式生成 HTML 前后使用。核心标准：**「人类设计师会不会羞于在这上面署名？」**——会，就重做。只有黑名单救不了平庸：先按正向规则立观点，再用黑名单兜底。

## 0. 治疗强度分诊（动手前先判）

页面唯一任务是「完成操作」还是「留下印象」？

- **utilitarian**（工具界面 / dashboard / 表单 / 文档）：打磨层级、密度与可扫读性——摘要先于细节、状态用颜色+形态双编码（pill/徽标/severity 条）、可交互的看起来可交互；**不上浮夸 hero、不堆装饰**
- **editorial**（落地页 / 营销页 / 展示页）：必须有强观点，按 §1 承诺方向
- DESIGN.md 的「装饰级别」已定档时按它执行

## 1. 方向承诺（editorial 页面 / init 提案 / 每个变体）

- **先承诺一个说得出名字的方向**再动手（极简冷峻 / 杂志编辑感 / 复古未来 / 工业感 / art deco / 柔和粉彩 / brutalist / 奢侈品排版…），之后所有决策服务于它
- **Signature**：一句话写下「这一版靠什么被记住」（init 模式即 memorable-thing 的视觉兑现）
- init 提案的方向承诺作用于品牌/系统层；具体页面强度仍按 §0 分诊——utilitarian surface 的 Signature 允许是「信息效率 / 可信度」，不强求视觉高峰
- **胆量花在一个地方**：一处做到最猛（一个夸张的标题字号 / 一块出格的色面 / 一种非常规布局），其余全部压安静；到处都猛 = 到处都不猛
- 交付前**摘掉一件首饰**：删一个不服务 Signature 的装饰
- 强度靠 intentionality 不靠 intensity：说不出理由的效果不加

## 2. 字体

- 按角色配 2-3 款（≤3）：Display（克制用于大标题）+ Body + 可选 Data/Code
- Display 候选：Fraunces / Instrument Serif / Satoshi / General Sans / Clash Grotesk / Bricolage Grotesque
- Body 候选：Instrument Sans / DM Sans / Geist / Plus Jakarta Sans / Source Sans 3 / Outfit
- Data/Code 候选：JetBrains Mono / IBM Plex Mono / Geist Mono
- **CJK 分支**（中文为主的项目）：Display 候选：思源宋体 Noto Serif SC / 霞鹜文楷 LXGW WenKai；Body 候选：思源黑体 Noto Sans SC / MiSans / HarmonyOS Sans SC；中西混排 fallback 链西文在前、CJK 在后；CJK 字重档位少，禁伪粗体（faux bold）
- **收敛陷阱**（未经 DESIGN.md 明确选择不用）：Inter / Roboto / Arial / Helvetica / Open Sans / Lato / Montserrat / Poppins / **Space Grotesk**（它正是「Inter 的安全替代」这个陷阱本身）；`system-ui` 当主字体 = 放弃排版的信号
- 排印硬数字：type scale 比例 1.25 或 1.333；正文行高 1.5×、标题 1.15-1.25×；每行 45-75 字符（拉丁）/ 22-38 汉字（CJK）；正文 ≥16px、caption ≥12px；≥2 个字重；数字列 `tabular-nums`（大号 hero 数字除外，用比例字形）；标题 `text-wrap: balance`；全大写标签加 letter-spacing、拉丁小写不加（CJK 正文可加 0.02-0.05em）

## 3. 颜色

- **命名色板**：4-6 个 base 色各起名字（说不出名字 = 没想清楚职责）；中性阶 / 语义色 / 暗色映射是派生 token，不计入 4-6 但同样须具名
- 一个主导色 + 一处锐利强调；均匀用力的胆怯色板不如「主导 + 锐利」
- 中性灰**带一点主色色相**：纯中灰读起来像没考虑过，偏色相的灰读起来像选过
- 硬数字：非灰色 ≤12；正文对比 ≥4.5:1、大字 ≥3:1
- 暗色模式：表面用 elevation 分层（越浮越亮）而非简单反明度；正文近白（约 #E0E0E0）非纯白；主色去饱和 10-20%；与亮色模式同等用心
- 语义色（success/warn/error）独立于强调色；不得只靠红绿区分状态

## 4. 布局与间距

- 间距走刻度（4/8px 基准，如 2/4/8/16/24/32/48/64），禁刻度外魔法数
- flex/grid + `gap` 排版，不用逐元素 margin 堆间距
- 嵌套圆角：内 radius = 外 radius − 间隙
- 宽内容（表格/代码块/图）各自 `overflow-x: auto`，body 永不横向滚动
- 全居中是默认款；不对称、重叠、打破网格是观点（editorial 下优先考虑）

## 5. 动效

- 一次编排好的入场（staggered `animation-delay`）胜过零散微交互
- 多余动画会强化「AI 生成感」；尊重 `prefers-reduced-motion`
- 预览页只用纯 CSS 动效

## 6. 文案即设计材料

- 真实内容：产品真实文案/数据；禁 lorem ipsum、禁 "Item 1/2/3" 式占位
- 站在用户侧命名（「通知」不是「webhook 配置」）；按钮说清会发生什么；错误信息 = 哪儿错了 + 怎么修
- 编号（01/02/03）、eyebrow、分割线这类结构装置只在内容真是序列/分层时用

## 7. 设计计划（apply 硬门，按档位）

写代码前先列，列完对照 brief 复审：

1. **整页 / 新 surface**：命名色板（4-6 base 各带名）｜分角色字体｜布局概念 1-2 句｜Signature 一句｜editorial 页面另加一句 asset 策略（真实产品图 / 插画 / 纯排版，选哪个、为什么）
2. **组件级小改**：只列受影响 token + 状态差异；结论可以是「无自由视觉维度」，此时跳过第 3 条
3. **通用默认检查**：凡「给任意同类页面都会这么写」的部分，改掉并记一句改了什么
4. token 与 DESIGN.md 冲突时 DESIGN.md 赢（偏离须批准 + 记 Decisions Log）

## 8. 预览页质量（init / variants 的 HTML）

- **预览页本身必须漂亮**——它是本技能品味的信号。排版、留白、层级不敷衍
- 自包含：CSS/JS 内联；候选字体可用字体服务 `<link>` 加载并给系统栈兜底
- 明暗模式切换（顶部小开关即可）；三视口不破版（移动 375 / 平板 768 / 桌面 1280）
- 对比索引页：多变体时给一张并排入口页，每个变体标注概念名 + 一句定位

## 9. 反趋同（variants 的文字概念阶段）

**失败判据：两个变体互换标题文案后没人察觉差别，就是同一方案的三种浓度，不是三个方案。**

- 每个变体各自过 §1 方向承诺——三个变体 = 三个说得出名字的方向
- 变体间至少在两个系统维度上分道（布局范式 / 密度 / 色彩策略 / 字体气质 / 装饰级别），不是只换主色
- 已有 DESIGN.md 时，分道范围受 variants 性质声明约束：系统内探索只动未锁维度；要动已锁 token = 系统变更实验，须显式声明并经批准才可沉淀
- 每个概念写清：一句定位 + 它赌的是什么（哪类用户/场景会明显更爱它）+ 放弃了什么
- 像三个不同设计团队交稿，而不是同一团队的保守/标准/激进档

## 10. AI slop 黑名单（所有交付前自检）

出现即重做。**豁免条款：用户点名要或 DESIGN.md 明确选择的照做——用户原话永远赢；只是自由维度不花在默认款上**：

- 紫色系渐变按钮/头图（白底紫→蓝渐变 hero 是重灾区）、玻璃拟态滥用
- 「三列卡片 + 彩圈图标 + 粗标题 + 两行描述」特性网格——最易识别的 AI 布局
- 暖奶油底（#F4F1EA 系）+ 衬线大标题 + 赤陶强调；近黑底 + 一抹酸绿/朱红——两套「AI 高级感」预制菜
- 默认 Inter/Roboto/Space Grotesk 全场通吃且无字号层级设计
- emoji 当图标/分节符铺满界面；每个卡片都圆角+阴影+渐变边框；圆角卡片加强调色竖条
- 空洞营销词填充（"Powerful. Simple. Fast."）代替真实产品信息
- 什么都居中；到处同一号大圆角
- 深色模式 = 纯黑底 + 原色不调整
- 动效堆砌：入场全体 fade-in-up、hover 全体放大
- 结构装置（编号/eyebrow）用在非序列内容上

## 11. 交付前核对

- [ ] 治疗强度判对（utilitarian 没过度设计 / editorial 有 Signature）
- [ ] token 全部来自 DESIGN.md（或已批准偏离并记 Decisions Log；无 DESIGN.md 场景：已显式声明「仅当次有效、未沉淀」）
- [ ] 排印/颜色硬数字过（行宽 45-75 字符 / 22-38 汉字、正文 ≥16px、对比 ≥4.5:1）
- [ ] 三视口截图无破版、无横向滚动；明暗两模式都过目
- [ ] 交互/可达性：键盘焦点可见、触达目标 ≥44px、disabled/loading/empty/error 状态齐全（utilitarian 必查）
- [ ] 黑名单逐条扫过；摘掉了一件首饰
- [ ] 「羞于署名」自问通过

SKILL.md 9 KB

---
name: eo-design
description: |
  项目设计能力，真相源为仓库根 DESIGN.md。触发：定设计系统 / 出几版视觉方案对比 / 做高保真页面 / 设计审计 / 配色 / 字体 / design / /eo-design。
  NOT FOR: 具体功能的变更起草（走 /eo-change）；纯文案修改。
---

# eo-design — 设计系统与高保真预览

以仓库根 `DESIGN.md` 为**项目级设计真相源**的四模式技能。姿态是**设计顾问，不是表单向导**：主动提出完整连贯的提案让用户挑剔，而不是逐项让用户填空。

## 模式路由

| 模式 | 触发 | 职责 |
|------|------|------|
| `init` | 设计系统 / 从头定设计 / DESIGN.md 不存在时的默认 | 0→1 建立设计系统 → DESIGN.md + 约束注入 |
| `variants` | 出几版看看 / 对比方案 / 某屏幕的视觉发散 | 多变体 HTML 对比 → 结论进 DESIGN.md 决策日志 |
| `apply` | 落地 / 做成页面 / 生产级实现 | 选中方向 → 生产级 HTML/组件 |
| `audit` | 检查设计一致性 / 设计审计 | 实现 vs DESIGN.md 的偏差报告 |

无法判断时问一句。`variants`/`apply`/`audit` 在 DESIGN.md 不存在时提示先跑 `init`（用户可拒绝，则以当次对话约定为准并提示结论不会被沉淀约束）。

## 通用规则（四模式共用）

- **DESIGN.md 优先级最高**：存在即为默认约束，高于任何临时发挥与从 mockup 反推的值；偏离必须经用户批准并记入 Decisions Log
- **上游 brief 握手**：上游材料（brainstorming 记录的「设计 brief」节 / 所服务 change 的 change.md §1）只用于**预填五维**（给谁 / 核心任务 / 现状 / 所处流程 / 边界情况）——已钉项不重问，缺维照常采集；无可读引用（给不出路径）一律按无上游处理；方向说不清 → 按各模式的上下文门槛升级 /eo-brainstorming，不硬着头皮设计
- **预览一律自包含 HTML**：内联全部 CSS/JS、不依赖外部服务；候选字体可用字体服务 link 标签加载。质量要求见 [references/visual-craft.md](references/visual-craft.md)
- **真实内容**：用产品真实文案/数据渲染，禁 lorem ipsum
- **工件位置**：过程产物 `tmp/eo/design/<date>-<topic>/`（可丢弃，见 [../eo-shared/conventions.md](../eo-shared/conventions.md)）；服务某个 change 的定稿另存 `eo-doc/changes/<id>/design/`
- **提问纪律**：遵循 [../eo-shared/questioning.md](../eo-shared/questioning.md)；封闭选择按其 §4 协议带推荐项

## init — 建立设计系统

1. **预填充（静默）**：读 README / CLAUDE.md / 已有 DESIGN.md，代码侧现状有 `.codegraph/` 索引则用 `codegraph explore` 召回（不存在则目录收敛 + 源码直读）；能推断的（产品是什么、给谁用、项目类型）不问
2. **一个合并问题**：把预填充结论摆出来让用户确认/纠正，**外加一个必问项**——「你希望用户第一眼记住这个产品的什么？一句话」（memorable-thing：之后所有设计决策服务于它）
3. **上下文门槛（硬性）**：至此「产品是什么 / 给谁用 / memorable-thing / 本次设计边界」仍有 ≥2 项说不清（「说不清」= 既无仓库证据、用户也答不出可执行结论；不适用维度标 N/A 不计入）→ 停止出提案，建议先 /eo-brainstorming 钉方向（其记录的「设计 brief」节回来即预填）；用户拒绝升级 → 当场最小 brief（五维合并问，计入 questioning.md §2 预算），2 轮封顶，未答项按合理默认推进并显式标注「（假设）」
4. **竞品视觉调研（可选）**：用户同意且环境可联网时，搜 3-5 个同类产品提炼品类共识与差异化机会；不可用或用户跳过 → 直接下一步，不阻塞
5. **一次性完整提案（SAFE/RISK 拆分）**：给出覆盖 Aesthetic / Typography / Color / Spacing / Layout / Motion 的连贯系统，每项带一句 rationale；结构为「2-3 个跟随品类惯例的安全选择 + 至少 2 个刻意冒险（各说得失）」，核心问题问「**在哪里冒险**」而不是逐项选菜单
6. **HTML 预览页**：候选字体样张 + 色板 + 组件示例（按钮/卡片/表单/告警）+ 1-2 个用真实内容渲染的页面 mockup + 明暗模式切换，写入 `tmp/eo/design/<date>-init/`，请用户在浏览器确认；反馈迭代（每轮改预览页，不重开）
7. **落地**：按 [references/design-md-template.md](references/design-md-template.md) 写仓库根 `DESIGN.md`（目标 <90 行）；执行同文件中的**约束注入**（CLAUDE.md 的 `<!-- eo-design:start/end -->` 段，幂等替换）
8. 速报：DESIGN.md 路径 + 关键决策一句话清单 + 注入状态

## variants — 多变体发散

1. **建立 brief**：按通用规则的上游握手预填五维，缺维在 2 轮封顶内补问（可标 N/A）；无上游 → 全量五维采集；连「该做什么屏幕 / 解决什么问题」都未定 → 建议先 /eo-brainstorming
2. **性质声明（已有 DESIGN.md 时必做）**：本轮是「系统内探索」（只在 DESIGN.md 未锁定的维度分道）还是「系统变更实验」（生成前明确列出拟突破的 token）；后者的选中结论须经用户批准偏离后方可沉淀
3. **文字概念先行**：先出 N 个（默认 3）纯文字设计概念让用户筛——**反趋同硬要求**见 visual-craft.md（像三个不同团队的方案，不是同一方案的三种浓度）；一次封闭选择确认要做的概念即生成，不在文字阶段多轮拉锯
4. 逐概念生成自包含 HTML 变体（runtime 支持子 agent 时每变体一个并行生成、各自过 visual-craft.md 自检后回收；失败的重试 1 次，仍败 → 对比页标注缺失项并问用户是否补齐，全部失败 → 报错停止；不支持子 agent 则串行）+ 一张对比索引页（并排 iframe/链接），写入 `tmp/eo/design/<date>-<topic>/`
5. **对比页即选择器**：请用户看页拍板，不得退回口头 A/B/C 描述式问偏好；反馈按「每变体：保留 / 淘汰 / 杂交（注明取哪个维度：布局/配色/字体/密度）」结构化收集，迭代直接改对比页（不重开），直到选定
6. **沉淀（分支硬规则）**：有 DESIGN.md → 选中结论追加 Decisions Log（决策列写「<屏幕>: 选 <概念>（淘汰方向一句带过）」；系统变更实验须已获批准）；无 DESIGN.md（用户拒建）→ **不写任何持久文档**，速报显式声明「结论仅当次有效、未沉淀」；服务 change 的定稿复制到 `eo-doc/changes/<id>/design/`，defer/未选方向记入该 change 的开放问题
7. 速报：选中方向 + 沉淀状态（已入 Decisions Log / 仅当次有效）

## apply — 生产级落地

1. 输入路由：来自 variants 的选中稿 / DESIGN.md 直接驱动 / 用户自由描述
2. **设计计划先行（按档位）**：整页/新 surface → 按 visual-craft.md「设计计划」节全量列出（命名色板 / 分角色字体 / 布局概念 1-2 句 / Signature）；组件级小改 → 只列受影响 token + 状态差异，允许结论「无自由视觉维度」（此时跳过通用默认检查）；列完对照 brief 复审，「给任意同类页面都会这么写」的部分改掉再动手
3. 生成生产级自包含 HTML/组件：DESIGN.md token 优先；语义化结构；响应式；明暗模式；过 visual-craft.md 黑名单与交付前核对后才交付
4. 三种视口宽度自查（移动/平板/桌面），修到无横向滚动、无布局破碎；交互/可达性自查：键盘焦点可见、触达目标 ≥44px、disabled/loading/empty/error 状态齐全（utilitarian 页面必查）
5. 产物位置由用途定：change 相关 → `eo-doc/changes/<id>/design/`；探索性 → `tmp/eo/design/`
6. 速报：产物路径 + 遵循/偏离 DESIGN.md 的说明（偏离需已获批准并记 Decisions Log）

## audit — 一致性审计

1. 对指定页面/组件的实现，从**渲染结果**（截图或运行中的页面）而非源码提取实际使用的字体/色值/间距/圆角
2. 逐项对照 DESIGN.md，产出偏差清单：P0（明显违背，如色板外颜色、字体错用）/ P1（token 不一致，如间距刻度外的魔法数）/ P2（可改进）
3. 只报告不动手；修复建议标注对应 DESIGN.md 条目
4. **对话速报**（硬性，缺速报=流程未完成）：

```
结论：一致 / 偏差 N 项（P0 x / P1 y / P2 z）
P0：1. <一句话> — <位置>
下一步：<修复建议归属：直改（ui:）/ 开 change>
（详单见 <报告路径，写 tmp/eo/design/<date>-audit/report.md>）
```

## 关键约束

- **落盘白名单**：本 skill 的全部写入仅限——仓库根 `DESIGN.md`、agent 配置文件的 `eo-design` 注入段、`tmp/eo/design/`、`eo-doc/changes/<id>/design/`；此外一律不写（含 `.base` 文件与任何其他项目文档）
- **Decisions Log 只追加不改写**（日期｜决策｜理由）
- **联网调研永远可选**，跳过不阻塞任何模式
- 偏离 DESIGN.md = 用户批准 + 记 Decisions Log，两者缺一不可