dsh-super-code 0.3.11 → 0.4.0

package/builtin/skills/oil-ui/references/design-direction.md

@@ -0,0 +1,233 @@
+# 设计方向
+
+只有主入口、当前任务或领域路径明确要求时才读取本文件。方向已定时只处理受影响的部分；领域提供了替代产物时沿用替代路径，不用本文件重新建立前置门槛。
+
+## 目录导航
+
+- [认品类，拆标杆](#认品类拆标杆)（产品参考与交互参考分开）
+- [先删减，锁定主角与主动作](#先删减锁定主角与主动作)
+- [先定调性，再求差异](#先定调性再求差异)（含 [模糊词翻译](#模糊词必须翻译)）
+- [用生成引擎起方向](#用生成引擎起方向)（含 [独立概念生成与把关](#独立概念生成与把关)）
+- [定色彩](#定色彩)
+- [定首屏骨架](#定首屏与工作区骨架)（[说服型骨架](direction-persuasion.md)）
+- [方向卡](#方向卡)
+- [差异检验](#差异检验)
+- [北极星与呼应](#北极星与呼应)
+- [让人记住的一刻](#让人记住的一刻)
+- [参考怎样转为设计决定](#参考怎样转为设计决定)
+- [小样、选择与品味](#小样选择与品味)
+
+方向的目标是“这个品类里最好的团队会这样做，而且做出了这个产品自己的样子”；只是“和模型的默认不一样”还不够。高级感来自一套语言的完整和细节，不来自题材少见。
+
+方向里的题材、材质、场景、字体和配色，每次都从当前产品的内容、受众和使用场合里推出；想到的方向和常见的“网红风格”撞上时，要能说出来自这个产品的理由，否则重选。
+
+## 认品类，拆标杆
+
+先写下本产品的事实：用户、品牌、任务、真实内容与对象、使用场合、设备、已有素材、技术条件和交付限制。设备写明主视口与支持范围；用户没指定时，按主要使用场景选一个主视口。缺什么就标未知，不拿参考产品的内容补成自己的事实。再认清品类，看一线产品怎样建立用户已经期待的结构和完成度；后面的调性与概念只能在这块地板之上偏离，并说出产品理由。
+
+产品参考和交互参考分开选、分开记。可以来自同一家，也可以选择不同产品，但两类证据不能合成一份“干净、好用”的印象。按四步做：
+
+1. **说出品类和产品参考。** 写下品类，再选风格最鲜明的两三家，不一定是最有名的。产品参考回答首屏有什么、内容怎样组织、视觉身份怎样成立。
+2. **拿到真实画面，拆产品参考。** 用宿主的浏览器或搜索取首屏和关键内容的真实画面，存进任务目录，对着图拆，不凭记忆写。页面打不开或 404 时换地址再试一次，还不行就换一家；拿到两家的真实画面就够。拆成 6–10 条看得见的要素，每条写“是什么样、为什么这样做”：内容层级、首屏骨架、字体、颜色、图标与素材、文案语气，以及它们服务的使用场合。只有“干净、留白、一种强调色”就是没拆到位，换一家重拆。确实拿不到画面时，在方向卡“产品参考与取舍”写明“未看图，凭记忆”，并把字体、色彩、主视觉三栏标为待验证。
+3. **单独拆交互参考。** 选核心动作做得成熟的一家，取从入口到结果的真实画面或录屏，写下“触发 → 对象变化 → 反馈 → 下一状态”，以及任务涉及的关键状态；控件形状与手感只有怎样服务这条路径时才记。产品参考里没有出现的交互，不得凭它的视觉风格推断。拿不到真实证据时，在“交互参考与取舍”标明，并把核心交互标为待验证。
+4. **分别决定留什么、换什么。** 拿本产品的受众、内容、任务和使用场合逐条对照：理由同样成立的留下，理由不成立的换掉。产品侧的取舍写进“产品参考与取舍”，操作与状态侧的取舍写进“交互参考与取舍”，不互相代替。
+
+拆的时候分清三样东西：
+
+- **基线**：用户已经期待的结构，例如画廊里作品先行、筛选在顶部，商店里购物车在右上角。沿用它，用户不用重新学。
+- **套路**：这个品类人人都在用的默认版式。一轮方向里至少一个要打破它，见“差异检验”。
+- **撞脸**：字体、配色、主视觉和图标都和某个标杆一样，只换了名字。任何方向都不允许。
+
+## 先删减，锁定主角与主动作
+
+拆完参考，先为首屏和每个关键状态各写两句：**唯一主角是什么；唯一主动作是什么。** 重复解释、同权重的次要动作和没有任务贡献的装饰先删或降级；对象名称、判断依据、当前状态和主动作不能当作多余内容删掉。其他动作保留时写清怎样降级，再写一条 `主动作 → 主角或对象变化 → 状态反馈`，确认动作有可见结果。
+
+## 先定调性，再求差异
+
+从产品的题材、受众、品牌语气和使用场合推出调性。用五个刻度描述，每个刻度都写出依据：
+
+| 刻度 | 两端 | 在画面上看什么 |
+| --- | --- | --- |
+| 能量 | 安静 ↔ 喧闹 | 饱和度、对比、元素是否碰撞 |
+| 完成度 | 粗粝 ↔ 精致 | 边缘处理、颗粒与噪点、对齐是否严格 |
+| 密度 | 疏 ↔ 密 | 留白尺度、叠层、网格纪律 |
+| 分量 | 轻 ↔ 重 | 字重、色块面积、阴影硬度 |
+| 严肃度 | 活泼 ↔ 庄重 | 圆角、插画语言、动效幅度 |
+
+取值写成“这个产品是什么 → 五个刻度各取哪一端”，依据来自它的受众、内容和使用场合。刻度两端的任何组合都可以完全成立，失败的是没有依据的默认：
+
+- 证据指向喧闹粗粝，交付的却是米色卡片、柔和阴影和大留白。这是最常见的失败，设计被磨回了模型默认的“安静高级”。
+- 反过来，为了显得有趣，给一个本该安静的产品硬加颗粒、撕纸边和粗边框。
+
+证据已经锁定调性时，所有候选都留在这个调性里，在构图、色彩身份和主视觉上拉开差异。不要为了“平衡”放进一个安静极简的保底方案。只有证据确实模糊时，才让候选分布在不同调性上。
+
+### 模糊词必须翻译
+
+“高级、精致、克制、史诗、有文学感、简洁”不能当作设计理由。用户或你自己说出这类词时，先翻译成可观察的决定：
+
+| 模糊词 | 翻译成什么 |
+| --- | --- |
+| 高级 | 先说清是哪一种高级，再决定字体的对比、分隔的方式、间距的尺度和色相的数量。只说高级什么也没决定 |
+| 精致 | 公差：字距怎么调、对齐到几像素的网格、阴影最多几级、色相最多几种 |
+| 克制 | 饱和度预算，例如强调色不超过画面 10%；动效幅度上限；色相数量上限 |
+| 史诗 | 尺度：展示字多大、主图占多少面积、明暗对比多强 |
+| 文学感 | 字族的性格、行长、行高和配色，各取什么值 |
+| 粗糙 | 用哪些手段，各用到什么程度，例如错位多少像素、旋转多少度 |
+| 简洁 | 密度档位，以及删掉什么、为什么删。简洁是结果，不是指令 |
+
+翻译不出可观察决定的词，从理由里删掉。
+
+动效与交互上的模糊词同样必须翻译为具体模式：
+
+| 动效模糊词 | 翻译成什么 |
+| --- | --- |
+| 滚的时候动起来 | 先分清是滑动触发还是滑动驱动，见 [滚动叙事](scroll-narrative.md) 的“滚动交互的两种模式”；未明确时按单向一次性处理 |
+| 切页面丝滑一点 | 选定转场模式：遮罩式、交叠式还是共享元素，取舍和时长见 [动效](motion.md) 的“整页转场的稳定性取舍” |
+| 背景有立体感 | **分层视差**：前后景的速度差和哪些层不做视差，按 [滚动叙事](scroll-narrative.md) 的“视差与一镜到底” |
+| 首屏要有冲击力 | 明确首屏单一主角（大字排版、一件实物、核心 3D 或视频），不堆砌次要修饰；进场时长见 [动效](motion.md) 的“时长和幅度” |
+
+## 用生成引擎起方向
+
+需要主 Agent 起新概念时，按下面的独立概念流程执行。用户已经给定完整概念时不重起；入口已经指定概念专项时，采用专项的产出，不重复派通用概念子 Agent，但仍由主 Agent 选择并执行独立把关。
+
+### 独立概念生成与把关
+
+1. **主 Agent 只备事实包。** 写产品事实、用户与品牌约束、主角与主动作、必须保留的交互基线，以及素材、技术和设备限制。不给主 Agent 已想到的方向或偏好的风格。
+2. **全新子 Agent 出概念。** 至少派一个没有本任务历史的新子 Agent；能并行时按不同事实角度分派多个。只给事实包，不给标杆截图、主 Agent 的想法或其他子 Agent 的结果。收齐至少三个候选，每个交回：一句概念、核心动作怎样完成、主视觉与关键素材、一个记忆点、资产与技术依赖。至少一个候选直接从本产品特有对象或动作长出，不从标杆派生。
+3. **主 Agent 选择。** 按任务路由确定的对外方向数量选择：默认选一个，明确探索多个时才选多个；内部候选至少三个的要求不因此减少。不先内定答案再让子 Agent 佐证，也不把重复概念换词照收。为选中概念各选一个生成引擎、写成方向卡，再按“差异检验”先过适配与落地门槛。
+4. **另一位全新评审者否决或放行。** 评审者不能是概念子 Agent，只拿事实包、用户约束和选中的方向卡，不拿主 Agent 的推荐。逐张写“通过 / 退回 + 理由”：检查受众、品牌与任务适配，核心交互，资产与技术成本，设备约束，以及六项差异；多个方向都只会顺着同一家标杆换皮，或存在陪跑方向时整组退回。主 Agent 修完后交同一评审者复核，全部通过才发给用户或制作首屏，不自行忽略退回意见。这一步只审概念、方向卡和灰度，不打视觉分，也不替代真实画面评审。
+
+宿主不能派子 Agent 时，主 Agent 按同样的输入和交付项自己完成，并在设计说明标明“未独立生成概念与把关”；适配和落地门槛仍照做，不声称独立评审。
+
+### 把概念翻译成生成引擎
+
+每个方向都从一个具体的引擎出发，而不是从形容词出发，不同方向最好用不同的引擎。引擎的内容来自这个产品的证据：受众、内容、使用场合和品牌已有的资产。
+
+- **材质 × 环境**：一种材质放在一个具体的环境里。由它推出光照、深度、边缘的处理和动效的阻尼。
+- **一个具体场景**：一个有时间、地点和光线的场景。由场景里的光线、声音、材料和节奏推出质感和动效速度。适合情绪型工具。
+- **角色原型**：给产品一个具体的性格，让性格决定字体和动作。
+- **一场设计运动或文化语法**：选一个和产品的题材、受众或地域有真实联系的设计运动或视觉传统，借用它的语法，而不是贴它的图案。
+- **其他领域的整套表现形式**：把另一个领域的媒介或器物的表达方式借过来。只借它最有辨识度的一两个手法，页面本身仍是原来的体裁；不把那个媒介的部件一件件搬来，那会变成道具堆砌。
+- **打破一个具体常规**：改变比例、阅读顺序或操作组织，同时保持可读、可学、功能完整和目标设备可执行；不把刺眼色彩或失控构图当作引擎。
+
+引擎决定结构、手感、质感和动效；颜色按下一节单独定。
+
+## 定色彩
+
+产品自己的品牌资产、实物和内容画面是颜色的第一来源；主视觉就是产品实物时，主色可以直接从实物里取。没有现成主色时，不要直接拿生成引擎里那种材质或场景的固有色当主色——隐喻一落到黄铜、木纹或暗房，不同的产品最后就会撞进同一组颜色。按三步定：
+
+1. 先写两行，几个方向共用：这个品类最顺手的默认配色是什么，写出底色和强调色；拆过的标杆各占了哪个色相和明暗。
+2. 每个方向定一套不同的色相和明暗，或明确的黑白，用一句写它来自这个产品的什么：内容、受众或品牌资产。避开刚拆过的标杆配色；至少一个方向跳出这个品类的默认配色。
+3. 写出至少三层：底色、主强调色，以及由它们派生的选中底、描边和禁用态。
+
+黑白灰加一种强调色，甚至完全不用彩色，也是完整的色彩身份，这时颜色交给内容：产品截图、用户的照片、一张画。几个方向之间不按明暗分：头号失败是“一个亮、一个暗、一个暖”，每个方向要有自己的色相家族或材质感，明暗只是结果。
+
+## 定首屏与工作区骨架
+
+唯一主角与主动作、概念和关键素材来源确定后，先画灰度结构，再把它实现成有视觉细节的首屏。每个方向只画主视口首屏：只用灰阶块、必要文字和动作标记，写出内容层级、对象位置、状态反馈与阅读起点；唯一主角的视觉权重最高，唯一主动作紧邻它或紧随其后，其他动作降级。核心动作会改变状态时，补操作前后两张。只有另一端会改变布局或输入时，才补那一端的灰度；否则留到实现后检查，不在概念阶段写两套方案。
+
+灰度里分不清主角、主动作或状态变化时，重新取舍主次；结构相同就先重写结构，不等字体、色彩和主视觉来救。除概念已经确定的标题外，其余文案在骨架后写并适应骨架。按页面类型选结构：
+
+- **来听一句话、看一张画、被说服的页面**（落地页、品牌页、产品发布页、展览页）：
+  从 8 种首屏骨架里选，跳出左右分栏默认模板。详见 [说服型页面首屏骨架](direction-persuasion.md)。
+- **来看内容、挑东西或处理对象的页面**（画廊、商店、信息流、文档、作品集、工具和后台）：
+  首屏就是第一排内容本身或工作区。面包屑、标题、实时状态与全局筛选合并为一排紧凑顶栏（约 `56–64px`），第一排内容要完整出现在首屏；不放首屏口号，也不放解释这个页面是干什么的段落。多模块后台采用紧凑三行布局（首行 4 张指标卡可将进度环内嵌、中行主态势图配动态流、末行主数据表配排行），在 `1440×900` 视口内同时露出核心模块与主表前几行。没有工程约束的独立单页优先将 HTML、样式与脚本内聚在单个 `index.html` 中，静态原型的汇总数字与明细保持直观自洽即可，动手前不另写脚本验算公式；完整详情与日志按需在选中对象后滑出或展开，不用多层小卡片和满屏彩色标签把桌面塞满。
+- **两种都有时**（例如商店首页顶上有活动横幅）：以用户最常来做的事为准，横幅可以留，但不能把第一排内容推出首屏。
+
+## 方向卡
+
+每个方向写一张方向卡，每项都填具体选择，不填形容词。明确探索并制作多个首屏时，调性、产品参考与取舍、交互参考与取舍几个方向共用一份（候选分布在不同调性上时，调性各填各的）；每个方向先填北极星、主角与主动作、生成引擎、首屏骨架、字体、色彩、主视觉、图标、控件语法、核心交互、记忆点、资产与技术，其余各栏在方向选定后、做完整页面之前补齐。派生版式时，每个版式变体只重写首屏骨架、页面结构和主视觉三栏：
+
+| 字段 | 要写到的程度 |
+| --- | --- |
+| 北极星 | 一句能指导取舍的意图：给人的第一感受是什么，整页围绕什么展开 |
+| 主角与主动作 | 首屏唯一主角、唯一主动作、动作后的可见结果；其他动作怎样降级 |
+| 调性 | 五个刻度的取值及依据 |
+| 产品参考与取舍 | 品类、参考来源与真实画面路径（没看图就写“未看图，凭记忆”）；内容、骨架和视觉身份分别沿用、换掉什么，为什么 |
+| 交互参考与取舍 | 核心交互参考与真实画面或录屏路径；按“触发 → 对象变化 → 反馈 → 下一状态”写借鉴什么，关键状态怎样调整，没有真实证据就标明 |
+| 生成引擎 | 用了哪一种，具体是什么，来自这个产品的什么证据 |
+| 首屏骨架 | 先写用户来首屏看什么。内容页写首屏能看到几个对象、页头占几行；说服型页面写从骨架表里选的哪一种。附主视口灰度线框：每块是什么、占多大面积、阅读从哪里开始，主动作和状态反馈在哪里 |
+| 页面结构 | 首屏以下怎么组织，例如单列沉浸滚动，或导航、内容、详情三栏 |
+| 各区块的形式 | 首屏以下每个主要区块（产品实样、功能、价格、隐私、结尾等）在这个方向里长成什么东西。形式从生成引擎推出，不是同一个模块换颜色 |
+| 字体 | 具体字族、字重和尺度关系：展示、正文、数字各用什么，相差多大 |
+| 色彩 | 按“定色彩”写：十六进制色值及用途，至少三层，再加一句它来自这个产品的什么 |
+| 主视觉 | 哪张图或哪个图形承担情绪与识别，来自复用、生成还是排版本身 |
+| 图标 | 用哪一套、什么描边粗细和端点，或者不用图标、改用字符和编号 |
+| 控件语法 | 按钮、输入、选中、标签、状态和动效共用的一套形状和手感，用一句话写清，例如圆角多大、描边多粗、按下时怎样变化 |
+| 核心交互 | 用户从什么入口做一个主动作，对象怎样变化、看到什么反馈、进入什么状态；涉及哪些关键状态 |
+| 记忆点 | 集中发力的一两处：在哪个时刻或位置，用什么材质、动作或画法，见“让人记住的一刻” |
+| 资产与技术 | 关键素材的来源、数量与制作成本，交互或渲染需要的技术与现有依赖；哪一项超出现有条件就换方案，不写成待以后解决 |
+| 动效 | 手感用“一个拟声词 + 一个实物的动作”来写，实物从这个产品的领域里找；三处基本动效各怎么动、怎样彼此呼应；落地页类页面再写滚动分镜（区块出场、选了哪种滑动驱动的叙事），见 [滚动叙事](scroll-narrative.md)。见 [动效](motion.md) |
+| 结构性突破 | 改变首屏结构的那一处偏离常规，以及它怎样放大北极星。手写批注、质感按钮、划线这类局部细节不算 |
+| 放弃什么 | 这个方向主动不要的常见做法 |
+
+北极星、字体、色板和特征直接写进对比页 manifest，与画面一同展示。
+
+## 差异检验
+
+方向卡写完、做首屏之前，先过适配与落地门槛，再比差异。只有一个方向也过同样门槛；有多个对外方向时每个都必须通过，任何一项不过就重写该方向，不降为陪跑：
+
+- **受众、品牌与任务适配**：逐项指向产品事实和用户约束，说不清适配依据就退回；不得故意做差来衬托推荐项。
+- **核心交互可走通**：从唯一主动作到对象变化和结果都有路径，关键状态有去向；只能描述风格、说不出操作结果就退回。
+- **资产与技术成本可落地**：关键素材有来源，制作数量与技术在任务授权、项目依赖和预算内；指望尚未获得的素材、能力或依赖才能成立就退回。
+- **设备与输入可执行**：主视口的灰度、输入和反馈已写清；另一端会改变结构或输入时已补方案。不把已知的设备问题留给“后续适配”，没有设备差异时不另写响应式说明。
+
+有多个对外方向时，还要并排比较首屏骨架、字体、色彩、主视觉、核心交互、记忆点六项。基于选定方向派生版式时只比版式，不强制重写核心交互；用户给了品牌规范时字体和配色可共用，其余规则照查：
+
+- **比灰度线框，不比描述**：把各方向的主视口首屏线框并排比。描述不同、线框却都是同一结构，重选骨架；填了“页面结构”的候选，页面组织也不能完全相同、只换颜色和质感。
+- **视觉四项至多一项相同**：首屏骨架、字体、色彩、主视觉四项里，任意两个方向至多一项相同；否则换一个生成引擎重写。每个方向有自己的色相家族或黑白，不只按明暗区分，见“定色彩”。
+- **核心交互和记忆点也要比**：写出操作路径、对象变化、反馈和关键状态有何不同，以及用户最后会记住哪个动作或时刻。核心交互因任务必须相同时写明理由，不拿按钮换位冒充交互差异；骨架与核心交互相同、记忆点又只是装饰替换的，判定为同构换皮，直接退回，不进入对比页或推荐。
+- **至少一个明显不同，但全部适配可落地**：至少一个方向在骨架或核心交互上与其他方向明显不同，且所有对外方向都通过上面的门槛。差异来自解决任务的方式，不以极端颜色或构图取胜。
+- **至少一个打破品类套路**：在同一调性内，至少一个方向不用这个品类的默认版式。打破套路不等于抛弃基线。常见套路如下：
+  - 电商：大横幅、商品网格加页脚。
+  - 社交：底部标签栏、信息流加悬浮按钮。
+  - 落地页：主视觉、特性、用户评价，最后一个行动按钮。
+  - 聊天：左侧联系人，右侧消息。
+  - AI 与开发者工具：黑色背景、紫蓝发光弥散圆晕、浮空粒子与千篇一律的胶囊按钮。
+- **不撞脸**：把每个方向和它拆过的标杆并排看，撞脸就重做，定义见“认品类，拆标杆”。沿用基线不算撞脸。
+- **盲看**：遮住名字和说明只看画面，仍能说出每个方向带给人的不同感受。
+
+有多个首屏时，做出来后再比一次实际画面：在对比页并排看首屏，眯起眼睛只看明暗块面。块面的分布如果相似，比如都是左边一大块、右边一小块，即使字体和颜色都不同，也回到骨架表重做，不靠换装饰补救。
+
+## 北极星与呼应
+
+北极星选定后，把它落成全页一致的关系：每一屏谁是主角，次要信息怎样退后，哪种排版或图形在全页重复出现形成节奏，哪一处用反差突出主操作。
+
+结构性突破要动的是结构，例如首屏的骨架、比例或阅读顺序，而不是多加一个装饰；它要么让主题更强，要么把人引向关键动作。精修的时候，别把有辨识度的选择磨平。新加的元素如果不能加强同一个意图，就不加。
+
+## 让人记住的一刻
+
+每个方向选一两处集中发力，其余保持安静。记忆点通常是一个组件的一次动作：结果、材质、光影、手感和节奏都做到位。
+
+去哪里找：
+
+- **用户会做的动作。** 点按、拖动、切换、提交，比滚动更容易成为记忆点。
+- **关键时刻。** 付款成功、第一次完成任务、升级、删除、上传、等结果。这些时刻情绪最强，一个小动画的回报最高。
+- **边角页面。** 404、空状态、加载、页脚。没人期待，风险又低，最容易出彩。
+- **AI 在工作的时候。** 让过程看得见，进行中和做完的区别直接落在画面和内容变化上，不只靠转圈动画。
+
+怎么想：
+
+- **让结果当场发生。** 状态切换不只换一个图标，而是让被影响的东西当场变化。用户看到的是结果，不是控件在表演。
+- **把数字画成看得见的量。** 百分比、时长、余额，先问能不能画成面积、长度或个数。数字只是标签，量才是画面。
+- **借这个领域里的真东西交付结果。** 先看用户做这件事时手上拿的是什么、眼里看的是什么，例如音轨、画布图层、包裹、账单，借它的样子和动作把状态交出来。票据、打印机、卡带、老游戏机这类复古道具已经泛滥，跟产品无关就不要套。
+- **给控件物理和性格。** 拖动有弹性和重量，按下有光影变化，拉过头会不情愿地弹回来。
+- **画法要说得出来源。** 点阵、字符画、像素、粒子、写实材质这类画法，只有能说出它来自产品做的事时才选。说不出来源就不选；选了就从主视觉一路用到加载、图标和空状态。
+
+## 参考怎样转为设计决定
+
+先说清这份参考拿来做什么：借它的视觉关系，把它当质量的底线，还是照着它精准还原。看过图再描述它长什么样。借鉴时取的是关系，例如“标题最重，图负责情绪，辅助信息压得很淡”，再拿当前的内容重新组织；不照搬参考里的业务模块、标识和文案。借来的隐喻要落成具体的界面决定，不做成一层妨碍操作的仿真外壳。
+
+参考里没有的东西也是决定。参考的首屏没有标题区和说明段，就不要替它补上；参考没有用的装饰，也不要加回去。
+
+## 小样、选择与品味
+
+方向只做首屏，不一开始就做多套完整产品；默认数量和确认点见主入口的“形成并收敛方向”，明确比较时按 [显式探索](task-explore.md)。
+
+首屏选能暴露方向优缺点的那一页：含复杂表单的产品不能只做封面。
+
+介绍产品的页面，必须让用户看到产品真正交付的东西：一张生成好的报表、一份导出的合同、一段处理后的真实数据，而不是只用文字承诺“能做什么”。这个实样往往比功能列表更有说服力，也最容易成为首屏以下某一段的主角。
+
+推荐理由从任务适配、辨识度、内容承载、可读性和实现代价里比出来。请用户补充品味时，问想要什么感受、不要什么和为什么、哪些地方要保留。定方向时用户只说“再高级一点”，用上面的翻译表追问，或拿两张小样让用户比较。
+
+把选定方向和品味写进设计说明，作为后续判断基线。评审提出新风格时，先判断它是否解决原目标；只有当前方向确实不适配，或用户改变目标时，才重新探索。

package/builtin/skills/oil-ui/references/direction-persuasion.md

@@ -0,0 +1,25 @@
+# 说服型页面首屏骨架
+
+落地页、品牌页、产品发布页、展览页等以说服、传递理念为主的页面，按本规范选定首屏骨架（整体设计方向流程见 [设计方向](design-direction.md)）。
+
+模型最顽固的习惯是左右分栏，它在写文案之前就定下来了：先想好标题、一段说明、一个按钮，摆好就是左右两栏。所以骨架要在写任何文案之前决定。
+
+每个方向先从下表选一个首屏骨架，再用 3–5 个方框画出首屏线框：每块是什么、占首屏多大面积、阅读从哪里开始。
+
+| 骨架 | 首屏长什么样 |
+| --- | --- |
+| 满版图像压字 | 一张图占满首屏，标题和动作压在图的安全区里 |
+| 居中单一物件 | 一个物件或一句话居中，四周是大面积空白 |
+| 画面即界面 | 首屏就是产品界面或一件实物本身，标题、导航和按钮都长在它上面 |
+| 满版文字 | 文字本身就是画面，字大到占满首屏、跨过边缘或被裁切 |
+| 通栏上下堆叠 | 通栏大标题横跨整个宽度，下面紧接内容 |
+| 网格拼贴 | 多块内容同时出现，按网格或拼贴排列 |
+| 纵排或斜向 | 文字竖排、斜切或旋转，打破从左到右的阅读 |
+| 左右分栏 | 文字一侧，画面一侧。这是模型的默认，一轮最多一个方向使用，并写出为什么适合当前内容。另一侧要有撑得住场面的主角：跨出边界的图像、图形装置，或放大到看清核心操作的产品界面特写，不要塞一张缩得很小、没有重点的整页截图 |
+
+规则：
+- 同一轮的方向，骨架互不相同。
+- 所谓“大标题九栏、说明三栏”同样算左右分栏。
+- 骨架定好之后再写文案。文案去适应骨架，不让骨架去适应“标题 + 说明 + 按钮”的组合。
+
+构图的大胆程度和调性无关。安静精致的产品，一样可以把一句话放在空白首屏正中，或让纵排标题贯穿整屏，或让界面本身占满首屏。调性决定音量，骨架决定结构；不要因为调性偏安静，就退回左右分栏。

package/builtin/skills/oil-ui/references/image-ideation.md

@@ -0,0 +1,130 @@
+# 生图设计与还原校准
+
+返回 [主入口](../SKILL.md)。先用生图探索或锁定界面的构图、比例、留白与色彩关系，再将设计图作为视觉基线转化为可运行、响应式的代码或接入存量项目。视觉质量与业务完整性分别验收，不能用内容齐全、对齐规整替代设计成立。
+
+## 目录导航
+
+- [何时探测生图能力并让用户选择](#何时探测生图能力并让用户选择)
+- [参考图策略与组件素材边界](#参考图策略与组件素材边界)
+- [视觉构思、视口比例与提示词组织](#视觉构思视口比例与提示词组织)
+- [完整落地页与分段长图](#完整落地页与分段长图)
+- [检查、测量与响应式实现](#检查测量与响应式实现)
+
+## 何时探测生图能力并让用户选择
+
+当任务属于**新建界面（说服型页面、产品工作区与后台管理界面、存量项目新增子页面）、多方向视觉探索或存量重塑**时，先生成 UI 效果图能有效锁定构图、比例、留白与色彩张力。进入任务时，先静默检查当前环境是否具备生图能力：
+
+1. **宿主原生生图工具**：检查当前环境是否已挂载可直接调用的图像生成工具。
+2. **Oil 生图脚本**：若无宿主生图工具，静默调用 `oiloil-image.mjs` 的 `balance` 子命令检查积分状态；退出码为 `0` 且输出余额 `>= 2` 积分时，视为生图能力可用。能用不等于可以花积分：走 Oil 积分前，本任务必须已授权使用积分，见下文的确认和 [素材](media.md) 的来源顺序。
+3. **无生图能力时静默回退**：若两者均不可用（未登录、积分不足或离线环境），不报错、不索要密钥、不中断任务，直接按常规代码流程推进。
+
+确认生图能力可用、且用户尚未明确指定“先生图”或“直接写代码”时，**将步骤 1 的三四行方案推荐与是否生图合并为全流程唯一一次确认**（不在方案确认前额外提问，也不在生图完成后再次停顿等确认）。要走 Oil 积分时，在第 1、3 项里写明会消耗积分，用户选了就算本任务授权：
+
+1. **（推荐）先按此方案生成 UI 设计稿，并直接完成响应式代码实现**
+2. **跳过生图，直接按此方案用代码实现界面**
+3. **仅生成 UI 设计稿（暂不写代码）**
+
+用户选择第 1 项后，直接生成 UI 设计稿并紧接着完成响应式代码与真实画面验证，中途不再停下来二次确认。用户一开始就说了“你定”“直接做”或处于无人值守模式时，不等待确认：宿主能生图就直接先生成设计稿再转响应式代码；只能走 Oil 积分时，本任务已授权使用积分才生成，没有授权就按常规代码流程推进，按 [素材](media.md) 只提示一次；用户只要设计稿时交付图片与简短设计说明。并发调用 `oiloil-image.mjs` 时最多同时运行 **2 个进程**；命令行中的 `--prompt` 一律使用**单引号 `'...'`** 包裹。
+
+## 参考图策略与组件素材边界
+
+先区分借鉴风格、保留固定框架与精准还原。风格参考提取业务焦点、字体对比、留白、比例和图像用途，按当前业务重组内容；不要复制无关营销模块或作品展示外框。
+
+| 参考用途 | 使用方式 |
+| --- | --- |
+| 自由探索 | 无参考也可执行，从任务与领域入口选择视觉方向 |
+| 只保留导航、侧边栏或现有页面框架 | 先用 [工具](tools.md) 的 `shoot.mjs` 截取当前页面真实画面作为参考图传入（`--ref`），写清固定范围与允许变化的区域 |
+| 借鉴风格 | 传入实际参考图，说明借鉴的设计关系与允许变化的内容；未实际传入图片时只能称为文字提炼参考 |
+| 精准还原 | 完整截图用于测量与整体对照；只有确需素材重绘时才将相应图片送入生图工具 |
+
+在生成或实现前明确组件与素材边界：
+
+- **代码负责**：布局、文字、控件、普通图标和动态图表由代码实现；正文、数据标签和操作保持可编辑。
+- **独立素材负责**：摄影、原创插画和特殊品牌视觉使用独立素材放入明确容器。优先复用质量足够的原始素材、项目资源和干净裁图；缺失或不合格时才生成或重绘，不默认重画品牌标识。
+
+## 视觉构思、视口比例与提示词组织
+
+先理解用户的浏览与操作顺序，结合已选领域入口确定视觉手法，再组织内容：
+
+| 界面 | 设计重点 |
+| --- | --- |
+| 品牌官网与说服型页面 | 主视觉与文字的关系，跨区块节奏和一致的品牌表达 |
+| 后台与产品工作区 | 核心判断与操作突出，主分析、辅助指标、待办和记录有不同分量；特色来自信息组织与组件细节 |
+| 移动产品 | 内容、导航与主操作比例适当，小空间中仍保留清楚的字体和状态层级 |
+| 游戏与游玩界面 | 世界观通过插画、配色和图标进入界面，任务、数值与控件保持可读可操作 |
+
+展示数据可用表格或图表，反复浏览同类对象用稳定列表，需要比较时才并列。不要把“侧栏＋指标卡＋折线＋表格”当成默认答案，也不为避开模板禁用合理组件。允许有目的的大小对比、非对称、错位、重叠与特殊裁切，说明它们如何通过布局、遮罩、字体或独立素材实现，以及窄屏如何处理。
+
+### 区分逻辑视口与输出像素（50 词填空式短提示词与色彩范围洞察）
+
+逻辑视口、文档高度和生成像素分别记录：
+
+- 移动端 `390×844` 的逻辑视口可以生成 `1024×1536` 的图片，但不能把生成图的 `1024` 像素宽当作手机布局宽；桌面长页数千像素的高度也不是桌面视口高度。
+- **生图提示词遵循「45–65 词精简法则」，依靠以下 5 条设计洞察释放模型上限**：
+  1. **控长度（45–65 词，2–3 句话）**：只定义“结构关系、比例留白、色彩角色范围与图形构件”，不写长篇逐行线框图说明书，把自然排版与构图权还给模型。
+  2. **不塞具体引号文案与外部品牌配对**：在提示词中罗列十几个中文标题或具体数值，会迫使模型为了画清每个汉字而将全局字号与容器放大 1.5 倍；指定真实外部品牌配对则极易画错图标。生图阶段只写领域与语言（`Simplified Chinese interface for <产品领域>`）及通用图标约束（`clean abstract icons, no third-party brand logos`），具体业务文案与真实身份素材留到代码阶段实现。
+  3. **用「小比例底盘＋充裕留白」锁死清爽度**：固定声明 `delicate small-scale desktop proportions, petite typography, and generous open whitespace`。严禁使用 `oversized`、`giant`、`thick`（会连带放大侧栏与按钮），也不用机械的“每张卡片留白 50%”（会导致均质空洞白框）。
+  4. **色彩不写死固定色号，按「存量继承」或「无彩色骨架＋低明度重色锚点＋单峰高亮」的范围法则动态调配**：
+     - **为什么生图容易缺乏现代高级感？** 当提示词未区分“界面骨架色”与“数据焦点色”时，模型会把导航、主按钮、整排图表柱和状态栏全部刷成同一种高饱和度亮色，瞬间沦为传统报表。
+     - **存量项目（有既有界面、设计系统或指定品牌色）**：直接沿用存量项目的真实底色、主色与辅助色（配合 `--ref` 传入现状截图），仅用下方的主次比例关系组织新增内容。
+     - **新建项目（无指定品牌色时）的色彩范围与比例（85 : 10 : 5）**：
+       - **80–85% 无彩色画布与交互骨架**：浅色模式选自**高明度、极低彩度的纯净白或微冷/微暖浅中性色范围**（深色模式选自极低明度的深邃炭黑/暗岩色范围）；全局导航选中态、主操作按钮以及图表中的非核心基准项（历史对比柱、背景轨道、次要分段）统一交由**哑光深黑/炭灰与柔和中性浅灰（或斜纹灰）**承担（`matte-black active controls and soft neutral-gray inactive elements`）。
+       - **10–15% 单个低明度重色锚点**：全图只设 **1 处高反差视觉重心**（单张聚焦卡、右侧独立工具/卡包面板或底部日志抽屉）。色相随行业与产品气质自由选择，但明度须压入**沉稳深色区间**（如哑光曜石黑，或低明度、低荧光感的深林绿、深海青、深靛蓝、暗酒红、深岩灰等），不拉通栏高饱和亮色大横幅。
+       - **5% 单点信号高亮**：在整排灰色图表柱、分段条或状态胶囊中，**只点亮最关键的 1 根峰值柱或少量焦点胶囊**（色相在与重色锚点呼应或形成克制冷暖/明暗反差的现代点缀色范围内自选），其余同级数据项一律退回浅灰或斜纹灰。
+  5. **用「2–3 个具象图形微组件」替代干瘪的大表格与细折线**：根据当前页面的真实数据关系，从下方槽位中挑选 2–3 个图形构件组合，不拘泥于 Bento 网格。
+
+### 通用填空式生图母模板与开放槽位指南
+
+编写生图提示词时，按以下 **5 槽位填空模板** 组装（整段控制在 45–65 词，按具体产品在对应范围内灵活填空，不照抄固定配色或固定组件）：
+
+```text
+<1. 调性与页面形态> UI design (<输出尺寸，如 1536x1024>) inside a clean rounded desktop window, Simplified Chinese interface for <产品领域简述>. Delicate small-scale desktop proportions, petite typography, and generous open whitespace. <2. 画布底色范围与无彩色控件骨架> with <3. 导航与主体布局结构>, anchored by <4. 单个低明度重色锚点与 5% 单点高亮色（按产品气质在对应范围内自选，或沿用存量品牌色）>, featuring <5. 2–3 个匹配业务的图形化微组件（非核心项保持浅灰或斜纹）>, clean abstract icons, no third-party brand logos.
+```
+
+| 填空槽位 | 范围与洞察原则（不写死单一套餐） | 英文表达结构与可选范围 |
+| --- | --- | --- |
+| **1. `<调性与页面形态>`** | 按当前页面承担的真实角色定调；完整落地页长图须写明“从顶栏到页脚的桌面纵向长图”，防止被画成手机屏或海报 | 工作台与数据大盘：`Sleek, high-craft SaaS dashboard` / `Crisp modern analytics workspace`<br>开发与诊断工具：`Minimal, precision developer workbench`<br>品牌官网首屏：`High-taste modern landing page hero`<br>完整桌面落地页长图（`1024x1536`）：`Full-length desktop landing page UI design (1024x1536 vertical scroll view from top navbar to footer)`<br>独立模块：`Focused UI component module` |
+| **2. `<画布底色范围与无彩色骨架>`** | **新建项目**按产品气质在纯净白、暖亚麻纸白、冷石白或深邃炭黑/曜石黑等低彩度底色范围内选择，并声明**哑光黑/炭灰交互控件＋中性浅灰辅助元素**；**存量项目**直接填既有底色与视觉变量 | 新建浅色／画报底色范围：`Spacious <pure-white / warm archival paper / cool stone-white / soft sand-linen> canvas with matte-black active controls and soft neutral-gray secondary elements`<br>新建深色／影院底色范围：`Deep <obsidian / carbon-slate / matte-espresso> canvas with subtle hairline borders and muted gray secondary elements`<br>存量项目继承：`Existing <存量底色描述> canvas preserving the project's <存量主辅色与组件特征> visual tokens` |
+| **3. `<导航与主体布局结构>`** | 工作区按浏览顺序选结构，不默认套 Bento 卡片墙；落地页按 [说服型骨架](direction-persuasion.md) 选首屏骨架与跨屏节奏，不默认左右对半切分 | 工作区结构：`a slim icon rail and open analytical workspace` / `a compact left sidebar and asymmetric modules` / `a narrow left queue and continuous right inspection stage` / `an unboxed flow structured by 1px hairline dividers`<br>落地页多样首屏与跨屏结构：`centered sculptural hero object with generous surrounding space` / `full-bleed editorial visual stage with overlaid display typography` / `oversized architectural typography spanning the grid` / `product interface or tactile instrument as the hero stage`，向下衔接 `staggered editorial narrative flow, frameless spec list, and signature closing CTA carrier with footer` |
+| **4. `<单个重色锚点与单点高亮范围>`** | 全图只设 **1 处**重色重心（哑光黑或契合产品气质的**低明度浓郁深色区块/主视觉载体**），搭配 **5% 单峰/单点强调色**；或直接沿用存量品牌色 | 单张重色聚焦卡／主视觉载体：`a single <matte-obsidian / deep low-value tone fitting the domain> spotlight card (or hero showcase stage) and subtle <contrasting or tonal modern accent> pills`<br>右侧独立面板＋单柱高亮：`a sleek dark-charcoal <virtual card / inspector> panel and a single <modern accent hue> highlighted peak column`<br>深色通栏点睛区块（长页适用）：`one deep <low-value domain hue> contrast section anchoring the vertical rhythm, with a single <accent hue> primary CTA pill`<br>存量品牌色继承：`one <存量品牌主色描述> focal card with restrained matching highlights` |
+| **5. `<2–3 个图形化微组件>`** | 按页面要回答的问题任选 2–3 项；工作区图表非核心项退回浅灰或斜纹灰，落地页选用契合品类的实样、图解或凭据载体 | 工作区数据构件：`one refined primary figure with muted gray decimals` / `vertical pill-shaped capsule charts where most bars are soft diagonal-hatched gray and only one peak bar is highlighted` / `a horizontal segmented capsule bar` / `a circular tick-marked radial dial` / `a clean visual node routing flow` / `compact aligned rows with subtle status pills`<br>落地页叙事与实证构件：`staggered editorial photography and anatomical diagram callouts` / `frameless hairline specification ledger` / `tactile interactive product micro-cards or audio/hardware controls` / `a ticket-style or terminal-command closing CTA block and monumental wordmark footer` |
+
+- 类比应描述体验或组织方式，而非堆叠风格名。若“杂志”“生活方式”带入无关静物、纸纹或口号，移除歧义，不继续堆修饰词。
+- 参考字体拆成字形、字重、比例与间距，不把英文字体类别直接翻译为中文宋体或手写字。没有既有规范时选择少量自洽规则，不把某一套配色、材质或字体固定为所有产品的套餐。
+- **存量项目局部改版或新增页面时**：
+  - **无参考图（延续既有品牌规范新建页面）**：直接在上方 5 槽位模板的槽位 2 与槽位 4 中填入存量项目的真实底色与品牌主色。
+  - **带 `--ref` 传入存量截图（改图模式）**：以明确的变化指令开头——`Keep the reference image's exact <保留的侧栏/顶栏与小比例规范> and <存量主辅色描述> palette, but completely replace <目标区域> with a new Simplified Chinese subpage for <新页面领域>. Feature <槽位 4 重心锚点> and <槽位 5 图形微组件>, clean abstract icons, no third-party brand logos.`
+
+隐藏交互与其他状态保留在设计说明中，不要求全部画进一张图。
+
+## 完整落地页与分段长图
+
+完整桌面落地页保持桌面内容宽度，向下展开至页脚；用户明确只要首屏或独立区块时才缩小范围。**竖向长图（`1024x1536`）是桌面端完整网页的纵向滚动全貌，绝不是移动端 App 页面，也不是把所有模块挤进一张竖版海报或套用千篇一律的 SaaS 卡片墙。**
+
+1. **先定产品气质、首屏骨架与 4 段纵向节奏**：
+   - 按 [说服型骨架](direction-persuasion.md) 选择与产品匹配的**首屏构图**（如居中器物/实样、满版影像压字、画面即界面/乐器/硬件、跨栏巨型排字、瑞士网格拼贴、左文右图特写等），不同产品绝不重复同一种首屏套路。
+   - 安排从顶栏到页脚的 **4 个异构纵向区块**（例如：① 顶栏＋首屏主舞台 → ② 高低错落画报叙事或剖面图解 → ③ 无框细线规格台账或可交互产品实样 → ④ 专属行动载体如凭据卡/终端命令卡＋大字标页脚），相邻两屏不共用同一种构图。
+2. **按接口能力选整张或分段（同样遵循 45–65 词精简法则）**：
+   - 画布在可读字号下能容纳本次区块时，直接用纵向画布（`--size 1024x1536`）一次生成，并在提示词开头明确声明 `Full-length desktop landing page UI design (1024x1536 vertical scroll view from top navbar to footer), wide desktop layout proportions, NOT a mobile screen`，同时锁死 `delicate small-scale desktop proportions, petite body typography contrasted with expressive display headlines, generous open whitespace`。
+   - 页面极长、一次生成会让正文过小时，在区块边界分段（如 `--size 1536x1024`）。先生成并检查第一段，把统一规则和第一段参考（`--ref`）用于后续片段；每次提示明确本段包含哪些区块、是否含导航或页脚，接缝处不重复标题或顶栏。
+
+## 检查、测量与响应式实现
+
+生成后实际打开图片，在目标逻辑视口尺度检查范围与内容、视觉构思、层级与可读性、一致性及实现边界。每轮指出一个主要问题、应保留的特色与要改变的变量；纹理、颗粒和光晕只在明确风格需要时使用，不作为提升设计感的通用补丁。
+
+将生图设计稿转化为 HTML/CSS 或接入存量前端项目时，**生图稿是“风格、配色与排版骨架参考”，不是需要一比一像素描红的死板图纸**。严禁拿整张位图当页面背景，也严禁用大量任意定位（`position: absolute`）锁死像素去复刻生图被压缩的纵向间距或畸形小字：
+
+1. **只采样色板与横向比例，不照搬生图被压缩的纵向间距**：
+   AI 生图（尤其是 `1024×1536` 多区块落地页长图）为了在单张图片高度内塞下 4–6 个模块，必然会把模块之间的上下内边距压缩到真实网页的 1/3～1/2。用 `measure_reference.py` 时，**只采样主辅色板（`--color`）、参考横向分栏比例，或裁出确实需要的独立摄影/插画素材（`--extract`，可配 `--white-to-alpha` 或 `--key-color`）**，绝不照搬生图里的纵向区块高度与上下间距：
+   ```bash
+   python3 <skill>/scripts/measure_reference.py <设计图.png> \
+     --color bg=20,20,100,40 --box main=40,120,960,640 --css-width 1440
+   ```
+2. **按真实桌面 UI 尺度主动舒展上下内边距（拉开纵向呼吸感）**：
+   - **完整落地页／品牌长页**：首屏给足舒适的桌面视口尺度（如 `min-height: clamp(640px, 82vh, 880px)`），后续每个模块必须主动放大上下内边距（`padding-block: clamp(88px, 9vw, 136px)`），模块标题与内容区之间保持 `40px–64px` 间距，让整页在 `1440px` 视口下自然展开到 `3200px–4800px` 的真实网页高度，消除生图模块挨得过近的局促感。
+   - **后台与产品工作区**：去掉生图外围的窗口外框与画布留边，让界面自然铺满视口；主画布与卡片间距保持 `20px–28px`，卡片内边距保持 `22px–28px`，表格与列表单行高度保持 `44px–56px` 的真实可点击尺度。
+   - **存量项目**：默认在现有路由、组件树、样式系统与设计变量内实现；现有组件能表达时只调整布局和设计变量，不因参考图复杂就重建整套组件库。
+3. **文案合理润色与彻底清除非汉字伪字**：
+   生图中的小字常有笔画粘连的“伪汉字/非汉字乱码”、繁体字或生硬词句。实现代码时，**只沿用原图的字号层级对比与段落节奏，允许自由微调、润色和补全具体文案**：所有伪造乱码字符、非汉字杂乱符号与繁体字必须 100% 替换为自然通顺的规范简体中文（仅在确有需要时保留 `VCO`、`AUV`、`HRV`、`USD` 等标准英文缩写），绝不死板照抄图内文字。
+4. **真实画面与操作复验**：
+   按 [工具](tools.md) 用 `shoot.mjs` 在桌面与窄屏视口检查实际渲染并操作主要流程：确认真正用于字符渲染的字体、行高、模块上下留白、对比度和换行符合真实 UI 标准，长文本、列表增长与窄屏切换均不破坏布局。

package/builtin/skills/oil-ui/references/layout-and-viewport.md

@@ -0,0 +1,24 @@
+# 布局与视口
+
+## 精准还原
+
+先记下参考图对应的视口尺寸或已知的像素尺寸、画面的完整范围，以及哪些区域是固定不动的。图片的像素数不等于视口尺寸，例如 2 倍图要除以 2；确定不了时，写明你是按什么假设的。
+
+对准主要区域的横向栏宽比例、对齐轴线、色板与字号对比关系，先把整体构图、气质和字体层级立住，再处理边框、阴影和细节；还原任务不重新发散风格。
+
+参考图（尤其是整页长图或设计草图）常在纵向压缩了区块之间的留白，小字也可能带有乱码伪字或占位词。实现为真实代码时，**不要死抠纵向像素坐标去一比一描红**：长页各模块上下内边距按真实网页呼吸感自然舒展（如桌面区块 `padding-block: clamp(88px, 9vw, 136px)`），工作台去掉外围窗口装饰框并保持舒适的卡片内边距；文案在保持原有字号层级与节奏的前提下润色为规范简体中文，彻底清除任何非汉字伪字与生硬占位符。每轮修改后直接查看真实视口截图与参考图对照构图和细节，不调用截图工具的 `--compare` 做像素网格差分，补齐窄屏与必要交互状态。
+
+## 响应式与验证重点
+
+设备范围以产品事实为准：任务明确单端或固定视口时，只验指定范围；否则先在主视口真实操作到主要结果，再在另一端代表视口看主要状态，实际阅读正文，确认主动作可见可点。需要两端都完成同一流程时才各走一遍，不默认重复整条路径。检查文字、溢出和遮挡；有问题在原视口修复并复查，不用增加截图代替修复。
+
+再补一个最复杂或最危险的状态：从最长内容、空内容、错误与恢复，以及本次改动涉及的状态中，选最可能破坏阅读或主操作的一项。它若已包含在代表状态中，不再重复取证。除任务或专项规范明确要求外，不展开全语言 × 全页面 × 全状态矩阵；某种语言、页面或状态确会改变布局或操作结果时，只把风险最高的那一项纳入补验。
+
+项目明确支持的典型宽度仍按项目要求检查；除此之外，只有下列风险存在时，才增加对应的视口或连续操作；通过后就停止扩展：
+
+- **Canvas / 手势**：实际绘制、拖动或触摸一次，检查画面非空、坐标跟手，页面不会被手势意外锁住。
+- **复杂多栏**：在窄屏检查重排后的阅读与操作顺序，以及各栏是否仍可读、可滚动。
+- **弹窗 / 虚拟键盘**：在手机上聚焦输入框并弹出键盘，检查焦点、关闭方式和主操作可见可点；再检查视口高度变化和安全边距，键盘或固定栏不能挡住主操作。
+- **多屏 App**：沿主要导航连续走至少两屏并返回，检查当前位置与返回后的状态是否正确、主操作是否仍可用。
+- **壳内滚动**：分别在页面与内部容器滚动，确认滚动落在该滚的区域，没有双滚动条或卡死。
+- **特殊视口**：只在用户指定尺寸、横竖屏切换、安全区、缩放或动态高度影响结果时，补对应视口；放大或重新排版后，阅读和操作顺序仍须清楚。