contentm_agent/执行会话/目标-根据1a需求文档生成MCN短视频整合营销-d85687/ui/DESIGN.md

MCN 短视频整合营销工作台 · DESIGN.md

项目 slug：mcn-shortvideo-agent　｜　③段（界面交互）第 3a 子步产出 落点：执行会话/目标-根据1a需求文档生成MCN短视频整合营销-d85687/ui/DESIGN.md（本目标目录内；⛔ 未写域外 docs/pm/） 判据源：product-planning/references/stage-delivery/SKILL.md（含 §供给 / Gate-1）＋ 同目录 references/execution-runbook.md §2 ＋ references/layouts-tooling.md §5.5 本份是原型的绑定规范：原型只许引本份登记的 token。

---

〇、开工声明（声明制，四字段）

字段	内容
当前段与子步	③段 / 3a 视觉规范（D0 锚需求 → D1 定调 → Gate-1）
主干与挡位	供给＝oil-ui-pro（方法主线）＋ 本段自带样式库 design-system-tiaoyue（定调与令牌）/ 挡位 标准
依据文件	stage-delivery/SKILL.md §供给 ＋ §3a；references/execution-runbook.md §2.0–§2.4；references/layouts-tooling.md §0/§1/§5/§5.5
产出落点	ui/DESIGN.md（本份）、ui/mcn-workbench.html（3b）

供给核对（runbook §2.0 · 步 −1，每轮必做）

步	动作	结果
−1	确认 §供给 三处在位：定调与令牌（自带样式库）、版式骨架（references/layouts-tooling.md）、工艺数值判据（references/execution-runbook.md §3.4 ＋ layouts-tooling.md §5.5）	✅ 三处都在位。自带样式库现存 1 套：assets/design-systems/design-system-tiaoyue/
−1b	套名与本项目记录比对	✅ 本目标无前次记录（③段首次开工，本目录此前只有 research/ 与 prd/）⇒ 视作首次选定，不触发变更清单
−1c	可选档是否动用	⛔ 未动用 assets/open-design/（随段携带的可选件）。因此它独有的那几项（反 AI 味 / 无障碍 / 表单校验 / 动效纪律）本次无供给来源 —— 见 §五 已明示，⛔ 没有凭感觉编一套顶上

页型判定（硬前置，SKILL.md §3b）

本产品全部 8 页都是工具型页面，不是营销页。 依据：用户是天天来干活的 MCN 团队，每一页都有人在里面完成一件事（决定先处理哪件 / 挑一条选题 / 存一条拆解 / 推一个环节 / 确认一次发布 / 改一份画像 / 写一条归因 / 核销一条记录）；没有一页是为了让人「看一眼就下决心」。此判定与②段 2b-界面布局.md §一 一致。

⇒ 本份 D0 里零 .eyebrow、零 .lead、零 .hero（token 与类名都不设这三个）。

---

一、设计契约（十二个字段）

1.1 项目级字段

① 主用户：MCN 机构的内容负责人（矩阵级决策）、编导与文案（选题与创作）、剪辑与投放（版本与发布）。三者同处一个矩阵，职责不同、看的页不同。依据 ①段 1c-用户画像.md（零访谈画像，骨架来自 1a §四 三行角色描述 —— 该局限已如实登记，见 §四 缺口）。

② 主操作：逐页唯一（全页级）。六页的主操作由②段给定，逐页列在 1.2；本段未改一个。

③ 必要内容（核对面）：逐页核对②段分档表，见 1.2。核对面只做落位核对（常驻的零点击可见、可点入的一次点击可达），⛔ 本段不以它为由增删②段已定的信息档位。

④ 重复项的信息量：本产品的四个列表（账号矩阵 / 对标内容 / 资产条目 / 发布记录）都是「行式列表」，每行除「主标识 ＋ 动作」外都带次级信息，逐页列在 1.2。

⑤ 结构骨架（翻译面）：

• 骨架档：主区 ＋ 侧区（选它的理由：一级导航有 4 个并列目的地、宽屏 ≥1024；②段给的一级组是三组加一个跨组入口，正好落在侧栏；tiaoyue 的实测外壳本身就是「左侧栏 ＋ 顶栏」的应用型外壳，两者同构）。
• 板块落位：把②段每页的板块按它给的「从上到下」顺序放进主区，每块一个文字标题。⛔ 未新增 / 移动 / 删除 / 合并任何板块（逐页对照见 §三）。
• 密度目标：密集（8–32）。理由：8 页全是一屏要放多行记录的工具型页面，②段 P1 的信息分档要求矩阵列表与今日待办同时常驻，宽松档放不下。同一页面只取这一档。
• 块间距 ≥ 块内间距的 2 倍：块间 32px、块内 8/12/16px ⇒ 比值 2.0–4.0 ✅（数值登记在 §二）。

⑥ 交互清单：见 §二 表 2.4（逐元素四列）。它是唯一的交互真相源 —— 3b 实测、3c 会诊、3d 终检都引这一张，⛔ 不另建一份。

⑦ 状态覆盖六项：见 1.3，逐页逐项有结论。

⑧ 组件来源：优先沿用选定套的既有组件族，其次才是自创。⛔ 未参考 teamOnly: true 的族（onboarding-divider / onboarding-feature / team-scope-content / team-onboarding-card）。清单见 §二 表 2.5。

⑨ 响应式行为：

断点	布局怎么变
>1024	侧栏 240px 常驻（带文字标签）＋ 主区 minmax(0,1fr)；列表列宽按 1:1 分配
640–1024	侧栏收窄到 200px，仍带文字标签；列表的次级信息列折到主标识下方一行
<640	侧栏变成页头下方一条可横向滚动的标签栏（⛔ 不隐藏、⛔ 不变成纯图标），主区单列；行式列表的列改为「主标识一行 ＋ 状态／动作第二行」

⚠️ 实测覆盖：1440 / 1280 / 1024 / 768 / 641 / 640 ×900，以及 500×844 七个视口都跑过自检，横向溢出全为 0。窄视口实测到 500×844 为止（原因见 §五 第 6 条）。窄视口下两栏带（.band）在 ≤1024px 落回单列 —— 不落的话，列表被挤到不足 300px，每行会竖折成三行（实测踩过，见 §五 第 7 条）。密度在 ≤767px 宽不达标，逐视口实测值与成因见 §五 第 7 条。

⑩ 明确拒绝的模式（≥3 条，每条可判定）：

1、⛔ 不出现「眉标 ／ 大标题 ／ 灰色副标题」三段式标题区（判据：DOM 里 .eyebrow / .lead / .hero 三个类名出现次数为 0）。 2、⛔ 不用围合边框假装分组（判据：非控件元素里 border ＋ border-radius 同时出现的次数，在同一「分组」用途上 ≥3 次即判不过；结构性容器一律靠底色差 ＋ 多层阴影分层）。 3、⛔ 不给列表行套框、不给状态上整行底色（判据：行间只用 border-top；状态只出现在 tag 内）。 4、⛔ 不做入场编排（判据：交付文件里 @keyframes 出现次数为 0，过渡只用 transition）。 5、⛔ 不可点的东西不长成可点样子（判据：页面里所有 button / [role=button] / .btn* 集合，与 §二 表 2.4 的元素列做双向差集，差集为空）。

⑪ 验收标准（可观察可判定）：

• 八页各自可达（#/p/p1…#/p/p8 直接打开都渲染出该页内容，不是空壳）。
• 表 2.4 每一行的「触发 → 反馈」都真发生过，无死按钮。
• 六态在每一页都能被看到（正常 / 加载 / 空 / 错误 / 禁用 / 无权限）。
• 宽视口 1440×900 与窄视口各留一张截图，横向溢出为 0。⚠️ 窄视口实测到 500×844 为止：本机只有无头 Chrome + 命令行开关这一条通道，窗口宽下限被卡在 516px，拿不到 390 —— 见 §五 第 6 条，⛔ 不写成「已测 390×844」。
• 页面上每个可点元素都能在表 2.4 里查到；表里没有的可点元素为 0。

⑫ 明确拒绝的「编造」（本项目追加一条，源自①②段的纪律）：界面上不出现「示例」「示意图」「未接入」「待核实」这类制作说明；也不把机器结论说成人已认可（如把「疑似原因」写成「已确认原因」）。

1.2 逐页字段（页面职责 / 主操作 / 必要内容落位 / 重复项信息量）

页	页面职责（让谁 / 多久 / 完成什么）	主操作（唯一）	必要内容的落位核对	重复项的信息量（每行的次级信息）
P1 矩阵总览	让内容负责人在 1 分钟内决定今天先处理哪一件事	挑一件待办并进到那一件事	账号矩阵列表与今日待办＝零点击可见；异常值、本月最好、检索与随手记＝一次点击可达	账号行＝账号名（主标识）＋ 今日该发/已发/效果（3 条次级）＋ 异常徽章
P2 选题雷达	让编导在 3 分钟内找到一条能做的选题	把一条选题推进下一步	监控概览四数、对标内容列表、选题库＝零点击可见；评论区洞察、灵感速记＝一次点击可达	对标行＝标题（主标识）＋ 账号 ＋ 倍数 ＋ 时间；选题行＝选题（主标识）＋ 来源 ＋ 状态
P3 资产库	让编导在 2 分钟内存一条拆解结果、或引用一条已存的	入库一条 / 引用一条	分区切换、条目列表＝零点击可见；单条详情、引用入口＝一次点击可达	条目行＝条目摘要（主标识）＋ 出处 ＋ 草稿/已入库 ＋ 采集时间
P4 创作台	让编导在一条内容上把当前环节推到下一环节	推进到下一环节	环节进度、当前环节工作区、当前内容标识＝零点击可见；资产引用区、版本列表＝一次点击可达	版本行＝vN（主标识）＋ 语义名 ＋ 时间 ＋ 当前标记
P5 发布中心	让投放确认发出这一批版本	确认发布	检查结果、各版本预览与逐版编辑、确认发布＝零点击可见；目标选择、发布记录入口＝一次点击可达	版本行＝账号/平台（主标识）＋ 字数 ＋ 检查结论；记录行同 P8
P6 账号画像	让内容负责人改好并保存一个账号的画像	保存这一份画像	画像六维、账号列表＝零点击可见；记忆条目、关联内容＝一次点击可达	账号行＝账号名（主标识）＋ 平台 ＋ 内容数；记忆行＝日期（主标识）＋ 来源 ＋ 一句话
P7 复盘台	让内容负责人确认归因并写回这个账号	确认归因并回写	表现数据、归因结论区、待复盘列表、回写目标提示＝零点击可见；历史复盘＝一次点击可达	待复盘行＝内容（主标识）＋ 发布账号 ＋ 发布日 ＋ 数据到没到
P8 记录与对账	让投放核销一条发布记录	核销一条记录	发布记录列表、对账核对区＝零点击可见；单条溯源、商单与收支＝一次点击可达	记录行＝内容（主标识）＋ 确认人 ＋ 时间 ＋ 版本 ＋ 状态

1.3 状态覆盖六项（逐页给结论）

判据源：SKILL.md 铁律 2 给出的六态清单（loading / empty / error / success / disabled / 无权限）。⚠️ 逐项数值判据出自供给可选档的 craft/state-coverage.md，本轮未动用可选档 ⇒ 该项本次无供给来源，故此处只给「有没有、长什么样」的结论，不编阈值。

页	loading	empty	error	success	disabled	无权限
P1	✅ 矩阵数据加载中（骨架行 ＋ 「正在取矩阵数据」）	✅ 还没接入账号（给「去账号画像建第一个账号」）	✅ 数据源不可用（显时间戳 ＋ 重试）	✅ 默认态	✅ 无可处理项时待办区禁用并说明	✅ 非管理员看利润字段时的遮罩说明
P2	✅ 拉取对标中	✅ 监控名单为空（给「录一个对标号」）	✅ 拉取失败（退路＝手工录入）	✅ 默认态	✅ 未选账号时「转入创作」禁用	✅ —（不适用：本页对所有角色开放）
P3	✅ 条目加载中	✅ 该分区还没有条目（给「去拆解一条」）	✅ 读取失败（重试）	✅ 默认态	✅ 无出处的条目「入库」禁用（门禁）	✅ —（不适用）
P4	✅ 环节生成中	✅ 该环节还没产出（给「开始这一步」）	✅ 本步失败（保留已产出 ＋ 重试该步）	✅ 默认态	✅ 文案与封面缺一，「进检查态」禁用（封面缺只提示）	✅ —（不适用）
P5	✅ 检查中	✅ 还没有可发布的版本（回 P4）	✅ 检查自身失败 ⇒ 按不过处理（fail-closed）	✅ 无硬拦、可发	✅ 有硬拦项时「确认发布」禁用	✅ 未授权账号的版本标「无发布权限」并禁用该版
P6	✅ 画像加载中	✅ 还没有画像（给「建画像」）	✅ 保存失败（保留编辑内容）	✅ 保存成功提示	✅ 只读角色时字段禁用	✅ 非本人负责账号：可看不可改
P7	✅ 读数据中	✅ 还没有可复盘的内容	✅ 数据读不到 ⇒ 转手工录入表现	✅ 回写成功提示	✅ 未确认归因时「回写」禁用	✅ —（不适用）
P8	✅ 记录加载中	✅ 还没有发布记录	✅ 读取失败（重试）	✅ 核销成功	✅ 未选中记录时「核销」禁用	✅ 利润列对非管理员隐藏（列级遮罩）

口径：disabled 与 无权限 是两件事 —— 前者是「当前条件不满足」（自己能解开），后者是「角色不允许」（自己解不开）。界面文案必须分开写，⛔ 不拿「不可用」一句话糊过去。

---

二、令牌表

2.1 三层结构（primitive → semantic → component）

组件层只引语义层，语义层只引 primitive；⛔ 无孤立 token。

层	前缀	例子	规则
primitive	--t-*／--raw-*	--t-accent、--raw-fs-12	只有原始值，⛔ 别的层不许直接引它以外的东西；本层不许被组件层直接引用
semantic	--（无前缀语义名）	--surface、--ink、--fs-14	只引 primitive
component	--c-*	--c-card-radius、--c-btn-h	只引 semantic

2.2 色值（来源＝选定套 design-system-tiaoyue 的 assets/tokens.css 亮色基线 · 9 页 clipper 实测）

语义 token	值	用途
--paper	#faf9f5	页面底（暖白纸感）
--surface	#ffffff	面板 / 卡片底
--surface-soft	#f7f6f1	次级面（表头、只读块、侧栏选中底）
--ink	#1a1a18	主文字
--ink-mute	#57564f	次级文字
--ink-faint	#8a887f	三级文字 / 占位（⛔ 只用于非正文：占位、图标、禁用态）
--line	#e7e5dc	分隔线（行间 border-top）
--line-soft	#efeee7	更弱的分隔（块内）
--accent	#9E4CFF	主强调色（品牌紫）
--accent-text	#963dff	accent 当文字时用这一档（#9E4CFF 直接当文字不达标）
--on-accent	#FFFFFF	主色上的文字
--ok	#3d7a4f	成功态
--err	#b4453a	错误态
--warn	#8a5a00	提醒 / 异常值 / 软劝 ⚠️ 本项目追加：选定套亮色基线没有 warn 档，而②段 P5 要求「硬的拦住、软的只提醒」必须有两种可见区分 ⇒ 新增一档并在次行登记来源与对比度实测

强调色允许位置（反 slop 要求写明）：只允许出现在 ① 主按钮的填充底；② 侧栏当前项左侧 3px 指示条；③ 链接文字（用 --accent-text）；④ 焦点环。⛔ 不允许出现在：页面大背景、卡片底、图标填充（除主按钮内图标）、任何渐变。全屏面积 ≤5%。

禁止：⛔ 无紫→粉渐变；⛔ 无装饰性发光；⛔ 状态色只用这红/绿/黄三系，不做装饰。

2.3 几何 · 字体 · 间距 · 字阶 · 高度层级 · 脚手架

项	值	来源 / 说明
字体	"PingFang SC", -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "Noto Sans SC", sans-serif	选定套实测：源站 @font-face 为 0 条，走系统字体栈。⛔ 未手改
标题字体	同上（同族），字重 ≤600	中文字重不超 600；⛔ 未用 Inter / Roboto / Arial / system-ui 关键字
等宽数字	font-variant-numeric: tabular-nums	所有数字列，防刷新抖动
圆角	大容器 24px（--t-card-radius）／面板 16px／行与小件 14px／输入框 9px／按钮 26px（药丸）	全部取自选定套 <—— --card-radius: 24px、--ui-radius: 16px、--radius: 14px、--inp-radius: 9px、--btn-radius: 26px
间距 · 主刻度	4 / 8 / 16 / 24 / 32 / 64	供布局。块间用 32（同行组间 24），块内用 8/12/16
间距 · 微网格	2 / 4 / 6 / 8 / 12	仅供按钮内衬、徽章内衬、图标间隙
块间距 / 块内间距	32 / 8–16 ⇒ 比值 2.0–4.0	判据要求 ≥2 ✅
字阶定值表（七档，各一个 px）	--fs-12 12 ／ --fs-14 14 ／ --fs-16 16 ／ --fs-18 18 ／ --fs-20 20 ／ --fs-24 24 ／ --fs-30 30	相邻档差 2/2/2/2/4/6，全部 ≥2 ✅；每档只一个定值，⛔ 不是区间。正文档 --fs-14（多数正文）与 --fs-16（表单值），落在 14–16 ✅
高度层级（每层多层叠层）	L1（行/内嵌）：0 1px 1px rgba(26,26,24,.03), 0 2px 6px -2px rgba(26,26,24,.06) L2（面板）：0 1px 2px rgba(26,26,24,.04), 0 8px 20px -12px rgba(26,26,24,.14), 0 18px 40px -18px rgba(26,26,24,.10) L3（浮层）：0 2px 4px rgba(26,26,24,.05), 0 14px 32px -12px rgba(26,26,24,.18), 0 32px 64px -24px rgba(26,26,24,.16)	每层 ≥2 层叠层 ✅；同层级同值。⛔ 无单层死黑重阴影
布局脚手架	侧栏 240px（640–1024 收 200px）＋ 主区 minmax(0,1fr)；主区内列表列宽 1fr 1fr（行式列表的「主标识 ／ 次级」两列），窄屏折行	骨架档＝主区＋侧区，已落到具体列宽
容器与对齐锚点	主区左右内衬 32px；行式列表的文字左锚点与块标题左锚点同一条线；数字列右对齐且右锚点对齐块右内衬	判据要求「对齐锚点」写明
浮层	居中面板，宽 min(560px, calc(100vw - 32px))，内衬 24px；只有一个可见关闭出口（右上 ×）；遮罩与 Esc 也可关，但不计为可见出口	满足 Gate-3 的「可见关闭出口唯一」

2.4 交互清单（唯一交互真相源 · 四列）

通用规则（适用于下面所有浮层）：每个浮层只有一个可见关闭出口（右上 ×，ID 记为 X-close）；遮罩点击（ID 记为 X-mask）与 Esc 也能关，但不视为可见出口；关闭后焦点回到触发它的那个按钮，Tab 只在层内循环。这三条逐浮层过了一遍，结论在 3d-审查报告.md 的浮层表里。下表不再逐浮层重复这三条。

ID	元素	触发	反馈	何时不可点
G-01	一级组「找选题」	点击	跳到 P2；该组高亮	从不可点
G-02	一级组「走创作流水线」	点击	跳到 P4；该组高亮	从不可点
G-03	一级组「看矩阵复盘」	点击	跳到 P1；该组高亮	从不可点
G-04	一级组「账号画像」（跨组）	点击	跳到 P6；该组高亮	从不可点
G-05	二级页项 P1–P8（8 项）	点击	切到该页（hash 变、主区重绘）；当前项 is-active	从不可点
G-06	顶栏「随手记」	点击	打开随手记浮层，焦点进输入框	从不可点
G-07	顶栏账号切换器	点击	展开账号下拉；选中后顶栏显示该账号，涉及账号上下文的页跟着切换	账号列表为空（empty 态）时禁用
G-08	顶栏「假设 2 项」	点击	打开假设浮层（逐条给复核人 / 复核时机 / 结论落点）	从不可点
G-09	顶栏演示状态开关	选择	强制当前页进入 正常 / 加载 / 空 / 错误 / 禁用 / 无权限	从不可点
G-10	顶栏「全局检索」	点击	打开检索浮层，焦点进输入框	从不可点
X-close	各浮层右上 ×	点击	关闭浮层；焦点回触发它的按钮	从不可点
X-mask	浮层遮罩（层外空白区）	点击	关闭浮层；焦点回触发它的按钮	没有浮层时不渲染
STATE-NORMAL	状态面板 · 「回到正常内容」	点击	该页回 ok 态，主操作恢复	仅在非 ok 态出现
STATE-RETRY	出错态 · 「重试一次」	点击	提示已重试（示意）；不改数据	仅在 error 态出现
STATE-GO	空态 · 「去〈某页〉」	点击	跳到该页；浮层关	仅在 empty 态、且该页定义了去处时出现
R-01	随手记浮层 · 输入框	输入	内容非空时「保存」由禁用转可用	从不可点（可输入）
R-02	随手记浮层 · 保存	点击	写入选题库「待做」；提示 1.5s 后消失；浮层关闭	输入为空时 :disabled
R-03	随手记浮层 · 取消	点击	关闭，不写入；焦点回触发按钮	从不可点
S-01	检索浮层 · 输入框	输入	结果列表按关键字过滤；无结果显示空态行	从不可点（可输入）
S-02	检索浮层 · 结果项	点击	跳到该结果所属的页；浮层关闭	无结果时列表为空（不渲染可点项）
A-01	假设浮层 · 两处假设条目	展示	只读，逐条给复核人 / 时机 / 落点	不适用（只读，非控件）
P1-01	今日待办项（每条）	点击	跳到该待办所属的页（选题类→P2、在写→P4、待审→P5、待复盘→P7、待核销→P8）	该条为「已超期未处理」时仍可点，但带提醒标
P1-02	账号矩阵行	点击	跳到 P6 并选中该账号	从不可点
P1-03	账号矩阵行 · 「看复盘」	点击	跳到 P7 并选中该账号的待复盘内容	该账号没有可复盘内容时禁用
P1-04	异常值提示条目	点击	跳到 P2 并定位到该对标内容	无异常值时整块显示空态（不渲染可点项）
P1-05	本月最好的一条	点击	跳到 P7 的该条复盘	无数据时禁用
P2-01	监控概览 · 「低粉爆款」数	点击	筛选对标内容列表（只看爆款）	数为 0 时禁用
P2-02	监控概览 · 「异常值」数	点击	筛选对标内容列表（只看异常）	数为 0 时禁用
P2-03	对标内容行 · 「发起拆解」	点击	跳到 P3 并带着这条素材（预填原文与出处）	从不可点
P2-04	评论区洞察子区 · 展开／收起	点击	展开子区并开始抓取（显示抓取中）	从不可点
P2-05	评论区洞察 · 「抓取评论」	点击	进入抓取中 → 出候选选题列表	抓取中时禁用
P2-06	候选选题 · 「采纳」	点击	该条进选题库「待做」；候选行标为已采纳	该条已采纳时禁用
P2-07	候选选题 · 「忽略」	点击	候选行标为已忽略（可恢复）	该条已忽略时禁用
P2-08	选题库 · 分组 tab（待做／在写／已用）	点击	列表切换成该组	从不可点
P2-09	选题行 · 「转入创作」	点击	建当前内容并跳到 P4；选题转「在写」	未选账号时禁用（并在行内说明）
P2-10	选题行 · 「拆解」	点击	跳到 P3 并把该选题当成素材	从不可点
P3-01	分区切换 tab（角度／结构／开场白／标题）	点击	条目列表换成该分区	从不可点
P3-02	条目行	点击	右区显示单条详情（原文 / 出处 / 草稿标记）	从不可点
P3-03	待入库区 · 「入库」	点击	无出处的条目被门禁挡住并说明原因；有出处的转「已入库」	无出处或原文缺失时禁用（门禁）
P3-04	单条详情 · 「引用到创作台」	点击	跳到 P4 并把该条目加进资产引用区	从不可点
P4-01	环节进度 · 七个环节（逐项）	点击	切到该环节；只许回退到已完成的环节	未到达的后续环节禁用
P4-02	当前环节工作区 · 内容输入框	输入	「开始这一步」由禁用转可用	从不可点（可输入）
P4-03	当前环节工作区 · 「开始这一步」	点击	生成中 → 产出内容（写进本环节）	输入为空时禁用
P4-04	资产引用区 · 「从资产库拿一条」	点击	展开选择器；选中后收进引用区并显示来源	资产库为空时禁用并说明
PICK-ASSET	资产选择器 · 单条	点击	收进引用区并显示来源；浮层关	已引用过的不渲染可点项
P4-05	资产引用区 · 「移除引用」	点击	从引用区移除该条	引用区为空时不渲染
P4-06	「推进到下一环节」	点击	当前环节 +1；进度条与工作区跟着变	文案与封面缺一，进检查态时禁用（封面缺只提示）
P4-07	版本列表 · 展开／收起	点击	展开版本列表浮层	从不可点
P4-08	版本行 · 「切为当前版」	点击	该版标为当前版；当前内容标识的版本号跟着变	该版已是当前版时禁用
P5-01	目标选择 · 展开／收起	点击	展开账号与平台多选	从不可点
P5-02	目标选择 · 账号项	点击	勾选／取消；版本列表跟着增删一版	从不可点
P5-03	目标选择 · 平台项	点击	勾选／取消；同上	从不可点
P5-04	版本预览 tab（逐版）	点击	右区换成该版内容	从不可点
P5-05	版本内容编辑框	输入	保存按钮由禁用转可用；标为「已改」	从不可点（可输入）
P5-06	版本内容 · 「保存本版」	点击	该版内容更新；检查结果跟着重算（回到未检）	无改动时禁用
P5-07	检查结果 · 「复检」	点击	检查中 → 出结论（硬拦 / 软劝 / 通过）	检查中时禁用
P5-08	「确认发布」	点击	打开二次确认浮层	有硬拦项时禁用；无版本时禁用
P5-09	二次确认 · 「确认发出」	点击	写发布记录（P8 出现一条）；提示成功	从不可点
P5-10	二次确认 · 「取消」	点击	关闭浮层，不发；焦点回触发按钮	从不可点
P5-11	发布记录入口	点击	跳到 P8	从不可点
P6-01	账号列表项	点击	切换右区画像	从不可点
P6-02	画像六维字段（6 个输入）	输入	「保存画像」由禁用转可用	非本人负责账号时禁用（改由角色判定）
P6-03	「保存画像」	点击	保存成功提示；未保存时离开给提示	无改动时禁用
P6-04	记忆条目 · 展开／收起	点击	展开记忆列表（只追加，不可编辑）	从不可点
P6-05	关联内容行	点击	跳到 P4 的该条内容	无关联内容时整块空态
P7-01	待复盘列表项	点击	右区换成该条的表现数据	从不可点
P7-02	表现数据 · 「手工录入」	点击	数据读不到时的降级入口，展开输入	数据已读到时不渲染
P7-03	归因结论区 · 文本	输入	「确认归因并回写」由禁用转可用	从不可点（可输入）
P7-04	「确认归因并回写」	点击	回写到当前账号画像：记忆 +1；显示回写目标	归因为空、或未选账号时禁用
P7-05	历史复盘 · 展开／收起	点击	展开历史复盘结论	从不可点
P8-01	发布记录行	点击	右区换成该条的对账详情	从不可点
P8-02	「单条溯源」（可点入）	点击	展开溯源：从记录回到内容与版本	从不可点
P8-03	对账核对区 · 「核销」	点击	二次确认 → 该条标「已核销」	未选记录时禁用；记录未「已发布」时禁用
CHECKOUT-OK	核销二次确认 · 「确认核销」	点击	该条标「已核销」；提示成功；浮层关	从不可点
CHECKOUT-CANCEL	核销二次确认 · 「取消」	点击	关闭浮层，不核销；焦点回触发按钮	从不可点
P8-04	「商单与收支」展开／收起	点击	展开收支条目 🔴 本块是假设（见 §三）	从不可点

⚠️ 「可见关闭出口」与「决策型关闭」是两件事，⛔ 不许混成一个数：每个浮层的中性关闭出口只有一颗 ×（X-close），恰好 1 个；「取消」这类带决策语义的按钮也能关层，但它不是「找出口」用的，单独登记（R-03 / P5-10 / CHECKOUT-CANCEL）。这条口径是补出来的 —— 原先自检只数 .layer-close 这个类名，于是两颗可见的「取消」完全没进计数，两个二次确认层其实各有两个看得见的关闭控件，判据却报「出口 ＝ 1」。逐浮层的核对结论与触发路径在 3d-审查报告.md §六。

表外可点元素必须为 0 —— 3b 自检里有一条逐集合做双向差集的检查（#/selftest 路由自动跑，结果落 3b-实测记录.md）。

⚠️ A-01 不是控件：它是假设浮层里的只读展示行，本表把它列出来是为了让「假设有两处、逐条给复核人 / 时机 / 落点」这件事在清单里看得见。⇒ 它不进实现清单（原型里的 IMPL 表），自检也不该拿它去点。本表的控件 ID 与 IMPL 的键必须互为子集且相等，这条由 _tools/mutate_test.py 里的 M2/M3 两处变异盯着（漏登记 / 悬空声明各一种）。

2.5 组件规格（来源：选定套既有组件族）

组件	规格（具体值）	来源
按钮 · 主档	高 40px，内衬 12/20，字号 16px，字重 600，圆角 26px（药丸），底 --accent，字 --on-accent	选定套 --btn-radius/--btn-px/--btn-py；字号 16 + 字重 600 是必须的（见下注）
按钮 · 次档	高 40px，内衬 12/20，字号 14px，字重 500，圆角 26px，底 --surface，描边 1px --line，字 --ink	同族
按钮 · 弱档（文字）	高 32px，内衬 6/12，字号 14px，圆角 26px，无底无描边，字 --accent-text	同族
卡片 · 密卡	内衬 16px，圆角 16px，底 --surface，L1 阴影	同族
卡片 · 宽松卡	内衬 24px，圆角 24px，底 --surface，L2 阴影	同族 --card-radius/--card-pad
输入框	高 36px，内衬 12/10，圆角 9px，字号 14px，底 --surface，描边 1px --line	同族 --inp-*
徽章 / 状态标	高 22px，内衬 2/8，字号 12px，圆角 999px，无描边，底为对应状态色 8% 叠加	同族 is-* 修饰族
侧栏导航项	高 36px，内衬 8/12，圆角 14px，当前项底 --surface-soft ＋ 左 3px --accent 指示条	tiaoyue nav-item ＋ is-active

同屏主档按钮 ≤1（多步流程每步 ≤1）：P1 无主档、P2/P3/P4/P5/P6/P7/P8 各 1 个 ✅ 实底底色 ≥2 种：主档 --accent、次档 --surface、状态标（ok/err/warn 三色 8% 叠加）✅ ⚠️ 主档按钮的 16px + 600 不是随手定的：选定套记录 #FFFFFF 压 #9e4cff 只有 4.26:1（两形态一致，是品牌紫的固有属性），走大字线 3:1 才达标 ⇒ 主档按钮文字必须 ≥16px 且加粗；⛔ 小字（<16px 常规字重）压主色在本规范里没有合规解，故不允许出现。

---

三、两处假设的显式标注（⛔ 不当已确认需求用）

②段 2b-界面布局.md §四 标了两处骨架受限。本轮尚无用户结论，按②段给的默认读法做，并在本份与原型里显式标注：

#	受影响处	假设内容	本轮默认读法（按 2b §四）	复核人	复核时机	结论落点
假设 1	P1 的形态（横幅：2b §二 P1 末段）	矩阵级视图是否真需要（1a 待复核第 5 条 ＋ A1）	按「需要矩阵级视图」做：P1 ＝ 矩阵总览，5 个板块全在。若复核为「不需要」，P1 降为「单账号今日」，只留第 1、4 板块，矩阵列表下移到账号切换	主会话转用户	②段收口时一次性过；③段已按默认读法做，结论到了改这一处	2b §四 ＋ §二 P1；本轮落 ui/DESIGN.md 本节 ＋ 原型 P1 标题行的「假设」徽章
假设 2	P8 的第 4 板块「商单与收支」	商单对账进不进第一版、收支口径是否内容级（1a 待复核第 6 条 ＋ A3）	按「进第一版但属 P2、可整块缺」做：第 4 板块渲染出来但标「可点入 ＋ 假设」，并在展开后给一句「本块依赖未复核项」。第 1、2、3 板块不受影响	主会话转用户	同上	2b §四 ＋ §二 P8；本轮落 ui/DESIGN.md 本节 ＋ 原型 P8 第 4 板块标题行的「假设」徽章

原型的兑现方式（不占标题区、不写成注脚）：两处各在自己的板块标题同行右侧挂一个「假设」徽章；顶栏另有「假设 2 项」入口，点开逐条给出复核人 / 时机 / 落点。⛔ 假设既没有被当已确认需求写死，也没有被编出答案。

---

四、Gate-1 方向门自检（硬闸，结果写在本份末尾）

#	检查项	结论	依据
1	设计契约十二字段	✅ 过	§一 十二字段全填，无空、无「待定」；重复项逐页列了次级信息；交互清单四列齐全且表外可点元素为 0（3b 实测复核）
1b	页型判定	✅ 过	全文工具型；D0 零 .eyebrow / 零 .lead / 零 .hero（原型里这三个类名出现 0 次，#/selftest 复核）
2	结构骨架（翻译面）	✅ 过	骨架档＝主区＋侧区（给了理由）；板块落位照②段顺序、每块有文字标题；②段分档表每条信息都有落位（§1.2 逐页核对）
2b	骨架未漂	✅ 过	八页与板块逐条对得上 2b，本段未增删移动（见下表）
3	状态覆盖	✅ 过	§1.3 六态逐页有结论；disabled 与 无权限 分开写
4	令牌表	✅ 过	§2.2/§2.3 色值、字体、间距两档（适用面已分开）、圆角、阴影全为具体值
4b	字阶定值表	✅ 过	七档各一个 px（12/14/16/18/20/24/30），相邻差 2/2/2/2/4/6 ≥2
4c	高度层级	✅ 过	L1/L2/L3 每层 ≥2 层叠层，同层级同值
4d	布局脚手架	✅ 过	侧栏 240/200px ＋ 主区 minmax(0,1fr)；窄屏变化写具体（标签栏化）
5	组件规格	✅ 过	按钮三档＋卡片两档＋输入框＋徽章均为具体值；同屏主档 ≤1；实底 ≥2 种
6	反 slop	✅ 过	无紫→粉渐变；标题用选定套系统字体栈（非禁用字体）；强调色允许位置已写明（§2.2）
7	拒绝清单	✅ 过	§1.1 ⑩ 共 5 条，每条带可判定判据（≥3 ✅）
8	token 引用完整性	✅ 过	三层结构；组件层只引语义层、语义层只引 primitive；无孤立 token
9	分档兑现	✅ 过	§1.2 逐页落位；常驻＝零点击可见、可点入＝一次点击可达；档位未被本段改动
10	供给核对	✅ 过	§〇 已核；选定套 design-system-tiaoyue，与本目标记录一致（首次选定）

骨架未漂逐页对照（⛔ 本段未新增 / 移动 / 删除 / 合并）：

页	②段板块（照抄）	原型落位	一致
P1	今日待处理／账号矩阵列表／异常值提示／本月表现最好的一条／全局检索与随手记入口	同序 5 块（前两块并排一层）	✅
P2	对标监控概览／对标内容列表／评论区洞察区／选题库／灵感速记入口	同序 5 块	✅
P3	分区切换／条目列表／单条详情／引用入口	同序 4 块	✅
P4	当前内容标识／环节进度／当前环节工作区／资产引用区／版本列表	同序 5 块	✅
P5	目标选择／各版本预览与逐版编辑／检查结果／确认发布／发布记录入口	同序 5 块	✅
P6	账号列表／画像六维／记忆条目／关联内容	同序 4 块	✅
P7	待复盘列表／这一条的表现数据／归因结论区／回写目标提示／历史复盘	同序 5 块	✅
P8	发布记录列表／单条溯源／对账核对区／商单与收支	同序 4 块	✅

板块的排布位置：P3/P5/P6/P8 在②段里是「列表 ＋ 详情」并存的一页，本段按 layouts-tooling.md §0 判为侧区型（主操作要在列表与详情之间来回），故在块内用左右两栏落实（左列表、右详情）；⛔ 这不是增删板块，是同一批板块在骨架档里的摆法（块内怎么摆归③段）。

P1 的前两块并排一层（同上口径）：②段把「今日待处理」和「账号矩阵列表」列为第 1、2 块，本段让它们左→右并排、读序不变，「异常值提示」及其后仍顺次往下。这么做不是审美选择，是 §六 的密度判据逼出来的 —— 反事实实测：把两栏带强制落回单列时，账号矩阵列表@530+413，首行顶 530px，容量 floor((900−530)/67) ＝ 5 行，够不着「一屏 ≥6 行」；并排之后首行升到 214px，一屏装得下 10 行。实测过程记在 3b-实测记录.md §五。 若复核认为并排也算动了骨架，回退办法只有一条：把密度判据在 1440×900 下放宽到 ≥5 行 —— 两件事必须挑一件，不能都不做（原判据下，单列连 6 行都够不着）。

---

五、缺口与证据边界（⛔ 不假装支持）

1. 反 AI 味 / 无障碍 / 表单校验 / 动效纪律的逐项数值判据本次无供给来源 —— 这四项出自 §供给·工艺数值判据 的可选档（assets/open-design/craft/ 13 份），本轮未动用可选档 ⇒ ⛔ 不凭感觉编一套顶上。本段实际应用的是默认档判据：execution-runbook.md §3.3/§3.4 ＋ layouts-tooling.md §5.5（五条反「实习生审美」硬判据）。四条已按默认档能做到的部分执行（如 focus-visible 三态、tabular-nums、防溢出三件套、间距只用登记刻度）。
2. 暗色主题本轮不做 —— 选定套的暗色与亮色是两套独立基线，规则是「要暗色就整套切」（known-conflicts.md C-01），且暗色实测只覆盖 1 个页面（/team/onboarding），而该页正是选定套 §〇 明令生成时避开的页；哪一套亮色才是主线尚未裁决。⇒ 本轮只做亮色基线（9 页 clipper 实测），⛔ 不与暗色混搭。要做暗色需先裁决 C-01，属技能侧动作。
3. --warn 是本项目追加的第 14 个语义色 —— 选定套亮色基线只有 ok/err，无 warn；而②段 P5 要求「硬的拦住、软的只提醒」必须有可见区分。追加值与其对比度实测记在 §六。
4. 1c-用户画像.md 是零访谈画像 —— 主用户的画像骨架来自 1a §四 三行角色描述，无问卷、无访谈、无行为数据。界面里凡涉及「角色能看什么」的判据都基于它，不得对外说成基于用户调研。
5. 3c GPT 会诊本轮未取得外部审查 —— 见 3c-GPT会诊.md。未取得 ≠ 已通过。
6. 窄视口只测到 500×844，⛔ 没测到 390 —— 本机只有「无头 Chrome + 命令行开关」这一条取证通道，而 Chrome 把窗口宽下限卡在 516px（拿到 500px 视口）。要 390px 得走 CDP 的 Emulation.setDeviceMetricsOverride，本轮没接。⇒ 契约里凡写 390 的地方，一律按 500×844 实测 记，⛔ 不许写成已测 390。（_tools/cap.py 里写了这条例外，改宽度时会打印实际视口，并当场比对产出的 PNG 像素尺寸。）
7. 密度判据（一屏 ≥6 行）在 ≤767px 宽不达标，⛔ 没有靠改判据把它变绿 —— 判据原文（layouts-tooling.md §1）是「一屏可见行数 ≥ 6（900px 高时）」，不带宽度条件，所以本段一个字没改。实测出来的边界是 768px 宽：

视口	P1 账号矩阵	P2 对标列表	页面外壳
1440 / 1280 ×900	10 行	7 行	顶栏 69px、导航竖排
1024 / 768 ×900	6 行	7 行	顶栏 69px、导航竖排
641 ×900	5 行 ❌	6 行	顶栏折两行（109px）
640 ×900	5 行 ❌	6 行	顶栏 61px、导航变横条（53px）
500 ×844	4 行 ❌	5 行 ❌	顶栏折两行（101px）、导航横条

成因是页面外壳吃掉首屏，不是行变肥：行高 67px、各行差 ≤2px、块内分隔 1px，这三条在任何视口都 PASS。三条出路只能挑一条：①把支持宽度下限写成 ≥768px（依据：1a §七 已明确第一版不做移动端 App）；②压掉每行的次级信息、把行高压到 40px 上下（那 3 条次级信息是②段定的档位，③段不许改 ⇒ 得回②段改）；③动页面外壳（顶栏那几个控件都登记在交互清单里，删或搬家等于改交互清单）。这三条都要用户拍板，本段一条都没选。 详见 3d-审查报告.md §三 B-15。 8. 截图通道与 DOM 通道的视口口径不同（已修，记账） —— 同一台机器、同一个 --window-size，--dump-dom 给的是「窗口 − 16×95」，--screenshot 给的就是窗口本身。本轮之前所有截图都因此比标称大 16×95（「1440×900」实际 1456×995）。现已按模式分开算，并要求每次截图后从 PNG 的 IHDR 读真实像素跟目标比，不等即报红。详见 3b-实测记录.md §五。 9. 3c 那次独立评审不是「外部 GPT 会诊」 —— 本会话没有对外模型通道，改用了隔离上下文的独立评审执行者（不看源码、不继承制作对话）。它符合 visual-review.md 对「隔离执行者」的要求，但与 SKILL.md §3c 的异厂商外部审查不是同一条通道。未取得外部审查 ≠ 已通过。 见 3c-GPT会诊.md §〇。

---

六、数值取证登记（3d 回填处）

下表「实测值」全部由原型自带的 #/selftest 算出来（DOM 取值 ＋ 真实像素计算），⛔ 不是目测。取值口径写在「取法」列；复跑命令见 3b-实测记录.md。

项	契约值	实测值	取法
强调色填充面积占比	≤5%	0.52%（八页最高一页：创作台；1 个填充块）	DOM 取值：逐个元素比 backgroundColor ≡ --accent，与视口求交后累加 ÷ 视口面积；不含 3px 左侧标条 / 描边 / 文字色
--warn #8a5a00 对 --surface 对比度	≥4.5:1	5.93:1	真实像素计算：WCAG 相对亮度
--accent-text #963dff 对 --surface 对比度	≥4.5:1	4.76:1	同上
--ink-faint #8a887f 对 --surface 对比度	≥3:1（仅非正文）	3.55:1	同上
一屏可容纳记录行数（P1 账号矩阵）	≥6 @900px 高（⛔ 原文不分档）	10 行 @契约视口 1440×900（首行顶 214px、行距 67px）	DOM 取值：首屏可用高度 ÷ 行距。⚠️ 判据是「装得下几行」，不是「实际渲染几行」—— 示意数据只有 5 条，实际永远是 5 行（数据用尽，非被截断）。⛔ 逐视口的完整实测表只写在 §五 第 7 条一处，这里不重复
一屏可容纳记录行数（P2 对标列表）	≥6 @900px 高	7 行 @1440×900（首行顶 402px）	同上
P1 行高齐（本段追加判据）	各行差 ≤2px	67–68px，差 1px（七视口一致）	DOM 取值：逐行 getBoundingClientRect().height
视觉层间距 / 块内相邻行分隔 比值	≥2	32px ／ 1px ＝ 32（4 个视觉层）	DOM 取值。⚠️ 行式列表的首行没有上边框，取值要跳过首行、取各行的最大值；⚠️ 除数为 0 时判据作废，已加 0 守卫
实际在用字号档数（P1）	≥3	5 档：12 / 14 / 16 / 18 / 24 px（相邻差 2/2/2/6）	DOM 取值：叶子节点 computedStyle
块间距 / 块内间距 比值	≥2	32 / 8–16 ⇒ 2.0–4.0	令牌登记值 ＋ DOM 复核（gap 全部落在登记刻度内，9 个刻度）
横向溢出	0	0（七视口，八页逐页亦为 0）	DOM 取值：scrollWidth − clientWidth
浮层中性关闭出口	恰好 1	7 / 7 个浮层均为 1（另有决策型关闭 0–1 个，单列报数，⛔ 不混进这个数）	DOM 取值：可见的 [data-act="X-close"] 计数
同屏主档按钮	≤1	逐页 1 个；P1 无主档（本页只用弱档）	DOM 取值：逐页统计实底按钮
顶栏高度（未写死，只看有没有折行）	—	69px 单行（补 white-space:nowrap 之前是 70px，标签在中间折行）	DOM 取值

同轮实测的其它数值（一并登记，供 3d 复核）：

• P1 账号矩阵：首行顶 214px、行距 67px；块落位 今日待处理@149+360 ／ 账号矩阵列表@149+417（并排同顶）／ 异常值提示@599+215 ／ 本月表现最好的一条@845+122 ／ 全局检索与随手记@1000+113。
• P2：对标监控概览@165+139 ／ 对标内容列表@336+417 ／ 评论区洞察@785+108 ／ 选题库@925+330 ／ 灵感速记@1287+113；对标列表首行顶 402px。
• P1 按钮高度集合 32px（本页只用弱档一档；三档高度层级在 P4 / P5 出现）。
• 控制台报错 0 条；量尺寸时 scrollY = 0（两处均核）。
• 强调色填充块数只有 1 个 —— 工具型页面按要求把实底压到最少，主档按钮才用它。

契约里写了数字的，3d 已逐条实测回填，「契约值 / 实测值」并排列进 3d-审查报告.md §六。⛔ 不目测。

---

七、修订记录（收口后回填）

轮次	改了什么	为什么
3a 初版	契约、令牌、交互清单、假设标注、Gate-1 自检	本份首出
3d 收口	①§1.1 ⑨ 的实测覆盖从 4 个视口改成 7 个；②交互清单补 CHECKOUT-CANCEL、STATE-NORMAL 按钮文案改「回到正常内容」，并新写「中性出口 / 决策型关闭」的口径说明；③§四 里 P1 并排的反事实数按实测重填（604px→530px、3 行→5 行、209px→214px）；④§五 第 7 条整条重写（撤掉自设分档，改成如实登记 ≤767px 的不达标），新增第 8、9 条；⑤§六 表内 8 处旧值按实测回填，并裁掉与 §五 重复的逐视口数	收口时逐条实测回填；同时把「同一事实只写一处」落实到密度这项上

---

八、说人话自评（判据源 humanizer-zh，五维各 10 分）

维度	分	说明
直接性	9	每节开口就是结论或数值，没有铺垫段
节奏	8	以表格与短断言为主，句式偏单一 —— ⚠️ 这是本份的弱项
信任度	9	不下「已通过」这种模糊话，未清零的直接写未清零
真实性	10	通篇是具体数（161px→53px、530px/5 行）、具体文件、具体命令，没有一句万金油
精炼度	9	已按「同一事实只写一处」裁过一轮（密度逐视口表只在 §五 第 7 条出现）
总分	45 / 50	门槛 ≥45，压线过。扣分点如实写在第 2、5 行，⛔ 不报「已过」了事

（本份是原型的绑定规范：原型只许引本份登记的 token。）