oil-ui-pro 0.15.4 → 0.22.2（上游 ui.oiloil.org 正式包）＋记 P0-98 跨盘 rename 坑

- oil-ui-pro 升到 0.22.2：references 13→28 份（新增 16、删 imagery.md）、assets 增 cards/（22 组）与 fonts/、SKILL.md 顶层五步结构未改名。 - 升级路径：官方 `npx github:oil-oil/oil-cli update` 稳定失败（error=replace、报「检查目录权限」）。真身为 EXDEV —— 解压在 os.tmpdir()（C 盘）、技能目录在 E 盘，Windows 上 rename 不能跨盘； CLI 的 catch 把非 CliError 原生异常一律兜底成 replaceFailed，真错误一个字不吐。做法＝借其 prepare() 只做下载+校验，再 cp 到同盘 stage、rename 交换；官方命令复验 up_to_date。 - 回归：product-planning 按名引用的 visual-review.md／tools.md／design-direction.md／style-explorer.md 全部健在；命名闸门 2061｜0｜27。 - session-mechanism/references/pitfalls.md 新增 P0-98（含通则：更新器把原生错误兜底成指错方向的人话）。
2026-10-14 10:21:46 +08:00
1 parent 053a6a6723
commit d9445b5888
@@ -0,0 +1,54 @@
+# 卡片
+
+目录 `assets/cards/` 里有 19 套现成的卡片原型，可以在浏览器里看 [画廊与可运行参考](../assets/cards/gallery.html)，每个原型的自包含代码在 `assets/cards/<name>/`（包含 `card.html`、`card.css`，带动画的还有 `card.js`；公共基础样式在 `assets/cards/shared/shell.css`）。
+
+卡片用来承载产品特性、运行证据或具体的凭证；需要时借鉴这些原型的结构，或直接复用代码。
+
+## 先看要不要用卡片
+
+适合用卡片的地方：
+- 并列展示 2–4 项核心产品能力，每一项都需要具体的画面切片才能说清楚；
+- 摆出产品运行的真实证据（例如命令终端、构建流水线、任务审批单）；
+- 把抽象的凭证或身份做成看得见摸得着的物件（例如访问通行证、API 规格卡、会员卡）；
+- 对比或透视多份内容（例如版本对比、多来源检索）。
+
+不适合用卡片的地方：
+- 首屏主视觉（Hero）。首屏主角直接放产品本身的大界面或核心叙事，不要在首屏放几个碎卡片，见 [设计方向](design-direction.md)；
+- 连续阅读的长文、纯操作表单或密集数据表格，见 [交互与状态](interaction-and-state.md)。不要把能顺畅读下来的内容硬切成几张小卡片；
+- 靠大图和连续排版建立气氛的页面。卡片的边界会把气氛切碎；
+- 4–7 个核心对象、案例或方案要排成横向的画廊，或者在一个画面里展开和收起。这时要的是空间容器，不是平铺卡片，读 [空间容器](staging-containers.md)。
+
+## 卡片清单
+
+| 原型 | 适合放什么 | 包含的结构 |
+| --- | --- | --- |
+| `beam-graph` | 工作流拓扑、数据流向、生态连接 | 点阵底纹、发光连线、中心枢纽、微胶囊节点 |
+| `terminal` | 命令行执行、构建日志、实时事件 | 窗口顶栏、语法高亮、状态指示灯、闪烁光标 |
+| `flow-object` | 身份凭证、API 规格、硬件规格、会员卡 | 深色质感卡片、卡号、状态圆点、发光边框 |
+| `ui-slice` | 任务审批、流程进度、多看板切片 | 前后双层景深、看板底板、悬浮审批卡、进度条 |
+| `answer-lens` | 知识库检索、模型对比、多来源溯源 | 三张微倾斜卡片堆叠（-10° / 0° / 10°）、数据图表、来源标签 |
+| `dot-globe` | 全球节点、分布式算力、跨区域网络 | 3D 点阵地球或星图网格（`mode: 'mesh'`） |
+| `deploy-preview` | 版本发布、分支预览、CI/CD 状态 | 分支名、提交哈希、构建进度条、预览链接 |
+| `metric` | 实时吞吐量、关键指标、大盘数字 | 动态数字滚轮、趋势微图表、浮动百分比 |
+| `keycaps` | 快捷键说明、输入指令 | 键盘按键外观、立体投影 |
+| `capture-notes` | 语音记录、会议纪要、速记清单 | 音频波形跳动、多色分类标签、待办勾选框 |
+| `line-ribbons` | 流动线条、背景氛围、数据流向 | 彩色波浪飘带、平滑渐变 |
+| `particle-ring` | 中心焦点、加载反馈 | 向内聚拢的粒子光环 |
+| `vector-space` | 知识关联、聚类图谱 | 带连线的散点图、分组标签 |
+| `file-mosaic` | 格式解析、多类型文档资产 | 多格式文件卡片交错重叠 |
+| `stream-window` | 实时数据流、事件监控 | 逐行加载的数据列表 |
+| `responsive-preview` | 多端适配、设计系统展示 | 桌面、平板、手机三层画中画边框 |
+| `portrait-story` | 客户故事、创始人特写、金句引用 | 黑白人物大特写、大留白排版 |
+| `promo-band` | 版本更新通栏横幅 | 斜切通栏横幅、醒目标签 |
+| `showcase` | 旗舰功能大界面特写 | 界面截断出血大图 |
+
+## 怎么使用这些卡片
+
+卡片库是设计参考与现成代码库，不是强制约束。按以下方式使用：
+
+1. **先挑合适的原型**：根据产品性质选 2–4 款能说清特性的原型；不适合放卡片的产品按自身骨架排版，不强行拼凑。
+2. **看现成代码取细节**：看 `assets/cards/shared/shell.css` 获取基础样式，再看选定卡片目录下的 `card.html`、`card.css`（有 Canvas 动画的看 `card.js`）。
+3. **借鉴结构，换成真实内容**：
+   - 可以直接复用代码结构，也可以根据当前页面的网格自由调整；
+   - 把文案、标签、代码和数值换成当前产品的真实内容；
+   - 不要退回只有两行字的空白方框；配色和质感跟当前方向走，不照搬原型的。
@@ -1,8 +1,6 @@
 # 组件

-用户要把一个组件做到极致时，力气全部集中在这一个对象上：它放大看也经得起，用起来有手感，放进任何产品都认得出。页面上的方法照常有效，但流程不同：方向少做，深度多做。把组件当成一个小页面，三个方向平均用力、各做一遍完整验收，结果往往是三个能用却都不出彩的组件。
-
-本文的例子来自不同品类，只示意要具体到什么程度，不是模板。主视觉、母题、尺和状态的样子，每次都从当前产品里推出来；做出来和某个例子很像时，先问这是不是来自这个产品。
+用户要把一个组件做到极致时，力气全部集中在这一个对象上：它放大看也经得起，用起来有手感，放进任何产品都认得出。页面上的方法照常有效，但流程不同：方向少做，深度多做。

 ## 先写它回答的那个问题

@@ -13,37 +11,37 @@
 - **主角**：用户最怕错过、会随时间变化的那个量，例如还要等多久、还剩多少。它在组件里最大、最先被看到。
 - **陪衬**：判断主角需要的其他信息，越少越好。
 - **主操作**：只有一个。写清它的手感：拖、按、长按还是滑；拖动时会不会吸附到常用值。
- **状态**：列全。还没开始、进行中、暂停、计划中、完成、出错、极端值（0、满、超长名称），以及加载中。每个状态都要有画面，不能只做默认状态。状态的变化要落在主视觉上，例如洗碗机组件里，洗完时水汽散去、门缝亮起，故障时出问题的那根管道断开变红；只换标题文字和一个小圆点，等于主视觉没有参与。每个状态写明改主视觉的哪一层、改成什么样，三层见下一节。
+- **状态**：列全。还没开始、进行中、暂停、计划中、完成、出错、极端值（0、满、超长名称），以及加载中。每个状态都要有画面，不能只做默认状态。状态的变化要落在主视觉上；只换标题文字和一个小圆点，等于主视觉没有参与。每个状态写明改主视觉的哪一层、改成什么样，三层见下一节。
 - **容器**：它会出现在哪些尺寸里，例如整页卡片、小组件、通知栏。没要求时只做一种。

 ## 先定主视觉，再画组件

 组件也需要一个视觉主角，不能只靠文字、数字和进度条撑起来。按顺序找：

-1. **实物**：组件背后有实物时，用它的写实渲染或产品照片，例如耳机、行李箱、相机、一盆植物。透明底，角度和光线按组件的版式定。组件的主色从实物里取：外壳、配件或内容里最认得出的那种颜色。实物只有银灰黑白时，可以把颜色交给一个会亮的部位，例如耳机的状态灯、相机的录制点，并让它随状态变化。生成提示词里写明这个颜色和这个部位。组件本体里，主视觉要么完整放下，要么明确设计成出血到组件边缘，不能被容器随意切掉一角；跨出边界的效果只用在作品图里。
-2. **数据画成的量**：没有实物时，把主角画成看得见的量，例如一格代表一分钟的网格、填满的长度、范围圈。见 [设计方向](design-direction.md) 的“让人记住的一刻”。
+1. **实物**：组件背后有实物时，用它的写实渲染或产品照片。透明底，角度和光线按组件的版式定。组件的主色从实物里取：外壳、配件或内容里最认得出的那种颜色。实物只有银灰黑白时，可以把颜色交给它身上一个会亮的部位，并让它随状态变化。生成提示词里写明这个颜色和这个部位。组件本体里，主视觉要么完整放下，要么明确设计成出血到组件边缘，不能被容器随意切掉一角。
+2. **数据画成的量**：没有实物时，把主角画成看得见的量：面积、长度或个数。见 [设计方向](design-direction.md) 的“让人记住的一刻”。

-需要的图先按 [配图](imagery.md) 生成或选好，再围绕它排版。组件的颜色从这张图里取两三种：主色是图里最有辨识度的颜色，其余靠黑白灰。先定色板再去配图，图和界面会像两样东西。
+需要的图先按 [素材](media.md) 生成或选好，再围绕它排版。组件的颜色从这张图里取两三种：主色是图里最有辨识度的颜色，其余靠黑白灰。先定色板再去配图，图和界面会像两样东西。

 主视觉分三层，生成图之前先分好：

- **照片层**：实物本身。状态需要实物变化时，例如耳机戴上和收进盒子、箱子合上和打开，用同一张图改提示词生成几个变体，角度、光向和大小完全一致；代码只切换图片。提示词写法见 [配图](imagery.md)。
- **画在上面的层**：用代码画的线、量和标注，贴在实物对应的部位：降噪强度画成从耳罩向外扩散的声波，温度标在出问题的那个零件旁，剩余量沿容器的液面走。它随数据实时变，是状态变化的主要落点。
+- **照片层**：实物本身。状态需要实物变化时，用同一张图改提示词生成几个变体，角度、光向和大小完全一致；代码只切换图片。提示词写法见 [素材](media.md) 的“写提示词”。
+- **画在上面的层**：用代码画的线、量和标注，贴在实物上这个量发生的那个部位。它随数据实时变，是状态变化的主要落点。
 - **背景层**：组件底色和实物身后的光。例如等待中光线变暗，出错时光熄掉，完成时亮起。这是状态的意思，不是装饰。

-一个量只画一条尺。主视觉上表示主角的那条线、那圈格子，就是主操作的控件：目标直接拖在它上面，当前值和目标在同一条尺上，拖动时实物随之变化。主视觉下面再放一个滑块或一排刻度，就是把同一件事画了两遍，删掉其中一条。常用值做成尺上的刻度和吸附点，标上名字，例如降噪强度上的“通勤”“专注”；不另做一排快捷按钮。
+主操作是调一个量时，这个量只画一条尺。主视觉上表示主角的那条线、那圈格子，就是主操作的控件：目标直接拖在它上面，当前值和目标在同一条尺上，拖动时实物随之变化。主视觉下面再放一个滑块或一排刻度，就是把同一件事画了两遍，删掉其中一条。常用值做成尺上的刻度和吸附点，标上名字；不另做一排快捷按钮。

 同一个信息在组件里只出现一次。做完默认状态后列一张表：每个数字一行，写它出现在哪几处；文字、图形、控件上显示的值都算。出现两次以上，删到只剩最有力的那一处。目标值写在标题里、显示在滑块旁、又是快捷按钮的名字，就是三次。

 所有状态并排后做一次遮字测试：把文字和数字全部遮掉或模糊，再看这张图。还分得出哪个在进行、哪个出错、哪个已完成，主视觉才算参与了状态；分不出来，回到三层里改画在上面的层和背景层，不靠加文字解决。

-再定一个母题：一种从产品里来的图形，例如刻度、波形、点阵、等高线，从主视觉一路用到进度、加载、按钮按下和空状态。一个组件里只用一种母题。母题同时决定控件的形状：圆滚滚的毛绒玩具推出胶囊形的按钮和柱子，海报和硬照推出直角的按钮和图片，刻度推出细线和等宽数字。写下主按钮、次要开关和底部那行小字各自怎样带上母题；带不上的，先问能不能删。下半部分退回组件库默认的按钮和开关，整个组件就只有上半部分是设计。
+再定一个母题：一种从产品里来的图形，从主视觉一路用到进度、加载、按钮按下和空状态。一个组件里只用一种母题。母题同时决定控件的形状：圆的母题推出圆的控件，直的推出直的，细的推出细线和等宽数字。写下主按钮、次要开关和底部那行小字各自怎样带上母题；带不上的，先问能不能删。下半部分退回组件库默认的按钮和开关，整个组件就只有上半部分是设计。

 大数字是组件的脸。给它选一款有性格的数字字体，用等宽数字，不用系统默认字体；标签用另一款安静的字。两款够了。

 ## 方向少做，深度多做

-1. **先出两三张草图。** 只做默认状态的静态画面，不写交互、不取证。草图之间在主视觉、母题和主操作的手感上不同，不是同一个布局换颜色。放进 [风格对比页](style-explorer.md) 给用户挑；用户让你自己决定时，选最有辨识度、又最能回答那个问题的一张，写下理由。
+1. **先出两三张草图。** 用户只要一个方向时跳过这一步，直接深化。动手之前先按 SKILL.md 步骤 1 的“先用文字问一次”把它们写给用户，用户从文字里定得下来就只做选中的那一个。只做默认状态的静态画面，不写交互、不取证。草图之间在主视觉、母题和主操作的手感上不同，不是同一个布局换颜色。放进 [风格对比页](style-explorer.md) 给用户挑；用户让你自己决定时，选最有辨识度、又最能回答那个问题的一张，写下理由。
 2. **选定后只深化这一个。** 把所有状态做完，主操作做出完整的手感，再按下面的轮次打磨。其他草图不再深化。

 ## 把一处做到极致
@@ -52,17 +50,17 @@

 - **跟手**：拖动时，被拖的东西和手指之间没有延迟；跟着变化的数字、颜色、主视觉同步变化，不等松手。
 - **阻尼和吸附**：经过常用值（例如 80%、100%）时有一次轻微的停顿，松手后吸附过去；拖过头会被拉回来。
- **结果当场发生**：调了目标，主视觉跟着变，例如声波随降噪强度收拢或扩散，而不是只改一个数字。
+- **结果当场发生**：调了目标，主视觉跟着变，而不是只改一个数字。
 - **数字的变化**：数字滚动到新值，不是跳过去；等宽数字，单位比数字小一级、基线对齐。
- **状态之间的过渡**：从发生变化的地方出发，例如开始时从实物上发生变化的那个部位出发，完成时最后一格亮起。
+- **状态之间的过渡**：从发生变化的地方出发。

 动效的时长和曲线见 [动效](motion.md)。只在主操作和关键状态切换上用力，其余保持安静。

 ## 打磨轮次

-截图、状态并排图、遮字图和录屏用 [工具](tools.md) 里的截图工具一次出齐。派评审之前自己先看一遍证据：默认状态已经加载完，遮字图保留了图形，慢放帧里没有上一个状态的残影，200% 图截的是组件而不是整页。证据有错先重截，不算一轮。
+截图、状态并排图、遮字图和录屏用 [工具](tools.md) 里的截图工具一次出齐。派评审之前先按那里的说法看一遍证据，再多看两样：慢放帧里没有上一个状态的残影，200% 图截的是组件而不是整页。证据有错先重截，不算一轮。

-深化后的组件按轮次打磨：截图、评审、修改。每轮给评审者这些东西：组件 200% 放大的截图；所有状态并排的图两份，一份原样，一份遮掉全部文字和数字；主操作 5 秒左右的录屏。评审任务：
+深化后的组件按轮次打磨：截图、评审、修改。每轮给评审者这些东西：用户的原始任务和约束、那句“它回答的问题”；组件 200% 放大的截图；所有状态并排的图两份，一份原样，一份遮掉全部文字和数字；主操作 5 秒左右的录屏。评审任务：

 > 评审这一个组件，不评审页面。先说出用户第一眼看到的主角是什么，是不是那句“它回答的问题”里的答案。再拿这个品类里最有名的两三个产品做对照，说出这个组件和它们不同在哪；遮住名字后认不出是谁家的，就直接指出来。数一遍同一个信息在组件里出现了几次，出现两次以上的指出来。看所有状态并排的那张图：状态之间除了文字，主视觉有没有变化。然后按“这个品类里最好的组件”的标准，指出放大以后最露怯的三处细节：对齐、标签和图形压在一起、数字排版、阴影和描边、状态之间不一致。再说主操作的手感：跟手吗，有没有吸附和阻尼，结果有没有当场发生在主视觉上。最后回答：有没有一个瞬间值得截图分享；没有的话，最有希望的是哪一处，怎么做。每条写清位置、观察和调整方向。按 10 分制打分；以下任一成立，总分不高于 7：遮字后分不出各个状态；同一个数字出现三次以上；主操作的控件不在主视觉上，而是另画了一条尺；遮住名字后说不出它和品类里常见产品的区别。只提供评审，不修改文件。

@@ -71,7 +69,7 @@
 ## 交付

 - **组件本体**：能运行、能操作，所有状态可以切换查看，例如用一排状态按钮或键盘切换，切换控件放在组件外面。
- **作品图**：组件放大两倍，放在从主视觉取色的背景上；背景从主视觉取色，选和组件形成清楚对比的那一档。实物另放一份在组件外面，比组件里的大三到五倍，压住组件的一条边或一个角，再被画布边缘切掉一部分；一张图里放一两个，不围一圈。可以再出一张：把组件的一处局部推近，画面旋转十到十五度，只看母题和细节。这些只用来展示，界面本身不需要这样。
+- **作品图**：组件放大两倍，放在从主视觉取色、和组件形成清楚对比的背景上，只用来展示。
 - **一段录屏**：主操作从开始到结果出现，5 到 8 秒。

 验收证据只给选定的那一个：所有状态各一张截图、200% 截图、主操作录屏。草图阶段不取证。组件不做独立的任务走查，也不按 SKILL.md 步骤 4 另做评审；把时间留给打磨。
@@ -1,8 +1,22 @@
 # 设计方向

-模型不被推一把时，会给出让所有人都能接受的平均答案。“做得独特一点”“随机一点”推不动它，它只会换几处装饰。这里的方法都是在给模型一个具体的推力：先认清品类、看清同类最好的产品怎么做，再定调性、用生成引擎起方向，最后用可检验的规则逼出真正的差异。方向的目标是“这个品类里最好的团队会这样做，而且做出了这个产品自己的样子”；只是“和模型的默认不一样”还不够。高级感来自一套语言的完整和细节，不来自题材少见。
+## 目录导航

-本文件以方法为主，偶尔给的例子只示意要具体到什么程度，不是风格清单。方向里的题材、材质、场景、字体和配色，每次都从当前产品的内容、受众和使用场合里推出；想到的方向如果和常见的“网红风格”撞上，要能说出来自这个产品的理由，否则重选。
+- [认品类，拆标杆](#认品类拆标杆)
+- [先定调性，再求差异](#先定调性再求差异)（含 [模糊词翻译](#模糊词必须翻译)）
+- [用生成引擎起方向](#用生成引擎起方向)
+- [定色彩](#定色彩)
+- [定首屏骨架](#定首屏与工作区骨架)（[说服型骨架](direction-persuasion.md)）
+- [方向卡](#方向卡)
+- [差异检验](#差异检验)
+- [北极星与呼应](#北极星与呼应)
+- [让人记住的一刻](#让人记住的一刻)
+- [参考怎样转为设计决定](#参考怎样转为设计决定)
+- [小样、选择与品味](#小样选择与品味)
+
+方向的目标是“这个品类里最好的团队会这样做，而且做出了这个产品自己的样子”；只是“和模型的默认不一样”还不够。高级感来自一套语言的完整和细节，不来自题材少见。
+
+方向里的题材、材质、场景、字体和配色，每次都从当前产品的内容、受众和使用场合里推出；想到的方向和常见的“网红风格”撞上时，要能说出来自这个产品的理由，否则重选。

 ## 认品类，拆标杆

@@ -11,7 +25,7 @@
 按三步做，每一步都写下来：

 1. **说出品类和标杆。** 这是什么品类的产品，例如“语言学习 App”“组件库官网”“项目管理工具”“作品画廊”。这个品类里风格最鲜明的两三家是谁。选风格最鲜明的，不一定是最有名的。
-2. **拆开其中一家。** 拆成 6–10 条看得见的要素，每条写两件事：它是什么样，它为什么这样做。按这几层去拆：控件的形状和手感、字体、颜色、图标和插画、状态与反馈、动效、文案语气、首屏放了什么。要拆到能照着做的程度。例如一款学习 App 是“按钮厚实，按下去会陷下去，答对时有夸张的弹跳”，理由是答题是核心动作，要给利用零碎时间的普通人手感上的回报；一款开发工具是“深色、行距紧、每种状态一个统一的图标、快捷键印在菜单上”，理由是工程师一天要在里面待好几个小时。拆出来只有“干净、留白、一种强调色”，说明没拆到位，换一家重拆。
+2. **拿到真实画面，再拆其中一家。** 用宿主的浏览器或搜索，取到这两三家标杆的首屏和一个关键控件的真实画面，存进任务目录，对着图拆，不凭记忆写：记忆里的产品常常是它几年前的样子。某一家的页面打不开或者是 404，换一个地址再试一次，还不行就换一家；拿到两家的真实画面就够，打不开的页面不算参考。拆成 6–10 条看得见的要素，每条写两件事：它是什么样，它为什么这样做。按这几层去拆：控件的形状和手感、字体、颜色、图标和插画、状态与反馈、动效、文案语气、首屏放了什么。要拆到能照着做的程度：写出形状、尺寸关系、状态怎样变化，以及它服务的使用场合。拆出来只有“干净、留白、一种强调色”，说明没拆到位，换一家重拆。确实拿不到画面时，在方向卡“标杆与取舍”开头写明“未看图，凭记忆”，并把字体、色彩、主视觉三栏标为待验证：这三栏最容易凭记忆写成模型默认。
 3. **决定留什么、换什么。** 拿本产品的受众、内容和使用场合逐条对照：理由同样成立的留下，理由不成立的换掉，换掉的部分由后面的生成引擎给出替代。结果写进方向卡的“标杆与取舍”。

 拆的时候分清三样东西：
@@ -20,8 +34,6 @@
 - **套路**：这个品类人人都在用的默认版式。一轮方向里至少一个要打破它，见“差异检验”。
 - **撞脸**：字体、配色、主视觉和图标都和某个标杆一样，只换了名字。任何方向都不允许。

-检验方法：把一个按钮、一行列表、一个空状态或一次反馈单独拿出来，放进别的产品里，还能认出它属于这个产品。识别不一定靠形状和颜色，也可以靠密度、字体和动效的节奏；黑白方向同样能做到。
-
 ## 先定调性，再求差异

 从产品的题材、受众、品牌语气和使用场合推出调性。用五个刻度描述，每个刻度都写出依据：
@@ -34,7 +46,7 @@
 | 分量 | 轻 ↔ 重 | 字重、色块面积、阴影硬度 |
 | 严肃度 | 活泼 ↔ 庄重 | 圆角、插画语言、动效幅度 |

-例如“地下现场演出社区 → 喧闹、粗粝、密”，“冥想陪伴 → 安静、精致、疏”。两种都完全成立，失败的是没有依据的默认：
+取值写成“这个产品是什么 → 五个刻度各取哪一端”，依据来自它的受众、内容和使用场合。刻度两端的任何组合都可以完全成立，失败的是没有依据的默认：

 - 证据指向喧闹粗粝，交付的却是米色卡片、柔和阴影和大留白。这是最常见的失败，设计被磨回了模型默认的“安静高级”。
 - 反过来，为了显得有趣，给一个本该安静的产品硬加颗粒、撕纸边和粗边框。
@@ -57,112 +69,68 @@

 翻译不出可观察决定的词，从理由里删掉。

+动效与交互上的模糊词同样必须翻译为具体模式：
+
+| 动效模糊词 | 翻译成什么 |
+| --- | --- |
+| 滚的时候动起来 | 先分清是滑动触发还是滑动驱动，见 [滚动叙事](scroll-narrative.md) 的“滚动交互的两种模式”；未明确时按单向一次性处理 |
+| 切页面丝滑一点 | 选定转场模式：遮罩式、交叠式还是共享元素，取舍和时长见 [动效](motion.md) 的“整页转场的稳定性取舍” |
+| 背景有立体感 | **分层视差**：前后景的速度差和哪些层不做视差，按 [滚动叙事](scroll-narrative.md) 的“视差与一镜到底” |
+| 首屏要有冲击力 | 明确首屏单一主角（大字排版、一件实物、核心 3D 或视频），不堆砌次要修饰；进场时长见 [动效](motion.md) 的“时长和幅度” |
+
 ## 用生成引擎起方向

-每个方向都从一个具体的引擎出发，而不是从形容词出发。不同方向最好用不同的引擎：
+每个方向都从一个具体的引擎出发，而不是从形容词出发，不同方向最好用不同的引擎。引擎的内容来自这个产品的证据：受众、内容、使用场合和品牌已有的资产。

- **材质 × 环境**：一种材质放在一个具体的环境里，比如“湿陶土 × 午后的工作室”。由材质推出光照、深度、边缘的处理和动效的阻尼。
- **一个具体场景**：一个有时间、地点和光线的场景，比如“凌晨两点的便利店”。由场景里的光线、声音、材料和节奏推出色彩、质感和动效速度。适合情绪型工具。
- **角色原型**：给产品一个性格，比如“一丝不苟的档案管理员”，让性格决定字体、色彩和动作。
+- **材质 × 环境**：一种材质放在一个具体的环境里。由它推出光照、深度、边缘的处理和动效的阻尼。
+- **一个具体场景**：一个有时间、地点和光线的场景。由场景里的光线、声音、材料和节奏推出质感和动效速度。适合情绪型工具。
+- **角色原型**：给产品一个具体的性格，让性格决定字体和动作。
 - **一场设计运动或文化语法**：选一个和产品的题材、受众或地域有真实联系的设计运动或视觉传统，借用它的语法，而不是贴它的图案。
- **其他领域的整套表现形式**：把另一个领域的媒介或器物的表达方式借过来，比如把行程做成一张登机牌。只借它最有辨识度的一两个手法，页面本身仍是原来的体裁；不把那个媒介的部件一件件搬来，那会变成道具堆砌。
+- **其他领域的整套表现形式**：把另一个领域的媒介或器物的表达方式借过来。只借它最有辨识度的一两个手法，页面本身仍是原来的体裁；不把那个媒介的部件一件件搬来，那会变成道具堆砌。
 - **有意打破常规**：激进的非对称版式、不和谐的配色与字体、让人不安的留白，但整体仍然好看、功能完整。

-感受词从这个品牌出发，而不是从行业出发。“美味、温暖、有食欲”会把每个食品应用都推向橙色；“深夜治愈、独处、温柔”才属于某一个品牌。行业惯用色可以用，前提是理由来自这个品牌；如果理由只是“这个行业都这么用”，就换掉。
+引擎决定结构、手感、质感和动效；颜色按下一节单独定。

-写方向卡之前，先在心里把方向想厚：用起来是什么感觉，让人联想到什么表面和物件，页面怎样流转，在讨好哪一类人。卡片是从这些思考里提炼出来的。跳过这一步，卡片只剩三十个字的空壳，后面做出的页面也会是平的。
+## 定色彩

-随机种子也是一种引擎：让脚本生成一串随机字符，从中联想配色、布局和字体，种子不进入界面。它适合陷入重复时破局，但不如上面几种引擎可解释。
+颜色不直接取生成引擎里那种材质或场景的固有色：隐喻一落到材质，颜色就跟着材质走，不同的产品最后会落在同一组颜色上。产品自己的实物、内容和品牌资产是颜色的正当来源，主视觉就是产品实物时，主色可以从实物里取。其余按四步定：

-## 先定首屏骨架，再写文案
+1. 先写两行，几个方向共用：不看这个产品、只凭品类会顺手给出的那套配色，写出底色和强调色；拆过的标杆各占了哪个色相和明暗。
+2. 每个方向从这两者之外选一个色相家族和明暗，或明确的黑白，用一句写它来自这个产品的什么：内容、受众或品牌资产。行业惯用色可以用，前提是理由来自这个品牌。
+3. 写出至少三层：底色、主强调，以及由它们派生的选中底、描边和禁用态。
+4. 自检：去掉所有发光和模糊后，配色是否还成立；它是从这个产品推出来的，还是一组放在哪个产品上都不出错的安全色。是后者，回到第 2 步。

-**先回答一个问题：用户来首屏是看什么、做什么？**
+黑白灰加一种强调色，甚至完全不用彩色，也是完整的色彩身份，这时颜色交给内容：产品截图、用户的照片、一张画。几个方向之间不按明暗分：头号失败是“一个亮、一个暗、一个暖”，每个方向要有自己的色相家族或材质感，明暗只是结果。

- **来看内容、挑东西或处理对象的页面**，例如画廊、商店、信息流、文档、作品集、工具和后台：首屏就是第一排内容本身。导航、标题和筛选合起来不超过一两行，第一排内容要完整出现在首屏。不放首屏口号，也不放解释这个页面是干什么的段落。下面的骨架表不用于这类页面；它们按“产品界面”一节定工作区骨架。
- **来听一句话、看一张画、被说服的页面**，例如落地页、品牌页、产品发布页、展览页：才从下面的骨架表里选。
- **两种都有时**，例如商店首页顶上有一块活动横幅，以用户最常来做的事为准：横幅可以留，但不能把第一排商品推出首屏。
+## 定首屏与工作区骨架

-以下是说服型页面的方法。
+写文案之前先定骨架，文案去适应骨架。先回答一个问题：**用户来首屏是看什么、做什么？**

-模型最顽固的习惯是左右分栏：一边大标题，另一边说明、按钮或一张图。换字体、换配色、换材质都改变不了它，因为它在写文案之前就定下来了：先想好标题、一段说明、一个按钮，把它们摆好，自然就是左右两栏。所以骨架要在写任何文案之前决定。
-
-每个方向先从下表选一个首屏骨架，再用 3–5 个方框画出首屏线框：每块是什么、占首屏多大面积、阅读从哪里开始。
-
-| 骨架 | 首屏长什么样 |
-| --- | --- |
-| 满版图像压字 | 一张图占满首屏，标题和动作压在图的安全区里 |
-| 居中单一物件 | 一个物件或一句话居中，四周是大面积空白 |
-| 画面即界面 | 首屏就是产品界面或一件实物本身，标题、导航和按钮都长在它上面 |
-| 满版文字 | 文字本身就是画面，字大到占满首屏、跨过边缘或被裁切 |
-| 通栏上下堆叠 | 通栏大标题横跨整个宽度，下面紧接内容 |
-| 网格拼贴 | 多块内容同时出现，按网格或拼贴排列，没有单一主角 |
-| 纵排或斜向 | 文字竖排、斜切或旋转，打破从左到右的阅读 |
-| 左右分栏 | 文字一侧，画面一侧。这是模型的默认，一轮最多一个方向使用，并写出为什么非它不可。另一侧必须是跨越结构的图像、色块或图形装置，不能是装在卡片里的产品界面 |
-
-规则：
- 同一轮的方向，骨架互不相同。
- 左右分栏最多出现一次。所谓“大标题九栏、说明三栏”同样算左右分栏。
- 骨架定好之后再写文案。文案去适应骨架，不让骨架去适应“标题 + 说明 + 按钮”的组合。
-
-构图的大胆程度和调性无关。安静精致的产品，一样可以把一句话放在空白首屏正中，或让纵排标题贯穿整屏，或让界面本身占满首屏。调性决定音量，骨架决定结构；不要因为调性偏安静，就退回左右分栏。
-
-每一轮至少有一个方向让你自己觉得有点冒险：放在同类产品里会显得格格不入，但仍然好看，功能完整。模型只有被明确要求时才会这样做。如果你心里想的是“这不可能行得通”，通常说明方向是对的，做出来往往比预想好。
-
-最常见的模板核心不是左右分栏本身，而是“左边标题和两个按钮，右边一张装在圆角卡片里的产品界面”。那张卡片几乎总是该删的：要么让产品界面本身占满首屏，要么换成一张跨越版面结构的图、一个色块或一个图形装置。
-
-## 产品界面：先定对象和工作区骨架
-
-后台、工具、App，以及画廊、商店、信息流、文档站这类让人浏览和挑选内容的页面，都没有首屏海报，决定结构的是用户每天面对的对象、对它最常做的动作，以及多久用一次。模型的默认是“左侧栏 + 顶部四张指标卡 + 一张图表 + 一张表格”，不管产品是什么，因为这样不需要理解业务。跳出它的办法和落地页一样：画界面之前先定骨架。
-
-先写三行：
-
- **核心对象**：用户每天处理的是什么，例如工单、合同、镜头、病床；一眼认出它靠哪两三个属性，例如缩略图、状态、金额、截止时间。再问一句：用户在这个对象上最怕错过什么？通常是一个会随时间变化的量，例如已经等了多久、离截止还剩多少、欠了多少。把它做成对象上最显眼的属性，而不是藏在详情里。
- **主动词**：对它最常做的动作是逐条处理、比较、创作、安排、定位、推进还是监控。
- **频率**：每天用几小时的专业用户，还是每月来一次的普通人。它决定密度。
-
-再按主动词选工作区骨架：
-
-| 主动词 | 骨架 | 长什么样 |
-| --- | --- | --- |
-| 逐条处理 | 队列 / 收件箱 | 左边队列，右边当前这一条的全部信息和处理动作；处理完自动跳到下一条，键盘可以一路按到底 |
-| 比较与筛选 | 表格 | 行是对象，列是比较依据；筛选、排序和批量操作长在表头与选择状态上，不另开页面 |
-| 创作与编辑 | 画布 / 文档 | 内容占满，工具贴着内容出现，面板按需展开 |
-| 沿时间安排 | 时间线 / 日历 | 横轴是时间，对象是时间上的块，拖动即改期 |
-| 在空间中定位 | 地图 / 平面图 / 座位图 | 对象画在真实位置上，列表只做辅助 |
-| 推进流程 | 看板 / 流水线 | 列是阶段，对象在列之间移动 |
-| 监控 | 仪表 | 只在真的需要持续盯着时使用；每个数字写出正常范围，以及出问题后该做什么 |
-| 对话后产出 | 对话 + 产物 | 对话收窄在一侧，产物占主区域并能直接编辑 |
-| 浏览与挑选 | 画廊 / 货架 / 信息流 | 内容铺满首屏，缩略图的比例就是版式；筛选和排序贴着内容顶部，占一行；点开时在原地展开或用浮层，关上回到原来的位置 |
-
-首页先回答“我现在该处理什么”，而不是“总共有多少”。大多数产品的主动词不是监控，首页就不该是指标卡仪表盘。
-
-**对象的样子就是产品界面的主视觉。** 先设计一个对象在列表行、卡片或画布上的样子：最重要的属性放在哪，状态怎样一眼看出，长名字怎么收，空值怎么显示，选中和处理中长什么样。一个设计好的列表行，比十张指标卡更能体现方向。
-
-**密度按频率定。** 每天用几小时的专业工具，行高 32–40px、正文 13–14px、一屏看到 20 行以上都正常，操作以键盘为先；偶尔来一次的消费产品，点击区域 44px 以上，一屏只要求一个决定。不要给专业工具套消费级的大留白，也不要把一次性的流程塞满控件。密度要在截图上数出来：一屏能看到几个对象，主动作离当前对象有多远。高频工具一屏少于 10 个对象时，先查行高、页面头部和说明文字占了多少高度。
-
-**产品界面的大胆放在哪。** 放在工作区结构、对象的样子和状态的表达上，例如时间在画面里怎样流动、超时怎样一眼跳出来。页面标题和品牌区保持小：一行，和区域标题同级或略大。在高频工具和内容页里放超大页面标题、通栏口号，或者用一整块深色卡片装“下一步”动作，都是把落地页的手法搬错了地方，占掉的是每天要看几百次的工作区。
-
-多个方向时，工作区骨架、对象的样子、导航方式（侧栏、顶栏、命令面板、在空间里跳转）、密度四项，任意两个方向至多一项相同。这四项是在通用差异检验之外再比，不是替代：产品界面同样需要各自的色彩身份和字体性格，不能三个方向都是系统黑体加一种强调色，只换了布局。方向卡里的“首屏骨架”一栏，产品界面填工作区骨架和对象的样子。
+- **来听一句话、看一张画、被说服的页面**（落地页、品牌页、产品发布页、展览页）：
+  从 8 种首屏骨架里选，跳出左右分栏默认模板。详见 [说服型页面首屏骨架](direction-persuasion.md)。
+- **来看内容、挑东西或处理对象的页面**（画廊、商店、信息流、文档、作品集、工具和后台）：
+  首屏就是第一排内容本身或工作区。导航、标题和筛选合起来不超过一两行，第一排内容要完整出现在首屏。不放首屏口号，也不放解释这个页面是干什么的段落。按用户最常做的动作安排内容，例如浏览就让内容铺满，处理就让当前对象和动作挨在一起。
+- **两种都有时**（例如商店首页顶上有活动横幅）：以用户最常来做的事为准，横幅可以留，但不能把第一排内容推出首屏。

 ## 方向卡

-每个方向写一张方向卡，每项都填具体选择，不填形容词：
+每个方向写一张方向卡，每项都填具体选择，不填形容词。出三个首屏的那一轮，调性和标杆与取舍几个方向共用一份（候选分布在不同调性上时，调性各填各的），每个方向只填北极星、生成引擎、首屏骨架、字体、色彩、主视觉、图标和控件语法；其余各栏在方向选定后、做完整页面之前补齐。派生版式时，每个版式变体只重写首屏骨架、页面结构和主视觉三栏：

 | 字段 | 要写到的程度 |
 | --- | --- |
 | 北极星 | 一句能指导取舍的体验意图：用起来像在什么地方、做什么事 |
 | 调性 | 五个刻度的取值及依据 |
-| 标杆与取舍 | 品类是什么，拆的是哪一家；沿用了哪几条、换掉了哪几条，各自为什么 |
+| 标杆与取舍 | 品类是什么，拆的是哪一家，对着哪几张真实画面拆的（写存放路径；没看图就写“未看图，凭记忆”）；沿用了哪几条、换掉了哪几条，各自为什么 |
 | 生成引擎 | 用了哪一种，具体是什么，来自这个产品的什么证据 |
 | 首屏骨架 | 先写用户来首屏看什么。内容页写首屏能看到几个对象、页头占几行；说服型页面写从骨架表里选的哪一种，附 3–5 个方框的首屏线框：每块是什么、占多大面积、阅读从哪里开始 |
 | 页面结构 | 首屏以下怎么组织，例如单列沉浸滚动，或导航、内容、详情三栏 |
 | 各区块的形式 | 首屏以下每个主要区块（产品实样、功能、价格、隐私、结尾等）在这个方向里长成什么东西。形式从生成引擎推出，不是同一个模块换颜色 |
 | 字体 | 具体字族、字重和尺度关系：展示、正文、数字各用什么，相差多大 |
-| 色彩 | 用到的十六进制色值及用途，说清这个方向的色彩身份；黑白灰加一种强调色也是完整的答案 |
+| 色彩 | 按“定色彩”写：十六进制色值及用途，至少三层，再加一句它来自这个产品的什么 |
 | 主视觉 | 哪张图或哪个图形承担情绪与识别，来自复用、生成还是排版本身 |
 | 图标 | 用哪一套、什么描边粗细和端点，或者不用图标、改用字符和编号 |
 | 控件语法 | 按钮、输入、选中、标签、状态和动效共用的一套形状和手感，用一句话写清，例如圆角多大、描边多粗、按下时怎样变化 |
-| 动效 | 手感用“动作 + 实物”写，例如“咔嗒：拨动开关”；三处基本动效各怎么动、怎样彼此呼应；有没有一处从产品里找到的巧思。见 [动效](motion.md) |
+| 动效 | 手感用“一个拟声词 + 一个实物的动作”来写，实物从这个产品的领域里找；三处基本动效各怎么动、怎样彼此呼应；落地页类页面再写滚动分镜（区块出场、选了哪种滑动驱动的叙事），见 [滚动叙事](scroll-narrative.md)；有没有一处从产品里找到的巧思。见 [动效](motion.md) |
 | 结构性突破 | 改变首屏结构的那一处偏离常规，以及它怎样放大北极星。手写批注、质感按钮、划线这类局部细节不算 |
 | 记忆点 | 集中发力的一两处：在哪个时刻或位置，用什么材质、动作或画法，见“让人记住的一刻” |
 | 放弃什么 | 这个方向主动不要的常见做法 |
@@ -171,78 +139,65 @@

 ## 差异检验

-方向卡写完、做小样之前，逐条检验：
+方向卡写完、做首屏之前，逐条检验。基于选定方向派生版式，或用户已经给了品牌规范时，字体和配色是共用的，下面关于字体和色彩的几条不适用，骨架、主视觉和页面结构仍要各不相同：

 - **比线框，不比描述**：把各方向的首屏线框并排放在一起比。方向的描述可以各不相同，线框却可能都是“左边大标题，右边小块”。线框相似就是同一骨架，重选骨架。
 - **四项至多一项相同**：首屏骨架、字体、色彩、主视觉四项里，任意两个方向至多一项相同；否则就是同一方向的变体，换一个生成引擎重写其中一个。
- **不按明暗分方向**：头号失败是“一个亮、一个暗、一个暖”。每个方向要有自己的色彩身份：不同的色相家族、不同的材质感，或者干脆是黑白。明暗是色彩身份的结果，不是区分方向的依据。
- **黑白也是一种色彩身份**：黑白灰加一种强调色，甚至完全不用彩色，也是完整的色彩身份，这时颜色交给内容：产品截图、用户的照片、一张画。它和多色方案同样算拉开了差异。颜色选常见的还是少见的都可以，理由要来自这个产品。
- **结构也要不同**：不同方向可以有不同的页面组织。三个方向页面结构完全相同、只是颜色和质感不同，就还没有拉开差异。候选只需共享核心内容和主要任务。
- **至少一个走到极端**：至少一个方向在各项上都取明确的一端，不做折中；折中的取值最多出现在一个方向里。
- **至少一个打破品类套路**：在同一调性内，至少一个方向不用这个品类的默认版式。常见套路如下：
-  打破套路不等于抛弃基线：画廊仍然让作品先行，只是作品的排列、筛选和点开后的样子可以与众不同。
+- **不按明暗分方向**：每个方向有自己的色相家族或黑白，见“定色彩”。
+- **结构也要不同**：填了“页面结构”的几个候选（版式变体，或都要做成整页的方向），页面组织不能完全相同、只换颜色和质感。候选只需共享核心内容和主要任务。
+- **至少一个走到极端**：在证据允许的调性范围内，至少一个方向在构图、色彩和主视觉上都取明确的选择，不做折中；折中的方向最多一个。
+- **至少一个打破品类套路**：在同一调性内，至少一个方向不用这个品类的默认版式。打破套路不等于抛弃基线。常见套路如下：
  - 后台：左侧栏、顶栏加卡片网格。
  - 电商：大横幅、商品网格加页脚。
  - 社交：底部标签栏、信息流加悬浮按钮。
  - 落地页：主视觉、特性、用户评价，最后一个行动按钮。
  - 聊天：左侧联系人，右侧消息。
- **不撞脸**：把每个方向和它拆过的标杆并排看。字体、配色、主视觉和图标都一样，只换了名字，就是撞脸，重做。沿用基线不算撞脸，例如画廊让作品先行。
+  - AI 与开发者工具：黑色背景、紫蓝发光弥散圆晕、浮空粒子与千篇一律的胶囊按钮。
+- **不撞脸**：把每个方向和它拆过的标杆并排看，撞脸就重做，定义见“认品类，拆标杆”。沿用基线不算撞脸。
 - **盲看**：遮住名字和说明只看画面，仍能说出每个方向带给人的不同感受。

-小样做出来后再比一次实际画面：在对比页并排看首屏，眯起眼睛只看明暗块面。块面的分布如果相似，比如都是左边一大块、右边一小块，即使字体和颜色都不同，也回到骨架表重做，不靠换装饰补救。首屏之后，再按区块逐一比较整页，规则见“方向贯穿整页”。
-
-## 方向贯穿整页
-
-方向不只属于首屏。首屏以下的每个区块，都要用这个方向自己的语言重新设计：同一份内容，在不同方向里应该是不同的东西，形式从各自的生成引擎推出。模型最容易在首屏用尽力气，到了第二屏就回到通用的卡片、分栏和居中结尾，三个方向的下半页变得一模一样。
-
-规则：
- **候选共享内容，不共享实现。** 同一份示例数据可以共用；为这个方向写的区块结构、样式和代码不共用。不要为了省事，把某个区块写成共用模块再给各方向换颜色，那等于亲手制造趋同。产品本身的组件不在此列：设计组件库官网或已有产品时，各方向照常使用同一套真实组件，差异体现在它们被怎样编排、呈现和讲述上。
- **同一条修改意见，要翻译成每个方向自己的做法。** 评审常常对所有方向提出同一条建议，比如“展示产品真正交付的东西”。这条意见在每个方向里的落地形式都不同，不能用同一种实现套到所有方向上。
- **区块的顺序和取舍也属于方向。** 各方向都按“首屏、对象介绍、三步流程、一句结尾”排下来，就算每块都换了样子，仍是同一张页面。由各自的引擎决定先讲什么、合并什么、删什么：有的方向把流程并进对象介绍，有的方向整页只讲一个对象。产品界面也一样，同一段内容、同一道题按同样的顺序出现，就是换了皮的同一个界面。
- **外壳也是区块。** 导航、行动按钮、结尾区的句式和页脚最容易被忽略，常常三个方向共用同一套，只换颜色。它们同样要从生成引擎推出自己的形式。
- **逐区块比较，而不是只比首屏。** 把各方向的整页截图并排，按区块一一对照：产品实样对产品实样，结尾对结尾。任何一个区块在两个方向里看起来是同一个东西，就回到那个方向的生成引擎重做这个区块。
+首屏做出来后再比一次实际画面：在对比页并排看首屏，眯起眼睛只看明暗块面。块面的分布如果相似，比如都是左边一大块、右边一小块，即使字体和颜色都不同，也回到骨架表重做，不靠换装饰补救。

 ## 北极星与呼应

-北极星选定后，转成少量相互支持的关系：摄影的空旷与标题的留白呼应；窄字形与纵向画面呼应；低饱和环境色与唯一的行动色形成反差。每个方向明确主角、陪衬、重复的节奏和一处结构性突破。
+北极星选定后，转成少量相互支持的关系：图像的尺度和标题的留白怎样呼应，字形的比例和画面的比例怎样呼应，哪一处用反差。每个方向明确主角、陪衬、重复的节奏和一处结构性突破。

-突破要改变结构，例如首屏的骨架、比例或阅读顺序，而不是多加一个装饰；它应增强主题或引导关键动作。精修时不要把有辨识度的选择修平。新增元素不能强化同一意图时，优先省略。大胆的方案也必须可读、可用。
+结构性突破要动的是结构，例如首屏的骨架、比例或阅读顺序，而不是多加一个装饰；它要么让主题更强，要么把人引向关键动作。精修的时候，别把有辨识度的选择磨平。新加的元素如果不能加强同一个意图，就不加。

 ## 让人记住的一刻

-模型做的页面常常处处及格，却没有一处让人记住。惊艳很少来自整页都用力，而是来自一处做到极致：通常是一个组件的一次动作，结果、材质、光影、手感和节奏都做到位。每个方向选一两处集中发力，其余保持安静。
+每个方向选一两处集中发力，其余保持安静。记忆点通常是一个组件的一次动作：结果、材质、光影、手感和节奏都做到位。

 去哪里找：

 - **用户会做的动作。** 点按、拖动、切换、提交，比滚动更容易成为记忆点。
 - **关键时刻。** 付款成功、第一次完成任务、升级、删除、上传、等结果。这些时刻情绪最强，一个小动画的回报最高。
 - **边角页面。** 404、空状态、加载、页脚。没人期待，风险又低，最容易出彩。
- **AI 在工作的时候。** 把过程按顺序展开：步骤一个个亮起，日志一行行流进来，做完的一步收起，正在做的一步展开。白底黑字照样成立，不需要材质和发光。
+- **AI 在工作的时候。** 让过程看得见，进行中和做完的区别落在画面上。白底黑字照样成立，不需要材质和发光。

 怎么想：

- **让结果当场发生。** 状态切换不只换一个图标，而是让被影响的东西当场变化：打开深色模式，整页像拉下遮光帘一样暗下去；拖动时间，画面的天色跟着走。用户看到的是结果，不是控件在表演。
- **把数字画成看得见的量。** 百分比、时长、余额，先问能不能画成一个量：点亮的格子、填满的长度、一格代表一天的网格。数字只是标签，量才是画面。
+- **让结果当场发生。** 状态切换不只换一个图标，而是让被影响的东西当场变化。用户看到的是结果，不是控件在表演。
+- **把数字画成看得见的量。** 百分比、时长、余额，先问能不能画成面积、长度或个数。数字只是标签，量才是画面。
 - **给抽象的状态一种材质。** 先问“这个状态如果是一个实物，会是什么”，答案从产品所在的领域里找。
- **借物件的动作交付结果，物件从用户手上找。** 选这个领域的用户本来就拿在手上的东西：旅行产品用登机牌成立，作品集用登机牌只是借梗。票据、打印机、卡带、老游戏机这类复古实物在灵感站上已经泛滥，用之前先问：这个产品自己的实物是什么。
+- **借物件的动作交付结果，物件从用户手上找。** 选这个领域的用户本来就拿在手上的东西。票据、打印机、卡带、老游戏机这类复古实物在灵感站上已经泛滥，用之前先问：这个产品自己的实物是什么。
 - **给控件物理和性格。** 拖动有弹性和重量，按下有光影变化，拉过头会不情愿地弹回来。
- **画法要说得出来源。** 点阵、字符画、像素、粒子、写实材质这类画法，只有能说出它来自产品做的事时才选：把数据渲染成点阵的研究工具用点阵，长在终端里的工具用字符画。说不出来源就不选；选了就从主视觉一路用到加载、图标和空状态。做法见 [点缀与特效](ornament.md)。
- **一张画面垫底时，界面要退后。** 有情绪的摄影或绘画铺满，界面缩到只剩一行导航和一句话，排版严格；底图虚化或压暗，保证文字可读。
+- **画法要说得出来源。** 点阵、字符画、像素、粒子、写实材质这类画法，只有能说出它来自产品做的事时才选。说不出来源就不选；选了就从主视觉一路用到加载、图标和空状态。

 ## 参考怎样转为设计决定

-先说明参考用途：借鉴视觉关系、建立质量基线，还是精准还原。实际看过图片再描述它的视觉。借鉴时提取关系，例如“标题占主要视觉重量，图像提供情绪，辅助信息压低对比”，再用当前内容重新组织；不要照搬参考的业务模块、标识和文案。隐喻要转译成界面决策，不做成妨碍操作的仿真外壳。
+先说清这份参考拿来做什么：借它的视觉关系，把它当质量的底线，还是照着它精准还原。看过图再描述它长什么样。借鉴时取的是关系，例如“标题最重，图负责情绪，辅助信息压得很淡”，再拿当前的内容重新组织；不照搬参考里的业务模块、标识和文案。借来的隐喻要落成具体的界面决定，不做成一层妨碍操作的仿真外壳。

 参考里没有的东西也是决定。参考的首屏没有标题区和说明段，就不要替它补上；参考没有用的装饰，也不要加回去。

 ## 小样、选择与品味

-先用几句话比较设计意向，再给有希望的方向做代表性小样，不一开始就做多套完整产品。单个页面的小样通常是首屏加最能体现方向的一两个区块；用户明确要完整页面时照做，评审深度仍按探索阶段。方案数量按任务定，窄小的任务不强求多方案。
+方向只做首屏，不一开始就做多套完整产品；轮次和数量见 SKILL.md 步骤 1。

-挑能暴露方向优缺点的代表性页面：含复杂表单的产品不能只做封面，长页面的小样要包含关键内容结构。
+首屏选能暴露方向优缺点的那一页：含复杂表单的产品不能只做封面。

-介绍产品的页面，必须让用户看到产品真正交付的东西：一张生成好的报表、一份导出的合同、一段处理后的真实数据，而不是只用文字承诺“能做什么”。这个实样往往比功能列表更有说服力，也最容易成为页面的第二个主角。需要实际比较多个小样，或由 Agent 自行选定方向时，先使用 [风格对比页](style-explorer.md) 生成对比页留档，再选定方向。
+介绍产品的页面，必须让用户看到产品真正交付的东西：一张生成好的报表、一份导出的合同、一段处理后的真实数据，而不是只用文字承诺“能做什么”。这个实样往往比功能列表更有说服力，也最容易成为首屏以下某一段的主角。

-比较任务适配、辨识度、内容承载、可读性和实现代价，主 Agent 给出推荐依据，由用户选定。选定后请用户用具体的话补充品味：想要什么感受，不要什么、为什么不要，哪些地方要保留。用户只说“再高级一点”时，用上面的翻译表追问，或拿两张小样让用户比较。
+推荐理由从任务适配、辨识度、内容承载、可读性和实现代价里比出来。请用户补充品味时，问想要什么感受、不要什么和为什么、哪些地方要保留。用户只说“再高级一点”时，用上面的翻译表追问，或拿两张小样让用户比较。

 把选定方向和品味写进设计说明，作为后续判断基线。评审提出新风格时，先判断它是否解决原目标；只有当前方向确实不适配，或用户改变目标时，才重新探索。
@@ -0,0 +1,121 @@
+# 说服型页面的概念
+
+落地页、品牌页、发布页、展览页用这份文件，在拆标杆之前开始读。它管五件事：概念从哪来，怎样变成三个方向，没有人挑选时怎样自己选，选定后怎样带到首屏以下，整页的图怎样做成一套。骨架见 [说服型骨架](direction-persuasion.md)，其余流程见 [设计方向](design-direction.md)。
+
+说服型页面先有概念：北极星和生成引擎从选中的概念推出，不另起一个；标题随概念先定，骨架在它之后选，其余文案在骨架之后写。
+
+## 概念是什么
+
+一句话：把这个产品最想让人记住的主张，说成一个画面。标题和主视觉从这一句里一起推出，标题说它，图演它。标题讲卖点、图演示产品界面，是两件并列的事，不算概念。
+
+三条检验，有一条不过就换一个概念，不靠加说明补救：
+
+- 标题和主视觉分开看，各自不完整。主视觉就是文字本身的方向，这一条不适用。
+- 合起来一读就懂。
+- 换到同品类另一家产品上不成立。
+
+概念可以离产品一步远：借一个受众一眼认得、和产品主张同构的事物来说，首屏不必出现产品界面。借来的事物和它的画法，来源就是这句概念，这就是 [设计方向](design-direction.md) 要求说得出的来源。概念只管标题、主视觉和各区块的画面；功能名、按钮、导航和价格用产品本身的说法。
+
+## 概念交给子 Agent 出
+
+主 Agent 看过标杆以后，自己起的方向会回到标杆的首屏上，换几次颜色和字体也一样。同一个模型换一个出发点、不看标杆，给出的想法会远得多。所以概念由全新的子 Agent 出，主 Agent 负责挑。
+
+派 5 个全新的子 Agent，可以和拆标杆同时进行。每个只给产品、受众、和同类的不同，以及一个出发角度；不给标杆截图，不给主 Agent 已有的想法，不给其他子 Agent 的结果。提示词：
+
+```text
+你在给一个产品的落地页想首屏概念。只根据下面的信息想，不查同类产品，不读文件。
+
+产品：<它是什么，替谁做什么，一两句>
+受众：<是谁，来这页之前的处境>
+和同类的不同：<一到三条>
+出发角度：<下面五条之一的原文>
+
+交回 3 个彼此不同的概念，每个写四行：
+1. 概念：一句话，把产品的主张说成一个画面。
+2. 标题：页面上的原文，不超过两行。
+3. 主视觉：首屏最大的那样东西是什么、长什么样，写到能照着画出来。
+4. 只属于这个产品的理由：换到同类另一家为什么不成立。
+
+不写版式、配色、字体和页面的其余部分。
+```
+
+五个出发角度，一个子 Agent 一条：
+
+- **受众的处境**：从受众来这页之前卡在哪、担心什么、想变成什么样出发，不从产品功能出发。
+- **借一样东西**：找一个受众一眼认得、和产品主张同构的事物，用它来说。首屏不出现产品界面。
+- **说反话**：这个品类人人都在说的那句话是什么，从它的反面或它没说的那一半出发。
+- **一句话加一张图**：首屏只有一句话和一张图，图不是产品界面。
+- **另一个领域**：这个主张放到一个和软件无关的领域里会怎样被表现，借那个领域的表现形式。
+
+宿主不能派子 Agent 时，主 Agent 在取标杆画面之前，按这五个角度各写 3 个概念，写完再去拆标杆。后面几处要子 Agent 看图或出画面的，主 Agent 按同样的问题自己做，交付时写明没有隔离。
+
+## 挑三个方向
+
+1. **先删。** 彼此重复的；标题换个产品名也成立的；和拆过的标杆首屏是同一个意思的。
+2. **再验。** 剩下的逐个过三条检验。
+3. **选三个彼此最远的。** 三个概念各不相同，不是同一句话的三种排法；至少一个的主视觉是一张图，画的不是产品界面；以产品实样为主视觉的至多一个。任务只要一个方向时，选检验里最站得住的那一个。
+4. **各写各的。** 标题、副标题和主视觉每个方向各写各的；产品事实和示例数据（名称、功能、价格）共用。副标题用一句平实的话说清产品是什么。
+5. **再选骨架。** 每个概念从 [说服型骨架](direction-persuasion.md) 的表里选骨架，同一轮互不相同。
+6. **写进方向卡。** 方向卡加一栏“概念”：这句概念、来自哪个角度、三条检验的结果。对比页 manifest 的 `concept` 仍填北极星，概念这一句写进 `traits`。
+
+用文字问用户时，每个方向写上标题原文和主视觉是什么。做成首屏时，以图为主视觉的方向各出 4–6 张主图候选，候选之间在主体、构图和画法上拉开，逐张放进首屏后挑一张，不用色块占位；出图前先读 [素材](media.md) 的“写提示词”。这里的截图和下一节派的子 Agent，不算首屏那一轮说的取证和评审。
+
+标杆只提供基线：这页要回答的问题和主动作的位置。标杆首屏的构图不算基线，算套路。
+
+## 自己选定
+
+用户说了“你定”或无人值守时：
+
+1. 把三张首屏截图和标杆的首屏截图（有的话）一起交给一个全新的子 Agent，不给方向名和说明，问三件事：哪一张遮住品牌名会被当成标杆里的某一家；每一张看三秒以后还记得什么；哪一张最让人想往下看，为什么。
+2. 先去掉会被当成标杆的，再从剩下的里选“还记得的东西”最具体的那一个。
+3. “产品解释得不够清楚”不单独作为落选理由：解释可以由副标题和第二屏补上，辨识度补不上。
+4. 写明选了哪个、子 Agent 怎么说、另外两个为什么落选。
+
+请用户挑选时，推荐理由先写这两条：会不会被当成标杆，让人记住的是什么。还没有首屏、只有文字时，主 Agent 自己按这两条判断。
+
+## 把概念带到首屏以下
+
+方向选定后、做完整页面之前做这一步。主 Agent 自己往下排，会回到这个品类的通用区块，概念只剩首尾两处。所以首屏以下每一屏长什么样，同样先让子 Agent 出。
+
+选定的方向以图为主视觉时，先把主图定稿（“整页的图做成一套”第 1 步），后面都以定稿的首屏为准。
+
+再列出这页还要回答的问题，按产品事实写，例如它怎么用、有什么不同、有什么现成的、多少钱、现在做什么。派 3 个全新的子 Agent，每个给首屏的截图、概念、标题、这份问题清单和一个出发角度；不给标杆截图，不给主 Agent 打算怎么排，也不说每个问题通常用什么区块回答。提示词：
+
+```text
+一个落地页的首屏已经定了，附图是它的截图。
+概念：<那一句概念>
+标题：<页面上的原文>
+这页还要回答这些问题：<问题清单>
+出发角度：<下面三条之一的原文>
+
+为这些问题设计首屏以下的几屏，可以合并或调换顺序，让每一屏是首屏那个想法的下一句。每屏写三行：
+1. 小标题：页面上的原文。
+2. 画面：这一屏最大的那样东西是什么、长什么样、和首屏的图是什么关系，写到能照着画出来。
+3. 产品事实落在哪：数字、功能、价格这些必须出现的内容，放在这个画面的什么位置。
+
+不用卡片网格、图标配小标题和通用的示例截图来回答。哪一屏确实只需要文字或一张表，直接说。
+```
+
+三个出发角度，一个子 Agent 一条：
+
+- **同一样东西往下走**：首屏的那样东西在每一屏换一个时刻、角度或局部。
+- **它的同伴**：每一屏一样新的东西，和首屏的图同属一套、同一种画法。
+- **一个连续的变化**：从首屏到结尾是同一件事的经过，每一屏是其中一步。
+
+收齐以后写画面表，再开始做整页。从三份里挑一份，或逐屏挑最好的拼成一份，每屏一行：回答哪个问题、小标题、画面、图从哪来、产品事实落在哪。它就是方向卡里“页面结构”和“各区块的形式”两栏；滚动分镜照常写在“动效”一栏。
+
+- 选定的方向以图为主视觉时，除首屏和结尾外，至少三屏的画面是新做的图，不是主图的裁切或缩放；主图的局部至多用在一屏，结尾可以再用一次主图。这比 [素材](media.md) 的“一张图用多次”严。按“让一张画当舞台”做的方向不在此列，图出现几次照那一节。
+- 价格、功能对比这类必须是表的，表照常做，表头、底或分隔取自同一套素材。
+- 产品实样占其中一屏，放进这套画面里，示例内容从概念里取，不另起一个题材。
+
+整页做完后的逐屏对照按 [方向贯穿整页](direction-whole-page.md) 做，对照的是这张画面表。送评审时，把这句概念摘成一句写进交接的约束。
+
+## 整页的图做成一套
+
+选定的方向以图为主视觉时，图决定页面的上限。
+
+1. **主图定稿。** 候选补到 8–12 张，做首屏时出过的算在内。沿用选定首屏的主体和画法，在姿态、构图和细节上拉开，不是同一句提示词出多张。逐张放进真实首屏，拼成一张并排图一起看，按三条挑：和标题合起来是不是一个意思；文字压不压得住；缩到一半大小还认不认得出主体。写下选了哪张，其余各因为什么落选。选中的用高画质重出或精修，透明底在这一步做。
+2. **其余的图从主图改出来。** 画面表里每一张新图，都拿定稿的主图当参考图来生成，提示词写明沿用它的材质、光向、视角和色板，换的是主体、时刻或角度。宿主不能传参考图时，先把主图的画法写成一段风格说明，原样放进每一条提示词。每张出 2–3 张候选，放进它所在的那一屏再挑。
+3. **再出一两张这一套的材质或底纹。** 用在卡片底、表头和分隔上，页面不留和这套图无关的色块。
+4. **拼素材并排图，交给子 Agent 看。** 主图、画面表里的新图、至少一张材质，拼成一张图存进任务目录。派一个全新的子 Agent，只给这张图，问三件事：哪一张不像同一套；哪一张像通用素材库里的图；哪一张缩小以后认不出主体。被点到的重做。
+5. **放进页面以后接起来。** 逐张对照 [素材](media.md) 的“让图和页面接成一体”：图不装在圆角卡片里；透明底的图跨过区块或卡片的边界；至少一处由代码画的线或标注从图里接出去。
@@ -0,0 +1,25 @@
+# 说服型页面首屏骨架
+
+落地页、品牌页、产品发布页、展览页等以说服、传递理念为主的页面，按本规范选定首屏骨架（整体设计方向流程见 [设计方向](design-direction.md)）。
+
+模型最顽固的习惯是左右分栏，它在写文案之前就定下来了：先想好标题、一段说明、一个按钮，摆好就是左右两栏。所以骨架要在写任何文案之前决定。
+
+每个方向先从下表选一个首屏骨架，再用 3–5 个方框画出首屏线框：每块是什么、占首屏多大面积、阅读从哪里开始。
+
+| 骨架 | 首屏长什么样 |
+| --- | --- |
+| 满版图像压字 | 一张图占满首屏，标题和动作压在图的安全区里 |
+| 居中单一物件 | 一个物件或一句话居中，四周是大面积空白 |
+| 画面即界面 | 首屏就是产品界面或一件实物本身，标题、导航和按钮都长在它上面 |
+| 满版文字 | 文字本身就是画面，字大到占满首屏、跨过边缘或被裁切 |
+| 通栏上下堆叠 | 通栏大标题横跨整个宽度，下面紧接内容 |
+| 网格拼贴 | 多块内容同时出现，按网格或拼贴排列，没有单一主角 |
+| 纵排或斜向 | 文字竖排、斜切或旋转，打破从左到右的阅读 |
+| 左右分栏 | 文字一侧，画面一侧。这是模型的默认，一轮最多一个方向使用，并写出为什么非它不可。另一侧必须是跨越结构的图像、色块或图形装置，不能是装在卡片里的产品界面 |
+
+规则：
+- 同一轮的方向，骨架互不相同。
+- 所谓“大标题九栏、说明三栏”同样算左右分栏。
+- 骨架定好之后再写文案。文案去适应骨架，不让骨架去适应“标题 + 说明 + 按钮”的组合。
+
+构图的大胆程度和调性无关。安静精致的产品，一样可以把一句话放在空白首屏正中，或让纵排标题贯穿整屏，或让界面本身占满首屏。调性决定音量，骨架决定结构；不要因为调性偏安静，就退回左右分栏。
@@ -0,0 +1,15 @@
+# 方向贯穿整页
+
+方向选定、首屏做出来以后，用这份文件把方向延续到首屏以下的每个区块。认品类、定骨架和差异检验见 [设计方向](design-direction.md)。
+
+方向不只属于首屏。首屏以下的每个区块，都要用这个方向自己的语言重新设计，形式从它的生成引擎推出。模型最容易在首屏用尽力气，到了第二屏就回到通用的卡片、分栏和居中结尾。
+
+- **区块的顺序和取舍也属于方向。** 不照“首屏、对象介绍、三步流程、一句结尾”排下来再逐块换样子。由引擎决定先讲什么、合并什么、删什么：可以把流程并进对象介绍，也可以整页只讲一个对象。产品界面也一样。
+- **外壳也是区块。** 导航、行动按钮、结尾区的句式和页脚最容易被忽略，同样要从生成引擎推出自己的形式。
+- **逐区块对照首屏。** 整页截图后逐块看：哪一块换到别的方向里也成立，就回到引擎重做这一块。
+
+几个方向都做成完整页面时（用户要求，或版式变体做到整页），再加三条：
+
+- **候选共享内容，不共享实现。** 同一份示例数据可以共用；区块结构、样式和代码不共用，不把某个区块写成共用模块再给各方向换颜色。产品本身的组件不在此列：设计组件库官网或已有产品时，各方向照常使用同一套真实组件，差异体现在怎样编排和呈现上。
+- **同一条修改意见，翻译成每个方向自己的做法。** 不用同一种实现套到所有方向上。
+- **逐区块横向比较。** 各方向的整页截图并排，按区块一一对照；任何一个区块在两个方向里看起来是同一个东西，就回到那个方向的引擎重做。
@@ -0,0 +1,46 @@
+# 产品界面工作区骨架
+
+画廊、商店、信息流、文档站、后台、工具、App 等让人浏览、挑选内容或处理对象的页面，首屏就是第一排内容本身或工作区（整体设计方向流程见 [设计方向](design-direction.md)）。
+
+页头占几行、首屏放什么的底线见 [设计方向](design-direction.md) 的“定首屏与工作区骨架”。这类页面都没有首屏海报，决定结构的是用户每天面对的对象、对它最常做的动作，以及多久用一次。模型的默认是“左侧栏 + 顶部四张指标卡 + 一张图表 + 一张表格”，不管产品是什么，因为这样不需要理解业务。跳出它的办法和落地页一样：画界面之前先定骨架。
+
+先写三行：
+
+- **核心对象**：用户每天处理的是什么，例如工单、合同、镜头、病床；一眼认出它靠哪两三个属性，例如缩略图、状态、金额、截止时间。再问一句：用户在这个对象上最怕错过什么？通常是一个会随时间变化的量，例如已经等了多久、离截止还剩多少、欠了多少。把它做成对象上最显眼的属性，而不是藏在详情里。
+- **主动词**：对它最常做的动作是逐条处理、比较、创作、安排、定位、推进、监控，还是游玩与操控。
+- **频率**：每天用几小时的专业用户，还是每月来一次的普通人。它决定密度。
+
+再按主动词选工作区骨架：
+
+| 主动词 | 骨架 | 长什么样 |
+| --- | --- | --- |
+| 逐条处理 | 队列 / 收件箱 | 左边队列，右边当前这一条的全部信息和处理动作；处理完自动跳到下一条，键盘可以一路按到底 |
+| 比较与筛选 | 表格 | 行是对象，列是比较依据；筛选、排序和批量操作长在表头与选择状态上，不另开页面 |
+| 创作与编辑 | 画布 / 文档 | 内容占满，工具贴着内容出现，面板按需展开 |
+| 沿时间安排 | 时间线 / 日历 | 横轴是时间，对象是时间上的块，拖动即改期 |
+| 在空间中定位 | 地图 / 平面图 / 座位图 | 对象画在真实位置上，列表只做辅助 |
+| 推进流程 | 看板 / 流水线 | 列是阶段，对象在列之间移动 |
+| 监控 | 仪表 | 只在真的需要持续盯着时使用；每个数字写出正常范围，以及出问题后该做什么 |
+| 对话后产出 | 对话 + 产物 | 对话收窄在一侧，产物占主区域并能直接编辑 |
+| 浏览与挑选 | 画廊 / 货架 / 信息流 | 内容铺满首屏，缩略图的比例就是版式；筛选和排序贴着内容顶部，占一行；点开时在原地展开或用浮层，关上回到原来的位置 |
+| 游玩与操控 | 场景 / 机台 | 被操控的对象和场景占主区，状态贴边，拇指操作区在下方；做法见 [游玩](play.md) |
+
+**文字索引是画廊的一种变体。** 对象靠名字、类型和年份就能区分时，例如作品集、案例、目的地、文章，十到几十项，首屏可以先放一张文字索引：每行是名字加两三个属性，日期和编号用等宽数字。悬停或聚焦某一行时，它的图出现在列表旁的固定位置，不跟着鼠标跑，也不挡住下一行。再给一个“列表 / 图片”切换，切过去仍停在同一个对象上。触屏没有悬停，点一下展开这一行的缩略图。图片本身就是卖点的内容，例如摄影和商品，仍然图片先行。
+
+首页先回答“我现在该处理什么”，而不是“总共有多少”。
+
+**对象的样子就是产品界面的主视觉。** 先设计一个对象在列表行、卡片或画布上的样子：最重要的属性放在哪，状态怎样一眼看出，长名字怎么收，空值怎么显示，选中和处理中长什么样。一个设计好的列表行，比十张指标卡更能体现方向。
+
+**密度按频率定。** 每天用几小时的专业工具，行高 32–40px、正文 13–14px、一屏看到 20 行以上都正常，操作以键盘为先；偶尔来一次的消费产品，点击区域 44px 以上，一屏只要求一个决定。不要给专业工具套消费级的大留白，也不要把一次性的流程塞满控件。密度要在截图上数出来：一屏能看到几个对象，主动作离当前对象有多远。高频工具一屏少于 10 个对象时，先查行高、页面头部和说明文字占了多少高度。
+
+**产品界面的大胆放在哪。** 放在工作区结构、对象的样子和状态的表达上，例如时间在画面里怎样流动、超时怎样一眼跳出来。页面标题和品牌区保持小：一行，和区域标题同级或略大。在高频工具和内容页里放超大页面标题、通栏口号，或者用一整块深色卡片装“下一步”动作，都是把落地页的手法搬错了地方，占掉的是每天要看几百次的工作区。
+
+**顶栏放什么。** 顶部第一行是每天看得最多的位置。先问用户在这一屏需不需要靠品牌认路，需要才放品牌标识：
+
+- **App**：用户点图标进来，已经知道在哪个 App。一级页顶部放当前屏名称（可以用大标题）、当前对象，或最常看的状态，例如余额、连胜、剩余次数；二级页放返回和标题。品牌字标通常不出现在顶部。品牌本身就是入口的信息流首页、启动页、登录与引导页可以放。
+- **网页**：落地页、官网、品牌页、文档站、商店这类访客可能从搜索或分享链接直接落地的页面，左上角放标识，告诉他在哪个站、点它回首页，尺寸和导航同级，不放大成第二个主视觉。登录后的产品工作区和工具，标识收成侧栏或顶栏角上的小图标或工作区切换器。
+- 品牌行和页面标题不在同一处上下叠成两层头部；两样都需要时，合进同一行，或分到侧栏和主区。
+
+画面里的实物铭牌、包装和招牌属于内容，不算顶栏的品牌行。品牌方有明确要求，或方向本身需要字标出现在每一屏时可以放，在方向卡里写出理由。
+
+多个方向时，工作区骨架、对象的样子、导航方式（侧栏、顶栏、命令面板、在空间里跳转）、密度四项，任意两个方向至多一项相同。这四项是在通用差异检验之外再比，不是替代：产品界面同样需要各自的色彩身份和字体性格，不能三个方向都是系统黑体加一种强调色，只换了布局。基于选定方向派生版式时，字体、配色和密度都照选定的方向，只比工作区骨架、对象的样子和导航方式。方向卡里的“首屏骨架”一栏，产品界面填工作区骨架和对象的样子。
@@ -0,0 +1,51 @@
+# 整理已有页面
+
+用户对一页或一块区域不满意，但没说要改成什么样：“别扭”“不好看”“优化一下”“别改太多”。这时不出三个风格，在现有的视觉语言里修。要用户判断的是问题找得对不对：Agent 看得到页面，看不到页面背后的业务。一段看似多余的说明可能是法务要求，一个看似次要的按钮可能是每天都在用的。
+
+范围是整个产品，或者是落地页这类不用和别的页面保持一致的独立页面时，先按 [存量项目](existing-project.md) 的“推翻程度”判断要不要出三档。
+
+## 第一轮：诊断，不改文件
+
+1. 找项目根目录和 docs 里的 `DESIGN.md` 或同类设计文档，有就以它为准，它已经回答的前提不再问。
+2. 用 [截图工具](tools.md) 在桌面和手机宽度各截一张整页，存进任务目录做基线。
+3. 写一句这页是干什么的、用户来了第一眼该看到什么。看不出来就放进要确认的问题里。
+4. 对着截图和样式代码逐项看下面几处，每项都看，不要只挑最显眼的：
+   - 窄屏下有没有文字挤出容器、被截断或折得难看；
+   - 同一列的左边缘、同一行的文字是否对齐；
+   - 同一种按钮、标签、输入框是不是长得一样；
+   - 有没有重复标题意思的说明，或者解释界面怎么用的话；
+   - 一屏里有几个实心主按钮，最该先看到的东西是不是最醒目；
+   - 键盘焦点看不看得见，悬停和按下有没有反馈；
+   - 长名字、空数据、出错时是什么样。
+
+   挑出最影响使用和观感的 3–5 个问题，按影响排序。用户说了哪里不舒服，第一条先说清是什么造成的。
+5. 每个问题归到一类：
+   - **直接修**：文字溢出、没对齐、焦点看不见、同一种组件两种样子这类客观缺陷。
+   - **请确认**：要靠业务和用户情况才能判断的，例如某段文字能不能删、某个按钮用得多不多、这么密算不算挤。把背后的猜测写出来，例如“我猜这个按钮很少用”。
+6. 问题的位置用文字说不清时，例如对齐、间距、某一块区域，诊断定稿后用截图工具的 `--mark "1=选择器; 2=选择器" --full` 标出来，核对图上的编号和诊断一致。
+
+把诊断发给用户，**这一轮到此结束，不改任何文件**，“直接修”的条目也等到下一轮再改。消息照这个样子写：
+
+```text
+这页是……，用户来了先要看到……
+1.【直接修】看到……，因为……，打算……
+2.【请确认】看到……，我猜……，所以打算……
+标注截图：<路径>（标了才写）
+请按编号回复对不对，不对的说一下原因。
+```
+
+只有用户说了直接改，或者无人值守时，才不等回复，直接进入第二轮，把“请确认”的条目写进交付说明，标为假设。
+
+## 第二轮：改
+
+- 改“直接修”的条目和用户确认过的条目，按 [存量项目](existing-project.md) 的“从源头修改”落到现有变量和组件上。不换字体、颜色和组件的样子。
+- 用户否定的条目和理由，项目有设计规范文件时写进去，标用户确认。
+- 纯口味的选择不按 SKILL.md 步骤 1 用文字问，在那一处做两个局部版本放进对比页。
+
+## 交付
+
+- 现状和整理后的版本，用同样的视口和数据放进 [对比页](style-explorer.md)。
+- 编号的改动清单，每条一句“问题 → 改法”，用户可以按编号撤回。
+- 一到三条看到了但没改的，需要升级或重塑才能解决的也放这里，问用户要不要看看。
+- 设计说明只写诊断、确认结果和改动清单。
+- 评审按 [存量项目](existing-project.md) 的“各类改动怎样评审”。
@@ -0,0 +1,186 @@
+# 存量项目：改流程与加新功能
+
+## 目录导航
+
+- [先用，再想](#先用再想)
+  - [用用户的话写任务](#用用户的话写任务)
+  - [先定产出物](#先定产出物)
+  - [走一遍，边走边数](#走一遍边走边数)
+  - [写理想路径](#写理想路径)
+  - [从现象找到原因](#从现象找到原因)
+  - [补丁自查](#补丁自查)
+  - [不知道从哪改时](#不知道从哪改时)
+- [改流程与加新功能](#改流程与加新功能)
+  - [读出产品的习惯](#读出产品的习惯)
+  - [三种立场](#三种立场)
+  - [方案卡](#方案卡)
+  - [放进对比页](#放进对比页)
+  - [评审](#评审)
+- [这时读哪些参考](#这时读哪些参考)
+
+改流程和加新功能改的是做法与结构，视觉沿用现有系统（视觉优化与规范收敛见 [存量项目](existing-project.md)）。
+
+## 先用，再想
+
+改流程和加新功能都从这里开始。存量项目的问题大多不在画面上，在流程里：看截图只能看出间距和颜色，要知道该改什么，先把任务亲手走一遍。
+
+### 用用户的话写任务
+
+动手前写一句话：用户是谁，来做什么，做完想拿到什么。只用用户自己的词，不出现界面上的名词。写“把上周没回复的客户标成待跟进”，不写“在列表里筛选并批量修改状态”。后面每一屏、每一步都拿这句话衡量：它让任务前进了，还是让用户在伺候界面。
+
+写不出这句话，先问用户，不先看界面。
+
+### 先定产出物
+
+很多功能的结果是一样东西：一份清单、一个文件、一条消息、一页摘要。结果是一样东西时，先把它写出来，再想界面：
+
+- 谁收到它，收到后要拿它做什么。收的是人，要一眼看懂；收的是系统或程序，要能直接用。
+- 里面缺了什么就用不了。按收件方的需要列，不按界面上现成有什么列。
+- 用户今天凑合时亲手带走的是什么。这是产出物的下限，新功能不能比它少。
+- 产品里已经有、用户却得自己翻出来的东西，系统补进去。
+
+把最好的那一份产出物直接写成样例，放在设计说明里。例如食谱应用的“生成购物清单”，样例就是一份真的清单：按超市货架分区、合并重复的食材、标出家里常备的。样例写不出来，或者和用户凑合的办法没有区别，先回来修产出物，不开方案。
+
+产出物定好后，各个方案都交付同一份。方案之间差的是用户为它做多少、系统替他做多少，不是谁的产出物好一点。
+
+### 走一遍，边走边数
+
+用真实或脱敏后的数据，从用户实际的入口走到能看到的结果。记下卡住、走错、犹豫和多余的步骤，同时数四个数，写进任务目录：
+
+- **步数**：到结果要几次点击、几次页面切换。
+- **决定数**：界面问了用户几个问题，其中几个系统其实已经知道答案。
+- **记忆负担**：有几样东西要从一屏带到另一屏，靠脑子记、复制粘贴或开两个标签。
+- **回头路**：出错或改主意时要退回几步，丢掉什么。
+
+记成一张表，现状、理想路径和每个方案各占一行，后面每次计数都往这张表里加：
+
+| | 点击 | 页面切换 | 决定（其中系统已知） | 记忆负担 | 回头路 | 寻找与阅读 |
+| --- | --- | --- | --- | --- | --- | --- |
+| 现状 | 8 | 6 | 6（1） | 3 件作品和用途 | 刷新后重选筛选，丢掉候选 | 滚动两屏才找到第三件 |
+
+点击和页面切换分开记，不相加；回头路写退回几步、丢了什么；滚动找了很久、读了很多才做出的决定，即使不算点击，也记在最后一列。表格上方写一行计数口径，例如键盘操作算不算点击。现状、理想路径和每个方案都用同一个任务、同一批数据和同一套口径来数，否则数字不能互相比较。
+
+再走一遍坏路径：输入错、名称很长、数据为空、上千行、权限不足、中途离开再回来。存量项目最常见的问题都来自真实数据。
+
+每处犹豫归为一类：不知道从哪开始，不知道点了会怎样，不知道成功没有，不知道怎么回去。
+
+加新功能时没有现成流程可走，就走它旁边的现有流程，再走用户今天凑合的办法：复制粘贴、导出表格、在备注里打标记。凑合的办法证明需求存在，也往往指向最自然的入口。
+
+### 写理想路径
+
+这一步不能省。假设现有界面不存在：用户从说出意图到看到结果，最少要做几个决定，每个决定需要看到什么。把它和现状的步骤并排，多出来的每一步都是结构上的机会。
+
+找问题，得到的往往是补丁；从结果往回推，得到的才是结构上的改法。
+
+### 从现象找到原因
+
+走查记下的是现象。每条往下问为什么，直到落进下面五种原因之一，每种原因都有自己的改法方向：
+
+| 原因 | 怎么认出来 | 往哪改 |
+| --- | --- | --- |
+| 做决定的地方没有做决定要用的信息 | 要开另一页、来回切换、靠记忆 | 把信息搬到做决定的地方：行内、侧面板、预览 |
+| 功能长在用户不会去找的地方 | 犹豫发生在找入口；对象没有自己的家 | 搬到对象上，或搬到用户出发的地方 |
+| 流程的形态和任务不匹配 | 一步能做完的拆成向导；可撤销的还要确认；几十条要逐条打开再退回 | 换骨架：队列、行内编辑、批量；去掉确认，改成可撤销。骨架见 [产品界面工作区骨架](direction-workspace.md) |
+| 系统知道的事让用户再做一遍 | 要填系统已有的值；要选只有一个合理答案的选项；要手动触发每次都做的事 | 预填、给默认值、自动执行并可撤销 |
+| 状态看不见 | 做完没有变化；进行中看不出来；出了错要自己去找 | 把状态做成对象上的属性，在列表里就能看到 |
+
+间距、颜色、文案不在表里。它们是症状或精修项，记下来放到最后，不混进原因。
+
+三个例子：
+
+- **现象**：给上周没回复的客户标“待跟进”，每条都要点进详情、改状态、返回，列表回到顶部，再重新找下一条。**原因**：用户在逐条处理，骨架却是“表格加详情页”，改状态被放在了详情里。**补丁**：记住滚动位置。**结构上的改法**：筛选“未回复”后在行上直接改状态；或者左边队列、右边详情，处理完自动跳到下一条；或者全选后一步批量标记。
+- **现象**：新建合同有 14 个字段，填到一半去查客户编号，回来表单空了。**表面原因**：没有草稿。**根本原因**：表单在要系统已经知道的东西；入口在顶级菜单“合同”，用户却是从某个客户出发想建合同的，客户信息在入口处就丢了。**补丁**：加草稿，加“编号在哪里找”的提示。**结构上的改法**：入口移到客户详情页，客户相关字段全部带出，只剩三四个真正要判断的字段，放在侧面板里，下面的客户信息仍然看得见。
+- **现象**：首页是四张指标卡，用户每天进来直接点“工单”菜单。**原因**：首页回答“总共有多少”，用户每天要知道的是“现在该处理什么”。**补丁**：给指标卡加趋势箭头。**结构上的改法**：首页就是待处理队列的前几条，最显眼的属性是已经等了多久；指标收成一行小字。
+
+### 补丁自查
+
+每条建议写完，过一遍下面五个问题，任何一个答不上来就是补丁：
+
+- 它是在加一个东西（提示、引导、确认、说明文字、徽章、空状态插画），还是改掉或删掉一个东西？加东西之前，先回答界面为什么让人看不明白，那个答案才是真问题。
+- 把根本原因修掉以后，它还需要存在吗？
+- 改完之后，步数、要记住的事、要切换的页面，至少有一样变少了吗？
+- 第十次用的人会被它打扰吗？引导和确认对熟手是负担。
+- 能用用户的话说出改善吗：“现在不用再……”。
+
+补丁可以做，单独列为“今天就能改”，不冒充方案。
+
+### 不知道从哪改时
+
+用户只说这页难用，没说哪里难用，就按这页的主要任务走一遍、写理想路径，把差距最大的三处按影响排好，每处写清用户能少做什么，附截图，交给用户挑。用户挑了再继续。
+
+## 改流程与加新功能
+
+走查、理想路径和产出物样例都写完之后，才开始想方案；还没看过现有代码和页面就定下的方案，只是在三种立场的格子里填空。
+
+视觉全部沿用：同一套设计变量、组件、图标和动效，不换字体和主色，不另做控件。多个方案之间能看出差别的只有三件事：出现在哪里，要几步，谁在做事。产出物不在其中：它在“先定产出物”里定过一次，每个方案都交付同一份最好的。产品里没有现成的控件时，例如第一次出现输入框，单独列出，从现有控件的样子推出来：圆角、描边、字号、文字颜色，以及悬停、聚焦和出错的样子，都和现有的按钮、筛选和菜单一致。不用浏览器默认样式，也不随手写一套通用表单样式。
+
+### 读出产品的习惯
+
+新功能和新流程要像这个产品原来就有的。从现有界面读出下面几项，各写一行，后面每个方案都遵守：
+
+- **对象**：导航和列表第一列里的名词，就是用户认的东西。哪些有自己的列表页，哪些只在详情里出现。新功能是哪个对象上的事；要不要引入新对象，这是大决定，写出理由。
+- **动作**：按钮和菜单上的词，就是用户认的动作。新功能能不能用已有的动词说出来。
+- **出发方向**：用户是先找到对象再做事，还是先选动作再找对象。
+- **节奏**：一次处理一件还是批量；马上完成还是进后台任务。
+- **承载**：详情开新页面还是侧面板；编辑用弹窗还是行内。
+- **反馈**：成功后是原地高亮、角落提示还是跳转。
+
+这些习惯默认沿用。打破某一条时，说出来自这个任务的理由。
+
+再看两三家同类产品：这个功能长在哪里、要几步、系统替用户做了什么、用户最后拿到什么，各写一行。能上网就真的打开看；凭记忆写的，标明是记忆。只看这一个功能，不拆整个产品。
+
+### 三种立场
+
+每个方案先选一种立场，再在立场里把流程想完整：
+
+| 立场 | 用户做什么 | 适合 |
+| --- | --- | --- |
+| 顺手 | 在原来的地方多做一件事：行内、选中后、对象的操作菜单里，不新增页面和对象 | 简单、依附于现有对象、做完就走 |
+| 自动 | 系统替用户做一个他本来要自己做的判断或整理，用户只看结果、改例外、撤销 | 规则明确、错了能撤回、每次做法都一样 |
+| 专用 | 给这件事一个自己的地方：新页面、新面板或新工作区，相关信息和状态摊开 | 高频、步骤多、要连续处理或对照 |
+
+三种立场是备选，不是配额。先问每种立场在这个任务里能不能写出一个站得住的做法，写得出几个做几个；凑不出就少做一个并说明理由，不把一种立场做成两个方案，也不把一种立场硬套成一个方案。
+
+“自动”要说得出系统替用户判断了什么。把已有数据拼在一起、换个地方显示、少点一次，都不算自动。只有现有数据真的能支撑这个判断时才选它；数据和接口做不到，就不做这个方案。
+
+立场只决定入口、流程的形态和承载方式；对象、动作的位置、组件和反馈方式，按上一节读出的习惯沿用。
+
+### 方案卡
+
+改流程和加新功能用这张卡代替设计方向里的方向卡，每项一两行：
+
+| 字段 | 写什么 |
+| --- | --- |
+| 立场 | 顺手、自动或专用 |
+| 入口 | 用户在哪里、看着什么时碰到它 |
+| 步骤 | 从意图到结果，一行一步，旁边并排现状的步骤或理想路径 |
+| 修了什么 | 对照“从现象找到原因”的表，修的是哪一条 |
+| 拿到什么 | 和“先定产出物”里的样例一致。做方案时发现样例要增减，先改共同的样例，再同步到所有方案 |
+| 值得 | 用用户的话写一句改善：“现在不用再……”或“现在能……”。写不出来，这个方案不值得做 |
+| 出错时 | 失败后用户在哪里，什么被保留了 |
+| 赌注 | 押的是用户的哪种习惯或场景 |
+| 放弃什么 | 它做不好的场景 |
+
+差异检验先看一样，再比两样。先看每个方案的产出物有没有达到样例，差一截就先补，否则几个方案都只是在给一份没用的东西找入口。再比入口是否不同、步数或系统替用户做的事是否不同；两个方案这两样都一样，就是同一个方案换了皮，换一种立场重做。
+
+### 放进对比页
+
+候选直接在项目里实现，不另写一套静态页：用独立路由或查询参数切换，例如在原地址后加 `?variant=b`，每个方案都用真实的组件和数据。对比页用本地地址作为候选，现状作为基线放在第一位，交付时开发服务器开着，见 [风格对比页](style-explorer.md)。
+
+用户要求先看方案、选定后再动代码时，不改业务路由和组件，在任务目录里做可操作的小样，用现有的设计变量和真实数据，见 [风格对比页](style-explorer.md) 的 `"interactive": true`。
+
+对比页里每个候选只有一个画面，选三个方案差别最大的那一刻，通常是入口或关键的一步，不选结果页，结果页在各种做法下往往长得一样。功能的结果是一样东西时，另外把产出物样例原样放进对比页的说明，让用户看到他最后拿到的是什么。`traits` 写立场、入口和步数，让用户在卡片上就能比较做法；字体和色板三个方案填同一组现有的值。
+
+### 评审
+
+不打视觉分，不跑评分循环。交付对比页时推荐给用户的下一步，是下面这一轮方案评审，不是 SKILL.md 步骤 4 的视觉评审和多方向横向评审。给用户之前，自己按任务那句话把每个方案走一遍，记下卡住、走错和犹豫，写进对比页的说明。用户同意后，有隔离执行者时按 [评审循环与扩展派发](review-loop.md) 的“评审改流程和加新功能的方案”评一轮。
+
+选定并实现后，再走一遍，在同一张表里加一行，和现状并排写进交付说明。各列都没有改善时，先查是不是只改了皮，回到“从现象找到原因”；改善体现在入口更容易找到、更少出错或更容易恢复时，用卡住、走错、犹豫次数的变化说明；只减少出错、没有减少步骤和记忆负担的改动，写明它防的是哪种错，归为防错，不当作结构上的改法。视觉评审按 [存量项目](existing-project.md) 的“各类改动怎样评审”。
+
+计数表只量路程，不量结果。另写一行：拿到产出物的人能不能不加工直接用；不能，先修产出物，再谈步数。
+
+## 这时读哪些参考
+
+改流程和加新功能时，先用这几处：[产品界面工作区骨架](direction-workspace.md)，[交互与状态](interaction-and-state.md) 的“先走通用户任务”“动作层级”“按范围表达状态”和“模型在交互上的默认做法”，[空间、滚动与浮层](layout-surfaces.md) 的“选择承载方式”。
+
+[视觉自查与精修](visual-polish.md) 的“细节”和“模型默认审美自查”、三处基本动效，留到方案选定、开始精修时再用。太早拿出来，注意力会被圆角和线框占满。例外是方案里第一次出现的东西，例如新的输入框、面板或浮层：交给用户之前就按“细节”检查一遍，用户挑方案时看的就是画面。
@@ -1,14 +1,25 @@
 # 存量项目

-在已有仓库里改界面，先分清用户要什么。优化 UI、改流程、加新功能，要改的东西和要锁住的东西正好相反：优化 UI 改的是视觉语言，流程和功能沿用；改流程和加新功能改的是做法，视觉沿用。弄混了，要么在一个本来就平庸的系统上修修补补，要么三个方案只是同一条流程换了皮。
+## 目录导航
+
+- [先分清意图](#先分清意图)
+- [先摸清现状](#先摸清现状)
+- [优化 UI](#优化-ui)
+- [改流程与加新功能](#改流程与加新功能)
+- [各类改动怎样评审](#各类改动怎样评审)
+- [从源头修改](#从源头修改)
+- [设计规范文件](#设计规范文件)
+- [验证](#验证)
+
+在已有仓库里改界面，先分清用户要什么。优化 UI、改流程、加新功能，要改的东西和要锁住的东西正好相反：优化 UI 改的是视觉语言，流程和功能沿用；改流程和加新功能改的是做法，视觉沿用。

 ## 先分清意图

 | 用户想要 | 常见说法 | 要改的东西 | 锁住的东西 | 多个方案差在哪 |
 | --- | --- | --- | --- | --- |
 | 优化 UI | 不好看、太土、不统一、想更高级 | 层级、字体关系、色彩比例、密度、组件的样子 | 品牌资产，以及用户点名保留的部分 | 推翻现状的程度，见“优化 UI” |
-| 改流程 | 难用、步骤多、找不到、老出错 | 入口、步骤、承载方式、状态的表达 | 视觉沿用现有系统 | 做法，见“改流程与加新功能” |
-| 加新功能 | 加一个……、新做一页 | 新功能的做法 | 视觉沿用现有系统 | 做法，见“改流程与加新功能” |
+| 改流程 | 难用、步骤多、找不到、老出错 | 入口、步骤、承载方式、状态的表达 | 视觉沿用现有系统 | 做法，见 [改流程与加新功能](existing-project-workflow.md) |
+| 加新功能 | 加一个……、新做一页 | 新功能的做法 | 视觉沿用现有系统 | 做法，见 [改流程与加新功能](existing-project-workflow.md) |

 从请求推断意图，推断不出来时问一句。一个请求同时包含几种意图时，先定流程，再定视觉：流程决定页面上有什么，视觉决定它们长什么样。流程方案选定后，视觉的几个方案都建在这个流程上；最初的基线截图留着，做最后的前后对比。

@@ -20,6 +31,8 @@

 只看和这次改动有关的范围，不通读整个项目：

+- **设计规范文件**：先找项目根目录和 docs 里写界面视觉的 `DESIGN.md`、`design.md` 或同类文档，有就按下面“设计规范文件”一节的“读”来用。
+- **新旧并存**：设计规范文件没写明时，有的页面已经换了新样式表或新组件、其他页面还是旧的，说明迁移做到一半。用 git 记录看哪套更新，跟随更新的那套，在交付说明里写明依据；拿不准时问用户。不要把旧的那套当成现有视觉语言。
 - **组件和同类页面**：已有哪些组件，同类任务在别的页面是怎么做的，哪些做对了可以沿用，哪些本身就是问题。
 - **项目自己的门槛**：先看仓库的检查脚本和规范，例如动效只能用哪些时长变量、文案键怎样写才能通过 i18n 检查、各页面的性能预算、组件交付要声明哪些依赖。设计实现从第一行就按这些规则写，不要做完再返工。
 - **基线截图**：改动前，在目标视口截下相关页面和关键状态，包括空数据、加载、错误和长内容，存到任务目录。之后的前后对比用同样的视口、数据和状态。
@@ -61,11 +74,10 @@

 然后按下面的顺序决定做哪几档，前一条成立就不看后一条：

-1. **用户说了改多少**，按用户说的做。
-2. **范围是整个产品，或者是一个不用跟着改的页面**，三档各出一个方案，和现状一起放进对比页，让用户直接看到改到哪一步是什么样。规范体检认为现有规范是好的，升级和重塑也照出，只是都保留品牌资产。
-3. **范围是一个要跟着改的页面、一个组件或一处区域**，只做整理：在现有的视觉语言里重排布局和层级，不换字体、色彩和组件的样子。体检认为规范本身有问题时，在交付说明里写明升级或重塑会连带改到哪些页面，问用户要不要把范围扩大。
-
-只做整理时，也把现状和整理后的版本放进对比页，交付时问一句要不要看看升级或重塑的样子；不改完就交，让用户连原来是什么样都看不到。
+1. **用户说了改多少**，按用户说的做。只说小改、别大改的，按 [整理已有页面](existing-polish.md) 做。
+2. **设计规范文件里已有用户确认的规范，用户这次也没要求重新探索**，列在待迁移里的页面按规范迁移，其他页面在规范内整理，不再出三档；规范不够用时补进文件，交付时说明。之后按“给已有界面评审”看一轮，标准是这份文件。
+3. **范围是整个产品，或者是一个不用跟着改的页面**，三档各出一个方案，和现状一起放进对比页，让用户直接看到改到哪一步是什么样。动手之前先按 SKILL.md 步骤 1 的“先用文字问一次”把它们写给用户，用户从文字里定得下来就只做选中的那一个。规范体检认为现有规范是好的，升级和重塑也照出，只是都保留品牌资产。
+4. **范围是一个要跟着改的页面、一个组件或一处区域**，只做整理，按 [整理已有页面](existing-polish.md) 先诊断、再确认、再改：在现有的视觉语言里重排布局和层级，不换字体、色彩和组件的样子。体检认为规范本身有问题时，在交付说明里写明升级或重塑会连带改到哪些页面，问用户要不要把范围扩大。

 范围是整个产品时，升级和重塑的方案要能推广出去：写明换掉的字体、颜色和组件会影响哪些页面，并拿至少一个其他页面检查新规范放上去是否成立。产品里任何地方都没有出现过的字体和颜色，只在重塑档里引入。

@@ -73,170 +85,15 @@

 各档要写的东西不同，不要每档都填完整的方向卡：

- **整理**：不写方向卡。列出要收拢的视觉值和要统一的组件，写清各自收到哪个语义角色。
+- **整理**：不写方向卡，按 [整理已有页面](existing-polish.md) 写诊断和确认结果；要收拢的视觉值和组件，写清各自收到哪个语义角色。
 - **升级**：只写北极星、字体、色彩和记忆点四项，从这个产品的品类和内容里推出来，不是把组件库默认样式换成另一套默认样式。
- **重塑**：按设计方向走完整流程，写完整的方向卡，默认保留品牌资产，除非用户要求更换。
+- **重塑**：按设计方向走完整流程，写完整的方向卡，默认保留品牌资产，除非用户要求更换。三档并排给用户挑时，重塑只放一个代表方案；用户选了重塑，再按 SKILL.md 步骤 1 出三个方向。

-选定以后，新规范先落到共享的设计变量和组件上，在一个代表性页面上做完整、确认，再逐页迁移，不一次重写所有页面。之后的评审以新规范为标准。
-
-## 先用，再想
-
-改流程和加新功能都从这里开始。存量项目的问题大多不在画面上，在流程里：看截图只能看出间距和颜色，要知道该改什么，先把任务亲手走一遍。
-
-### 用用户的话写任务
-
-动手前写一句话：用户是谁，来做什么，做完想拿到什么。只用用户自己的词，不出现界面上的名词。写“把上周没回复的客户标成待跟进”，不写“在列表里筛选并批量修改状态”。后面每一屏、每一步都拿这句话衡量：它让任务前进了，还是让用户在伺候界面。
-
-写不出这句话，先问用户，不先看界面。
-
-### 先定产出物
-
-很多功能的结果是一样东西：一份清单、一个文件、一条消息、一页摘要。结果是一样东西时，先把它写出来，再想界面：
-
- 谁收到它，收到后要拿它做什么。收的是人，要一眼看懂；收的是系统或程序，要能直接用。
- 里面缺了什么就用不了。按收件方的需要列，不按界面上现成有什么列。
- 用户今天凑合时亲手带走的是什么。这是产出物的下限，新功能不能比它少。
- 产品里已经有、用户却得自己翻出来的东西，系统补进去。
-
-把最好的那一份产出物直接写成样例，放在设计说明里。例如食谱应用的“生成购物清单”，样例就是一份真的清单：按超市货架分区、合并重复的食材、标出家里常备的。样例写不出来，或者和用户凑合的办法没有区别，先回来修产出物，不开方案。
-
-产出物定好后，各个方案都交付同一份。方案之间差的是用户为它做多少、系统替他做多少，不是谁的产出物好一点。
-
-### 走一遍，边走边数
-
-用真实或脱敏后的数据，从用户实际的入口走到能看到的结果。按 [视觉评审协议](visual-review.md) 的“任务走查”记下卡住、走错、犹豫和多余的步骤，同时数四个数，写进任务目录：
-
- **步数**：到结果要几次点击、几次页面切换。
- **决定数**：界面问了用户几个问题，其中几个系统其实已经知道答案。
- **记忆负担**：有几样东西要从一屏带到另一屏，靠脑子记、复制粘贴或开两个标签。
- **回头路**：出错或改主意时要退回几步，丢掉什么。
-
-记成一张表，现状、理想路径和每个方案各占一行，后面每次计数都往这张表里加：
-
-| | 点击 | 页面切换 | 决定（其中系统已知） | 记忆负担 | 回头路 | 寻找与阅读 |
-| --- | --- | --- | --- | --- | --- | --- |
-| 现状 | 8 | 6 | 6（1） | 3 件作品和用途 | 刷新后重选筛选，丢掉候选 | 滚动两屏才找到第三件 |
-
-点击和页面切换分开记，不相加；回头路写退回几步、丢了什么；滚动找了很久、读了很多才做出的决定，即使不算点击，也记在最后一列。表格上方写一行计数口径，例如键盘操作算不算点击。现状、理想路径和每个方案都用同一个任务、同一批数据和同一套口径来数，否则数字不能互相比较。
-
-再走一遍坏路径：输入错、名称很长、数据为空、上千行、权限不足、中途离开再回来。存量项目最常见的问题都来自真实数据。
-
-每处犹豫归为一类：不知道从哪开始，不知道点了会怎样，不知道成功没有，不知道怎么回去。
-
-加新功能时没有现成流程可走，就走它旁边的现有流程，再走用户今天凑合的办法：复制粘贴、导出表格、在备注里打标记。凑合的办法证明需求存在，也往往指向最自然的入口。
-
-### 写理想路径
-
-这一步不能省。假设现有界面不存在：用户从说出意图到看到结果，最少要做几个决定，每个决定需要看到什么。把它和现状的步骤并排，多出来的每一步都是结构上的机会。
-
-找问题，得到的往往是补丁；从结果往回推，得到的才是结构上的改法。
-
-### 从现象找到原因
-
-走查记下的是现象。每条往下问为什么，直到落进下面五种原因之一，每种原因都有自己的改法方向：
-
-| 原因 | 怎么认出来 | 往哪改 |
-| --- | --- | --- |
-| 做决定的地方没有做决定要用的信息 | 要开另一页、来回切换、靠记忆 | 把信息搬到做决定的地方：行内、侧面板、预览 |
-| 功能长在用户不会去找的地方 | 犹豫发生在找入口；对象没有自己的家 | 搬到对象上，或搬到用户出发的地方 |
-| 流程的形态和任务不匹配 | 一步能做完的拆成向导；可撤销的还要确认；几十条要逐条打开再退回 | 换骨架：队列、行内编辑、批量；去掉确认，改成可撤销。骨架见 [设计方向](design-direction.md) 的“产品界面” |
-| 系统知道的事让用户再做一遍 | 要填系统已有的值；要选只有一个合理答案的选项；要手动触发每次都做的事 | 预填、给默认值、自动执行并可撤销 |
-| 状态看不见 | 做完没有变化；进行中看不出来；出了错要自己去找 | 把状态做成对象上的属性，在列表里就能看到 |
-
-间距、颜色、文案不在表里。它们是症状或精修项，记下来放到最后，不混进原因。
-
-三个例子：
-
- **现象**：给上周没回复的客户标“待跟进”，每条都要点进详情、改状态、返回，列表回到顶部，再重新找下一条。**原因**：用户在逐条处理，骨架却是“表格加详情页”，改状态被放在了详情里。**补丁**：记住滚动位置。**结构上的改法**：筛选“未回复”后在行上直接改状态；或者左边队列、右边详情，处理完自动跳到下一条；或者全选后一步批量标记。
- **现象**：新建合同有 14 个字段，填到一半去查客户编号，回来表单空了。**表面原因**：没有草稿。**根本原因**：表单在要系统已经知道的东西；入口在顶级菜单“合同”，用户却是从某个客户出发想建合同的，客户信息在入口处就丢了。**补丁**：加草稿，加“编号在哪里找”的提示。**结构上的改法**：入口移到客户详情页，客户相关字段全部带出，只剩三四个真正要判断的字段，放在侧面板里，下面的客户信息仍然看得见。
- **现象**：首页是四张指标卡，用户每天进来直接点“工单”菜单。**原因**：首页回答“总共有多少”，用户每天要知道的是“现在该处理什么”。**补丁**：给指标卡加趋势箭头。**结构上的改法**：首页就是待处理队列的前几条，最显眼的属性是已经等了多久；指标收成一行小字。
-
-### 补丁自查
-
-每条建议写完，过一遍下面五个问题，任何一个答不上来就是补丁：
-
- 它是在加一个东西（提示、引导、确认、说明文字、徽章、空状态插画），还是改掉或删掉一个东西？加东西之前，先回答界面为什么让人看不明白，那个答案才是真问题。
- 把根本原因修掉以后，它还需要存在吗？
- 改完之后，步数、要记住的事、要切换的页面，至少有一样变少了吗？
- 第十次用的人会被它打扰吗？引导和确认对熟手是负担。
- 能用用户的话说出改善吗：“现在不用再……”。
-
-补丁可以做，单独列为“今天就能改”，不冒充方案。
-
-### 不知道从哪改时
-
-用户只说“优化一下这页”，没说哪里难用，就按这页的主要任务走一遍、写理想路径，把差距最大的三处按影响排好，每处写清用户能少做什么，附截图，交给用户挑。用户挑了再继续。
+选定以后，新规范先落到共享的设计变量和组件上，在一个代表性页面上做完整、确认，再逐页迁移，不一次重写所有页面。之后的评审以新规范为标准。代表性页面做完后，按下面的“设计规范文件”把选定的规范写进项目。

 ## 改流程与加新功能

-走查、理想路径和产出物样例都写完之后，才开始想方案；还没看过现有代码和页面就定下的方案，只是在三种立场的格子里填空。
-
-视觉全部沿用：同一套设计变量、组件、图标和动效，不换字体和主色，不另做控件。多个方案之间能看出差别的只有三件事：出现在哪里，要几步，谁在做事。产出物不在其中：它在“先定产出物”里定过一次，每个方案都交付同一份最好的。产品里没有现成的控件时，例如第一次出现输入框，单独列出，从现有控件的样子推出来：圆角、描边、字号、文字颜色，以及悬停、聚焦和出错的样子，都和现有的按钮、筛选和菜单一致。不用浏览器默认样式，也不随手写一套通用表单样式。
-
-### 读出产品的习惯
-
-新功能和新流程要像这个产品原来就有的。从现有界面读出下面几项，各写一行，后面每个方案都遵守：
-
- **对象**：导航和列表第一列里的名词，就是用户认的东西。哪些有自己的列表页，哪些只在详情里出现。新功能是哪个对象上的事；要不要引入新对象，这是大决定，写出理由。
- **动作**：按钮和菜单上的词，就是用户认的动作。新功能能不能用已有的动词说出来。
- **出发方向**：用户是先找到对象再做事，还是先选动作再找对象。
- **节奏**：一次处理一件还是批量；马上完成还是进后台任务。
- **承载**：详情开新页面还是侧面板；编辑用弹窗还是行内。
- **反馈**：成功后是原地高亮、角落提示还是跳转。
-
-这些习惯默认沿用。打破某一条时，说出来自这个任务的理由。
-
-再看两三家同类产品：这个功能长在哪里、要几步、系统替用户做了什么、用户最后拿到什么，各写一行。能上网就真的打开看；凭记忆写的，标明是记忆。只看这一个功能，不拆整个产品。
-
-### 三种立场
-
-每个方案先选一种立场，再在立场里把流程想完整：
-
-| 立场 | 用户做什么 | 适合 |
-| --- | --- | --- |
-| 顺手 | 在原来的地方多做一件事：行内、选中后、对象的操作菜单里，不新增页面和对象 | 简单、依附于现有对象、做完就走 |
-| 自动 | 系统替用户做一个他本来要自己做的判断或整理，用户只看结果、改例外、撤销 | 规则明确、错了能撤回、每次做法都一样 |
-| 专用 | 给这件事一个自己的地方：新页面、新面板或新工作区，相关信息和状态摊开 | 高频、步骤多、要连续处理或对照 |
-
-三种立场是备选，不是配额。先问每种立场在这个任务里能不能写出一个站得住的做法，写得出几个做几个；凑不出就少做一个并说明理由，不把一种立场做成两个方案，也不把一种立场硬套成一个方案。
-
-“自动”要说得出系统替用户判断了什么。把已有数据拼在一起、换个地方显示、少点一次，都不算自动。只有现有数据真的能支撑这个判断时才选它；数据和接口做不到，就不做这个方案。
-
-立场只决定入口、流程的形态和承载方式；对象、动作的位置、组件和反馈方式，按上一节读出的习惯沿用。
-
-### 方案卡
-
-改流程和加新功能用这张卡代替设计方向里的方向卡，每项一两行：
-
-| 字段 | 写什么 |
-| --- | --- |
-| 立场 | 顺手、自动或专用 |
-| 入口 | 用户在哪里、看着什么时碰到它 |
-| 步骤 | 从意图到结果，一行一步，旁边并排现状的步骤或理想路径 |
-| 修了什么 | 对照“从现象找到原因”的表，修的是哪一条 |
-| 拿到什么 | 这个方案交付的产出物和“先定产出物”里的样例一致；有增减时，写明多了什么、少了什么、为什么 |
-| 值得 | 用用户的话写一句改善：“现在不用再……”或“现在能……”。写不出来，这个方案不值得做 |
-| 出错时 | 失败后用户在哪里，什么被保留了 |
-| 赌注 | 押的是用户的哪种习惯或场景 |
-| 放弃什么 | 它做不好的场景 |
-
-差异检验先看一样，再比两样。先看每个方案的产出物有没有达到样例，差一截就先补，否则几个方案都只是在给一份没用的东西找入口。再比入口是否不同、步数或系统替用户做的事是否不同；两个方案这两样都一样，就是同一个方案换了皮，换一种立场重做。
-
-### 放进对比页
-
-候选直接在项目里实现，不另写一套静态页：用独立路由或查询参数切换，例如在原地址后加 `?variant=b`，每个方案都用真实的组件和数据。对比页用本地地址作为候选，现状作为基线放在第一位，交付时开发服务器开着，见 [风格对比页](style-explorer.md)。
-
-用户要求先看方案、选定后再动代码时，不改业务路由和组件，在任务目录里做可操作的小样，用现有的设计变量和真实数据，见 [风格对比页](style-explorer.md) 的 `"interactive": true`。
-
-对比页里每个候选只有一个画面，选三个方案差别最大的那一刻，通常是入口或关键的一步，不选结果页，结果页在各种做法下往往长得一样。功能的结果是一样东西时，另外把产出物样例原样放进对比页的说明，让用户看到他最后拿到的是什么。`traits` 写立场、入口和步数，让用户在卡片上就能比较做法；字体和色板三个方案填同一组现有的值。
-
-### 评审
-
-不打视觉分，不跑评分循环。交付对比页时推荐给用户的下一步，是下面这一轮方案评审，不是 SKILL.md 步骤 4 的视觉评审和多方向横向评审。给用户之前，自己按任务那句话把每个方案走一遍，记下卡住、走错和犹豫，写进对比页的说明。用户同意后，有隔离执行者时按 [视觉评审协议](visual-review.md) 的“评审改流程和加新功能的方案”评一轮。
-
-选定并实现后，再走一遍，在同一张表里加一行，和现状并排写进交付说明。各列都没有改善时，先查是不是只改了皮，回到“从现象找到原因”；改善体现在入口更容易找到、更少出错或更容易恢复时，用卡住、走错、犹豫次数的变化说明；只减少出错、没有减少步骤和记忆负担的改动，写明它防的是哪种错，归为防错，不当作结构上的改法。视觉上只按“给已有界面评审”看一轮，润色了一整页以上才做。
-
-计数表只量路程，不量结果。另写一行：拿到产出物的人能不能不加工直接用；不能，先修产出物，再谈步数。
+改的是做法与结构，现有视觉系统严格沿用。先亲手走一遍并计数，再在“顺手、自动、专用”三种立场里出方案（动手之前先按 SKILL.md 步骤 1 的“先用文字问一次”把它们写给用户，用户从文字里定得下来就只做选中的那一个），放进对比页，按任务走查评审，不打视觉分。完整流程见 [改流程与加新功能](existing-project-workflow.md)。

 ## 各类改动怎样评审

@@ -244,16 +101,10 @@
 | --- | --- | --- | --- |
 | 整理 | 不派评审者，主 Agent 和基线做前后对比 | 润色了一整页以上时，按 [视觉评审协议](visual-review.md) 的“给已有界面评审”看一轮，标准是现有规范 | 不打分 |
 | 升级 | 不派评审者 | 按“给已有界面评审”看一轮，标准是选定的新规范 | 不打分 |
-| 重塑 | 按 SKILL.md 步骤 4 推荐一轮视觉评审，由用户决定 | 按步骤 4 的评分循环，目标 9 分 | 打分 |
-| 改流程、加新功能 | 主 Agent 自己走一遍；推荐一轮“评审改流程和加新功能的方案”，由用户决定 | 再走一遍，在计数表里加一行；视觉按“给已有界面评审”，润色一整页以上才做 | 不打分 |
+| 重塑 | 不派评审者 | 按步骤 4 的评分循环，目标 9 分 | 打分 |
+| 改流程、加新功能 | 主 Agent 自己走一遍；推荐一轮 [评审循环](review-loop.md) 的“评审改流程和加新功能的方案”，由用户决定 | 再走一遍，在计数表里加一行；视觉按“给已有界面评审”，润色一整页以上才做 | 不打分 |

-三档放在同一个对比页里给用户挑时，挑选前都不派评审者；用户选了哪一档，之后按哪一档那一行做。
-
-## 这时读哪些参考
-
-改流程和加新功能时，先用这几处：[设计方向](design-direction.md) 的“产品界面：先定对象和工作区骨架”，[交互与状态](interaction-and-state.md) 的“先走通用户任务”“动作层级”“按范围表达状态”和“模型在交互上的默认做法”，[布局与视口](layout-and-viewport.md) 的“选择承载方式”。
-
-[视觉语言](visual-language.md) 的“细节”和“模型默认审美自查”、设计方向的差异检验、三处基本动效，留到方案选定、开始精修时再用。太早拿出来，注意力会被圆角和线框占满。例外是方案里第一次出现的东西，例如新的输入框、面板或浮层：交给用户之前就按“细节”检查一遍，用户挑方案时看的就是画面。
+三档放在同一个对比页里给用户挑时，挑选前都不派评审者；用户选了哪一档，之后按哪一档那一行做。改流程与加新功能的方案评审细节见 [改流程与加新功能](existing-project-workflow.md)。

 ## 从源头修改

@@ -277,10 +128,58 @@
 - **展示内容先按需加载。** 文档页、组件目录这类一页里放很多真实组件的页面，首屏以下的示例和样张在滚动到附近时再加载，别让每一页都背上所有示例的脚本。项目有性能预算时，先这样压下去，剩下确实属于新功能的增量再上调基线，并写明原因。
 - **不顺手改业务逻辑。** 逻辑确实造成了界面问题，例如重复请求、状态不同步，单独指出并说明改动范围。

+## 设计规范文件
+
+优化 UI 常常一次做不完：先改一个代表性页面，再分几次对话逐页迁移。下一次对话面对的是一半新、一半旧的页面，分不清哪套是标准，用户说过的喜好也丢了。所以选定的规范写进项目根目录的 `DESIGN.md`，后来的对话和不走本 Skill 的改动都能读到。
+
+- **读**：用户确认的条目不推翻，样板页面就是视觉标准，取值以样板页面和共享变量的代码为准；Agent 推断的条目和文档没写到的部分，规范体检照常评估。没标来源的旧条目按用户确认对待。用户这次明确要求重新探索或重塑时，文档只当现状参照，不锁定方案，品牌资产照样保留。
+- **什么时候写**：用户在对比页上选定、或明确说了要哪种之后，做完代表性页面再写；用户之后又给了取舍，随时补上；按规范迁移完一页，更新样板页面和待迁移。小改动、单个组件和只评审时只读不写。
+- **只写确认过的方向**：方向和用户取舍只写用户确认过的；其他条目可以直接补，标 Agent 推断，交付时列出来请用户确认。还没有用户确认过的方向时，例如无人值守时自己定的，不新建这个文件，草稿放任务目录。
+- **放在哪**：项目已有设计文档时，在原文件里改，不另建、不换原有结构；新写的条目照样标来源，缺品牌资产就补一节。没有才新建 `DESIGN.md`。它是项目文件，和任务目录里记过程的设计说明分开；用户明确不让往项目里写文档时，放任务目录并说明。
+- **写法**：只写决定，不写取值统计和排查经过。每条写成能检查的说法：写“表格里的金额右对齐”，不写“表格更整齐”；用户的话含糊时，翻成这样的规则，标 Agent 推断。每条标“用户确认”或“Agent 推断”。篇幅控制在 100 行左右。
+- **入口**：要不要在 AGENTS.md、CLAUDE.md 里加一行指向它，交付时问用户，不自己加。
+
+骨架如下，尖括号换成实际内容。品牌资产一节必写，其他用不上的节删掉：
+
+```markdown
+# <产品名> 设计规范
+
+更新：<日期>
+
+## 方向
+<一个具体的参照物，一两句；不写形容词>
+
+## 品牌资产（不动）
+- <标志、主色、品牌字体、专有插画>（用户确认）
+
+## 语义角色
+变量在 `<文件路径>`，这里只写每个角色用在哪，不抄取值。
+- `--<变量>`：<用途和限制，例如“只用于主按钮和当前位置”>
+- 字体：<标题、正文、数字各用哪个变量，字重怎么分层>
+- 形状：<圆角、边框、阴影的规则>
+- 动效：<时长和缓动变量>
+
+## 可用组件
+- `<组件、类名或样式文件>`：<用途>。新页面先用这些，不另画一套。
+
+## 样板页面
+- `<路径>`：已完全按本规范完成，取值和组件以它的代码为准。
+
+## 用户取舍
+- <日期>：<选了什么；喜欢和不喜欢的，各写成能检查的一条>（用户确认）
+
+## 不要做
+- <这个产品专属的禁忌>
+
+## 待迁移
+- `<路径>`：还是旧样式。全部迁完后删掉这一节。
+```
+
 ## 验证

 - 和基线在同一视口、同样数据和状态下做前后对比截图。
 - 被改动的共享组件，在其他使用位置各看一处。
- 优化 UI 润色了一整页以上时，按 [视觉评审协议](visual-review.md) 的“给已有界面评审”看一轮，标准是规范体检的结论：规范是好的就按现有规范，重新建立了规范就按选定的新规范。
+- 规范体检列出的品牌资产仍在产品里：标志可以按 [工作区骨架](direction-workspace.md) 的“顶栏放什么”挪位置或缩小，不能删掉或换掉。
+- 评审按上面“各类改动怎样评审”的表。优化 UI 的标准是设计规范文件；没有文件或文件没写到的部分，按规范体检的结论：规范是好的就按现有规范，重新建立了规范就按选定的新规范。
 - 改流程和加新功能，走一遍主要任务，和走查时的四个数并排对比；保存类操作要重新读取确认。
- 运行项目已有的类型检查、测试和构建；不为一次视觉修改新建测试体系。
+- 项目自带的检查按 SKILL.md 第 5 步的范围跑，不为一次视觉修改新建测试体系。
@@ -1,69 +0,0 @@
-# 配图
-
-生成图最常见的失败不是画得不好，而是画得太满：细节越丰富越像图库照片，放进版面后没有重点，也和页面没有关系。好的配图要先承担意思，再承担气氛，最后和页面接成一个整体。
-
-## 先让图承担意思
-
-生成之前先写一句：这张图要让人一眼看懂什么？答不上来就先别生成。“一张好看的使用场景”不是答案；“产品把一堆混乱变成了哪几个清楚的结果”才是。
-
-用对比把信息编进图里。整体统一成一种低调的材质或颜色，比如白模、单色、失焦或剪影，只让承载信息的少数几处有颜色、光或细节。例如白色仓库模型里只有出了异常的两排货架亮成橙色，灰度地图上只有正在配送的路线是彩色。所有地方都一样精细，就等于没有重点；第一版通常就是这样失败的。
-
-选能和页面“接上”的主体：
-
- 能跨过两块色面分界的单个物件。
- 能延伸出画面的线：线缆、轨道、河流、胶片、纸带。
- 能在上面标注的空间：模型、地图、剖面、平面图。
-
-这样的主体，之后能和页面里的线、标注和区块连成一体；一张自给自足的风景照做不到。
-
-## 写提示词
-
-按固定顺序写，每项一两句：
-
-1. **主体与表现形式**：什么东西，用什么体裁呈现（照片、插画、模型或图解），体裁从页面的方向推出。
-2. **视角与镜头**：机位的高度和角度；焦段和景深。
-3. **构图**：主体在画面里的位置和占比，四周留多少边距，哪一块留空给文字。要整件物体完整入画，就写明“完整地放在画面内，四周留出宽松边距”，否则常被裁掉一角，之后没法排版。
-4. **背景**：写出页面实际使用的十六进制色值，或者要求透明背景。
-5. **材质与光**：主光方向、辅光、质感。同一页的多张图用同一个光向。
-6. **重点**：用什么对比让哪几处成为焦点，其余部分怎样退后。
-7. **排除**：不要文字、标志、界面、屏幕内容；透明物件写明“地面不要阴影”。
-
-文字、界面和数据一律不让生图模型画：会画错，改不了，也不能被选中、翻译和读屏。它们放在页面上，用真实元素压在图上，或用引线连到图上。
-
-## 生成后放进页面再判断
-
-在真实页面、真实尺寸里看，不在图片查看器里判断。单独看很好的图，放进版面后常常主体太满、朝向不对、留白在错的位置。
-
-不对就改提示词重新生成，并写清要改什么，例如“除了三处重点，其余全部改成白色”“把整个模型收进画面”。不要围着一张不合适的图改版式。同一批里挑最能排版的一张，不挑细节最多的那张。
-
-## 让图和页面接成一体
-
-**背景融合。** 不透明的图，从图的四角实际取色，页面背景用同一个值；四条边都淡出到这个颜色，不加框，也不放进圆角卡片。只淡出一侧时，其余三边在宽屏上会露出矩形接缝。淡出可以用 CSS 遮罩，也可以在导出时直接把边缘渐隐成页面色值，后者不增加样式，适合样式体积受限的页面。生成图的底色常常不均匀，靠边缘会偏色，要在实际显示尺寸下检查接缝。
-
-**透明图。** 先放在最终背景上检查边缘、白边和残留的棋盘格；检查透明通道要看像素，不能看文件后缀。阴影不烘焙在图里，由页面按实际背景加投影，这样换了背景也对。
-
-**跨越结构。** 透明物件放在两个色块或两个区块的分界线上，让它同时属于两边。
-
-**图和代码接力。** 生成图负责代码做不出来的材质和光，例如金属、玻璃、模型、光影。代码负责需要精确、可编辑、会延续的部分，例如从图里延伸出去的线、路径和标注。如果图里有一段本该延续到页面的部分，就把它裁掉，改用矢量接着画。这样它能准确穿过版面，带上真实文字，并在不同宽度下重新走线。
-
-**标注。** 在图上标注用细引线加文字，不用带底色和阴影的气泡卡片。引线端点要对准图里的真实位置：图在版面里用固定的尺寸和位置，按图片像素换算坐标。窄屏上隐藏标注，或改成图下的列表，不让它们漂移到错误的位置。
-
-**窄屏裁切。** 不把整张大场景等比缩小到看不清。从原图裁出焦点区域另存一张给窄屏用，或用对象定位对准焦点。桌面和手机两种裁切，都要保住承载信息的那几处。
-
-**一张图用多次。** 结尾或其他区块可以用同一张图的局部特写，比再生成一张光线和风格对不上的图更统一。
-
-## 让一张画当舞台
-
-另一种用法正好相反：图不讲信息，只给气氛，界面保持黑白克制，全页只用一种有笔触的画当唯一的颜色来源，例如油画、水粉、水彩或版画。
-
- **画当舞台，界面在上面演示。** 把真实界面的简化版放在画上，画从四周露出来。滚动时画固定不动，只换前面的界面内容，和“滚动叙事”接得上。
- **大胆裁切。** 只留画的一角或一个局部，接近抽象，不和界面抢。题材不必和产品字面相关，但气质要对得上：快、静、暖或者松弛。
- **松和紧互相衬托。** 画越松，界面越要精确、干净；两者一起出现，彼此都更好看。
- **用得少。** 一张画贯穿全页，或者只在两三处出现，例如价格卡的顶端和页脚；不要每个区块配一张。同一页的画统一画种和笔触。
- **演示用简化过的真实界面。** 次要内容虚化或换成骨架，只把要讲的那一处做清楚；数字对比直接用界面元素画出来，例如两条长短不同的进度条，而不是另做一张图表。
-
-## 文件与说明
-
- 按显示尺寸的 2 倍导出，不直接内嵌原始大图。不透明的图用 JPEG 或 WebP，透明的用 WebP 或 PNG；单张控制在几百 KB 以内。内嵌成 data URL 后体积会再大约三分之一。
- 保留提示词、原图和处理后的版本，写清每张图的用途和处理方式。
- 生成图不冒充真实产品、真实场所或真实人物。虚构产品的小样，在页脚注明图片由 AI 生成。
@@ -2,11 +2,11 @@

 ## 先走通用户任务

-用一条主要路径说明：从哪里进入、识别哪个对象、作出什么决定、执行哪个动作、看到什么结果。只展开当前范围相关的分支，不为一个小表单设计整个产品流程。
+先用一条主要路径把任务讲清楚：用户从哪里进来，认出哪个对象，要做什么决定，执行哪个动作，最后看到什么结果。只展开和这次范围有关的分支，不为了一个小表单去设计整个产品的流程。

-浏览、比较、选择和编辑是不同任务。列表用适合比较的身份、数据或预览；只读详情不默认铺满禁用输入框；用户明确进入编辑后再显示需要的控件。需要连续批量配置的工作表可以持续编辑，但必须有一致的对象与保存语义。
+浏览、比较、选择和编辑是四种不同的任务。列表里放方便比较的东西：对象的身份、数据或预览。只读的详情页不要默认铺满禁用的输入框，等用户明确要编辑了，再显示需要的控件。要连续批量填写的表格可以一直处于编辑状态，但改的是哪个对象、什么时候算保存，全表要一致。

-同一对象与动作沿用统一名称。品牌表达可以改变外观，不随意改变返回、关闭、保存、删除等熟悉动作的含义。
+同一个对象、同一个动作，在各处用同一个名字。品牌可以改变它们的外观，但返回、关闭、保存、删除这些用户熟悉的动作，意思不能随便改。

 ## 对象身份

@@ -46,17 +46,17 @@

 每个可见动作都要有真实结果：数据变化、明确范围的预览、可观察的任务状态、导航，或者复制、下载这类本地结果。没有写入能力就不显示写操作，不用长期禁用的按钮占位；当前状态不允许的菜单项直接隐藏，不留无法解释的灰色图标。

-帮助文案只解释界面推断不出的规则、限制和风险；先修正标题、默认值或结构，不用长说明弥补流程混乱。使用原生或已有可靠控件，保持标签、焦点、键盘操作与可访问名称；校验和重要状态不只用颜色或悬停提示表达。
+帮助文案只解释从界面上看不出来的规则、限制和风险；流程乱的时候，先改标题、默认值或结构，不靠一大段说明来补。控件用原生的或项目里已有的可靠控件，标签、焦点、键盘操作和可访问名称都保留；校验结果和重要的状态，不能只用颜色或悬停提示来表示。

 ## 表单与提交

-只收集当前任务必需且无法可靠带入的信息。系统已知的值合理预填，需要用户判断的值保留可编辑性；数据属于其他对象时说明来源，不能悄悄改写源对象。
+只让用户填这次任务必须要、系统又没法可靠带出来的信息。系统已经知道的值先填好；需要用户判断的值，填好了也要能改。数据来自别的对象时，说明它是从哪里来的，不能悄悄改掉源头上的那一份。

-相关字段形成清楚的提交边界。一次用户意图只提交一次，处理中防止重复操作；结果即时生效时不再增加无意义的保存。
+哪些字段是一起提交的，要让人看得出来。用户想做一件事，就只提交一次，处理的过程中不让重复点；改了就立刻生效的地方，不再多放一个“保存”按钮。

-只有字段依赖、错误代价或任务长度确实需要时，才增加步骤、预览、草稿或额外确认。行内编辑适合简单独立字段；复杂关联编辑进入能容纳完整任务的表面。
+只有字段之间有先后依赖、填错的代价很高，或者任务确实很长时，才加步骤、预览、草稿或额外的确认。简单、独立的字段适合在行内直接改；互相关联的复杂编辑，放到装得下整个任务的弹窗、侧面板或页面里。

-校验在能够修正的位置显示原因和修正方式。提交失败保留输入、当前对象和位置；返回上一步或从源数据编辑返回时维持流程连续性。
+校验信息显示在用户能改的那个地方，写清楚错在哪里、怎么改。提交失败时，用户填的内容、当前的对象和所在的位置都要留着；退回上一步，或者去改完源数据再回来，流程要能接着往下走。

 ## 按范围表达状态

@@ -70,9 +70,9 @@
 | 后台长任务 | 给对象明确的排队、处理中、完成或失败状态及必要进度 |
 | 加载或提交失败 | 在相应范围解释原因和恢复动作，不要求用户重新寻找对象 |

-同一范围不同时表达互相矛盾的状态。局部请求不清空整页，进度不重复堆叠，等待结果不伪装成空集合。
+同一个区域里不要同时出现互相矛盾的状态。只请求一小块数据时不清空整页，进度提示不叠好几层，还在等结果的时候不显示成“没有数据”。

-占位布局应接近实际内容，不制造额外滚动。已有数据刷新时保持结果、数量与查询条件的对应关系；快速连续操作后只呈现当前意图对应的结果。
+占位的骨架要和实际内容的样子接近，不能比实际内容多出一段滚动。已有数据在刷新时，结果、数量和查询条件三者要对得上；用户连续快速操作时，只显示最后一次操作对应的结果。

 ## 模型在交互上的默认做法

@@ -80,15 +80,15 @@

 | 默认做法 | 换成 |
 | --- | --- |
-| 首页开头四张指标卡，数字没有比较基准，也引不出动作 | 首页回答“现在该处理什么”，见设计方向的“产品界面” |
+| 首页开头四张指标卡，数字没有比较基准，也引不出动作 | 首页回答“现在该处理什么”，见 [工作区骨架](direction-workspace.md) |
 | 可撤销的操作也弹确认框 | 直接执行并提供撤销；只有不可撤销的操作才确认，见“动作层级” |
 | 所有反馈都用角落里的浮动提示，包括错误 | 反馈出现在触发的位置；错误留在原处直到解决。浮动提示只用于离开视线的结果，例如已复制、已发送 |
 | 一加载就整页转圈 | 保留已有内容，只在变化的区域标示更新，见“按范围表达状态”和下文数字 |
 | 空状态只有一张插图和“暂无数据” | 说明为什么空、下一步做什么，给一个能直接开始的动作；能导入或预填示例就提供 |
 | 字段一字排开，用占位文字当标签，提交后才一起报错 | 标签常驻在输入框上方，按任务分组；离开字段时校验，提交出错时聚焦到第一个错误并说明怎么改；少数可选字段标“选填”，不给满屏必填项加星号 |
 | 按钮禁用，却不说为什么；每行末尾一排图标按钮；必要按钮只在悬停时出现 | 按“动作层级”重排：主操作一个，管理操作进“更多”，触屏和键盘都能到达 |
-| 详情和设置默认用弹窗 | 按任务选择弹窗、侧面板或完整页面，见布局与视口的“选择承载方式” |
-| 表格所有列等宽、居中 | 按“列表、表格与详情”删掉答不出用途的列；对齐方式见视觉语言的“细节” |
+| 详情和设置默认用弹窗 | 按任务选择弹窗、侧面板或完整页面，见空间、滚动与浮层的“选择承载方式” |
+| 表格所有列等宽、居中 | 按“列表、表格与详情”删掉答不出用途的列；对齐方式见视觉自查与精修的“细节” |
 | 按回车才搜索，无结果时只写“无结果” | 输入即筛选（请求较重时防抖 150–300ms）；无结果时保留查询，给出放宽条件或清除的入口 |
 | 一两个字段也拆成多步向导 | 只有步骤之间确实依赖时才分步；否则一页完成，并能看到全部范围 |
 | 保存后跳回列表，看不出刚改的是哪一条 | 回到原位置，把刚改动的对象高亮 1–2 秒 |
@@ -104,8 +104,8 @@

 ## 确认与完成

-需要等待结果的操作有可观察的生命周期。提交后保留对象与反馈；同步完成后再呈现成功，失败时保留恢复入口。
+要等一会儿才有结果的操作，从提交到结束的每个阶段都要让人看得见。提交以后，对象和反馈留在原处；等真的完成了再显示成功，失败了要留一个能重试或恢复的入口。

-可以关闭表面的后台任务，应已转为可持续观察的任务状态。关闭窗口不是取消请求；没有真实取消能力时，不把关闭或取消描述成已撤回操作。
+任务在后台跑、窗口可以先关掉的，关掉以后要有地方能继续看到它的进展。关闭窗口不等于取消请求；系统并不能真的取消时，不要把“关闭”或“取消”说成操作已经撤回。

-关键保存从界面重新读取或重新进入验证。模拟原型可以演示状态，但交付时明确模拟边界，不声称真实数据已写入。
+重要的保存要验证：重新读取一次，或者退出再进来，看数据是不是真的在。原型里可以用模拟数据演示各种状态，但交付时要说清楚哪些是模拟的，不能说真实数据已经写进去了。
@@ -1,60 +1,17 @@
 # 布局与视口

-## 先定空间责任
-
-明确首屏重点、内容的伸缩方式、滚动区域与主要操作的位置。任务型界面减少无意义滚动；叙事型页面允许有意的长度与节奏。不能为了单屏把文字和控件缩小到难以使用。
-
-区分全幅背景、限宽正文、弹性区域和固定规格控件。布局由内容、父容器、比例与上下限共同决定，不把整张设计图按比例缩成网页。
-
-宽屏可并列需要同时参考的信息，窄屏按任务顺序重排。是否分栏取决于内容关系，不默认所有页面都是左文右图。
-
-## 内容与伸缩
-
- 文字与可变数据采用内容驱动尺寸。固定规格用于图标、点击区域、媒体比例或稳定几何，不用于让当前截图刚好装下。
- 让长名称和宽内容能够合理收缩、换行或局部滚动。网页中的 Flex/Grid 子项必要时设置收缩边界，不用全页裁切掩盖溢出。
- 图像明确尺寸、裁切与主体安全区；异步内容预留合适空间，避免加载后挤走操作。
- 把真实组件或页面放进固定大小的缩略窗口（组件目录、模板墙、样张）时，按内容的自然尺寸缩放进窗口，不要居中后让上下两头一起被裁掉。先保证宽度放得下；太高的内容缩到还能读的比例后顶端对齐，底部渐隐。随容器伸缩的组件在缩略窗口里没有自然宽度，会被挤成一列竖排字，要按真实使用时的宽度渲染再缩放。
- 响应式验证覆盖项目支持的代表性宽度，断点由内容失效的位置决定。不同视口允许重排，不强求像素比例一致。
-
-## 滚动由谁负责
-
-每个表面只有一个主滚动区：应用外壳固定时，主内容区滚动；弹窗只有正文滚动；表格只在自身容器里横向滚动。确实需要分别浏览的面板才有自己的滚动，并且要有明确的尺寸和任务边界。
-
- Flex 和 Grid 的子项要允许收缩（最小宽高设为 0），否则长内容会撑破父容器，出现整页横向滚动。
- 不让页面、内容区和弹窗同时滚动；不为溢出随手加 `overflow: auto`；不做没有独立任务边界的多层嵌套滚动。
-
-## 选择承载方式
-
-| 任务 | 承载 | 要点 |
-| --- | --- | --- |
-| 短而自包含：确认、简短表单、预览加配置 | 弹窗 | 宽度随内容：确认用窄的，表单用中等，预览加配置用宽的或双栏 |
-| 需要保持底层列表、表格或画布可见 | 侧面板 | 从当前对象出发的查看或编辑；关闭后回到原对象 |
-| 多步骤、复杂创作、大量媒体，或需要两个以上主滚动区 | 完整页面 | 任务本身就是目的地，不是某页的附属动作 |
-
-不在弹窗上再叠弹窗，需要第二层完整任务时升级为侧面板或页面。沿用项目已有的表面组件，不为一次需求另建一套。
-
-弹窗固定分三段：
-
- **标题栏**固定在顶部：标题、必要的对象身份和关闭入口。
- **正文**占剩余空间，是唯一的滚动区。
- **操作栏**固定在底部，跨满弹窗宽度：主操作在右，取消紧挨着它，危险确认单独隔开；计数或校验摘要放在左侧。
-
-弹窗高度用“内容上限 + 动态视口高度”约束，不用固定高度。纯阅读的弹窗只留关闭入口。关闭或返回后，回到原来的位置和对象。
-
-## 菜单与浮层
-
-浮层贴着触发器出现，空间不足时翻转或平移，保留视口安全边距。它要渲染在能脱离裁切的层上，不被表格、弹窗或滚动容器截掉；页面滚动、容器滚动和窗口缩放后重新定位；触发器消失时关闭。长名称按对象身份的规则截断，不撑大浮层；内容超出下拉能清楚承载的范围时，改用弹窗或完整页面。单选选完即关，多选在点“完成”或点击外部时关闭。关闭后不留下遮罩、滚动锁或看不见的点击层。
-
 ## 精准还原

-先记录参考图的逻辑视口或已知像素尺寸、完整范围和固定区域。图像像素不等于逻辑视口；无法确定时说明假设。
+先记下参考图对应的视口尺寸或已知的像素尺寸、画面的完整范围，以及哪些区域是固定不动的。图片的像素数不等于视口尺寸，例如 2 倍图要除以 2；确定不了时，写明你是按什么假设的。

-测量主区域比例、共享对齐线、文字尺度、图片裁切与间距关系。先对齐整体几何与字体，再处理边框、阴影和细节；不因还原任务重新探索风格。
+量出主要区域各占多大比例、哪些元素共用一条对齐线、文字多大、图片怎么裁、各处间距之间是什么关系。先把整体的位置、比例和字体对上，再处理边框、阴影和细节；还原任务不重新探索风格。

-用与参考相当的视口和内容检查差异。参考没有展示的窄屏与状态根据内容约束补充，并区分“参考还原”与“合理延展”。
+用和参考图一样的视口、差不多的内容来比差异。参考图里没有的窄屏和其他状态，按内容的需要补上，并标明哪些是照着参考还原的，哪些是自己合理延伸的。
+
+自己判断还原得像不像，结论通常偏乐观；只看一张整页缩略图，也看不出字号、间距和对齐差了多少。每轮修改后用截图工具的 `--compare` 出对比图（见 [工具](tools.md)），先修差异最大的那几格，再在叠加图里核对对齐线、字号和图片裁切；不凭印象宣布“已经还原”。

 ## 验证重点

-实际检查长内容、空内容和当前改动相关状态。移动端注意视口变化、输入面板与安全边距，主操作不能被键盘或固定区域遮挡。
+实际看一遍内容很长、内容为空，以及这次改动涉及的各个状态。手机上留意视口高度的变化、弹出的键盘和屏幕的安全边距，主操作不能被键盘或固定的栏挡住。

-检查页面是否意外横向溢出、滚动是否发生在预期区域、焦点与菜单是否可见，以及缩放或重排后阅读和操作顺序是否仍然清楚。
+再检查：页面有没有意外地横向溢出，滚动是不是发生在该滚的那一块，焦点和菜单看不看得见；放大或重新排版以后，阅读和操作的顺序是否还清楚。
@@ -0,0 +1,47 @@
+# 空间、滚动与浮层
+
+页面怎样分配空间、谁负责滚动、任务放进弹窗、侧面板还是完整页面，以及菜单和浮层的行为。截图还原和布局的验证重点见 [布局与视口](layout-and-viewport.md)。
+
+## 先定空间责任
+
+先定四件事：首屏的重点是什么，内容变多变少时怎么伸缩，哪一块负责滚动，主要操作放在哪里。用来做事的界面，尽量少让人做没必要的滚动；用来讲故事的页面，可以有意做长、做出节奏。不能为了挤进一屏，把文字和控件缩到难用。
+
+分清四种区域：铺满整个宽度的背景，限制了宽度的正文，会跟着伸缩的区域，以及尺寸固定的控件。布局是由内容、父容器、比例和上下限一起决定的，不是把一整张设计图等比缩放成网页。
+
+宽屏上，需要对照着看的信息可以并排；窄屏上，按做事的先后顺序重新排。要不要分栏，看内容之间的关系，不默认每个页面都是左边文字、右边图。
+
+## 内容与伸缩
+
+- 文字和会变的数据，让内容自己撑开尺寸。固定尺寸只用在图标、点击区域、图片和视频的比例，以及不该变的几何形状上，不是为了让眼前这张截图刚好装得下。
+- 长名称和很宽的内容要能收缩、换行，或者只在自己那一块里滚动。网页里 Flex/Grid 的子项要允许收缩（最小宽高设为 0），否则长内容会撑破父容器；不用裁掉整页的办法来掩盖溢出。
+- 图片要定好尺寸、怎么裁，以及主体不能被裁到的范围；后加载的内容先把位置留出来，免得加载完把按钮挤走。
+- 把真实组件或页面放进固定大小的缩略窗口（组件目录、模板墙、样张）时，按内容的自然尺寸缩放进窗口，不要居中后让上下两头一起被裁掉。先保证宽度放得下；太高的内容缩到还能读的比例后顶端对齐，底部渐隐。随容器伸缩的组件在缩略窗口里没有自然宽度，会被挤成一列竖排字，要按真实使用时的宽度渲染再缩放。
+- 检查响应式时，把项目支持的几种典型宽度都看一遍；断点设在内容开始排不下的那个宽度。不同宽度下可以重新排，不要求比例一模一样。
+
+## 滚动由谁负责
+
+每个表面只有一个主滚动区：应用外壳固定时，主内容区滚动；弹窗只有正文滚动；表格只在自身容器里横向滚动。确实需要分别浏览的面板才有自己的滚动，并且要有明确的尺寸和任务边界。
+
+- 不让页面、内容区和弹窗同时滚动；不为溢出随手加 `overflow: auto`；不做没有独立任务边界的多层嵌套滚动。
+
+## 选择承载方式
+
+| 任务 | 承载 | 要点 |
+| --- | --- | --- |
+| 短而自包含：确认、简短表单、预览加配置 | 弹窗 | 宽度随内容：确认用窄的，表单用中等，预览加配置用宽的或双栏 |
+| 需要保持底层列表、表格或画布可见 | 侧面板 | 从当前对象出发的查看或编辑；关闭后回到原对象 |
+| 多步骤、复杂创作、大量媒体，或需要两个以上主滚动区 | 完整页面 | 任务本身就是目的地，不是某页的附属动作 |
+
+不在弹窗上再叠弹窗，需要第二层完整任务时升级为侧面板或页面。沿用项目已有的表面组件，不为一次需求另建一套。
+
+弹窗固定分三段：
+
+- **标题栏**固定在顶部：标题、必要的对象身份和关闭入口。
+- **正文**占剩余空间，是唯一的滚动区。
+- **操作栏**固定在底部，跨满弹窗宽度：主操作在右，取消紧挨着它，危险确认单独隔开；计数或校验摘要放在左侧。
+
+弹窗高度用“内容上限 + 动态视口高度”约束，不用固定高度。纯阅读的弹窗只留关闭入口。关闭或返回后，回到原来的位置和对象。
+
+## 菜单与浮层
+
+浮层贴着触发器出现，空间不足时翻转或平移，保留视口安全边距。它要渲染在能脱离裁切的层上，不被表格、弹窗或滚动容器截掉；页面滚动、容器滚动和窗口缩放后重新定位；触发器消失时关闭。长名称按对象身份的规则截断，不撑大浮层；内容超出下拉能清楚承载的范围时，改用弹窗或完整页面。单选选完即关，多选在点“完成”或点击外部时关闭。关闭后不留下遮罩、滚动锁或看不见的点击层。
@@ -1,45 +1,142 @@
 # 素材

-## 把资产作为设计起点
+图从哪来、承担什么、怎样和页面接成一体。游戏、收集和养成类产品要的角色、道具、藏品和图集，见“成套素材”。

-好的资产可以承担整个页面的情绪、对象识别或信息重心。先问“如果只保留一张图、一个标题和一个动作，哪张图值得占据这个位置”，再决定是否需要更多模块。不要把资产理解为布局完成后填进去的装饰。
+## 目录导航

-跟随设计北极星决定图像的主体、视角、尺度、光线、颜色、材质和留白。页面的字体、背景、边缘处理与运动从这张图建立呼应；也可以通过一个受控的反差突出主动作。统一是共享视觉逻辑，不是对所有图片套同一个滤镜。
+- [先定图承担什么](#先定图承担什么)
+- [复用、生成，还是交给代码](#复用生成还是交给代码)
+- [让图承担意思](#让图承担意思)
+- [写提示词](#写提示词)
+- [生成后放进页面再判断](#生成后放进页面再判断)
+- [让图和页面接成一体](#让图和页面接成一体)
+- [让一张画当舞台](#让一张画当舞台)
+- [异质素材的单色化统一](#异质素材的单色化统一)
+- [抽象技术的主视觉推导](#抽象技术的主视觉推导)
+- [成套素材：角色、道具与图集](#成套素材角色道具与图集)
+- [实时 3D](#实时-3d)
+- [生成视频的可选路径](#生成视频的可选路径)
+- [文件与说明](#文件与说明)

-后台和工具同样需要资产判断：对象缩略图帮助识别，内容封面支持浏览，地图或空间图帮助定位，必要的示意图解释关系。它们可以成为界面最有价值的部分；不以“这是后台”为由默认只有表格和卡片。纯数据任务确实不受益时保留清楚的数据表达，不硬塞气氛图。
+## 先定图承担什么

-资产要成为结构，而不是装在盒子里的插图：让它跨过版面的分界、占满首屏，或者和文字叠在一起。页面可以是一个完整的世界，而不是“一张页面配一张图”。
+素材是设计的起点，不是布局完成后填进去的装饰。先问：如果只保留一张图、一个标题和一个动作，哪张图值得占据这个位置？再决定是否需要更多模块。

-先把关键资产放进真实页面看一轮，再延展其他区域。资产未到位时不能把占位版的审美评审视为最终通过。
+- **分清差距来自哪里。** 是信息和构图的问题，还是确实缺一张能表达产品和品牌的图。不用更多图片、光效和动画掩盖层级问题，也不因为代码好写，就用通用渐变和几何形状顶替必要的图像。
+- **给每张图一句任务。** 它展示对象、解释关系，还是建立品牌和情绪；要让人一眼看懂什么。答不上来就先别找图，也别生成。图已经说清的，文字不再重复。
+- **后台和工具同样要判断。** 对象缩略图帮助识别，内容封面支持浏览，地图或空间图帮助定位，示意图解释关系；它们可以是界面最有价值的部分。纯数据任务确实不受益时，保留清楚的数据表达，不硬塞气氛图。
+- **图跟着北极星定，页面再和图呼应。** 主体、视角、尺度、光线、颜色、材质和留白由设计北极星决定；页面的字体、背景、边缘处理和运动从这张图建立呼应，也可以用一处受控的反差突出主动作。同组的图统一主体尺度、视角、光线和边缘质感，不是给所有图套同一个滤镜。
+- **图是结构，不是装在盒子里的插图。** 让它跨过版面的分界、占满首屏，或者和文字叠在一起，做法见“让图和页面接成一体”。
+- **先放进真实页面看一轮，再延展其他区域。** 素材没到位时，占位版的审美评审不算最终通过。

-没有合适的现成资产且宿主已有可用的图像生成能力时，主动制作关键素材，并给它明确的视觉任务；不要因为正在写前端代码就省略这一步。已有优秀素材时围绕它设计，不为证明使用了工具而重复生成。没有相关能力时保留清楚的素材简报与待完成项。
+## 复用、生成，还是交给代码

-## 先确定表达作用
+- **有合适的就复用。** 实际看过图再引用它的特征；已有好素材时围绕它设计，不为证明用了工具而重复生成。
+- **没有就做出来。** 没有合适的现成素材、宿主又能生成图片时，主动制作关键素材，不因为正在写前端代码就省掉这一步。按宿主生成工具自己的输入和编辑规则来。
+- **文字和界面交给代码。** 文字、按钮、表单、数据标签和常规布局一律由真实 HTML/CSS 排版，不让生图模型画，也不拿完整截图当可交互的成品：生图画字容易出错，改不了，也不能被选中和读屏。图片只负责物体、材质和光影。
+- **做不了就留简报。** 没有生成能力或图暂时缺着时，预留合适的容器，写一份能执行的素材简报：要表达什么、主体是什么、放在哪、宽窄屏怎样裁切、哪里承载文字、什么细节不能丢。不自动安装工具、切换收费服务，或要求用户把密钥粘进对话。
+- 要转动、有物理或随视角变化的对象见“实时 3D”；预先确定的连续变化见“生成视频的可选路径”。

-判断当前差距来自信息与构图，还是缺少能够表达产品和品牌的素材。不要用更多图片、光效和动画掩盖层级问题，也不要仅因代码容易编写，就用通用渐变和几何形状替代必要的图像。
+## 让图承担意思

-素材可以用于展示对象、解释关系、建立品牌或情绪。先确定内容、位置、尺寸比例、裁切、背景和与文字的对比，再选择现有资源、摄影、插画或生成素材。
+生成图最常见的失败不是画得不好，而是画得太满：细节越丰富越像图库照片，放进版面后没有重点，也和页面没有关系。

-素材简报保持可执行：要表达什么、主体是什么、放在哪、宽窄屏如何裁切、哪里承载文字、什么细节不可丢失。若画面已经表达了主题，减少重复解说；叠字区域需有稳定明暗和足够空间，不默认给整张图盖浓重渐变。
+“一张好看的使用场景”不是图的任务；“产品把一堆混乱变成了哪几个清楚的结果”才是。用对比把信息编进图里。整体统一成一种低调的材质或颜色，比如白模、单色、失焦或剪影，只让承载信息的少数几处有颜色、光或细节。所有地方都一样精细，就等于没有重点；第一版通常就是这样失败的。

-## 图片与可编辑界面
+选能和页面“接上”的主体：

-实际查看输入图片后再引用其特征。复用质量合适且有使用依据的资源；不足时才生成或重绘。保留原始文件及来源，区分复用、裁切、生成和后处理。
+- 能跨过两块色面分界的单个物件。
+- 能延伸出画面的线状物。
+- 能在上面标注的空间：模型、地图、剖面、平面图。

-界面文字、按钮、表单、数据标签和常规布局由可编辑元素表达，摄影、插画和特殊视觉放在明确容器中。不把完整截图作为可交互成品。
+这样的主体，之后能和页面里的线、标注和区块连成一体；一张自给自足的风景照做不到。

-将素材需求交给宿主可用的生成工具，遵循工具自身的输入与编辑规则。怎样让生成图承担意思、怎样写提示词、怎样把图和页面接成一体，见 [配图](imagery.md)。
+## 写提示词

-图像暂缺时预留合适容器并明确缺项，不自动安装工具、切换收费服务或要求用户把密钥粘进对话。替代素材不能冒充真实产品截图。
+按固定顺序写，每项一两句：

-同组资产统一主体尺度、视角、光线和边缘质感，避免几张各自漂亮却互不相干的图拼在一起。生成素材不冒充真实现场或产品证据。最终交付保留来源与用途，网页按实际显示尺寸处理文件体积，重要主体在桌面和手机裁切中都必须成立。
+1. **主体与表现形式**：什么东西，用什么体裁呈现（照片、插画、模型或图解），体裁从页面的方向推出。
+2. **构图与留白**：主体在画面里的位置和占比，哪一块留空给文字。按已选的首屏骨架写出主体所在的区域和占比，以及留给文字的那一块要完全干净。留白区不要有高光、反光或杂乱纹理，保证文字清晰好读。
+3. **安全距离**：主体、托台与阴影不要贴到文字边缘，留出 10% 左右的空隙，防止屏幕变窄时文字压到物体上。
+4. **背景**：直接写出页面实际使用的十六进制色值，或者要求纯透明背景。色值一致时边缘自然融进网页，不需要额外用 CSS 遮罩去修。
+5. **材质与光**：主光方向、辅光、质感。同一页的多张图用同一个光向。地面反光向留白侧自然衰减，不横扫到文字区。
+6. **排除项**：不要任何文字、标志、伪代码、界面截图或多余漂浮物；小件图标或透明图注明“不要地面投影”，外部投影交由前端 CSS `filter: drop-shadow(...)` 控制。
+
+## 生成后放进页面再判断
+
+在真实页面、真实尺寸里看，不在图片查看器里判断。单独看很好的图，放进版面后常常主体太满、朝向不对、留白在错的位置。
+
+不对就改提示词重新生成，并写清要改什么，例如“主体往右移，左边留出一半空间”“去掉地面反光，背景换成页面的色值”。不要围着一张不合适的图改版式。同一批里挑最能排版的一张，不挑细节最多的那张。
+
+## 让图和页面接成一体
+
+**背景融合。** 不透明的图，从图的四角实际取色，页面背景用同一个值；四条边都淡出到这个颜色，不加框，也不放进圆角卡片。淡出可以用 CSS 遮罩，也可以在导出时直接把边缘渐隐成页面色值。背景为纯色时，若提示词背景色与网页完全一致，边缘就能自然无缝过渡。
+
+**透明图。** 先放在最终背景上检查边缘、白边和残留的棋盘格；检查透明通道要看像素，不能看文件后缀。阴影不烘焙在图里，由页面按实际背景加投影，这样换了背景也对。
+
+**跨越结构。** 透明物件放在两个色块或两个区块的分界线上，让它同时属于两边。
+
+**图和代码接力。** 生成图负责代码做不出来的材质和光，例如金属、玻璃、模型、光影。代码负责需要精确、可编辑、会延续的部分，例如从图里延伸出去的线、路径和标注。如果图里有一段本该延续到页面的部分，就把它裁掉，改用矢量接着画。这样它能准确穿过版面，带上真实文字，并在不同宽度下重新走线。
+
+**标注。** 在图上标注用细引线加文字，不用带底色和阴影的气泡卡片。引线端点要对准图里的真实位置：图在版面里用固定的尺寸和位置，按图片像素换算坐标。窄屏上隐藏标注，或改成图下的列表，不让它们漂移到错误的位置。
+
+**窄屏裁切。** 不把整张大场景等比缩小到看不清。从原图裁出焦点区域另存一张给窄屏用，或用对象定位对准焦点。桌面和手机两种裁切，都要保住承载信息的那几处。
+
+**一张图用多次。** 结尾或其他区块可以用同一张图的局部特写，比再生成一张光线和风格对不上的图更统一。
+
+## 让一张画当舞台
+
+另一种用法正好相反：图不讲信息，只给气氛，界面保持黑白克制，全页只用一种有笔触的画当唯一的颜色来源。
+
+- **画当舞台，界面在上面演示。** 把真实界面的简化版放在画上，画从四周露出来。滚动时画固定不动，只换前面的界面内容，和“滚动叙事”接得上。
+- **大胆裁切。** 只留画的一角或一个局部，接近抽象，不和界面抢。题材不必和产品字面相关，但气质要对得上。
+- **松和紧互相衬托。** 画越松，界面越要精确、干净；两者一起出现，彼此都更好看。
+- **用得少。** 一张画贯穿全页，或者只在两三处出现，例如价格卡的顶端和页脚；不要每个区块配一张。同一页的画统一画种和笔触。
+- **演示用简化过的真实界面。** 次要内容虚化或换成骨架，只把要讲的那一处做清楚；数字对比直接用界面元素画出来，例如两条长短不同的进度条，而不是另做一张图表。
+
+## 异质素材的单色化统一
+
+引入历史画作、雕像肖像或外部摄影素材时，彩色位图容易与界面的主题色产生冲突。可以通过统一的单色处理将不同来源的素材收拢到当前方向里：
+
+- **单色映射**：将素材转为黑白高对比后，把暗部与亮部映射到页面的主色与底色。
+- **网点与点阵抖动**：对写实图片做半色调网点化或微弱的扫描线处理，消解照片的写实质感，让它能和排版、网格共处。
+
+## 抽象技术的主视觉推导
+
+缺少产品截图时，不回退到通用的彩色发光球或大渐变。从产品处理的东西里找一个有形的对象：它读写的数据长什么样，它替代的那件工具或那道工序是什么，它的用户手边有什么。表现形式满足两条：大面积色阶平稳，文字压得住；画面里的线和标尺能由 SVG/CSS 接着画。找不到有形的对象时，主视觉交给排版本身。
+
+## 成套素材：角色、道具与图集
+
+游戏、收集和养成类产品要的不是一张配图，而是一整套会被反复摆放、翻转、比较的素材。
+
+- **先写风格说明。** 画法、视角、光向、材质、比例和色板各写一句，同一批的提示词都按它写。
+- **同系列靠轮廓区分。** 统一比例和光向，用耳朵、道具、配饰这类轮廓特征区分个体，不只换颜色。缩到实际显示尺寸还要能一眼分开。
+- **多状态从同一张改出来。** 生长阶段、正反面、开壳前后、不同动作，以第一张为参考图编辑出变体，保持是同一个角色；各状态的落地点对齐到同一条基线。
+- **透明图集按轮廓切。** 格子之间留透明间距，按实际轮廓裁切，不按格子均分，否则会切掉树冠、带进邻格的残片。检查 alpha 像素，不看预览图的背景色，再放到最终背景上看边缘。
+- **贴到物体上要两面成立。** 会翻转、落下或转到侧面的素材，正面背面都要有，边缘沿轮廓闭合。受光交给场景，不在图里烘焙和场景方向相反的光影。
+
+## 实时 3D
+
+三类情况用实时 3D：用户要转动、检视的对象；堆叠、碰撞、推挤、摆动这类物理；玻璃、金属、透明塑料这类随视角变化的材质。一张生成图就能表达的，或者只为了显得高级，都不用。
+
+- 用 three.js 这类成熟引擎，需要物理时再配一个刚体库。生成的图当贴图、精灵或环境光来源，代码负责空间、运动和受力。
+- 验收看画面，不看用没用库：静帧看得出体积和透视，物体有接触阴影，关掉发光仍分得清材质；录屏里运动连续，力能传到被推的物体上。
+- 新建的小样把库下载到任务目录的 `vendor/` 并附许可证，不引用 CDN；存量项目按项目已有的依赖方式引入。以模块方式引入的页面和贴图要通过本地服务器打开；要求双击就能打开时，打包成一个普通脚本，贴图内联或放在同目录。
+- 设备像素比上限取 2；页面隐藏或滚出视口时停帧；拿不到 WebGL 时显示同一场景的静态图；减少动态效果时照常算出结果，只关镜头晃动和装饰演出。
+- 截图前确认画布真的画出了内容，见 [工具](tools.md)。

 ## 生成视频的可选路径

-需要可叠加的循环素材时，先验证首尾衔接、主体边缘和背景处理。单色背景加抠像只是候选技术；透明、反光物体可能丢失边缘或产生色溢，应在最终页面背景上检查。
+要一段能叠在页面上循环播放的素材时，先检查三样：首尾接不接得上，主体的边缘干不干净，背景处理得怎么样。在单色背景上生成再抠像，只是可以试的办法之一：透明和反光的物体抠完可能丢边，或者带上背景的颜色，要放到最终的页面背景上看。

-需要连续叙事时，可以用前一段的末帧衔接下一段的首帧，或使用一致的关键帧规划。按滚动或手势控制播放进度时，检查寻帧、反向播放、加载和内存占用，不默认把整段视频解码成全部大图。
+要把几段视频连成一段叙事时，可以拿前一段的最后一帧当下一段的第一帧，或者事先把各段的关键帧统一规划好。播放进度由滚动或手势控制时，要检查跳到任意一帧、倒着播、加载速度和内存占用，不要默认把整段视频解码成一张张大图。

 玻璃、水晶这类需要折射或透光的物体，先在最终页面的背景色上生成画面，让折射和投影烘焙进素材，再用视频抠像模型去掉背景。直接在绿幕上生成再抠像，折射会带着绿色。预渲染的折射和光照只对应生成时的背景，不应承诺会随任意页面内容产生实时物理效果。

-透明底的图片或视频适合放在两个区块的衔接处，跨越边界，把上下两部分连成一个画面，比放在容器里更有设计感。
+透明底的视频和图片一样，可以跨在两个区块的分界上，做法见上文的“跨越结构”。
+
+## 文件与说明
+
+- 按显示尺寸的 2 倍导出，不直接内嵌原始大图。不透明的图用 JPEG 或 WebP，透明的用 WebP 或 PNG；单张控制在几百 KB 以内。内嵌成 data URL 后体积会再大约三分之一。
+- 保留提示词、原图和处理后的版本，写清每张图的来源、用途和处理方式，分清复用、裁切、生成和后处理。
+- 生成图和替代素材不冒充真实产品截图、真实场所、真实人物或产品证据。图片是 AI 生成的，写进交付说明，不写进界面。
@@ -2,23 +2,23 @@

 ## 每个界面先做三处动效

-完全不动的界面像一张截图：按下没有回应，切换没有来路，用户只能猜刚才发生了什么。新界面和改动了操作流程的界面，先把这三处做出来，手感写进方向卡的“动效”一栏：
+完全不动的界面像一张截图：按下没有回应，切换没有来路，用户只能猜刚才发生了什么。新界面和改动了操作流程的界面，先把这三处做出来，手感写进方向卡的“动效”一栏，改流程和加新功能时写进方案卡或设计说明：

 1. **主操作的反馈。** 按下立刻有回应，完成时交出一个结果：按钮陷下去再弹回，勾号画出来，数字滚到新值。
 2. **一处状态切换的来路。** 选中、展开、换视图、增删列表项时，让人看见东西从哪里来、到哪里去，见下文“界面过渡”。
 3. **第一次进入时的一次出场。** 主角先到，其余按阅读顺序跟上，只在首次进入时播放。

-这三处之外再加动效，先问：如果要手写一周才能做出来，还值得做吗？模型让动效变得免费，但滚动淡入、视差、跟随鼠标和装饰性循环最容易变成干扰。每个动效都要承担反馈、引导、连续或品牌表达中的一项。
+这三处之外再加的动效，每个都要承担反馈、引导、连续或品牌表达中的一项；滚动淡入、视差、跟随鼠标和装饰性循环最容易变成干扰。

 | 目的 | 适合考虑的方式 |
 | --- | --- |
-| 按下、聚焦、展开或普通状态变化 | 原生能力或已有组件的小范围过渡 |
+| 按下、聚焦、展开或普通的状态变化 | 用浏览器原生的过渡，或已有组件自带的小过渡 |
 | 视图之间的切换、元素换位置 | 共享元素过渡，见下文“界面过渡” |
-| 拖拽、手势、空间变化与复杂编排 | 项目已有成熟动效能力 |
-| 特殊品牌画面、材质、复杂物理效果 | 图片、3D、着色器或预渲染视频，按需求取舍；着色器能做的效果见 [点缀与特效](ornament.md) |
-| 鼠标、触控或滚动控制叙事进度 | 将输入映射到明确的动画进度，处理反向和快速操作；思路见下文“滚动叙事” |
+| 拖拽、手势、位置和大小的变化、多个元素配合的动画 | 用项目里已有的成熟动效库 |
+| 特殊品牌画面、材质、复杂物理效果 | 图片、3D、着色器或预渲染视频，按需求取舍；什么时候用实时 3D 见 [素材](media.md) |
+| 用鼠标、触控或滚动控制一段叙事的进度 | 让动画的进度直接跟着输入走，往回滚和快速操作都要处理好；见 [滚动叙事](scroll-narrative.md) |

-代码动画适合需要精确状态控制的界面，生成视频适合预先确定的视觉变化；不能用视频替代需要动态数据与真实操作的控件。
+需要精确控制状态的界面，用代码写动画；画面怎么变早就定好的，可以用生成的视频。要显示实时数据、要让人真的去操作的控件，不能用视频代替。

 ## 手感

@@ -41,22 +41,17 @@

 ## 呼应：让动作彼此接上

-生硬的动效各动各的：按钮自己闪一下，面板自己滑出来，数字直接换掉。好的动效像一句话：一个动作引起的变化沿同一条路传下去，前一段的终点是下一段的起点。
+一个动作引起的变化沿同一条路传下去，前一段的终点是下一段的起点；不要按钮、面板和数字各动各的。

 - **从被操作的地方出发。** 点“加入购物袋”，商品缩成一个点飞进袋子，袋子上的数字跟着跳一下；删掉一行，它朝删除按钮的方向收走，下面的行补上来。
 - **一次切换朝一个方向。** 卡片往左滑，标题、序号和底色也往左换；数字往上滚，进度也往上涨。方向一乱，就成了几段互不相干的动画。
 - **主角先动，其余被带动。** 被影响的东西晚 40–80ms 跟上，幅度更小，像被主角拉过去的。全部同时起跑、同样幅度，看起来只是一起闪了一下。
 - **形状接力。** 上一个状态里的元素变成下一个状态里的元素：按钮展开成面板，搜索图标拉长成输入框，播放键变成暂停键。用户一眼看出它们是同一个东西。
- **动法和画面是同一种材质。** 纸面的方向，切换轻、有一点停顿；硬件的方向，开关有咔嗒到位的感觉；液体和玻璃的方向，用流淌和折射。
+- **动法和画面是同一种材质。** 动作的轻重、停顿和回弹从方向卡的生成引擎和控件语法推出。

 ### 巧思从产品里找

-巧思是让一处动效讲出这个产品自己的事，不是加更多花样。从内容里找一个只有它才有的动作：
-
- 天气应用切到雨天，雨点落在卡片上；雨停以后，卡片上的水痕慢慢干掉。
- 记账应用记下一笔支出，预算条少掉的那一截落进这笔账里。
- 音乐播放器换歌，新封面的颜色从唱片中心漫到整个背景。
- 完成待办时，勾号用和品牌标志相同的笔画画出来。
+巧思是让一处动效讲出这个产品自己的事，不是加更多花样。写成一句：这个产品里的哪样东西，因为用户的哪个动作，发生了只有它才会有的变化。

 找不到这样的动作，就把三处基本动效做准，不硬造。一页最多一两处巧思，其余动效安静、短促。

@@ -78,6 +73,16 @@

 **到头要有反馈。** 已经是第一项或最后一项时，轻轻顶一下（往返 10–15px），而不是毫无反应。

+### 整页转场的稳定性取舍
+
+整页切换和组件的过渡不一样：旧页面要卸载，新页面要挂载。按稳不稳、难不难做，分三类：
+
+- **遮罩式（Curtain / Wipe）。** 用一块纯色、纹理或几何形状划过或盖住整个屏幕，趁挡住的时候卸掉旧页、挂上新页。它最简单、最稳，两个页面的结构互不相干，绝大多数页面都适合。
+- **交叠式（Overlapping）。** 新旧两页同时在屏幕上，互相错开、推挤，或者分层淡入淡出。看起来连贯，但两页的 DOM 要同时存在，层级和内存都要管好。
+- **共享元素式（Shared Element）。** 一个关键元素从旧页一直变形到新页，例如缩略图放大成详情页的主图。看起来最顺，也最容易出问题：用户快速双击、中途打断、后退，或者视口变了，都容易错位和闪烁，所以必须留好退路，出问题时直接显示到位的状态。
+
+第一次进站的加载屏（Splash），可以在等大文件加载的时候放一小段叙事或进度；站内的页面跳转，时长按下面“时长和幅度”里整页切换的取值，不让转场挡着用户看内容。
+
 ## 时长和幅度

 | 对象 | 时长 | 要点 |
@@ -88,37 +93,27 @@
 | 整页或视图切换 | 350–500ms | 超过 500ms 就会让人等 |
 | 首次进入时依次出现 | 每项间隔 40–80ms | 总长不超过 600ms；只在首次进入时播放，重新渲染和恢复状态时不重播 |

+这张表管的是界面操作。游戏和抽奖的演出时长见 [游玩](play.md)。
+
 悬停上浮 2–4px，阴影随之加深。位移超过 20px 的悬停效果会显得轻浮。

 ## 看不见的结果要说出来

 一次点击产生了看不见的副作用，例如复制到剪贴板、后台保存、发送，就用一条短暂的提示说出结果本身，例如“已复制：……”，而不是只说“成功”。确认类的时刻，例如选中或完成，可以用一次小幅弹出，只在状态第一次变化时播放，重复点击不重播。

-## 滚动叙事：视差与一镜到底
-
-滚动当作翻页，它只是翻页；当作摄影机的推拉，页面就能讲故事。品牌、发布和叙事页可以这样做，文档、文章、工具和后台不做；一页最多一段。记忆点先放在用户会做的动作上（点按、拖动、悬停），再考虑滚动；不要把整页做成视差秀。
-
- **一镜到底。** 整段是一次不切换的镜头。一个主角从头走到尾，可以是产品、一根线、一个形状或一个字，每一步长成、变成或让出下一个画面：推近看到细节，拉远看到全貌，转过去看到背面，穿过去进入下一个场景。动手前先画分镜：每个镜头占多少滚动距离、画面里有什么、什么在动、文字什么时候出现。
- **停下来再说话。** 每个镜头留一段静止，文字在静止时出现；边动边读很累。
- **视差要有真实的前后。** 只在画面本来就有远近层次时用：前景的物体、中景、远处的背景，越近动得越多，差别要小。文字不做视差。
- **转场也是镜头。** 一个圆从某一点扩开，带出下一节；推进一张图，穿过它到达下一节；背景色在章节之间随阅读慢慢变；一句宣言随滚动逐字亮起。每种手法一页只用一次。
- **倒着滚也成立。** 每一帧只由滚动位置决定，往回滚自然倒放，刷新或跳到中间也立刻是对的画面。不接管用户的滚动。
- **留出口。** 长段落前给一个跳过入口；减少动态效果时，把每个静止画面按顺序排成普通区块。
- **代码做不出来的，交给视频。** 用户想要很强的首屏动画，而效果要靠生成视频或序列帧才做得出来，例如角色转身、产品拆解、镜头穿越场景，可以告诉用户用 [oil-motion](https://github.com/oil-oil/oil-motion) 来做。CSS、SVG、着色器能完成的仍自己做；同一次对话只提一次。
-
 ## 体验与性能

-沿用项目的运动节奏和组件能力。高频操作反馈直接，不让动画延迟业务完成。
+项目里已有的动效节奏和组件能力先沿用。经常要做的操作，反馈要立刻给，不让动画拖慢事情本身。

 动画要能被打断。连续快速操作时，新动画从当前位置接着走，不跳回起点重播。CSS 过渡会从当前值重新出发，适合高频切换；关键帧动画会从头重播，适合一次性的出场。业务状态立即更新，不等动画结束。

-网页连续动画优先用变换与透明度，只声明需要变化的属性；小尺寸的指示块可以直接过渡宽高。逐帧工作要有停止和清理条件，避免频繁交错读写布局，离屏或无任务时停止播放。整页过渡期间页面通常不响应点击，所以整页过渡要短。
+网页上连续播放的动画，优先只动变换和透明度，过渡里只写会变的那几个属性；很小的指示块可以直接过渡宽高。每一帧都要执行的代码，要有停下来和清理的条件，不要一会儿读布局、一会儿写布局地来回交替；滚出屏幕或没事可做时就停。整页过渡期间页面通常点不动，所以整页过渡要短。

-明显位移、缩放和滚动特效，要为“减少动态效果”提供等价呈现，此时所有状态直接到位。必要信息和主要操作不能依赖自动播放、声音或动画完整结束。
+有明显位移、缩放或滚动特效的地方，要照顾开了“减少动态效果”的用户：这时所有状态直接到位，内容一样不少。必要的信息和主要的操作，不能等自动播放、声音或动画播完才出现。

 ## 检查动效

-静态截图证明不了动效。三处基本动效和动效记忆点都要留证据：一段 3–5 秒录屏，或开始、中间、结束三帧，并写明触发它的动作。把播放速度调到 10%，可以用浏览器开发者工具的动画面板，或自动化工具里的动画倍速，在过渡进行到一半时截图。看有没有重影、跳动、元素突然出现，或者从奇怪的位置飞来。逐个检查开始、中间、结束和反向；再快速连按几次，确认不会卡在中间状态。最后开启“减少动态效果”再走一遍。只有实际测量后才报告帧率或性能改善。
+按正常速度操作一遍，再往回操作一次、快速连按几次：没有重影和跳动，元素不突然出现，不从奇怪的位置飞来，不卡在中间状态。开启“减少动态效果”后内容直接可读。只有实际测量后才报告帧率或性能改善。

 ## 网页实现提示

@@ -4,11 +4,11 @@

 ## 先问要不要

- **从生成引擎里来。** 效果要能说出属于这个方向的理由：方向的关键词是“信号”，点阵和扫描线才成立；是“流体”，流动渐变才成立。删掉它，方向会少一点自己的东西；删掉后没有区别，就不加。
+- **从生成引擎里来。** 效果要说得出属于这个方向的理由。删掉它，方向会少一点自己的东西；删掉后没有区别，就不加。
 - **一个主效果，几处回响。** 一页选一个主效果，其余地方只用它的颜色、形状或节奏小声呼应，比如首屏是流动渐变，按钮的流光就用同一组颜色。几种特效各自为政，页面就成了效果展示。
 - **不碰内容。** 效果不压在正文、数据和控件上，也不画得像按钮；在它上面的文字，按最差的一帧检查对比度。
 - **用代码画。** SVG 和着色器体积小，跟着主题色走，放大也清楚。摄影和复杂插画才用图片，见 [素材](media.md)。
- **质感先来自材质。** 顶尖的产品界面很少用流光、渐变团和着色器，让人记住的多是写实的材质、准确的结果和手感。特效是给少数方向的，不是提升质感的默认手段。
+- **不是提升质感的默认手段。** 先看效果是否强化方向、表达结果或给出操作反馈；都不是就不加。
 - **产品界面收着用。** 后台和工具的工作区不放持续运动的效果；登录、空状态、完成反馈和品牌页可以放开。

 ## SVG 能做的几类
@@ -69,7 +69,7 @@
 ## 成本与兜底

 - **分辨率按效果选。** 模糊的颜色场按 1 倍或一半分辨率渲染，再用 CSS 放大；点阵、像素和细线要按实际设备像素渲染，否则会糊。
- **不引入 3D 引擎。** 只画一个全屏四边形时，直接写 WebGL 或用几 KB 的小工具库，不为它加载 three.js 这类完整引擎。
+- **着色器背景不引入 3D 引擎。** 只画一个全屏四边形时，直接写 WebGL 或用几 KB 的小工具库，不为它加载 three.js 这类完整引擎。场景本身需要三维物体和物理时不在此列，见 [素材](media.md) 的“实时 3D”。
 - **看不见就停。** 滚出视口时用 `IntersectionObserver` 暂停，标签页隐藏时停掉 `requestAnimationFrame`；`prefers-reduced-motion` 时只画一帧静止画面。
 - **先写兜底。** 拿不到 WebGL、上下文丢失（`webglcontextlost`）或设备太弱时，显示同样配色的 CSS 渐变或静态图，页面照常可读。

@@ -0,0 +1,29 @@
+# 游玩：骨架、视觉与验收
+
+小游戏、抽奖、计时养成这类界面，先读 [游玩](play.md) 的“过程即玩法”和“素材与渲染”，再用这份文件定场景骨架、避开趣味默认，并在交付和评审时多查几项。
+
+## 骨架：场景与主循环
+
+- 被操控的对象和它所在的场景占主区。余额、次数这类状态贴边，一行以内；拇指操作区在下方，整局不挪位置。
+- 动手前写清主循环：一次输入（拖、拉、按、投），场景怎么变，什么时候算赢、算输或一局结束，下一次从哪里开始。
+- 普通结果在场景里原地发生，不弹结算页打断下一次操作。新藏品、大奖这类少见结果可以停一下；开壳、入柜、新树落进林子这类和对象连续的切换照常做。
+- 首页回答“现在能玩什么、还剩多少次”，一打开就能上手。
+- 不套通用 App 外壳。底部标签栏、成排的圆形图标按钮会把游戏变回设置页；收藏、图鉴这类入口做成场景里的物件或一个角标。
+- 反馈强度跟品类走。街机、抽奖要光、粒子、震动和声音，稀有结果和普通结果的演出明显不同；专注、养成这类安静的产品，只要一次克制的落定。没有稀有结果的产品，不为凑检查项去加。
+
+## 视觉：别做成趣味默认
+
+趣味类 App 最容易做成奶油、薄荷或马卡龙底，配软 3D 搪胶吉祥物、底边加厚的大胶囊按钮、右上角静音键和卖萌口号，产品名取拟声词。这是这类产品新的“不会出错”。色彩、材质和角色从这个玩法的实物里推出来，例如街机的金属和灯牌、扭蛋的塑料壳、桌游的纸板和印刷，说得出为什么是它而不是隔壁那款。已有作品命中这些，先找依据，有依据就保留，不必整套重做。
+
+游戏靠造型、动效和声音说话，文字越少越好。操作说明只在第一次出现，操作过一次就消失；出口、投币口、抓取键这类东西靠造型认出来，不贴文字标签。结果写数字和名词，例如余额、倍数、藏品名，不写口号。下面说的随局面变化的短反馈可以留，用字号和动效表达，不做成旋转的综艺花字。
+
+## 交付和评审时多查几项
+
+- 次数或余额用完时，界面不再邀请做不了的动作。
+- 演出途中刷新、离开再回来，结果和扣费都对。
+- 普通收益没有被弹窗打断，一局什么时候结束看得出来。
+- “稳住…”“再推一点点”这类随局面变化的短句是玩法反馈，不算填缝文字；常驻不变的照删。
+- 不数首屏对象，看场景占屏多少、可操作目标清不清楚、拇指操作区够不够大。
+- 拿同品类手机游戏的实际画面并排比，看素材、材质和光是否达到一线完成度。保存、限额全部正确，画面停在图标包质感，同样不过关。
+- 同一个对象的动作看录屏或三帧：力从哪里来，谁被推动，最后停在哪里。只看结束状态，看不出物理是否成立。
+- 生成素材放进场景后是否可信，按 [游玩](play.md) 的“素材与渲染”核对。
@@ -0,0 +1,18 @@
+# 游玩与强手感操控
+
+小游戏、抽奖、扭蛋、计时养成，以及旋钮、拉杆、摇杆这类强手感操控，过程本身就是产品：用户来看转轮减速、硬币被推下、娃娃差点滑落。这类界面先读本文，其余规范照常适用。
+
+## 过程即玩法
+
+- 演出可以比普通界面切换长，例如三个转轮依次停下共 2 秒左右，不按“超过 500ms 就会让人等”截短。
+- 扣了费、出了结果就先存好：刷新不丢，不重复扣，奖励只结算一次。在哪一刻存，按玩法定。
+- 演出期间写清哪些操作锁住；连按不能重复扣费。
+- 旋钮、拉杆这类手势从按下的位置开始跟手，过了生效点才算一次，没到就松手不扣。
+- 减少动态效果时，玩法照常算出结果，只是画面直接到位；不能把玩法本身停住。
+- 手感看录屏判断：减速是否连续、停下时有没有顿挫、收益从哪里飞到哪里。三帧只能说明状态。
+
+## 素材与渲染
+
+- 角色、藏品、道具、符号和材质贴图是这类界面的主角，默认用生图做，动手前先列素材清单。手写 SVG 和 CSS 只画界面图标和简单图形，拿它们画角色和道具，会落到图标包的质感。成套出图的做法见 [素材](media.md) 的“成套素材”；宿主没有生图能力时，按同一份文件交素材简报，不拿手画的图形冒充成品。
+- 乐趣来自空间和物理时，用实时 3D 渲染场景，例如堆叠、碰撞、推挤、摆动，或透明、金属材质；生成的图当贴图和精灵用，做法见 [素材](media.md) 的“实时 3D”。树木生长、天气这类自然变化，用成套生成图通常更好。
+- 素材放进场景后再看一次：受光和场景一致，有接触阴影，侧面、背面和翻落时不露出纸片的边。图生成了，不等于放进场景就可信。
@@ -0,0 +1,27 @@
+# 评审循环与扩展派发
+
+主 Agent 专用，是 [视觉评审派发协议](visual-review.md) 的补充：交接清单和反馈处理照那份文件执行，评审轮次和下面几种评审按本文件。各种评审的标准在 [评审手册补充](review-modes.md)，由子 Agent 读，主 Agent 不读。
+
+## 评审轮次
+
+**打分循环制**（针对全新设计）：以 9 分为完成目标，最多 3 轮。每轮都派全新的子 Agent，但第一轮之后不再从头挑毛病，否则每轮都冒出新问题，循环收不住，分数的涨落也说明不了修改有没有用。
+
+1. **第一轮盲审**：按派发协议交接，评审给出排好序的问题、提升条目、“保留”一行和分数。
+2. **之后的轮次先复核**：改完只重新截这一轮改动影响到的画面和动效，派全新子 Agent，交给它新截图和上一轮的问题与提升清单，清单连同“保留”一行原样转交，不给分数，也不附你的修改说明。提示词用下表的复核模板。复核逐条判断修好、修了一部分还是没修，最多再指出 3 处这批修改带来的新问题，然后重新打分。
+3. **什么时候换回盲审**：复核里全部修好、分数仍不到 9，说明剩下的差距第一轮没指出来，下一轮派全新盲审，拿一份新的问题清单。评审第一条写“重做”时，按派发协议回到方向卡重做，下一轮也用盲审。
+4. **停止**：满 9 分；或到 3 轮；或同一条问题连续两轮复核都没修好，这时停下，在交付说明里写清卡在哪里、试过什么改法。
+
+- **到了 9 分也要收尾**：剩下的提升条目，只要不改方向、半小时内能做完，做掉再交付，要新增元素的不在此列；不做的逐条写明具体代价，不用“当前也说得通”带过。
+
+## 复核、多方向、任务走查与方案评审
+
+| 你做了什么改动 | 子 Agent 的提示词 (Prompt) 模板 |
+| --- | --- |
+| 打分循环第二轮起，复核上一轮的问题和提升 | `请读取 references/review-modes.md，按照【复核】标准，对照附上的上一轮问题与提升清单检查这些新截图，然后重新打分。` |
+| 几个方向都做成了完整页面，或用户要求评审几个首屏 | `请读取 references/review-modes.md，按照【多方向横向对比】标准，检查提供的多张方向截图是否属于同一骨架换皮。` |
+| 涉及业务流程或交互链路的更改 | `请读取 references/review-modes.md，按照【任务走查】标准，模拟真实用户完成以下任务，记录体验障碍。` |
+| **评审改流程和加新功能的方案**：改流程或加新功能出了几个方案 | `请读取 references/review-modes.md，按照【改流程与加新功能方案评审】标准，比较提供的几个方案，指出假差异、补丁和每个方案最可能失败的场景。` |
+
+模板里的路径按 [派发协议](visual-review.md) 换成绝对路径。
+
+小游戏、抽奖、计时养成这类产品，派发全新界面评审时在提示词末尾加一句：`另按 references/play-craft.md 的“交付和评审时多查几项”核对。`
@@ -0,0 +1,34 @@
+# 评审手册：横向对比、任务走查、方案评审与复核
+
+评审者专用，是 [评审手册](reviewer-manual.md) 的补充。主 Agent 派发时会写明按哪一节执行。
+
+## 1. 多方向横向对比（查重）
+
+同时看所有方向的截图（首屏或整页），只回答一个问题：哪些区块在不同方向里本质上是同一个东西（骨架和版式相同，只是换了颜色和字体）？逐个点名，要求退回按各自的方向重做。
+
+## 2. 任务走查（纯交互与 UX）
+
+如果不看截图，而是操作真实页面/高保真原型：
+1. 顺着真实任务走，记录每一步看到了什么、为什么点这里。
+2. 标记三类问题：**卡住**（走不下去）、**走错**（点错又退回）、**犹豫**（需要猜）。
+3. 检查异常：能否原地恢复失败（断网/空数据）。会保存东西的产品，再走刷新后读回、保存失败时是否如实告知并能重试；谎报成功、刷新丢数据是严重问题。游戏类另按 [游玩验收](play-craft.md) 的“交付和评审时多查几项”。
+4. 声音、触觉和真机手感没法验证时，写明未验证，不当作通过。
+5. **输出要求**：按严重程度排序提交体验障碍报告。不打审美分。
+
+## 3. 改流程与加新功能方案评审
+
+比较多个交互方案：
+1. 指出是否存在入口和步数都相同、纯粹是换了画面的假差异方案。
+2. 指出哪一步还在让用户伺候界面（找入口、重复填已知值、为了确认而确认）。
+3. 找出表面上的“补丁”设计（加了提示但没减少用户麻烦）。
+4. **输出要求**：指出每个方案最可能失败的场景。不打分。
+
+## 4. 复核（打分循环的第二轮起）
+
+主 Agent 交来新截图和上一轮的问题与提升清单。你的任务是核对，不是从头再评一遍：
+
+1. 逐条判断上一轮的问题和提升：**修好**、**修了一部分**或**没修**，提升按做到位、做了一部分或没做来写，每条写一句新截图里看到的证据。只认画面：主 Agent 说修好了不算数，截图里看不出来的算没修；只是挪了位置、改了数值，问题本身还在的，算修了一部分。
+2. 对照上一轮的“保留”一行，看那一处有没有被这批修改磨掉。磨掉了算新问题。
+3. 这批修改带来的新问题最多写 3 条，按 [评审手册](reviewer-manual.md) 第 1 节的标准判断。上一轮没提过的老问题不在这一轮补，之后要不要另派全新评审由主 Agent 决定。新问题和“离下一档还差什么”里不写“再加一样”；只是对象变少、主角没有变大变强的减法，算修了一部分。
+4. 截图明显不是当前版本时，只写这一点，不打分。核对某条问题需要的画面没给（例如某个状态），那条记为“无法核对”，不因此停评。
+5. **输出要求**：逐条核对结果，新问题，最后按评审手册第 1 节的分数锚点重新打分。还有没修好的问题时，分数按这些问题的严重程度落档，不因为整体看起来好了一些就放过。
@@ -0,0 +1,73 @@
+# 视觉与交互评审手册 (子 Agent 专用)
+
+本手册给独立评审者读。评审者没有参与制作，只根据主 Agent 交来的当前截图和约束评审；分数按第 1 节的锚点给，拿不准时取低一档。
+
+只提供评审，不修改文件，不启动其他评审者。分清看得见的缺陷和个人的风格偏好；没有明显问题就直说，不为了凑数提修改。没看到、没法验证的内容要写明；只有静态截图时，不能声称动效或操作流程已经通过。
+
+## 1. 全新界面与改版评审（打分制）
+
+**评审视角**：拉高标准，以“该体裁里最顶尖的团队会怎么做”为标尺。
+
+0. **三秒测试（先于一切细节和流程）**：把首屏缩到 480px 宽（手机截图缩到 180px 宽）看三秒，再看遮字版三秒，写下两句话：它像哪一年的哪一类产品；第一眼看到的是什么，这样东西换到别的产品上是否同样成立。像若干年前的通用产品、组件库默认样式或素材库配图的，直接写出来，总分不超过 7 分；第一眼看到的东西放到别的产品上也成立，辨识度不及格。能用截图工具时，用它出缩略图和遮字图。
+1. **品类与标杆检验**：一句话指出这属于什么品类（如 B 端后台、展览落地页），该品类里标杆产品在首屏怎么做。指出现有画面违背共识的地方，判断是有意的创新，还是套用了模型的默认模板。能找到时，拿一两张同品类顶尖产品的实际画面并排比，说清素材、材质和场景完成度差在哪里。
+2. **模型默认做法（扣分项）**：
+   - 没来由的“左边大标题 + 右边说明/图片”的默认分栏。
+   - 处处圆角卡片、每个层级都画线框（留白已分开的地方还要画线，让画面发碎）。
+   - 单侧的彩色边线（如引文或当前项左边加个彩色条）。
+   - 无来由的渐变、发光、表情符号图标 (Emoji)。
+   - 空泛、晦涩的比喻式文案。
+   - 配色是这个品类里最顺手的那一套：问自己，这套配色换到另外三个品类的产品上是否同样成立；成立，就是没有来由的安全色。交接里有方向卡的选色记录时对照着看。
+   - 字体和素材显旧：把系统字体拉开字距当品牌字标或标题字，几种系统字体轮换着冒充不同品牌；全部品牌感只靠一个饱和纯色按钮；生成图是通用的素材库质感，看不出属于这个产品。
+   - 主 Agent 附了截图工具的“默认做法提示”时，逐条看它是否仍在画面上。仍在、交接里又没写理由的，按本节扣分；写了理由的，判断理由是否来自这个产品。
+   - 品牌字标挤占当前任务的空间：App 每屏左上角都放 Logo 加产品名，或品牌行下面再叠一行页面标题，扣分。网页的落地页、官网、文档站在左上角放标识不扣分；画面里的实物铭牌属于场景；主 Agent 在交接约束里写明品牌要求的不扣分。
+3. **动效检查（看动没动，不查证据齐不齐）**：按正常速度看录屏；录屏里看不清或没有时，自己打开页面操作一遍。只判断该动的地方动了没有：
+   - 主操作有没有反馈，一处状态切换看不看得出来路，首次进入有没有出场。
+   - 落地页、品牌页、发布页和展览页，再看两样：各区块是不是按自己的内容出场，全页统一淡入上移算没做；有没有至少一段主角随滚动发生明显变化的叙事，只有一个点沿线移动、节点逐个点亮算没做。
+   - 小游戏、抽奖、计时养成这类产品，三处基本动效只是底线，再按 [游玩](play.md) 核对“过程即玩法”和“素材与渲染”。
+   - 确实没做的写进问题。做了的，动得好不好放到“提升”的动效一项里评，不在这里展开。
+   - 不逐帧拆录屏，不核对证据文件。录屏和截图对不上，或只在个别帧里看得到的瑕疵，以正常速度下看到的为准。只有静态截图、页面也打不开时，写一句“没看到动效”，不猜。
+4. **提升：精致度、设计感、动效**：缺陷清零的页面常常只是及格。这三项逐项看，有看得见的差距才写，每条写位置、现在的水平、做到什么样算到位；某一项确实没有，写“没有”和依据。提升是把已有的东西做得更好，不是再加东西。第一条是“重做”时不写提升。
+   - **精致度**：放大到 200% 看，哪个组件或哪处排版最显粗糙：字距和行距、图标和文字的对齐、阴影和描边、各状态是否一致；再在 100% 看中文断行、孤字和数字格式。
+   - **设计感**：主角在 480px 缩略图里看不看得见、占多大；哪一处最接近品类最好水平，还差什么；哪一处仍是组件库默认的样子。处处及格却没有一处让人记住，写在这里，并指出最值得集中发力的一处。
+   - **动效**：不只看有没有。哪一处动得机械：匀速、各动各的、全页一律淡入上移、和操作接不上；哪一处最值得做出手感，让人想再操作一次或往回再滚一遍。手感用“动作 + 实物参照”写，不写形容词。
+5. **精简与瑕疵**：
+   - 填缝文字：为了把版面两端配平而塞进去的小字，例如听起来有诗意却不指向任何对象、动作或数据的短句，或写在界面上的设计说明。逐条点名，要求删掉。
+   - 明确列出其他可以直接删掉的无用文字（如“示例”、“待核实”、“系统界面”）。
+   - 除了文字，还要列出该删或该并的面板、数据和装饰：每一屏只有一个主角，多出来的点名。删完以后主角没有变大变强、画面只是变空的，同样算问题。
+
+核对构图、字体、素材和交互是不是都在呼应设计北极星。工具、后台与内容浏览页面，说明首屏对象数量、第一排内容的位置和主动作与当前对象的距离，并和同类优秀产品比较密度。
+
+参考作品是方向与质量基线，不要求照抄；精准还原任务以给定参考图为准。若有同类优秀作品截图，可与当前画面一起按完成度排序并说明差距。借用的媒介只是风格来源，不为了“更像”而增加无用部件。
+
+**输出要求**：
+
+- 先写问题，再写提升。问题只写会阻断任务、读不清或明显是模型默认做法的，按影响从大到小排序，最多 5 条；提升最多 5 条，精致度、设计感、动效三项都要表态。每条写位置、观察证据、影响、修完要达到的结果和怎样验收。改法只写目标，不替制作方定构图，不规定要放多少对象、多少数据，也不建议用加功能、加数据量来换真实感；要求新增任何元素时，同一条里写明为它腾位置要删掉什么；更小的问题合成一句放在最后。主 Agent 会按这个顺序修改，下一轮也会拿这份清单逐条核对，所以每条要写到修完能看出来的程度。
+- 首屏骨架仍是模型默认模板，或主视觉远低于同品类水准，分数因此落在 6 分及以下时，第一条写“重做：……”，点名要重做的区块和原因，不再给这些区块列修补建议。在被否定的骨架上修补，只会把它修得更像样。
+- 倒数第二行写“保留：……”，点名一两处修改时不能磨掉的做法，通常是这个方向最有辨识度的地方。
+- 最后给出 1–10 分的总分。
+
+分数按下面的锚点给，先看任务，再看视觉：会丢数据、走不通、骗用户“已成功”的问题，比任何视觉问题都优先扣分。任务全部走通也不等于 8 分，主视觉同样要过门槛。
+
+| 分数 | 门槛 |
+| --- | --- |
+| 10 | 挑不出可观察的缺陷，至少一处是这个品类里没见过的好做法 |
+| 9 | 主流程、异常状态、细节都成立，提升只剩小处；至少一处达到品类最好水平 |
+| 8 | 方向鲜明，主流程走得通，没有阻断和数据丢失；页面有主视觉或关键素材的，达到同品类一线产品的完成度；缩到 480px 仍认得出是哪件作品；有若干中等问题 |
+| 7 | 方向成立，但有一处会让用户丢数据、走错、卡住的问题，或首屏结构仍带明显的模型默认做法，或主视觉停在手画矢量、平面假透视、用文字代替造型的水平，或三秒测试里像某一年的某类通用产品 |
+| 5–6 | 能看出方向，但骨架是模型默认模板，或主流程有多处卡住 |
+| 1–4 | 主任务走不通，或画面有重叠、裁切、看不清这类基本错误 |
+
+分数写在锚点上，给出“离下一档还差什么”，从精致度、设计感和动效里写，不写“再补一种状态”。
+
+评分必须附具体差距，不同模型的数值不直接比较，用户判断优先。不猜不存在的文件与行号。
+
+## 2. 存量已有界面润色评审（只对齐规范，不打分）
+
+**评审视角**：不要想象你理想的风格，而是严格遵循该产品现有的设计规范（色板、间距）。
+
+主 Agent 提供成文规范或从现有设计变量、共享组件与同类页面整理的现状规范，以及不能改动的品牌、字体、主色、组件库和导航。没有一致的现状时，以多数做法为准，少数做法记为待统一；规范本身有问题时单独列出，交给用户决定。
+
+1. **偏离规范检查**：逐条指出当前画面哪里用了规范以外的颜色/字号/圆角，或者明明有现有组件却自己手搓了一个。
+2. **布局与结构**：在规范范围内，指出最影响完成度的三处问题（层级、对齐、留白、减法）。
+3. **动效检查**：这次改动涉及动效，或页面是落地页、品牌页、发布页和展览页时，同样按第 1 节的“动效检查”看一遍；确实没做的写成必须修改的问题。
+4. **输出要求**：只提供客观修正建议，列出可删减的文字。**不打分**。不建议更换整体品牌色或字体。
@@ -0,0 +1,98 @@
+# 滚动叙事
+
+## 落地页的滚动动效
+
+落地页、品牌页、产品发布页和展览页，滚动动效和 [动效](motion.md) 的三处基本动效一起验收；文档、文章、工具和后台不做。用成熟的动效库实现，见下文“动效库”。
+
+**必须有两样**：首屏以下的区块按内容出场；至少一段滑动驱动的叙事，主角在滚动里发生明显变化。**手法按页面挑**：首屏景深、字标收进导航、一镜到底、章节转场镜头、背景随章节变色、宣言逐字亮起，从这个页面的主视觉和内容里选合适的，写进分镜并说明为什么选它。下面先说首屏景深，它是首屏有主视觉和大标题时最常用的一种。
+
+### 首屏景深（适合首屏有主视觉和大标题的页面）
+
+首屏是一个固定住的舞台，滚动直接驱动里面的层次变化，往回滚就倒放：
+
+- 首屏固定 100–200vh 的滚动距离，窄屏可缩到 80–120vh。
+- 至少两层以不同速度、不同方向变化。最常用的是主视觉和大标题反向缩放：主视觉从 1 缩到 0.8，标题从 1 放大到 1.25；或者反过来，主视觉推近、标题后退。背景层动得最慢，前景层最快。
+- 幅度要大到录屏里一眼看出来：主层缩放不少于 15%，或位移不少于 15vh。小于这个幅度，看起来就是页面在普通滚动。
+- 大标题是图形层，可以缩放和视差；正文、按钮和表单不缩放、不做视差，固定后保持可读可点。
+- 结束状态要交接给下一节：主视觉缩到下一节的位置，标题退成背景纹理，或者画面让出一条路给下一节的主角。不要固定结束后整块直接被推走。
+
+首屏是满版的品牌字标时，用下面的“字标收进导航”。首屏是其他满版文字、产品界面或纯排版时，不一定适合景深，可以把滑动驱动的叙事放在后面。
+
+### 字标收进导航（适合首屏是满版品牌字标的页面）
+
+首屏就是品牌名本身，滚动时它缩成导航栏里的标志。它用一个元素同时完成满版文字骨架和一段滑动驱动的叙事，适合品牌名短、字形有性格的工作室、品牌和作品集：
+
+- 首屏只有这一个字标，撑满版心宽度，窄屏也保持一行撑满；导航里不再放第二个标志。
+- 滑动驱动，滚过 60–100vh，字标沿一条路径缩到导航标志的位置和尺寸，往回滚放大回来。结束状态就是导航里的标志，位置和尺寸按导航实际量出，交接时不跳。
+- 缩放同一个元素的变换，不动画字号；字标用 SVG，或按容器宽度算出的字号。
+- 字标让出首屏的同时，下一节内容已经进入画面，不留一整屏空白。
+- 字标从满版缩成导航标志，是主角明显的缩放和一次交接，算一段滑动驱动的叙事；同一页不再另做首屏景深。
+- 减少动态效果时，字标留在首屏不缩放，导航从一开始就显示标志。
+
+### 区块按内容出场（必须，滑动触发）
+
+首屏以下的每个区块，滚到位置时出场一次，往回滚不重播。出场方式从这个区块的内容和材质推出来，并且符合物理直觉：有重量的落下会过冲后稳住，轻的东西有空气阻力，机械的东西咔嗒到位。
+
+| 区块内容 | 出场方式 |
+| --- | --- |
+| 卡片、实物、价格牌 | 带重量落下后稳住，过冲幅度见 [动效](motion.md) 的“手感”；后一张被前一张带出 |
+| 列表、时间线、步骤 | 沿阅读方向依次展开，连接线先画出，节点随后落位 |
+| 数字、指标 | 滚到目标值，高位先停、末位后停；不从 0 起跳的用原值起滚 |
+| 线条、图表、路径 | 沿数据或流程的方向描出，端点落定时轻微放大一下 |
+| 图片、照片 | 遮罩从画面主体的方向揭开，图片同时从 1.08 回缩到 1 |
+| 纸、布、标签 | 先快后慢，带一点旋转后摆正，像被放到桌上 |
+| 金属、机械、硬件 | 短促到位，没有软弹，可以带一次很小的回震 |
+| 大标题、口号 | 按词或按行从遮罩里升起，字距从略松收紧 |
+
+规则：
+- 每个区块的出场写进分镜。同一页最多两个区块用同一种出场。
+- 曲线用弹簧或惯性，参数从 [动效](motion.md) 的“手感”表里按材质取，不用默认的 ease。
+- 主角先到，其余被带出，间隔 40–80ms，单个区块的出场总长不超过 900ms。
+- 全页每个区块套同一个淡入上移，不算完成这一层。
+
+### 滑动驱动的叙事（必须至少一段）
+
+可以是首屏景深、字标收进导航，也可以是页面中段一段一镜到底，规则见下一节。主角必须在滚动里发生明显变化：缩放、拆解、变形、穿过或形状接力。一个小点沿着线移动、节点逐个点亮，只能算主叙事里的一个细节，不能单独当作主叙事。
+
+### 分镜
+
+动手前在方向卡的“动效”一栏写出滚动分镜：选了哪些手法、为什么，每一段占多少滚动距离、主角是谁、每个镜头画面里有什么、什么在动、往哪个方向、文字什么时候出现。先拆两个同类顶级落地页的滚动节拍作参照，写清它们每一段在动什么，再写自己的。
+
+## 视差与一镜到底
+
+- **一镜到底。** 整段是一次不切换的镜头。一个主角从头走到尾，可以是产品、一根线、一个形状或一个字，每一步长成、变成或让出下一个画面：推近看到细节，拉远看到全貌，转过去看到背面，穿过去进入下一个场景。
+- **主角从产品里找。** 主角是这个产品处理的那样东西，在滚动里走完它自己的过程。找不到只属于这个产品的主角时，退回下面的转场手法，不用通用的漂浮几何。
+- **停下来再说话。** 每个镜头留一段静止，文字在静止时出现；边动边读很累。
+- **视差要有真实的前后。** 只在画面本来就有远近层次时用：前景的物体、中景、远处的背景，越近动得越多，差别要小。正文、按钮和表单不做视差；大标题作为图形层时，按上面的首屏景深处理。
+- **转场也是镜头。** 一个圆从某一点扩开，带出下一节；推进一张图，穿过它到达下一节；背景色在章节之间随阅读慢慢变；一句宣言随滚动逐字亮起。每种手法一页只用一次。
+- **倒着滚也成立。** 每一帧只由滚动位置决定，往回滚自然倒放，刷新或跳到中间也立刻是对的画面。不接管用户的滚动。
+- **留出口。** 长段落前给一个跳过入口；减少动态效果时，把每个静止画面按顺序排成普通区块。
+- **代码做不出来的，交给视频。** 用户想要很强的首屏动画，而效果要靠生成视频或序列帧才做得出来，例如角色转身、产品拆解、镜头穿越场景，可以告诉用户用 [oil-motion](https://github.com/oil-oil/oil-motion) 来做。CSS、SVG、着色器能完成的仍自己做；同一次对话只提一次。
+
+## 滚动交互的两种模式
+
+滚动带来的变化分两种模式：
+
+- **滑动驱动（Scroll-Driven）。** 动画进程与滚动距离严格 1:1 映射（Scrub）。用户停下则动画停下，往回滚则倒放。首屏景深、一镜到底、3D 视角变换和模型解构只用滑动驱动；除首屏景深外，一镜到底一页最多一段。
+- **滑动触发（Scroll-Triggered）。** 元素滚入视口阈值时，触发一段按自身时长播放的独立动画（如卡片进场、数字上涨）。它什么时候播完由代码决定，不跟着滚动条走。
+  - **默认单向一次性（Once）。** 触发后样式固定，用户向上回滚不重播、不复位，不在阅读中途让内容反复飞入或闪烁。
+  - **离开重置（Reset on Leave）。** 只有强节奏的纯展示页才允许在完全移出视口后重置，不在视口临界点反复触发。
+
+## 平滑滚动与全屏分段
+
+- **平滑滚动只管滚起来顺不顺，不算动效。** 用 Lenis 这类库，是为了消掉鼠标滚轮一格一格的跳动，让滑动驱动的动画和视差走得均匀。后台、仪表盘、表单和长文档不开全局平滑滚动，保持原生滚动的即时响应。
+- **慎用全屏分段滚动（Snap Scroll）。** 隐藏滚动条、单次滑动切换整屏的做法只适合特定的全屏展厅与作品封面，常规业务和长文本不用。
+
+## 动效库
+
+落地页的滚动动效必须用成熟的动效库，不手写滚动监听和逐帧计算：
+
+- **没有框架的页面**：GSAP，滚动用 ScrollTrigger（`scrub` 做滑动驱动，`once` 做滑动触发，`pin` 固定舞台），大标题拆字用 SplitText，元素换位置用 Flip。平滑滚动用 Lenis，并接进 GSAP 的时钟：`lenis.on('scroll', ScrollTrigger.update)`、`gsap.ticker.add((t) => lenis.raf(t * 1000))`、`gsap.ticker.lagSmoothing(0)`。GSAP 和它的插件都可以免费使用。
+- **React、Vue 等项目**：沿用项目已有的动效库（Motion、GSAP 等）；没有时加 GSAP，不另外手写一套。
+- **需要离线打开的作品**：把库文件按固定版本放进作品目录，从本地引用，不依赖 CDN。
+- **减少动态效果**：用 `gsap.matchMedia()` 分开两套：减少时不固定、不缩放，所有区块直接到位，主叙事排成按顺序的静止画面。
+- 只动变换、透明度和滤镜。固定舞台的外层高度就是这段的滚动距离；离屏的动画由库自动暂停。窄屏可以缩短距离、降低幅度，但选定的手法都要保留。
+
+## 检查
+
+从头滚到底，再滚回去，各看一遍：往回滚是否倒放、跳到中段刷新画面是否正确、文字是否在静止时出现、窄屏选定的手法是否都在、开启“减少动态效果”后是否所有内容直接可读。
@@ -0,0 +1,47 @@
+# 空间容器
+
+空间容器用来打破平铺的网格：在一屏或一个通栏区域里，安排好几项并列的内容怎么摆、怎么展开和收起。
+
+它和 [卡片](cards.md) 的区别：卡片管的是一张卡里面放什么（例如指标、终端、名牌）；空间容器管的是这些卡之间怎么摆。卡片可以当作其中的一项放进空间容器里。
+
+## 先看要不要用空间容器
+
+适合用的地方：
+- 并列展示 4–7 个核心场景、方案或作品，既想保持单屏通栏的聚焦，又想让用户一眼纵览全部选项；
+- 旗舰功能的沉浸式画廊或专题策展，希望打破千篇一律的卡片网格；
+- 需要在不跳出当前画面的前提下，直接在画面内部做轻量选择或切换。
+
+不适合用的地方：
+- 密集数据表格、长文阅读或高频业务后台；
+- 用户必须同时横向对比 3 项以上全部细节文字的场景（空间容器通常一次只大画幅展示一项）；
+- 只有 2 项内容（直接并排即可）或超过 8 项内容（改用带分页的横向走马灯或网格）。
+
+## 四种空间形态
+
+| 形态 | 空间关系 | 交互机制 | 适合场景 |
+| --- | --- | --- | --- |
+| **水平手风琴** | 当前这一项展开成大画面，其余各项收成一样高的细长条 | 点击或悬停某一条时，原来那项收起、这一项展开 | 空间档案、案例策展、系列产品特写 |
+| **弧面景深** | 当前这一项正对着居中，两边的项沿一道浅浅的弧面往后退，略微倾斜 | 横向滑动或切换时，各项沿弧线平移，退到后面的略微虚化 | 品牌展台、沉浸画廊、硬件产品全景 |
+| **前后叠牌** | 当前这一项在最前面，其余的一张张叠在后面，各露出一点边 | 切换时前面那张滑走，或后面那张移到前面 | 方案版本对比、凭证卡包、历史归档 |
+| **轨道透镜** | 中间是主体，周围一圈节点绕着它 | 点到某个节点时，视角或内容沿着这一圈转过去，对准它 | 生态能力矩阵、多角色多视角切换 |
+
+### 水平手风琴的排布细节
+- **收起的条**：只留序号、竖排的标题（CSS `writing-mode: vertical-rl`）或状态标记，文字居中、四周留空，不能因为太窄而折行或挤在一起。
+- **什么时候展开**：用悬停触发时加一点防抖（约 60–80ms），免得鼠标快速划过一整排时界面来回抖；支持用键盘方向键切换。
+- **内容什么时候出现**：展开的那一项里的标题、大图和说明，等它展开到位或展开了大半再淡入；收起时内容先快速淡出，免得窄条里露出被挤扁的半截正文。
+
+## 卡片内微操作抽屉
+
+展开的那一项或展示卡片里，要放一点轻量的设置（例如换配色、收藏、微调规格）时，用一个嵌在卡片里的小抽屉：
+
+- **绝对定位，单独一层**：抽屉在卡片内部绝对定位，打开、滑出和收起都只改它自己的 `transform` 和 `opacity`。
+- **外框不动**：抽屉出现时不改变卡片外框尺寸，不推挤相邻切片，不引发外层布局重排。
+- **不出界**：抽屉滑出来以后，整个都要在这一项看得见的范围里，不能被旁边的条挡住或切掉；窄屏上贴着内边距放，或者改成从底部升起的浮层。
+- **收得快**：悬停时展开，移开就收起，或者点一下固定住；关闭要快，约 150–220ms。
+
+## 动效手感与物理约束
+
+- **展开和收起带一点阻尼**：用略带回弹的曲线，例如刚度 240、阻尼 25 的弹簧，或者调过的 `cubic-bezier`，不用匀速的默认缓动。
+- **背景图别晃**：展开那一项的背景图如果会跟着移动，位移控制在 5–10% 以内；完全展开后图立刻停稳，静止的时候不再动。
+- **可以打断和反向**：展开到一半用户又点了回去，或者很快切到下一项时，动画从当前的宽度接着走，不跳回起点重播。
+- **时长**：一次展开或收起在 600–800ms 内完成。
@@ -1,24 +1,14 @@
 # 风格对比页

-把几个候选放在同一页里并排比较，由用户挑选。用户可以并排或单张查看、切换桌面和手机、按实际尺寸看、筛选、选定并写备注。对比页的外壳只负责比较和挑选，不带风格倾向，也不作为候选的参考。
+把几个候选放在同一页里并排比较，由用户挑选。用户可以并排或单张查看、按实际尺寸看、选定并复制方向。对比页的外壳只负责比较和挑选，不带风格倾向，也不作为候选的参考。

-先保持核心内容、主要动作和目标用户一致，再改变构图、信息组织、字体气质、色彩关系、密度与图像语言。数量按请求和有效差异决定，不复制整个产品来凑方案，也不把内置外壳的风格套给候选。
-
-对比页是视觉探索工具。HTML 小样默认不执行脚本和提交，标记为可操作的小样和本机地址候选除外（见“准备输入”）；需要真实数据、登录或后端的交互验收，仍在项目里进行。
+几个候选的核心内容、主要动作和目标用户保持一致，变的是构图、信息怎么组织、字体的气质、色彩关系、疏密和用图的方式。放几个候选，看用户要几个、真正有差别的有几个；不复制整个产品来凑数。

 ## 准备输入

-一轮只生成一个对比页，候选能跑就用真实页面：单独写的 HTML 小样直接嵌入，项目里的方案用本地地址。只有拿不到可运行的页面时才用截图。每个方案一个画面：存量项目选入口或差别最大的那一步，整站方案只放代表页，其他页面写进说明。手机版只在手机是主要设备时另出，不手写汇总页。
+一轮只生成一个对比页。候选能跑就用真实页面：单独写的 HTML 小样直接嵌入，项目里的方案用本机地址，拿不到可运行的页面时才用截图。每个方案一个画面：存量项目选入口或差别最大的那一步，整站方案只放代表页。

-在任务目录放置 `manifest.json` 和候选文件。HTML 候选为带 `head` 的文档，CSS 写在页面里。图片、字体和视频用相对路径引用任务目录里的文件，例如 `img/hero.jpg`，生成器会把它们内嵌进对比页；不要自己把图片转成 base64 写进候选，文件会变得很大、难以修改。不引用网络资源和任务目录以外的文件，链接只使用本页锚点。可以保留代码供独立打开，但比较页不执行其脚本。
-
-候选必须在不运行脚本时也能显示设计内容。依赖脚本生成界面的页面，先取得静态 HTML 或实际截图；不能把只有空挂载节点的应用入口交给对比页。
-
-候选内部不使用 iframe、object 或 embed 等嵌套文档；先将需要的内容转为静态页面或截图。另存的现有页面常带 `srcset` 或 `<picture><source>` 响应式图片，生成器会拒绝：改成一张用相对路径引用的 `<img>`，或直接用截图作为图片候选。
-
-图片候选支持 PNG、JPEG、WebP。实际查看图片并记录它代表的页面与状态，避免拿不同任务或不同状态的图比较风格。源文件必须位于 manifest 同目录或子目录。
-
-manifest 使用固定字段，结构如下。尖括号内是占位说明，全部换成本轮方向卡里的实际内容；不要沿用占位文字作为风格：
+在一个目录里放 `manifest.json` 和候选文件。候选引用的图片、字体、视频也放在这个目录或它的子目录里，用相对路径引用，生成器会把它们内嵌进对比页。manifest 最少这样写，尖括号里换成本轮候选的实际内容，方向用方向卡里写的：

 ```json
 {
@@ -34,49 +24,34 @@ manifest 使用固定字段，结构如下。尖括号内是占位说明，全
      "typography": "<实际使用的字族、字重与尺度关系>",
      "palette": ["<十六进制色值>", "<十六进制色值>", "<十六进制色值>"],
      "traits": ["<可观察特征>", "<可观察特征>"],
-      "kind": "html",
      "source": "<候选文件的相对路径>"
    }
  ]
 }
 ```

-自己写的可运行小样（单个 HTML、脚本内联），在 manifest 里给候选加 `"interactive": true`。单张查看时就能直接操作，对比页仍是可离线移动的单个文件，不需要服务器；卡片左下角标注“可操作”。这类候选只能运行内联脚本，不能联网或加载外部文件；浏览器存储换成页面关闭即清空的内存版本；`alert`、`confirm` 这类系统弹窗不会出现，需要确认时用页面内的对话框。
+| 情况 | 在 manifest 里加 |
+| --- | --- |
+| 固定画布的界面，不随宽度重排 | 顶层或候选里写 `"nativeViewport": "<宽>x<高>"`。对比页按这个视口渲染，再整体等比缩放，候选不用自己写缩放 |
+| 自己写的可操作小样 | 候选加 `"interactive": true` |
+| 项目里要运行起来才能看的页面 | 候选的 `kind` 设为 `"url"`，用 `url` 指向本机开发服务器；顶层用 `serve` 写下启动命令 |
+| 改动已有页面 | 把现状也放进来，加 `"baseline": true` |
+| 只有截图 | 候选的 `kind` 设为 `"image"` |

-已有仓库里要运行起来的应用（例如 React、Vue 项目），把 `kind` 设为 `url`，用 `url` 字段代替 `source`，指向本机开发服务器上的页面，例如 `http://localhost:5173/orders?variant=b`。这类候选在对比页里实时运行，脚本和表单照常工作，切换手机视口时应用会真实重排；卡片左下角标注“本地运行”。地址只能是 localhost、127.0.0.1 或 ::1；页面空白时，确认开发服务器已启动，且没有用响应头禁止被嵌入。这类候选要靠开发服务器才能看，所以：
-
- 在 manifest 顶层写下启动方式，就是你刚才自己用过的那条命令：`"serve": {"command": "pnpm dev", "cwd": "<项目的绝对路径>", "url": "http://localhost:3456"}`。
- 交付时让开发服务器开着，用户打开对比页看到的就是真实页面。
- 服务没在运行时，对比页会提示用户在对话里说“打开对比页”，并附上这条命令。
-
-不默认另存截图版。用户要长期留档或发给别人时，再用 [工具](tools.md) 里的截图工具另截一份。
-
-给当前版本加 `"baseline": true`，它会排在第一位，编号显示为“现状”，其余方向从 01 开始编号。每轮最多一个基线。改动存量页面时，都把现状放进来，让每个方向都和它对照。
-
-`id` 使用唯一的小写字母、数字、连字符或下划线。`typography` 描述实际使用的文字关系，`palette` 使用十六进制颜色，`traits` 简述可观察差异。图片候选将 `kind` 改为 `image`、`source` 指向对应图像。
+每个字段的写法和限制见生成器的 `--help`。

 ## 生成和打开

-确认 Python 不低于 3.10，将脚本与输入输出参数解析为绝对路径后运行 [生成器](../scripts/build_explorer.py)：
-
 ```text
-<python> <skill>/scripts/build_explorer.py <任务目录>/manifest.json --output <任务目录>/style-explorer.html
+<python> <skill>/scripts/build_explorer.py <manifest 所在目录>/manifest.json
 ```

-macOS/Linux 通常使用 `python3`，Windows 通常使用 `py -3`；执行前确认实际解释器。没有生成器运行能力时保留输入与候选供直接查看，说明尚未组装对比页，不临时重写另一套工具。
+对比页生成在 manifest 旁边，文件名是 `style-explorer.html`。写错时生成器会把所有要改的地方一次列出来，照着改完再运行；同名文件已经存在时加 `--force`。运行不了生成器时，把 manifest 和候选留给用户直接看，说明对比页还没有组装，不临时另写一套工具。

-默认拒绝覆盖。确实要更新已有本轮对比页时显式加 `--force`，或使用新的输出文件名。输入错误时保留旧产物；生成器不覆盖源候选，也不允许把运行产物写入 Skill 目录。
+有本机地址候选时，交付时让开发服务器开着。用户之后说“打开对比页”：读 manifest 里的 `serve`，在 `cwd` 里后台运行 `command`，等 `url` 能访问了再打开对比页。

-用浏览器打开返回的本地 HTML。HTML 小样和截图已经内嵌，单个文件移到哪里都能看；本地地址候选要开发服务器开着。模板原文件只有空状态，不是用户最终对比页。
+## 记录选择

-用户之后说“打开对比页”时：读对比页旁边的 manifest 里的 `serve`，在 `cwd` 里后台运行 `command`，等 `url` 能访问了，再用浏览器打开对比页。端口被占用时先确认占着它的是不是同一个项目。
+用户点“选择”会复制一句话，例如“<轮次>：选 03 <方向名>”。用户粘贴它或直接说出选择后，按轮次和编号对照当前 manifest，确认是这一轮的，把选择和备注更新到设计说明，再回到生成这个对比页的流程接着做。对比页不会写回任何文件，也不会自动给 Agent 发消息。

-## 查看与记录选择
-
-默认使用相同逻辑视口展示 HTML 候选：桌面 1280×900，手机 390×844。卡片等比缩放以便同屏比较；判断文字大小与细节时进入单张查看，使用“实际尺寸 100%”检查真实排版；适应窗口仍可能缩小，不能据此宣称可读性通过。切换手机视口后确认真实重排，而非仅看缩小后的桌面。
-
-点“选择”时会复制一句简短的文字，例如“<轮次>：选 03 <方向名>”，有备注时再附一行。用户粘贴复制的结果或直接说出选择后，Agent 按轮次和编号对照当前 manifest，确认对应本轮，再把选择与备注更新到项目设计说明，继续实现。浏览器本地保存不代表已经写回项目文件，也不会自动向 Agent 发送消息。
-
-## 检查实际结果
-
-核对候选：每张画面和 manifest 里写的页面、状态、视口一致，中文字体真实渲染出来了。对比页本身的并排、单张、筛选、复制和离线打开由 Skill 自带的回归测试保证，任务里不验证、不读模板源码，也不在用户自己的浏览器里清除任何存储。
+交付前核对候选：每张画面和 manifest 里写的页面、状态、视口一致，中文字体真实渲染出来了。判断文字大小和细节时用单张查看的“实际尺寸 100%”，适应窗口的缩小图不能当作可读性通过。对比页本身的功能由 Skill 自带的测试保证，任务里不验证、不读模板源码。
@@ -1,55 +1,50 @@
 # 工具

-本目录自带的程序按下面的写法调用，不需要读源码；加 `--help` 打印同样的说明。
+本目录自带的程序不需要读源码。这里只写什么时候用和最常用的几条命令；全部选项、动作写法和输出文件见各自的 `--help`，写错时报错会给出照抄就能用的写法。

-宿主有自己的浏览器工具时，查看页面、走查流程照常用。要交出下面这几样标准证据时，优先用这里的截图工具：它开一个独立的临时浏览器，不碰用户自己浏览器里的数据。本机缺 Node 22，或者没有 Chrome、Chromium、Edge 时，退回宿主工具，交出同样的几样东西。不为截图另写 Playwright 或浏览器协议脚本。
+宿主有自己的浏览器工具时，查看页面、走查流程照常用。要交证据时优先用这里的截图工具：它开一个独立的临时浏览器，不碰用户自己浏览器里的数据。本机缺 Node 22，或者没有 Chrome、Chromium、Edge 时，退回宿主工具，交出同样的证据。任务或项目已经指定了截图工具时，照用它。

 ## 截图和录屏

+### 什么时候截，截多少
+
+截图分两种用途，不要混在一起：
+
+- **看一眼**：改完一批，想看效果。只截当前这一屏，一条命令。把一批改动攒在一起改完再截，不是每改一处截一次；页面没有变，就不重复截。
+- **取证**：用 `--evidence` 一次取齐状态图、并排图、遮字图、2 倍图和录屏。只在两个时候做：送评审之前，交付之前。方向首屏那一轮每个方向只截一张，不取证。
+
+每一轮评审只重新取这一轮改动影响到的证据。没有动过的状态和动效，沿用上一轮的文件，交接时注明哪些是沿用的；拿不准有没有被影响到，例如改了共享样式，就重取那一项。
+
+### 常用命令
+
 ```text
 node <skill>/scripts/shoot.mjs <页面地址或 HTML 文件> [选项]
 ```

-本地文件会用一个只监听本机的临时服务器打开。地址里带 `?` 或 `&` 时加引号，例如 `"http://127.0.0.1:3000/?state=done"`；更省事的是用 `--states`。同名文件会直接覆盖，不需要额外参数。
-
 | 要什么 | 加上 |
 | --- | --- |
-| 每个状态各一张，再拼成并排图 | `--states idle,running,done,error --sheet` |
-| 同时要遮掉全部文字的版本 | 再加 `--mask` |
-| 200% 截图 | `--zoom 2` |
-| 手机和桌面各一套 | `--size 390x844,1280x900`（默认只有 390x844） |
-| 整页长图 | `--full` |
-| 截图前先操作几步 | `--steps "click .open; wait 300"` |
-| 主操作录屏，外加开始、中间、结束三帧 | `--record --steps "drag .handle 0 -80; wait 400; click .start" --hold 1500` |
+| 看一眼桌面效果 | `--size desktop`；不写时是手机 390x844 |
+| 操作几步再截 | `--steps "click .open; wait 300"` |
+| 送评审或交付前取证 | `--evidence --states idle,done --steps "send: click .send"` |
+| 落地页录一段从头滚到底 | `--record --steps "scroll 600; scroll 600; scroll 600"`，按页面长度多写几步 |
+| 截图还原：和参考图比对 | `--compare 参考.png --size <参考的逻辑尺寸>` |
+| 给用户指出问题：在元素上画框、标编号 | `--mark "1=.page-head .btn; 2=.toggle-row" --full` |

-`--steps` 里的动作用分号隔开：`click 选择器`、`hover 选择器`、`drag 选择器 横向位移 纵向位移`、`type 选择器 文字`、`key 按键`、`scroll 纵向位移`、`wait 毫秒`。
+状态靠地址参数进入，所以页面要能用 `?state=<名字>` 直接打开每个状态。其余选项、选择器和动作的写法、输出文件和 `report.json` 的结构：运行 `node <skill>/scripts/shoot.mjs --help`。拿不准写法时先加 `--dry-run` 检查，不会启动浏览器。同时开着很多任务、截图超时的时候，加 `--timeout-scale 2`。

-结果写进 `--out` 指定的目录，默认是 `./shots`：每个状态一张 `<状态>.png`，遮字版是 `<状态>-masked.png`，并排图是 `sheet.png` 和 `sheet-masked.png`，录屏是 `record.mp4` 和 `motion-start/mid/end.jpg`。每张图都会检查控制台错误、横向溢出和没加载出来的图片，命令最后一行给出结论，明细在 `report.json`。录屏需要本机装了 ffmpeg，没有时只留三帧。
+### 看结果

-检查报出接口 401、404 这类和画面无关的错误时（例如访客状态下的登录接口），在交付说明里记一行就行，不为了让检查通过去改登录、接口这类业务代码。
+交给评审前先自己看一眼：默认状态是不是已经加载完，遮字版有没有把图形也一起盖掉。证据有错先重截，再交给评审。汇总里提示录屏和截图不一致时，静止的终态以截图为准，再单独重录那一段核对过渡。画面是空的 WebGL 截图不能当证据。

-截图前先自己看一眼结果：默认状态是不是已经加载完，遮字版有没有把图形也一起盖掉。证据有错先重截，再交给评审。
+每张截图还会查一组能从页面样式里直接判断的问题，命令输出里以“默认做法提示”列出：
+
+- **要改的可读性问题**：文字对比度不达标、正文小于 13px、多行正文行高过紧、首屏里停在透明状态的内容。
+- **改掉或写出理由**：有色底上的灰字、正文行太长，以及模型默认做法：标题上方的眉标和编号标签、彩色单侧边线、渐变文字、卡片里套卡片、表情符号当图标、中文界面里的英文大写标签、标题离上文比离下文还近。保留的项，在交付说明里写出它怎样服务方向。
+
+检查会误报，例如真实的步骤编号、确实需要的标签；误报在交付说明里写一句。它只认得写法，判断不了好不好看：提示清零之后，仍要自己看截图。检查报出接口 401、404 这类和画面无关的错误时，在交付说明里记一行，不为了让检查通过去改登录、接口这类业务代码。

 ## 写可操作的小样

-小样要能用地址参数直接打开每个状态，例如 `?state=done`，截图工具和评审都靠它。一个组件或一个页面只写一个文件，不要每个状态复制一份。
+方向探索阶段的首屏不做交互，用不到这一节；选定方向后做完整页面时再用。存量项目照用项目自己的技术栈。

-颜色、字号、间距、圆角先定成十来个 CSS 变量，后面一律引用变量；同一个组件的样式用原生 CSS 嵌套写在一起。不引入 Tailwind 或 Sass 这类需要构建的工具。
-
-状态和交互用 Alpine.js 写在 HTML 属性上，不手写一长段切换显示的脚本：
-
-1. 复制到任务目录：`cp <skill>/assets/vendor/alpine.min.js <任务目录>/vendor/`
-2. 页面里引用：`<script defer src="vendor/alpine.min.js"></script>`
-3. 状态集中放在一个 `x-data` 里，初始状态读地址参数：
-
-```html
-<main x-data="{ state: new URLSearchParams(location.search).get('state') || 'idle', amount: 40 }">
-  <p x-show="state === 'done'">做好了</p>
-  <input type="range" min="20" max="80" x-model.number="amount">
-  <button @click="state = 'running'">开始</button>
-</main>
-```
-
-放进对比页时，在 manifest 里给这个候选加 `"interactive": true`。生成器会把任务目录里引用到的 CSS 和 JS 文件内联进对比页，不用手动合并。
-
-存量项目里照用项目自己的技术栈，不引入 Alpine.js。
+一个组件或一个页面只写一个文件，用地址参数切换状态，不要每个状态复制一份。颜色、字号、间距、圆角先定成十来个 CSS 变量，后面一律引用变量，不引入需要构建的工具。表单、切换、展开这类状态用 Alpine.js 写在 HTML 属性上：把 `<skill>/assets/vendor/alpine.min.js` 复制到任务目录的 `vendor/` 再引用，状态集中在一个 `x-data` 里，初始状态读地址参数。手势跟手、物理模拟、Canvas 和 WebGL 绘制放进单独的 JS 模块，每帧更新的数据不放进 Alpine 的状态。
@@ -1,39 +1,49 @@
 # 视觉语言

+## 目录导航
+
+- [从整体到局部](#从整体到局部)
+- [焦点与空间](#焦点与空间)
+- [字体与内容](#字体与内容)（含 [可读性是交付门槛](#可读性是交付门槛)）
+- [色彩与表面](#色彩与表面)
+- [控件与图标](#控件与图标)
+
 ## 从整体到局部

-先查看信息焦点、构图和内容密度，再调整空间、排版、色彩与细节。前一层已经解决问题时，不为显得精修而继续添加样式。
+先看信息的焦点、构图和内容的疏密，再调空间、排版、色彩和细节。前一步已经把问题解决了，就不为了显得用心再往上加样式。

-使用项目有效的视觉变量、组件和参考关系。没有标准时只定义当前需要的文字、颜色与间距角色；不凭空生成完整设计系统。
+项目里现成的视觉变量、组件和参考，能用就用。没有现成标准时，只定义眼下用得到的几种文字、颜色和间距，不凭空造一整套设计系统。

-每次修改能说明：哪个可见元素、哪种关系存在问题、调整什么、期待改善什么。源码检查可以证明样式不一致，不能单独证明画面更好。
+每次修改都要说得出：哪个看得见的元素有问题，问题出在它和谁的关系上，打算怎么调，调完应该好在哪里。看源码能证明样式不一致，证明不了画面变好了。

 ## 焦点与空间

- 每个任务区域有可辨认的主信息或主动作，辅助信息通过尺度、字重、对比或位置退后；不用多种强强调同时争夺注意力。
- 同类关系保持同类间距，组内更紧、组间更松。先用对齐与留白建立结构，再判断是否需要容器或分隔线。
- 留白承担分组、焦点或节奏。工具界面不为追求空旷牺牲必要信息，品牌页面也不强制塞满首屏。
- 非对称、越界图形或大尺度文字可以表达选定方向，但需要稳定的局部对齐和清楚阅读顺序；不把有意的非对称自动当成错误。
- 父布局负责区域排列，组件负责自身内部空间。同一距离不要同时由多层样式重复增加。
- 先把内容直接放在画布上，通过对齐、字号和留白组织。容器只在确有分组、选择、背景对比或操作边界时出现；不要把页面、模块、条目和条目说明逐层套成卡片。
+- 每个区域都要让人一眼认出最重要的那条信息或那个动作，其余信息靠更小的字、更轻的字重、更低的对比或靠边的位置退到后面；不让几种强调同时抢注意力。
+- 同一种关系用同一种间距，一组之内紧一些，组和组之间松一些。先用对齐和留白把结构立起来，再看需不需要容器或分隔线。
+- 留白是用来分组、突出重点和控制节奏的。工具界面不为了显得空旷而砍掉必要的信息，品牌页面也不必把首屏塞满。
+- 不对称的版式、跨出边界的图形和很大的文字，都可以用来表达选定的方向，但局部要对得齐，阅读顺序要清楚；有意做成的不对称，不当成错误去改。
+- 区域之间怎么排由父布局管，组件只管自己里面的空间。同一段距离，不要由好几层样式各加一遍。
+- 先把内容直接放在画布上，靠对齐、字号和留白来组织。只有真的需要分组、表示选中、拉开背景对比或划出操作范围时才加容器；不要把页面、模块、条目和条目说明一层层套成卡片。
 - 分隔线和边框不要重复。每条线只做一件事：同一处分隔不叠双线、单线再加一个框；留白已经分开的地方不再补线；不要每个层级都画一遍线。线的粗细对应层级，例如粗线分版面、细线分栏，全页一致。线本身是风格的一部分时照样保留，只删重复的那些。

 ## 字体与内容

- 按标题、正文、辅助信息、标签和数据建立文字角色。角色稳定，层级有足够区别；实际内容长度决定换行和空间。
- 检查目标语言的字形、字重与回退字体。英文样例好看不能证明中文排版成立；中英混排检查基线与视觉重量。
- 正文行长与行高服务阅读；密集表格按扫描与比较安排，不套用文章排版。需要纵向比较的数字可使用等宽数字。
- 重要名称和说明不靠固定高度裁切。确需截断时保留完整内容的可访问入口，避免相近名称截断后无法区分。
- 先写具体产品内容再调布局。按钮说明动作结果；价值表达使用真实用途，不用空泛口号、虚构背书或无意义英文填版。
+- 把文字分成标题、正文、辅助信息、标签和数据几种角色，每种角色的样式固定下来，层级之间的差别要够大；换不换行、留多少空间，按真实内容的长度来定。
+- 用产品实际的语言检查字形、字重和回退字体。英文样例好看，不代表中文排出来也成立；中英文混排时，看基线是否对齐、两种字看起来是否一样重。
+- 正文的行长和行高，按读起来舒服来定；密集的表格是给人扫视和比较的，不照搬文章的排版。要上下比较的数字用等宽数字。
+- 重要的名称和说明，不用固定高度去裁。确实要截断时，留一个能看到完整内容的入口，并且别让相近的名称截断以后分不出谁是谁。
+- 先把具体的产品内容写出来，再调布局。按钮上写按下去会发生什么；讲产品好在哪里时写真实的用途，不用空泛的口号、编造的背书或没有意义的英文来填版面。

 ### 可读性是交付门槛

-字号与行高在真实视口、实际字体和 100% 阅读尺寸下判断，缩略图只能用来判断构图。阅读型页面的中文正文通常从 16–18px 起步，产品界面正文 14–16px，每天长时间使用的高密度工具可以到 13–14px（见设计方向里的密度）；正文无单位行高 1.6–1.75；操作文字通常 14–16px。它们是起点，不是跨产品的死规定。不要靠 9–12px 的说明、低对比细字或压缩行高营造“精致”。信息太多先删冗余、调层级或重排。
+字号与行高在真实视口、实际字体和 100% 阅读尺寸下判断，缩略图只能用来判断构图。阅读型页面的中文正文通常从 16–18px 起步，产品界面正文 14–16px，每天长时间使用的高密度工具可以到 13–14px；正文无单位行高 1.6–1.75；操作文字通常 14–16px。它们是起点，不是跨产品的死规定。不要靠 9–12px 的说明、低对比细字或压缩行高营造“精致”。信息太多先删冗余、调层级或重排。

 多行中文标题通常先用 1.2–1.35 的行高，按真实字形检查。不要照搬英文大写海报的极紧行高，不把标题高度固定为单行，不用负外边距挤压后续内容。展示字确需更紧时，必须看过每个支持视口的实际换行并确认字形不碰撞。

 中文断行要主动控制：`text-wrap: pretty` 或 `balance` 只能减少孤字，不能消除。数字和单位（38 秒、47 分钟）、“不会”这类不可拆的词用不换行包起来；首屏说明、页边批注这类短段落按语义手动断句。行末只剩一两个字，或者词被拆到两行，都算缺陷。

+**窄幅展示字（Condensed / Compressed）**：只用于展示标题和极短的编号标签；它牺牲横向辨识度，正文和长阅读用常规宽度的字体。
+
 验收时看长标题、两到三行正文、中英混排、数字单位与字体回退；在窄屏和放大阅读后检查行间、上下区块及按钮内部。文字重叠、截断关键信息或被相邻区域压住属于未完成。先修行高、内容驱动高度和容器伸缩，再考虑减小字号。

 ### 示例数据要像真的
@@ -42,55 +52,29 @@

 ## 色彩与表面

-颜色按文字、背景、动作、选中与状态等含义使用。品牌色与语义状态可以共存，但不能只靠颜色区别重要状态。
+每种颜色都有固定的用处：文字、背景、动作、选中或状态。品牌色和表示状态的颜色可以同时存在，但重要的状态不能只靠颜色来区分。

-边框、阴影、材质和渐变要与方向一致，并帮助分层、表达氛围或建立品牌识别。不要把紫色、圆角、渐变列为一律禁用；问题在于无意义重复、主次混乱和不适合任务。
+边框、阴影、材质和渐变要和方向一致，并且真的在帮忙：分出层次、带出氛围，或者让人认出品牌。紫色、圆角和渐变都不是禁用项；出问题的是没有理由地到处重复、主次不分，或者不适合这个任务。

-避免每张普通卡片都使用不同的强调色、重边框与重阴影。相同层级保持一致重量；内部嵌套轮廓与外部容器协调。
+不要给每张普通卡片都配上不同的强调色、粗边框和重阴影。同一层级的东西看起来一样重；套在里面的轮廓，要和外面的容器协调。

-配色做两个自检：去掉所有发光和模糊后，配色是否还成立；能否说出一个用类似配色的成功产品或出版物。表面层级可以用色温和色相的偏移来区分，不只靠明暗。选完配色再问一句：这组颜色是从这个产品的内容、用户或品牌里推出来的，还是一组放在哪个产品上都不出错的安全色？是后者，就回到产品重新找。
+表面层级可以用色温和色相的偏移来区分，不只靠明暗。配色怎样选、怎样自检，见 [设计方向](design-direction.md) 的“定色彩”；这一节只管颜色怎样用。

 质感按调性的完成度取用，不混用：
- 精致一端：表面的高光、层次柔和的阴影、细微的冷暖交叉色、细线分隔。
+- 精致一端：公差小、层次细，具体手段从这个方向的生成引擎里找。
 - 粗粝一端：手工和印刷留下的痕迹，从这个方向的生成引擎里找，不套一组固定的道具。

-核对文字、控件边界、焦点和选中态在实际背景上的可辨认性，尤其是图像、透明和动态背景。遵循项目已有的可访问性目标；基础阅读与操作不能依赖猜测。
+**单色与双色体系**：除了多级中性灰加一种强调色，也可以全页只用一种主色和一种底色，次级信息、边框和禁用态都由主色按透明度或和底色混合派生。

-## 模型默认审美自查
+**正反色块交替**：长页面各区块可以在深底亮字与浅底深字之间以硬边直接切换，不用渐变过渡，形成清楚的段落停顿。

-先做一个总测试：把画面给人看，说“这是 AI 做的”，对方会不会马上相信？好的界面应该让人问“这是怎么做出来的”，而不是“这是哪个 AI 做的”。
-
-没有明确风格依据时，模型容易生成下列默认做法。它们都不是禁令，但每出现一项，都要能说出它怎样服务当前北极星；说不出就换成方向卡里的具体选择：
-
- 无来由的渐变、柔光、玻璃拟态和发光描边。
- 配色说不出来自这个产品的理由，只是因为它“不会出错”“显得高级”或者“这个行业都这么用”。判断不看是哪种颜色，任何颜色都可以用，只看理由是否来自这个产品。
- 中文界面从头到尾只用思源黑体或系统黑体，标题没有自己的字体性格。
- 在页面里画假的浏览器窗口、红黄绿三个圆点、写着 9:41 的手机状态栏或整台手机外壳。浏览器和设备本身已经提供这些，产品本身是浏览器或设备模拟器时除外。
- 所有内容都装进同样圆角、同样阴影的卡片，卡片里再套卡片。
- 首屏固定为左右分栏：左边大标题，右边说明、按钮或一张图；下方接三列图标特性卡。换了字体和颜色，这个骨架也常常原样保留。
- 用表情符号或随手找的图标给每个标题做装饰；最典型的是 2px 描边的通用图标放进浅色底圆角方块，每个标题配一个。
- 工具、后台，以及画廊、商店、信息流这类内容页，顶部放超大标题、口号或解释这个页面的段落，把第一排内容推出首屏；用一整块深色圆角卡片装“下一步”动作；每一列、每个区块下面一行解释它是干什么的。
- 用单侧色条标重点：引文、提示、答题反馈、当前项、紧急卡片，左边或右边加一条 2–4px 的彩色边线。这是最常见的模型默认之一，“它在表达状态”不能当理由。状态用元素本身表达：状态词加颜色或图标、整块底色、字重、位置和顺序。单侧的线只用来分隔结构，例如侧栏和主区之间、表格的列之间，并且用中性色。
- 用星星、闪光、魔法棒、机器人表示 AI 功能。图标应表达实际动作或结果，例如摘要、翻译、转写。
- 全页只用一种无衬线字体，标题与正文尺度相差不大，标题没有自己的性格。
- 每个区块都有英文眉标、胶囊徽章和一句空泛口号，例如“一站式”“赋能”“开启全新体验”。中文产品用英文做字标、表头和分区名（WORKSPACE、CONTENT OBJECT、FIELD NOTES）也属于这一类。
- 界面上写满制作说明：“示例”“待核实”“概念图”“示意图”“按钮未接入”，或者“仅保存在此浏览器”这类解释实现方式的话，挂在字段旁、图片角落或页脚。这些是写给委托人的话，放进交付说明。
- 所有间距相同，页面没有松紧节奏，也没有一处视觉重心。
- 随意给文字上色、加高亮，或者到处加描述性小字和标签，留出没有用途的空白区域。
- 首屏之后接一排三栏功能格：编号或图标、小标题、两行说明，内容和首屏重复。首屏再有辨识度，到这里也会退回模板。
- 界面完全不动，或只有悬停变色；有动效时各动各的：每个区块套同一个淡入上移，按钮、面板和数字之间没有关系。
- 自己画的下拉、开关、滚动条，比平台原生组件更难用。
- 文案抽象，用晦涩的比喻代替具体说明。方向的比喻也会渗进功能：按钮叫“检查采样”，导航画成一圈轨道。比喻只管视觉气质，功能名、按钮和导航用产品本身的说法。
-
-要求精简时给出具体操作，例如“改成以图片为中心的网格，去掉渐变、发光和多余容器”。只说“像苹果一样极简”几乎不起作用。
-
-检查时截图整页，逐项对照。出现三项以上，通常说明方向还停在默认模板，应回到方向卡重新确定主构图和主视觉，而不是逐个替换装饰。
+在实际的背景上看一遍文字、控件的边界、焦点和选中态是否看得清，背景是图片、半透明或会动的时候尤其要看。项目已有可访问性要求的，照它来；读内容和做基本操作，都不该让人靠猜。

 ## 控件与图标

-同一界面维持一致的图标语言、光学大小与文字对齐。通用图标优先使用成熟资源；特殊品牌插图单独制作，不为每个标题机械添加图标。
+同一个界面里的图标是同一种画法，看起来一样大，并且和旁边的文字对齐。通用图标优先用成熟的图标库；品牌专属的插图单独画，不给每个标题都硬配一个图标。

-可点击元素需要可识别的入口及相应反馈。默认、按下、聚焦、选中、禁用与处理中表达不同含义；鼠标悬停不能替代触屏与键盘入口。反馈变化保持点击区域与邻近布局稳定。
+能点的东西要让人看得出能点，点了要有反馈。默认、按下、聚焦、选中、禁用和处理中是不同的意思，样子也要不同；只在鼠标悬停时才出现的入口，触屏和键盘也要有办法到达。状态变化时，点击区域不变大变小，也不挤动旁边的布局。

 控件是一套语法：圆角、描边、字重、阴影、按下时的位移、选中的表达和状态图标，在按钮、输入、标签、开关和空状态之间用同一套逻辑。方向不只贯穿整页，也贯穿每个控件。按钮和输入框还停在组件库的默认样子，换了主色也认不出是哪个产品，就说明控件还没有进入方向。

@@ -115,88 +99,6 @@
 - **一个产品只用一套。** 需要补缺时，挑描边、端点和圆角一致的，统一成相同的画布尺寸和描边宽度。
 - **粗细跟字重走。** 图标描边接近同尺寸正文的笔画粗细：细字配 1–1.5px，粗黑体配 2px 以上或实心。图标尺寸约为字号的 1–1.25 倍，按视觉中心和文字对齐，不按外框。
 - **能不用就不用。** 编辑类方向常用字符本身：→ ↗ ※ §、编号、缩写。只在能加快识别的地方用图标。
- **品牌时刻手绘。** 核心动作、空状态这类少数位置，可以用方向自己的线条语言画专属 SVG；通用动作仍用库。
+- **品牌时刻手绘。** 核心动作、空状态这类少数位置，可以用方向自己的线条语言画专属的线条图标或小插图；通用动作仍用库。角色、道具和场景这类主视觉不靠手画 SVG，见 [素材](media.md)。
 - **小样内联。** 自包含小样只内联用到的 SVG，不引用图标字体或 CDN。存量项目沿用已有的库，换库属于改版。
 - **核对许可。** 多数是 MIT、Apache 或 ISC；SF Symbols 只能用在 Apple 平台的界面里，不能用于网页；需要署名的库按要求署名。
-
-## 细节
-
-好效果常常体现在模型不会主动做的小事上。它们单看都很小，加在一起就是“做出来的”和“生成出来的”之间的差别。结构和主视觉定下来以后，逐项过一遍；单个细节单独修，不为修一个细节改动整体结构。
-
-粗粝一端的方向同样讲究细节，只是讲究的方式不同：套印错位、毛边和颗粒要有意为之、方向和幅度一致，不能和随手没对齐混在一起；用代码画这些质感的做法见 [点缀与特效](ornament.md)。下面的形状与表面偏向精致一端，粗粝方向按自己的质感取舍；文字、对齐、状态和资源两端都适用。
-
-**形状与表面**
-
- 嵌套圆角要同心：内层圆角约等于外层圆角减去两者之间的内边距，内层不大于外层。
- 阴影用两层叠成：一层贴近、较实的接触阴影，一层远而淡的环境阴影。阴影颜色带一点背景的色相，不用纯黑；同一层级的阴影保持一致。
- 高分屏上的细分隔线用 0.5px 或半透明色；边框和阴影不同时给重的。
- 压在图像上的文字，靠图像本身的安静区域和局部遮罩保证对比，不给整张图盖浓重渐变。
-
-**文字**
-
- 中文正文字距保持 0。展示字号可以收紧，字越大越可以收，但要看实际字形不碰撞；全大写的英文小标签加 5–10% 字距。
- 中文用全角标点，引号用“”。行首不出现句号、逗号和右引号，行尾不出现左引号和左括号，可以用 `line-break: strict`；浏览器支持时用 `text-spacing-trim` 做标点挤压。
- 中文和英文、数字之间的间距全页一致：支持时用 `text-autospace`，否则统一手写空格，不要一处有一处没有。
- 数字用等宽数字；单位比数字小一级或更淡；金额、时间、百分比的格式全页统一，例如 1,238、+1.83%、16:12。
- 标题按语义断行，不留孤字，见上文“可读性是交付门槛”。
-
-**对齐**
-
- 图标和文字按视觉中心对齐，不按外框；圆形、三角形图标需要光学微调。
- 大号标题的字形自带左侧空隙，要微调 1–3px，让它看起来和下方正文左对齐。
- 数字列右对齐，小数位对齐。
- 按钮文字在按钮里视觉居中；中文字形偏上或偏下时微调。
-
-**状态**
-
- 每个可点元素都有悬停、按下、焦点、禁用和处理中状态；状态变化不改变尺寸、不挤动旁边内容，处理中的按钮保持原宽度。
- 焦点环、文字选中色、输入光标、复选框和单选框的强调色跟随方向，不留浏览器默认的蓝色。
- 深色或有色背景上的滚动条调成协调的颜色；可滚动区域的边缘用淡出提示还有内容。
- 空、加载、错误状态和默认状态一样用心，不是事后补的一行灰字。
-
-**资源**
-
- 位图按显示尺寸的 2 倍准备，图标用矢量。
- 图片加载前先占好比例，不让布局跳动。
- 网页标题、标签页图标和分享图与方向一致。
-
-在 100% 和 200% 缩放下各看一遍关键区域（无法用浏览器缩放时，用宽高减半、像素比为 2 的视口截图代替）；把局部截图放大，检查对齐、边缘和标点。
-
-## 克制：大胆在结构，克制在细节
-
-大胆和克制作用在不同层面，并不冲突。结构上大胆：首屏骨架、主视觉和一处结构性突破可以走得很远。细节上克制：其余元素安静下来，让主角成立。一页只有一个主角，可以是一张图、一句巨大的标题或一个图形装置；其余的字号、颜色、容器和动效都为它退后。满屏都在出招，和满屏米色卡片一样，都是没有取舍。
-
-克制要落成预算，和调性里“克制”的翻译一致：
-
- 一页的字号 4–6 级，字重 2–3 种，字族不超过 2–3 个（展示、正文，可选等宽）。级数少，级差要大。
- 强调色约占画面 10% 以内，只用在主动作、选中和需要立刻识别的状态上。
- 划线、倾斜、跨界、手写批注这类特别处理，一页一处，放在最能放大北极星的位置。
- 先做准三处基本动效，让它们彼此呼应；装饰性的动效一页最多一两处，见 [动效](motion.md)。
-
-预算是起点。方向明确需要更多时，例如拼贴或喧闹的调性，写出理由即可。
-
-克制不等于极简。用户选定强烈风格后，减法应让风格更集中，不把它变成通用白底模板。减法删的是装饰和重复，不删帮助判断的信息：工具与决策界面里，对象名称、比较依据、当前选择和下一步动作是主角，删掉它们界面不会更高级，只会失去用途。删减后检查用户是否还能确定当前对象、理解代价、发现主动作和判断结果；不能用更少的文字代替更清楚的结构。
-
-### 删元素
-
-逐项判断元素是否帮助识别、判断、操作、反馈，或对选定品牌与情绪有明确贡献。贡献说不清时尝试移除，对照前后效果。优先删重复标题、无语义徽章、多余容器和竞争性装饰。一张合适的图、几句必要文字和一个动作就能承载页面时，让它们成立；不为“完整”追加卖点卡片、数据徽章和重复的行动按钮。
-
-### 删文字
-
-模型爱加字：每个区块都是“眉标 + 标题 + 副标题”三件套，内容页顶部还要加一段解释这个页面是干什么的，每个字段下面一行提示，“点击下方按钮开始”这种描述界面的话，“新”徽章、脚注，以及解释图片内容的图注。
-
- **逐句问**：删掉后，用户是否仍知道眼前是什么、能做什么？画面、位置或交互已经表达了的，就删。
- **用展示代替描述**：能放产品真正交付的东西，例如一份真实的结果或一段真实数据，就不写一段话去形容它。
- **一个区块只讲一件事**：一句标题，最多一段说明。需要第三层文字时，通常说明这个区块该拆开或删掉。
- **叙事页面的字数预算**：首屏标题约 15 字以内，说明约 40 字以内，按钮 2–6 字，空状态一句话加一个动作。产品界面不按字数砍，按“逐句问”删重复和解释。
- **做完后删一轮**：逐区块尝试删掉 30–50% 的文字，只把删了会影响理解的放回来。
- **不先加字再调淡**：不先添一堆小字，再用降低对比来补救。设计理由、源文件名、组件术语和装饰性英文留在说明或按需展开处。
- **必须留下的**：错误原因、单位、选择范围、陌生动作的标签、风险和后果。
-
-### 编辑剩下的文字
-
-文案需要一次主动编辑：用用户会说的话重写空泛口号，保留具体对象、动作和结果；可以继承用户原有的表达。不要把第一轮生成的文案当作不可改变的内容，也不要为了补满版式编造信息。
-
-模型写的中文常带翻译腔，交付前逐句改掉：用分号把两件事串成一句；“交代当前情况”“带读者回到”“保持内容明确”这类书面套话；标题写成字段名，例如“受控勾选”“禁用等级”。改成一句只讲一件事的短句，标题用人会说的短语，例如“生成中锁定”“回到最新”。
-
-模型写的文案往往是整页最弱的部分。标题、主张和按钮这类关键文案，优先用用户提供的原话，或交给用户亲自改写；交付时标出哪些仍是模型写的占位文案。
@@ -0,0 +1,124 @@
+# 视觉自查与精修
+
+结构和主视觉定下来以后用这份文件：先看整页是否落进模型默认审美，再逐项过细节，最后做减法。字体、色彩、控件等基础规则见 [视觉语言](visual-language.md)。
+
+## 目录导航
+
+- [模型默认审美自查](#模型默认审美自查)
+- [细节](#细节)
+- [克制：大胆在结构，克制在细节](#克制大胆在结构克制在细节)
+
+## 模型默认审美自查
+
+没有明确风格依据时，模型容易生成下列默认做法。它们都不是禁令，但每出现一项，都要能说出它怎样服务当前北极星；说不出就换成方向卡里的具体选择：
+
+- 无来由的渐变、柔光、玻璃拟态和发光描边。
+- 配色说不出来自这个产品的理由，只是因为它“不会出错”“显得高级”或者“这个行业都这么用”。判断不看是哪种颜色，任何颜色都可以用，只看理由是否来自这个产品。眼下最常见的一组是米色或暖白底配衬线标题，它已经成了新的“不会出错”；纯白和纯黑同样是完整的底色，选哪一种都要说得出理由。
+- 中文界面从头到尾只用思源黑体或系统黑体，标题没有自己的字体性格。
+- 在页面里画假的浏览器窗口、红黄绿三个圆点、写着 9:41 的手机状态栏或整台手机外壳。浏览器和设备本身已经提供这些，产品本身是浏览器或设备模拟器时除外。
+- 所有内容都装进同样圆角、同样阴影的卡片，卡片里再套卡片。
+- 首屏固定为左右分栏：左边大标题，右边说明、按钮或一张图；下方接三列图标特性卡。换了字体和颜色，这个骨架也常常原样保留。
+- 用表情符号或随手找的图标给每个标题做装饰；最典型的是 2px 描边的通用图标放进浅色底圆角方块，每个标题配一个。
+- 工具、后台，以及画廊、商店、信息流这类内容页，顶部放超大标题、口号或解释这个页面的段落，把第一排内容推出首屏；用一整块深色圆角卡片装“下一步”动作；每一列、每个区块下面一行解释它是干什么的。
+- 每一屏左上角都是 Logo 加产品名，下面再叠一行页面标题或口号。品牌标识放不放、放多大，规则见 [工作区骨架](direction-workspace.md) 的“顶栏放什么”。
+- 用单侧色条标重点：引文、提示、答题反馈、当前项、紧急卡片，左边或右边加一条 2–4px 的彩色边线。这是最常见的模型默认之一，“它在表达状态”不能当理由。状态用元素本身表达：状态词加颜色或图标、整块底色、字重、位置和顺序。单侧的线只用来分隔结构，例如侧栏和主区之间、表格的列之间，并且用中性色。
+- 用星星、闪光、魔法棒、机器人表示 AI 功能。图标应表达实际动作或结果，例如摘要、翻译、转写。
+- 全页只用一种无衬线字体，标题与正文尺度相差不大，标题没有自己的性格。
+- 每个标题都加粗到 600–700，靠“越重要越粗”拉开层级，整页都在用力。层级先靠字号拉开：标题做到正文的两三倍以后，用常规甚至细字重反而更有分量，例如 48px 的常规字重标题配 16px 正文。标题的性格来自选什么字体、多大、字距多紧，不来自加粗。运动、街头、粗犷这类调性可以用粗体，在方向卡里写出理由，对照方向卡调性里“分量”那一栏。西文大标题可以把字距收紧一点、行高压到 1.0–1.1；中文标题不这么压，行高和字距先保证读得顺。
+- 每个区块都有英文眉标、胶囊徽章和一句空泛口号，例如“一站式”“赋能”“开启全新体验”。中文产品用英文做字标、表头和分区名（WORKSPACE、CONTENT OBJECT、FIELD NOTES）也属于这一类。
+- 界面上写满制作说明：“示例”“待核实”“概念图”“示意图”“按钮未接入”，或者“仅保存在此浏览器”这类解释实现方式的话，挂在字段旁、图片角落或页脚。这些是写给委托人的话，放进交付说明。
+- 所有间距相同，页面没有松紧节奏，也没有一处视觉重心。
+- 随意给文字上色、加高亮，或者到处加描述性小字和标签，留出没有用途的空白区域。
+- 首屏之后接一排三栏功能格：编号或图标、小标题、两行说明，内容和首屏重复。首屏再有辨识度，到这里也会退回模板。
+- 界面完全不动，或只有悬停变色；有动效时各动各的：每个区块套同一个淡入上移，按钮、面板和数字之间没有关系。
+- 自己画的下拉、开关、滚动条，比平台原生组件更难用。
+- 角色、吉祥物、道具和场景用手写 SVG 或 CSS 拼出来：扁平色块加一道渐变高光，认得出是什么，看不出材质，像图标素材包。这类主视觉用生成素材或实时 3D，见 [素材](media.md)。
+- 趣味类产品的“可爱鸡汤腔”：逗号断句、叠词、拟声加感叹，例如“转一下，给今天添个小惊喜”“一币落下，等一场哗啦”“你的林子，又长大了”。改成具体的数字、名词和结果，情绪交给画面和声音。
+- 文案抽象，用晦涩的比喻代替具体说明。说服型页面按概念写的标题不在此列，前提是它通过 [概念](direction-concept.md) 的三条检验，并且副标题说清了产品是什么。方向的比喻也会渗进功能：按钮叫“检查采样”，导航画成一圈轨道。比喻只管视觉气质，功能名、按钮和导航用产品本身的说法。
+
+检查时截图整页，逐项对照。出现三项以上没有理由的默认做法，通常说明方向还停在默认模板，应回到方向卡重新确定主构图和主视觉，而不是逐个替换装饰。
+
+上面有几项能从页面样式里直接查出来：眉标、单侧色条、渐变字、卡片套卡片、表情符号图标、英文大写标签。截图工具每次截图都会查，结果在输出的“默认做法提示”里，见 [工具](tools.md)。这些条目只靠眼睛过，常常漏掉，所以先处理提示，再用眼睛过其余各项；提示清零不等于这一节过了。
+
+## 细节
+
+结构和主视觉定下来以后，逐项过一遍这些模型不会主动做的小事；单个细节单独修，不为修一个细节改动整体结构。
+
+粗粝一端的方向同样讲究细节，只是讲究的方式不同：套印错位、毛边和颗粒要有意为之、方向和幅度一致，不能和随手没对齐混在一起；用代码画这些质感的做法见 [点缀与特效](ornament.md)。下面的形状与表面偏向精致一端，粗粝方向按自己的质感取舍；文字、对齐、状态和资源两端都适用。
+
+**形状与表面**
+
+- 嵌套圆角要同心：内层圆角约等于外层圆角减去两者之间的内边距，内层不大于外层；硬边方向（rounded-none）则完全不用圆角，依靠 0.5px 或 1px 细线划分边界。
+- 阴影用两层叠成：一层贴近、较实的接触阴影，一层远而淡的环境阴影。阴影颜色带一点背景的色相，不用纯黑；同一层级的阴影保持一致。
+- 高分屏上的细分隔线用 0.5px 或半透明色；边框和阴影不同时给重的。
+- 压在图像上的文字，靠图像本身的安静区域和局部遮罩保证对比，不给整张图盖浓重渐变。
+
+**文字**
+
+- 中文正文字距保持 0。展示字号可以收紧，字越大越可以收，但要看实际字形不碰撞；全大写的英文小标签加 5–10% 字距。
+- 中文用全角标点，引号用“”。行首不出现句号、逗号和右引号，行尾不出现左引号和左括号，可以用 `line-break: strict`；浏览器支持时用 `text-spacing-trim` 做标点挤压。
+- 中文和英文、数字之间的间距全页一致：支持时用 `text-autospace`，否则统一手写空格，不要一处有一处没有。
+- 数字用等宽数字；单位比数字小一级或更淡；金额、时间、百分比的格式全页统一，例如 1,238、+1.83%、16:12。
+- 标题按语义断行，不留孤字，见 [视觉语言](visual-language.md) 的“可读性是交付门槛”。
+
+**对齐**
+
+- 圆形、三角形图标按视觉中心做光学微调，不按外框对齐。
+- 大号标题的字形自带左侧空隙，要微调 1–3px，让它看起来和下方正文左对齐。支持时可用 `text-cap-trim` 或通过微调消除字体内置的行间空白（Cap-Height 对齐），让展示大字与网格线紧密贴合。
+- 数字列右对齐，小数位对齐。
+- 按钮文字在按钮里视觉居中；中文字形偏上或偏下时微调。
+
+**状态**
+
+- 每个可点元素都有悬停、按下、焦点、禁用和处理中状态；状态变化不改变尺寸、不挤动旁边内容，处理中的按钮保持原宽度。
+- 焦点环、文字选中色、输入光标、复选框和单选框的强调色跟随方向，不留浏览器默认的蓝色。
+- 深色或有色背景上的滚动条调成协调的颜色；可滚动区域的边缘用淡出提示还有内容。
+- 空、加载、错误状态和默认状态一样用心，不是事后补的一行灰字。
+
+**资源**
+
+- 位图按 [素材](media.md) 的“文件与说明”导出，图标用矢量。
+- 图片加载前先占好比例，不让布局跳动。
+- 网页标题、标签页图标和分享图与方向一致。
+
+在 100% 和 200% 缩放下各看一遍关键区域（无法用浏览器缩放时，用宽高减半、像素比为 2 的视口截图代替）；把局部截图放大，检查对齐、边缘和标点。
+
+## 克制：大胆在结构，克制在细节
+
+大胆和克制作用在不同层面，并不冲突。结构上大胆：首屏骨架、主视觉和一处结构性突破可以走得很远。细节上克制：其余元素安静下来，让主角成立。每一屏只有一个主角，可以是一张图、一句巨大的标题或一个图形装置，长页各段可以交接主角，拼贴时整片拼贴就是主角；其余的字号、颜色、容器和动效都为它退后。满屏都在出招，和满屏米色卡片一样，都是没有取舍。
+
+克制要落成预算，和调性里“克制”的翻译一致：
+
+- 一页的字号 4–6 级，字重 2–3 种，字族不超过 2–3 个（展示、正文，可选等宽）。级数少，级差要大。
+- 强调色约占画面 10% 以内，只用在主动作、选中和需要立刻识别的状态上。
+- 划线、倾斜、跨界、手写批注这类特别处理，一页一处，放在最能放大北极星的位置。
+- 先做准三处基本动效，让它们彼此呼应；装饰性的动效一页最多一两处，见 [动效](motion.md)。
+
+预算是起点。方向明确需要更多时，例如拼贴或喧闹的调性，写出理由即可。
+
+克制不等于极简。用户选定强烈风格后，减法应让风格更集中，不把它变成通用白底模板。删完以后主角要变大、变强；画面只是变空，说明删错了地方。减法删的是装饰和重复，不删帮助判断的信息：工具与决策界面里，对象名称、比较依据、当前选择和下一步动作是主角，删掉它们界面不会更高级，只会失去用途。删减后检查用户是否还能确定当前对象、理解代价、发现主动作和判断结果；不能用更少的文字代替更清楚的结构。
+
+### 删元素
+
+逐项判断元素是否帮助识别、判断、操作、反馈，或对选定品牌与情绪有明确贡献。贡献说不清时尝试移除，对照前后效果。优先删重复标题、无语义徽章、多余容器和竞争性装饰。一张合适的图、几句必要文字和一个动作就能承载页面时，让它们成立；不为“完整”追加卖点卡片、数据徽章和重复的行动按钮。
+
+### 删文字
+
+模型爱加字：每个区块都是“眉标 + 标题 + 副标题”三件套，内容页顶部还要加一段解释这个页面是干什么的，每个字段下面一行提示，“点击下方按钮开始”这种描述界面的话，“新”徽章、脚注，以及解释图片内容的图注。
+
+- **逐句问**：删掉后，用户是否仍知道眼前是什么、能做什么？画面、位置或交互已经表达了的，就删。
+- **用展示代替描述**：能放产品真正交付的东西，例如一份真实的结果或一段真实数据，就不写一段话去形容它。
+- **一个区块只讲一件事**：一句标题，最多一段说明。需要第三层文字时，通常说明这个区块该拆开或删掉。
+- **不加眉标**：眉标是区块大标题上面那行小字，例如标题“让协作更简单”上方的“FEATURES”。它和标题说的是同一件事，说不出它怎样服务北极星就删掉。区块确实需要一个名字时，名字就是标题本身；或者放进版面结构里，例如页边栏、表头、导航，用正文字号写，可以带一个真实的数，例如“作品 27 个”。名字用产品自己的说法，和导航用词一致。
+- **叙事页面的字数预算**：首屏标题约 15 字以内，说明约 40 字以内，按钮 2–6 字，空状态一句话加一个动作。产品界面不按字数砍，按“逐句问”删重复和解释。
+- **做完后删一轮**：逐区块尝试删掉 30–50% 的文字，只把删了会影响理解的放回来。
+- **不先加字再调淡**：不先添一堆小字，再用降低对比来补救。设计理由、源文件名、组件术语和装饰性英文留在说明或按需展开处。
+- **必须留下的**：错误原因、单位、选择范围、陌生动作的标签、风险和后果。
+
+### 编辑剩下的文字
+
+文案需要一次主动编辑：用用户会说的话重写空泛口号，保留具体对象、动作和结果；可以继承用户原有的表达。不要把第一轮生成的文案当作不可改变的内容，也不要为了补满版式编造信息。
+
+模型写的中文常带翻译腔，交付前逐句改掉：用分号把两件事串成一句；“交代当前情况”“带读者回到”“保持内容明确”这类书面套话；标题写成字段名，例如“受控勾选”“禁用等级”。改成一句只讲一件事的短句，标题用人会说的短语，例如“生成中锁定”“回到最新”。
+
+模型写的文案往往是整页最弱的部分。标题、主张和按钮这类关键文案，优先用用户提供的原话，或交给用户亲自改写；交付时标出哪些仍是模型写的占位文案。
@@ -1,154 +1,38 @@
-# 视觉评审协议
+# 视觉评审派发协议 (主 Agent 专用)

-## 评审者的独立性
+主 Agent 用这份文件派发独立评审。打分标准和检查规则在 [评审手册](reviewer-manual.md) 里，由评审者读；主 Agent 不读，只按下面的清单交接。

-选择能实际看图的隔离执行者，不固定供应商、模型价格或参数规模。遵循用户的模型偏好和预算，不假定更贵必然更懂设计。
+## 1. 什么时候该派发？触发什么模式？

-首次评审与后续独立复查均使用新上下文。只传当前版本的必要证据，不继承制作对话，也不将旧评审粘进去。主 Agent 保留历史，用于判断建议是否反复和修改是否有效。
+当你完成了一个关键页面、设计方案或改动后，按以下清单触发对应的评审子 Agent：

-没有隔离看图能力时，主 Agent 可以直接检查当前画面，但不能称为独立评审。不能看图时只给结构或源码诊断，不根据文件名猜测画面。
-
-## 交接内容
-
-| 提供 | 不提供 |
+| 你做了什么改动 | 子 Agent 的提示词 (Prompt) 模板 |
 | --- | --- |
-| 用户任务、受众、交付范围和目标设备 | 制作者的论证、已经投入的时间 |
-| 已确定的方向、品牌与不可改变约束 | 源码、实现细节与技术借口 |
-| 当前版本截图，注明页面、状态与逻辑视口 | 旧版本截图、旧评分和旧评审结论 |
-| 已实际查看的必要参考与其用途 | 预设问题清单、希望评审者赞同的答案 |
-| 需要评估的可见状态或过程证据；三处基本动效（主操作反馈、一处状态切换、首次出场）和动效记忆点，各一段 3–5 秒录屏或开始、中间、结束三帧，并写明触发它的动作 | “必须给到某个分数”等通过暗示 |
+| 探索了新界面，或推翻现状重新设计（重塑） | `请读取 references/reviewer-manual.md，按照【全新界面与改版评审】标准，评审这些截图，并给出 1-10 的打分。` |
+| **给已有界面评审**：在已有界面上整理、升级、润色或扩展 | `请读取 references/reviewer-manual.md，按照【存量已有界面润色评审】标准，对比提供的现状规范，指出偏离点。不打分。` |
+| 小改动、单处间距或颜色微调 | **无需派发子 Agent**，主 Agent 结合上下文自行核对即可。 |

-有记忆点时，评审单独回答：这一刻是否让人记住，动作和结果能否一眼对上。有动效证据时，再回答：各处动效是不是同一种手感，是否从被操作的地方出发、朝同一个方向、彼此接得上；指出各动各的、生硬或多余的地方。只有静态截图时，评审记录写明记忆点和动效没有评审。
+模板里的路径换成本 Skill 目录下的绝对路径：子 Agent 的工作目录不是本目录。

-新评审者需要理解任务约束，不能只凭一张图自由改题。参考图用于说明方向或质量基线，精准还原任务除外，不作为要求照抄的目标。
+## 2. 派发前，主 Agent 要准备的“交接清单”

-截图文件必须能被评审者访问。交接前确认文件属于当前版本；长页同时提供整体与必要局部，细节图不能替代整体构图。交互只能依据提供的状态与过程证据判断，单张截图不能证明提交或键盘行为正确。
+调用宿主提供的隔离执行能力时，必须提供以下物料：
+- **必给**：当前版本的截图/录屏（注明设备视口）、用户原始任务、设计边界和约束；有方向卡时，再给北极星那一句。方向卡里其他需要评审知道的硬性约束，例如品牌要求每屏出现字标，摘成一句写进约束，不交整张方向卡。
+- **如果有**：现有项目的色彩规范、组件约束（存量老项目必须给）；方向卡的选色记录，即“色彩”一栏里颜色来自这个产品的什么那一句；项目里有 `DESIGN.md` 或同类设计文档时，存量润色评审整份给出并以它为标准，新界面与改版评审只把其中的品牌资产和“不要做”摘进约束。
+- **截图工具的默认做法提示**：`report.json` 里 `lint` 字段的提示原样给出；你决定保留的项，每项附一句理由。
+- **不给**：源代码、为自己的做法辩护的说明、之前评审打过的分数（评分要独立）。

-## 可直接使用的评审任务
+截图必须属于当前版本，且能被评审者访问；这一轮没有改到的状态和动效，可以沿用上一轮的证据文件，交接时注明哪些是沿用的。长页同时提供整页与必要局部；细节图不能替代整体构图。

-> 根据提供的用户任务、设计方向、约束和当前画面评审设计。先用一两句话说出这个画面想成为什么体裁和风格；再说出它属于什么品类，举出这个品类里两三个风格最鲜明的产品，说出它们在首屏和控件上通常怎么做。画面违背这些共识的地方，判断是有意的偏离，还是没认出品类；同时看画面是不是某个标杆的复制，遮住名字还能不能认出是另一家。再设想这一体裁里顶尖的设计团队会怎样完成同一任务，可以举一两类真实可参照的作品；然后指出当前画面与那个标准之间差距最大的一到三处。先看主构图、阅读顺序、主视觉和内容与操作的关系，再看排版、空间、色彩和细节。留意过度、夸张或一看就是模型生成的做法并扣分，例如首屏左边大标题、右边说明或图片的默认分栏，无来由的渐变与发光，处处圆角卡片，表情符号图标、随意给文字上色、空泛或晦涩的比喻式文案。画面里多个元素同时争当主角、处处都在用力，也算问题；反过来，处处及格却没有一处让人记住，也指出来，并说出最值得集中发力的位置。留意重复的线框：同一处分隔叠了好几条线，留白已经分开的地方又加线，或者每个层级都画一遍线，让画面发碎。承担风格和结构的线不算问题。单侧的彩色边线（引文、提示、反馈、当前项左边的一条色条）也算问题。画面上的制作说明，例如“示例”“待核实”“示意图”“未接入”，也列进可以直接删掉的文字。体裁指产品本身，例如展览落地页；借用的其他媒介只是风格来源，不按“像不像那个媒介”评判，也不为了更像而建议补上更多部件。如果是工具、后台，或画廊、商店、信息流这类让人浏览挑选的页面，再说出一屏能看到几个对象、第一排内容离顶部多远、主动作离当前对象有多远，并和这一体裁里最好的产品比较密度。另外单独列出两类小问题：可以直接删掉的文字，以及对齐、圆角、阴影、标点、状态这类看得出的细节瑕疵；表格和列表要放大看，各列的行线和基线是否对齐。每处问题写清位置、观察、影响和可执行的调整方向，必要时给伪代码或属性关系，不写含糊的散文。敢下判断，给出有主见的建议，不退回安全、容易的做法。区分可观察缺陷与风格偏好；没有明显问题时直接说明，不为凑数提出修改。最后按 10 分制打分，表示当前画面离顶尖水准还有多远。只提供评审，不修改文件，不启动其他评审者。未看到或无法验证的内容明确说明。
+动效不用逐项备证据：取证那一次的录屏一并交给评审就够。评审能自己打开页面时，把页面地址也给它，录屏里看不清的它会自己操作一遍。
+没有隔离、能看图的执行者时，主 Agent 按同一手册自检，交付时写明“未独立评审”；没有实际画面时不打视觉分。

-如果有同类的优秀作品截图，更好的做法是把它们和当前画面放在一起，例如四张专业作品加一张当前截图，请评审者按完成度和品味排序并说明差距。有视觉基线的比较比“想象顶尖团队”更稳定。这些作品是基线和情绪板，不是要照抄的目标。
+## 3. 主 Agent 如何处理子 Agent 的反馈

-用“顶尖团队会怎么做”作为参照，是为了拉高标准、让建议有方向，不是要求照抄某个作品。评审只给方向和具体修改点，不自己重做页面；让评审者直接重做通常时间和成本都会翻倍。
-
-主 Agent 在任务后附实际材料。没有真实材料时不能原样发送模板并让评审者自行想象。
-
-评审同时核对设计北极星是否在构图、字体、素材和交互中形成呼应，突破是否增强主题，以及是否用冗余文字和层层容器掩盖薄弱的主视觉。阅读尺寸下的文字碰撞、过小正文和错误裁切应直接指出；不要仅凭整体缩略图判定可读性通过。
-
-## 给已有界面评审
-
-在已有项目里润色界面时，评审的标准是这个产品自己的设计规范，不是评审者心里的理想风格。规范管“用什么”：哪些颜色、字号、间距、组件；[视觉语言](visual-language.md) 里关于层级、对齐、留白、文字和减法的判断管“怎么用得好”，照常使用。
-
-什么时候用，由 SKILL.md 步骤 4 决定：润色一整页或多页之后，或者用户要求评审现有界面、没有要求重新设计时。单个元素的小改动不评审；用户要求改版或重新探索时，用上面的正常评审。
-
-### 先确定规范
-
-1. **有成文规范时以它为准。** 设计文档、设计变量（颜色、字号、间距、圆角、阴影）、组件库文档或组件目录。
-2. **没有成文规范时，从现有实现里读出来。** 看设计变量文件和主题配置、共享组件和它们的变体、同类页面的做法，整理一份简短的现状规范：字体和字号层级、每种颜色的用途、间距和圆角、按钮与表单等关键组件的样子、用哪套图标。实现里本来就不一致的，比如三种按钮，以多数用法为准，少数用法记为待统一。
-3. **规范本身有问题时说出来。** 不在评审里悄悄绕开，单独列出，交给用户决定。
-
-优化 UI 时做过规范体检、重新建立了规范的，以选定的新规范为准，见 [存量项目](existing-project.md) 的“规范体检”。
-
-### 交给评审者
-
- 当前版本的截图，注明页面、状态和逻辑视口。
- 规范：有成文规范时给相关文件或摘录；没有时给整理好的现状规范，再附两三张用了同样组件的其他页面截图，作为一致性的参照。
- 不能动的清单：品牌、字体、主色、组件库、全局导航，以及用户指定保留的部分。
- 用户任务和受众。
-
-和正常评审一样，不给源码、制作过程和旧版截图。
-
-### 评审任务
-
-> 根据提供的设计规范、不能改动的清单、用户任务和当前画面，评审这个已有界面。先读规范，再看画面。第一部分，逐条列出画面偏离规范的地方：用了规范以外的颜色、字号、间距或圆角，同类组件长得不一样，没用已有组件而是另做了一个。第二部分，在规范范围内指出最影响完成度的三处问题，依据是层级、对齐、留白、文字、状态和减法这些设计判断。每条建议都要能用现有的设计变量和组件做到；确实需要新增变量或组件时，单独列出并说明理由。不建议更换品牌色、字体、组件库或整体布局。另外列出可以直接删掉的文字，以及对不齐、间距不一这类细节瑕疵。每处写清位置、观察和调整方向。只提供评审，不修改文件，不打分，不启动其他评审者。未看到或无法验证的内容明确说明。
-
-### 处理结果
-
- 只做一轮。改完由主 Agent 和基线做前后对比，不为分数复查。
- 偏离规范的问题优先改，改在共享的设计变量和组件上，不在单个页面上覆盖。
- 需要扩展规范或违背规范的建议，不直接采纳，连同理由交给用户决定。
-
-## 首稿通常怎样被改好
-
-首稿即使方向不同，也常常共用同一套模板骨架。交付对比页时推荐一轮独立评审，由用户决定是否执行；执行时它是把方向拉开的主要手段，不能因为方向卡已经不同就跳过某个方向。叙事页面（落地页、品牌页、活动页）最常见、也最有效的几类改法：
-
- 删掉装在卡片里的产品界面小组件，把位置让给主视觉。
- 把一个元素放大到结构级别，其余元素为它退后。
- 用一个主视觉撑起画面。它从方向的生成引擎里来，不套现成的装置。
- 砍掉重复的标签和并列的按钮，只留一个主动作。
- 让图像参与版面结构，而不是装在盒子里。
-
-这些改法不要搬到产品界面上。工具、后台和 App 常见的有效改法是：
-
- 删掉解释界面的文字：列说明、区块副标题、“卡片顶边对应……”这类说明、和状态标签重复的提示框。
- 压缩页面头部，把高度还给工作区；页面标题缩成一行。
- 把用户最怕错过的属性放大，例如等待时长、超时、欠费，让它在整页里最先被看到。
- 提高密度，直到一屏能看到足够多的对象用于比较。
- 同一个状态只表达一次，删掉重复的徽章、色块和提示。
-
-画廊、商店、信息流这类浏览内容的页面，常见的有效改法是：
-
- 删掉顶部的口号和解释页面用途的段落。
- 把第一排内容提到首屏，让内容本身成为主角。
- 把标题、导航和筛选合进顶部一到两行。
- 让缩略图的比例和排列成为版式本身，不再给每张卡片加多余的边框和说明。
-
-## 反馈格式
-
-先用短段落说明当前画面如何表达任务与方向。随后按影响列问题，每项包含：
-
- 位置：页面、区域、状态或元素。
- 观察与证据：实际看到了什么；不能只说“普通”“不高级”。
- 影响：妨碍了识别、任务完成、视觉焦点或选定方向中的哪一项。
- 建议：可执行的调整，必要时提供布局示意或属性关系；不猜不存在的文件与行号。
- 验证：修改后应检查什么，并指出是否只是主观偏好。
-
-10 分制评分用来驱动循环：主 Agent 以 9 分为完成目标，但不向评审者透露这个目标。分数必须附带具体差距，只有数字的评审不算有效。同一评审模型的前后分数可以比较；不同模型的数值不直接比较，也不把分数当作审美事实。分数高但用户不喜欢时，以用户判断为准。
-
-## 多个方向时加一次横向评审
-
-逐个评审只能看出每个方向自身的问题，看不出方向之间的趋同。多个方向都修改完后，再派一个新的评审者，同时看所有方向的整页截图，只回答一个问题：哪些区块在不同方向里本质上是同一个东西（结构、组件或版式相同，只是换了颜色和字体）？逐条列出区块和涉及的方向。被点名的区块，按各自方向的生成引擎重做。
-
-## 任务走查：让评审者真的去用
-
-视觉评审看的是截图，看不出流程问题：入口找不到、出错后回不去、第二次用还是一样慢。新界面或改动了操作流程时，在视觉评审之外，再派一个新的执行者做任务走查。它必须能操作真实页面，例如浏览器自动化或可点击的原型，不看代码和制作过程。没有这种能力时，由主 Agent 按同样的方法自己走一遍，并标明不是独立走查。
-
-交给它：
-
- 3–5 个真实任务，用用户的话写，不提界面上的按钮名称。写“把上周没回复的三个客户标成待跟进”，不写“点击筛选按钮，选择未回复”。每个任务写清怎样算完成。
- 目标设备、入口地址和需要的测试数据。
- 故障场景怎么触发：提交失败、断网、空数据、慢响应。
-
-它要做的：
-
- 每个任务从入口开始，记录每一步看到了什么、为什么选这里。需要猜的地方记为“犹豫”，点错又退回的记为“走错”，走不下去的记为“卡住”。
- 每个任务再做一次“第二次使用”：有没有更短的路径，能不能只用键盘完成。
- 至少在一个任务里制造失败，看输入是否保留、能否原地恢复。
- 在窄屏上把最主要的任务再走一遍。
-
-输出按严重程度排序：卡住、走错、犹豫、多余的步骤。每条附截图和步骤编号，写清当时预期什么、实际发生了什么。不打审美分，也不提视觉建议。
-
-所有核心任务都能在没有提示的情况下完成，并且每处犹豫都有对应的修改或保留理由，走查才算通过。任务走查和视觉评分是两条线：一边分数高，不能抵消另一边的问题。
-
-## 评审改流程和加新功能的方案
-
-存量项目里改流程和加新功能的方案，比的是做法，不打分，也不问顶尖团队会怎样设计画面。交给评审者：用户的话写成的任务、每个方案的方案卡、各自差别最大的那一帧或本地地址、现状基线。不给制作过程。
-
-> 根据提供的任务、方案卡和画面，评审这几个存量项目里的方案。先说出这几个方案是不是真的不同的做法：入口和步数都相同、只是画面不同的，指出是哪几个。再对每个方案，按任务从入口走到结果，指出哪一步还在让用户伺候界面，而不是在做决定：找入口、重复填写系统已知的值、为了确认而确认、来回切换页面。然后列出方案里属于补丁的部分：加提示、加引导、加确认、加说明，却没有让步骤、要记住的事或要切换的页面变少。最后指出每个方案最可能失败的场景。每条写清位置、观察和调整方向。只提供评审，不修改文件，不打分，不启动其他评审者。未看到或无法验证的内容明确说明。
-
-能操作真实页面时，另按上面的“任务走查”走一遍，选定前后各一次，比较步数和卡住、走错、犹豫的次数。
-
-## 主 Agent 如何处理反馈
-
-先处理任务阻碍、内容错误与明显视觉层级问题，再处理有依据的精修。将接受的反馈映射到实际实现；用户指定的风格不能被评审者随意替换。
-
-评审单独列出的“可以直接删掉的文字”默认照删；只有删了会影响理解时才保留，并在记录里写一句理由。
-
-多个评审对不同方向给出同一条建议时，分别在每个方向里找它自己的落地形式，不用一种实现套到所有方向上。
-
-建议违反用户约束、仅表达另一种偏好或缺乏证据时，可以不采纳并保留简短理由。为了更像借用的媒介而增加部件、线框或装饰的建议，先对照北极星判断，通常不采纳。一次完成相关改动后集中取证；不每改一个细节就重新派发。
-
-记录版本、已接受改动、未解决问题与检查结果。保持相当的视口、内容和状态进行前后比较；后续独立评审只看当前版本，前后收益由主 Agent 检查，重大主观取舍由用户判断。
-
-出现持续换风格、互相推翻或细节调整无可见收益时停止美学循环，保留最符合任务与方向的版本。停止不能掩盖仍然存在的功能缺陷或未经验证的部分。
+子 Agent 返回报告后，按以下原则修改：
+- **第一条是“重做”**：回到方向卡，重定被点名区块的骨架或主视觉，不逐条修补。
+- **按清单顺序改**：问题清单从影响最大的一条往下改；“保留”那一行记进设计说明，改的时候对照，别把它修平。
+- **提升条目同样要做**：精致度、设计感和动效的提升不是可选建议，和问题一样按清单做；做不了的在交付说明里写明原因。
+- **默认照删**：子 Agent 列出的“可以直接删掉的无用文字”照删，除非会产生功能歧义。
+- **落到具体调整**：把子 Agent 的高层要求（如“太挤”“层级不清”）落成间距、字号和阴影的实际调整。子 Agent 提议更改用户锁定的品牌色或大框架时，写一句理由后不采纳。
+- **防止死循环**：如果双方审美意见陷入僵持、来回横跳且无可见收益，保留你认为最佳的版本并停止循环。