WorkBuddy
df56c2c137
内容分四块： 1、产品规划产出 —— MCN 短视频整合营销工作台的①段五份（1a 需求／1b 竞品／1c 画像／1d 策略／1e 场景）、②段两份（2a 功能／2b 布局）、③段界面（DESIGN.md 契约与令牌表 ＋ mcn-workbench.html 原型 ＋ 实测/会诊/审查三份 ＋ 23 张闸门截图）。 2、开源竞品调研 —— 5 个内容工作台项目的取证原始件与 1b 系列分析文档。 3、参考资料 —— 竞品视频抽帧 1145 张 ＋ 2 个源视频 ＋ 功能点截图。 4、机制侧 —— 协作脚本与状态台账、工作区记忆日志、抽帧/OCR 脚本。 .gitignore 只排运行时日志、脚本备份副本与一次性探针输出，其余按原样入库。
131 lines
9.0 KiB
Markdown
131 lines
9.0 KiB
Markdown
# 界面布局（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。
|
||
|
||
扣分处：§四三页的板块列都是「几号 + 名词」的短条目，节奏偏平；§五判据回答列为了对齐写法，六行结构接近。
|