--- name: page-solution-design description: 和用户一起敲定一个前端页面的整页方案（三层法：先定这页给用户什么，再定含哪几样怎么排，最后才是长什么样），最后打成一个定稿包（含高保真全状态与交互流程图）交给开发。触发：用户对一个页面说「想重做 / 重新设计 / 整页不对 / 太满 / 说不清具体改哪」，或「我们讨论一下这页怎么设计」。覆盖三种情形：① 已有页面整页重做；②「替换」——新方案占用同一个入口（同一路由 / 同一侧栏条目）且用户拿着现行页面在说话，功能变不变不作判据；把几个同性质页面合成一页、占其中一个入口，也算替换；③ 从零的新页面，走同一套流程，第 0 步的问法按「新页面」那一栏改。不适用于：只改一两处具体元素的具体属性（间距大一点、按钮换色、换个图标）——这种直接改，不必起流程；照着截图或设计图 1:1 复刻；写 PRD / 测试用例（本 skill 的定稿包是它们的输入）；没有界面的架构 / 数据 / 流程方案；跨页的信息架构 / 导航分组 / 侧栏结构——本 skill 的作用域限单个页面之内。已有页面补状态（加载 / 空 / 错误 / 未设置）：只补一两个且常态布局不动 → 直接改；要成套补齐、或补状态时发现常态布局本身要改 → 用本 skill。 metadata: status: active status_updated_at: "2026-10-06" --- # 页面方案设计：三层法 用户是产品经理，你是懂技术的设计搭档。目标是**敲定一个页面的逻辑**，不是画一张好看的图。产出给下游（PRD、开发）用的事实源，视觉件只是附件；最终交付是一个**定稿包**（一个文件夹，开发只读它）。 ## 元原则 1. **「好不好看」不是验收标准，「这页对用户有没有用」才是。** 标准不写出来，什么方案都过不了。 2. **三层有依赖顺序：① 问题 → ② 布局 → ③ 样式。** 用户开口说的往往是 ③，真正没定的往往是 ①。 3. **用户说「说不出来 / 差点什么 / 有点怪」= 上层没定。立刻退层，不出下一版。** 能点名是哪一处不对的不算，那是单点问题（见第 3 步）。**退法三步**：① 只问一句「是哪一块让你觉得差点什么，只说一块」，问块不问原因；② 那一块牵动哪一层就退到哪一层，**可能一次退两层**（用户指的是排法 → 退 ②；用户说「它没告诉我 X」→ 含清单缺一项，退 ①）；③ 退回去的层**只重开争议那一处**，用户此前确认过的其余部分原样保留，重新确认后原路走回来，不从头重来。 4. **减法优先。** 先删到用户喊停，再只加用户主动要的。用户从用法里长出来的点子比 AI 的方案准。 5. **AI 主动加的元素要打标。** 合计句、装饰图形、解释文字这类不是用户要的东西，产出里标「AI 加的」，让用户一眼能砍；**本页连续两样被砍就停止主动加，换页清零**，计数记在层标记行里。标记写在草图 / 对比板的版本说明和回复里，**不渲染进页面画面**——画进高保真里，用户会把它当成界面文案。 6. **常驻位置只放数据或控件。** 解释性文字（「等价 API ÷ 订阅费」）不占常驻位置；同一个位置要放话，放能改变动作的数（「省了 $X」）。状态话（「已停」「正在统计」「未设置」）算控件反馈，不算解释性文字。低频动作不做常驻按钮，藏在它管的数字后面。 7. **给推荐，不列菜单。** 每次出多版都带一个倾向和一句理由；用户选编号，不描述感受。 ## 三层、产物、已定标志 | 层 | 回答什么 | 产物 | 已定的标志 | 没定的表现 | |---|---|---|---|---| | ① 问题 | 打开这页确认什么、确认完做什么、给谁、多久一次 | 一句话任务 + 含 / 不含清单（含清单每项标来源） | 用户改过它，或明确说「是这个」 | 什么稿都「差点什么」 | | ② 布局 | 含哪几样、先看什么、怎么排、怎么交互、谁填什么 | 内容清单 + 结构草图 | 用户选了草图编号；说组合的，复述后用户确认 | 「结构乱」「太满」 | | ③ 样式 | 长什么样 | 高保真 + 对比板 + 状态清单 + 全状态板 + 交互流程图 → **定稿包** | 用户说「就这个」；定稿包文件夹存在 | 「不精致」「配色怪」「像两个产品」「不习惯」「太素」 | - 状态清单回答的是 ② 的问题，却排在高保真之后出（第 5 步）：先有形，才知道哪些状态会改变布局。 - 「差不多 / 还行 / 可以吧」不是已定。追问「哪一条不对」或「改一个字」。 - **每次产出前先写一行**：`当前层 ①/②/③ · 上一层产物：<名称> · 已确认：是/否 · AI 加的被砍：N`。「否」就不许出这一层的产物。① 层的「上一层产物」填「第 0 步四问答案」。退层时靠这行定目的地。 - 层归属与动作以「用户信号 → 动作」表为准；上表「没定的表现」列只是信号名。 - 变化频率：① 几乎不变；② 每页一次；③ 全产品一套，第一页定完后面的页套样式包。 - 视觉件从第 2 步起就产生，过程中统一按序号归档：`specs/<单元>/_review/NN-页面-用途.html`（无 specs 协议时放 `设计/<页名>/_review/`）。**定稿时**（第 7 步）定稿件搬进定稿包，过程件搬进同目录 `_作废-探索过程/`。 ## 工作流程 ### 第 0 步：触发时不动图 用户说「这页不对 / 想重做」，先问四个问题（凭直觉答，不用周全）： 1. 最近一次主动打开这页，是为了确认什么？ 2. 确认完做了什么动作，还是看一眼就关？ 3. 有没有哪一条 / 哪个数字让你停了一下？答「没有」或「说不出来」都换问：看完之后然后呢？它大和它小，你做的事有区别吗？区别出现的地方就是那个东西。 4. 这页给别人看吗？ **新页面**（还没有界面可打开）改问法：问题 1 换成「你打算在什么时刻打开它」，问题 2 换成「打开之后你要做什么」，问题 3 换成「你现在是怎么凑合着干这件事的，哪一步最烦」。其余流程完全一样。 第 0 步不写层标记行。跳过条件：四问都能从对话里直接填出答案。同一产品的另一页定过，不算这页说清（「也想重做」「和那页一样」不是用法）。只问缺的那几问。 ### 第 1 步：一句话任务 + 含 / 不含清单 + 来源标注（① 层） ``` 打开这页是为了确认 ___，确认完会 ___。用户是 ___，频率 ___。 含：A（系统能拿）、B（用户要填）、C（拿不到 → 怎么办） 不含：D、E、F ``` - 判断每一项要不要的尺子：**这一项改变用户的任何一个动作吗？** 不改变的，问它对谁有意义；对谁都没意义的，砍。 - **用户把砍掉的项要回来**：收，但问一句「它改变你哪个动作」。答得出 → 正常留；答不出（「我就想看看趋势」）→ 降级到次级位置，并在含清单标「用户要的，非动作判据」。元原则 4 优先于这把尺子，但降级不是砍。 - **频率的用处**：每天多次 → 常驻、免点击、考虑自动刷新；一月几次 → 可以藏进二级入口，不必占常驻位。 - **含清单每一项标来源**，四选一：系统能拿 / 用户要填 / 拿不到 / 待查（示意类区块另标「固定示例」，见下）。标之前真去查（读服务层、读本地文件）；涉及本地凭证 / 配置的**只读字段名并脱敏**，不输出任何 token / key。 - 「拿不到」必须同时写怎么办，四选一：降级显示能拿到的近似项 / 改由用户填 / 砍掉 / 记进「后续」。 - 「待查」是查不动的项（要跑代码、要问后端），标出来带进第 5 步 F 类，不许当成「系统能拿」蒙混过去。 - **示意类区块**（预览、示例、样板）来源标第五种「固定示例」，默认不读真实来源：读真实数据只会多出一串边界状态（没数据、过期、字段缺失），却不改变用户任何动作。拿不准它是在回答「现在是什么」还是示意「会长成什么样」时，问用户。 - 这张来源表决定后面设置流程的形态，必须在 ① 就摆出来，并且在用户问「能不能自动」时**单独成表回答**，不埋在长回复里。 - 「不含」清单和「含」清单一样重要，它防止页面回到大而全。 - 写完让用户改，不让用户从零写。**用户没改过一个字、也没明确说「是这个」，① 视为未定，不进第 2 步。** ### 第 2 步：内容压到最少，再定布局（② 层） **2a 定内容清单。** 只按「含」清单出一版最少内容，让用户删到喊停；用户主动要回来的按第 1 步的规矩收。产物：定稿内容清单。 - **用户一项都不删**：逐项问「少了它，你照样能干活吗」。问完仍全留，记为已定，并在设计文档标「未压缩」，不擅自删。 - 对每一项「用户要填」的数据追问三句：**谁填、多久变一次、变了影响什么。** - 对每一个**动作**（重跑、续费、导出）追问一句：**它依赖什么才能用**（token、权限、网络、选中项）。 - 这四句的答案就是设置与动作类状态（改价、续期、暂停、到期怎么办、动作不可用），在这里定，不要等到 ③ 再补。 **2b 结构草图。** 按定稿内容出 3–5 版 HTML 灰框草图（求分歧，不求梯度；可用 `references/对比板骨架.html`，方案设 `gray: true`），各版只换布局不换内容，每版一句「先看什么」，末尾给推荐编号。用户选一版或说组合；说组合时复述一遍要一句确认，才算 ② 已定。 - 草图画在**真实窗口尺寸**的壳里。尺寸以主进程 / 布局代码为准（默认尺寸、最小尺寸、侧栏宽、标题栏样式都记下），不抄前一页的设计文档；两者不一致以代码为准并告知用户，由用户决定要不要回改文档。 - 用户**能指着某个位置**说「这个在这里怪」的（指不出位置的按元原则 3 退层），多为**性质混放**，拆开各归各位即解：控件（翻页、切换）、数据（合计）、动作（设置）挤在同一行；数据筛选进了工具栏；一个月改一次的动作占了常驻位置；两套时间控制并存；全局搜索和内容导航挤在同一栏；元信息和结构信息挤在同一行；同一信息在两处出现（卡头写一遍、正文再写一遍）；动作按钮没有宾语（「重新运行」——重跑哪一次）。 ### 第 3 步：单变量对比板（②/③ 层的单点） **何时用**：用户**能指出是哪一点**不对但选不出（合计放格子上方还是角落、某区域怎么摆、三档配色、一个数字怎么写）。指不出是哪一点 → 不是对比板，退层。 **何时不用**：命名问题走第 6 步；**信号表已经给出答案的不出板**（「重复了」「太满」「这个在这里奇怪」按表直接做）；样式包已有的项按第 4 步直接套，只有用户点名不对时才出板。 - 同一模块 4–6 版并排（求梯度，所以比草图多），**一板只变一件事**。板头写「本板前提：固定 ___，只变 ___」；每版下写「变量」和一句读法；末尾给推荐编号。 - **前提 = 板头「固定什么」那一栏**，固定的就是没被检验的假设。 - 用户否掉整板 = 前提错了。**拆前提三步**：把固定项逐个反问用户 → 哪个松动就退到它所在的层（板讨论 ③ 的点退 ②，讨论 ② 的点退 ①）→ 只问一个用法问题钉死新前提，再改结构。不再出一板。 - 用户不选编号、给出板外的组合（「只加一行说明」）：先按元原则 6 核那一行是数据还是解释。是数据 → 照做。是解释 → 回问一句「能不能换成一个能改变你动作的数」；用户坚持 → 照加，并按元原则 5 打标计数。 ### 第 4 步：高保真按真实窗口画（③ 层） - **动笔前先答第 6 步的三问**（主数字方向、单位与数字规则、分档名字），否则三档色会先画错再改。 - **项目有设计总纲 / 组件规范时，外壳照总纲；本 skill 的外壳规则只兜底。** 平台惯例见 `references/桌面外壳惯例-macOS.md`。 - **怎么算「第一页」**：查项目有没有设计总纲文档、tokens 文件、组件库目录。三样都没有 = 第一页。 - **第一页**：动笔前先列本页要用的图形项（至少 3 类），画完把外壳、卡片、文字、数字字体、语义色、图形项、控件写进设计文档 §3 作为样式包。 - **后面的页**：对着 §3 的样式包清单逐项核对，**先勾图形项**（图标 / 环 / 条 / 色点 / 标签用了几个）——只搬数字不带形，用户会说「太素」。缺的项用现有 token 直接定，不出对比板，定完写回 §3 作为增量回流。 - **定稿 HTML 要埋锚点**：可移植的段落前后加 `/* @export:<名> */ … /* @end */`（CSS）、`// @export:<名> … // @end`（JS），第 7 步按锚点切片抽进定稿文档，不手抄。至少埋：组件 CSS、渲染逻辑、弹层标记。 - **可点控件的焦点框只写 `:focus-visible`**，`:focus` 设 `outline: none`。否则鼠标一点就冒出浏览器默认蓝框，用户会当成样式问题。 - **组件样式不靠全局继承**：`box-sizing`、字体栈、`font-variant-numeric` 这类写在 `