contentm_agent/执行会话/目标-重写5份竞品分析文档并重新生成MCN短视-72111e/vibe-product六份-新稿/2b-界面布局.md

界面布局（2b）

项目：proto-board｜更新：2026-10-07｜性质：页面骨架 口径依据：stage-requirements/SKILL.md（②—③交界：②段钉骨架、③段做皮肉）＋ create-prd.md §二（布局五样、信息承载分档、页型一句）。 改版说明：2026-10-07 重写 —— 补页型判定、每页一句话、流转条件，并把信息分档的判据逐条答出来。与上一版的实质差别见文末。

这份只管骨架：有哪几页、每页几个板块、板块怎么排、页与页怎么跳、每条信息放在哪一档。 配色、字体、间距、组件样式、动效一个字都不写 —— 那是③段。功能条目的有无与优先级是 2a-产品功能.md 的事，本份不碰。

一、页型判定

工具型页面。 依据：用户每次进来是把一件事干完（贴需求、等生成、回头看旧版），不是看一眼就下决心买什么；产品定位里也没有营销或售卖这一层（1a A6）。

判型只写这一句。⛔ 不写「用哪个骨架」「哪个区块」—— 那是③段按设计方向定的事。

这一句为什么必须写：③段的版式供给偏落地页向。不说页型，③段就会套错骨架，做出「一行小字 + 大标题 + 一行灰字」那种样子 —— 判据全绿，但一看就不是工作台。

二、页面清单

三页，由 1a A8 定死，不加不减。

1. 项目列表页 —— 进门那一页。看自己开过哪些项目，以及新建一个。
2. 版本列表页 —— 某个项目里面的样子。看这个项目开过几版、每版什么状态，以及新建一版。
3. 版本工作台页 —— 干活的那一页。左边贴需求和点生成，右边看它进行到哪一步、结果是什么。

三、页面流转

• 项目列表 →（点某个项目的行）→ 版本列表。
• 版本列表 →（点某个版本的行）→ 版本工作台。
• 版本工作台 →（点面包屑上的项目名）→ 回到版本列表；→（点面包屑的根）→ 回到项目列表。
• 新建项目这个动作发生在项目列表页的操作行；新建版本发生在版本列表页的操作行 —— 两处都不跳页，就地建完回到同一页的列表里。
• 三页共用一个顶栏（左产品名、右当前位置），所以无论跳到哪一页，都看得见自己在哪、怎么退回去。

流转条件只有「点哪一行去哪一页」，没有隐藏入口，也没有需要满足前置条件才放行的跳转。

四、每页的板块与排列

灰块粒度：只讲有哪些块、从上到下怎么排，不讲长什么样。

页 1 · 项目列表

1. 顶栏：左边是产品名，右边是「当前位置：根」。
2. 操作行：左边是「项目」这个标题，右边是新建项目的主操作。
3. 项目列表：一行一个项目，每行是项目名 + 版本数 + 最近更新时间 + 一个「进去」的指示。

主操作：新建项目（在操作行右侧）。次一级的动作是点整行进项目 —— 整行可点，不另设按钮。

空态：一个项目都没有时，列表区换成新建引导（一句话 + 新建项目的主操作），不摆一张空表格。

页 2 · 版本列表

1. 顶栏：左边是产品名，右边是面包屑「项目名」。
2. 操作行：左边是这个项目的名字（当标题用），右边是新建版本的主操作。
3. 版本列表：一行一个版本，每行是版本名 + 状态 + 最近更新时间 + 一个「进去」的指示。

主操作：新建版本（在操作行右侧）。次一级是点整行进工作台。

空态：这个项目还没开过版本时，列表区换成新建引导。

页 3 · 版本工作台

1. 顶栏：左边是产品名，右边是面包屑「项目名 / 版本名」。
2. 主工作区，左右两栏（窄屏上下堆叠）：
   • 左栏是需求输入区：需求文本框、上传入口（只认 .md / .txt）、生成主操作，外加一个演示用的「模拟失败」入口。
   • 右栏是状态与产物区，按当前状态换内容：draft 显示提示语；running 显示步骤日志；failed 显示失败原因加重试；done 显示产物预览加重新生成。

主操作：生成（需求非空、且不在 running 时可用）；失败态下变成重试；已生成态下变成重新生成。

五、信息承载分档

判据只有一条：删掉它，主操作还做得成吗。 答「做得成」的，只能进「可点入」。不许拿「能读到」「将来可能需要」当理由把它留在主屏。

信息	分档	判据回答
项目名	主屏常驻	删掉就选不了项目，主操作做不成
版本名	主屏常驻	删掉就选不了版本，主操作做不成
版本状态	主屏常驻	删掉就不知道该不该点进去，主操作做不成
需求全文	可点入（只在工作台左栏）	删掉仍能选版本、仍能生成 —— 生成时才需要它
产物 HTML	可点入（只在工作台右栏预览）	删掉不影响生成这个动作本身
失败原因	可点入（失败态才出现在右栏）	删掉仍能点重试；它服务的是「知道卡在哪」，不是主操作本身

前面三条是 1a A9 拍板的主屏三样，一条都不多。需求全文与产物都走「点进去看」。

六、窄屏怎么变

只写布局怎么动，不写视觉。

• 三页顶栏收成一行，面包屑用「/」紧凑排开。
• 页 3 的左右两栏改上下堆叠：输入区在上，状态与产物区在下。
• 列表行在窄屏仍是单行一条，需要时把版本数、更新时间折到下一行，但不丢信息。

七、骨架五样自检

要给的	在哪一节	结论
页面清单	§二	3 页，每页一句话
页面流转	§三	5 条跳转，全部带条件
每页板块与排列	§四	三页逐页给出块序
每页主操作	§四 各页末	三页各一个主操作
每条信息的分档	§五	6 条信息逐条给判据回答

八、假设台账

从①段带进来的假设里，落在骨架上的有两条，逐条给结论。

假设	本份的结论	归宿
B10 空态用引导替代空表格	页 1、页 2 的空态照此写	③ 已按假设落地（影响面：无。回退口径：改成空表格要回②段改本份）
B9 生成过程可视 + 占位产物	页 3 右栏 running 一段写成步骤日志，不是一根进度条	③ 已按假设落地（影响面：running 这段要有位置承载多条步骤。回退口径：只换这一块内容，骨架不动）

依据假设得出的骨架点已带上状态标注（见页 3 右栏与两处空态）。⛔ 全文零视觉词。

九、这一版跟上一版的实质差别

上一版是 2026-10-07 01:47 的稿子：页面清单 / 页面流转 / 页面内布局（三页）/ 信息承载分档 / 窄屏变化，共五节。这一版：

1. 补了页型判定（§一）。上一版完全没有这一节，而 create-prd.md 明写「页型一句（仍需写）」，并给了理由：不说页型，③段会套错骨架。这是上一版最实的一处漏。
2. 页面清单从只有页名改成页名 + 一句话说清每页干什么。上一版页名后面跟的是「（入口）」「（＝项目详情，由 B1 命名）」这类注，是结构说明不是职责说明。
3. 页面流转补上条件与返回路径。上一版写了「点行 → 跳转」和面包屑回退，但没写「新建动作发生在哪一页、建完停在哪」，也没说这些跳转不需要前置条件。
4. 每个板块标了序。上一版页 1、页 2 的板块是编号列，页 3 是缩进散列；这一版三页统一按从上到下的序号排，且把「顶栏」明确写进每页第 1 块。
5. 信息承载分档补上「失败原因」一条（上一版只有 4 条），并把判据回答写全 —— 上一版有判据回答，但用的是「删掉它主操作还做得成吗」这一句当标题、下面对每条给的是结论式短语，没把「为什么做得成 / 做不成」说清。
6. 主操作从三处散写收成每页末一行。上一版在页面内布局里写了「主操作」，又在信息分档里重述了一遍状态与预览的位置，同一件事写了两遍。本版按「同一件事只写一遍」收敛。
7. 新增 §七骨架五样自检表，把方法论要求的五样逐条对账，上一版没有这一层对账。
8. 新增 §八假设台账。上一版完全没有继承①段的假设 —— 2a 里带了假设标注，2b 一个字没有，同一个段里两份文档两种做法。
9. 删掉了上一版文末那句「（判据：删掉它主操作还做得成吗）」的重复标题。

十、说人话评分

已过内容准则（humanizer / humanizer-zh），评分 46/50：直接性 10、节奏 9、信任度 9、真实性 9、精炼度 9。

扣分处：§四三页的板块列都是「几号 + 名词」的短条目，节奏偏平；§五判据回答列为了对齐写法，六行结构接近。