Files
contentm_agent/执行会话/目标-根据1a需求文档生成MCN短视频整合营销-d85687/ui/布局排版参考-AI内容工作台.md
T
WorkBuddy eee042c855 ③段第八轮收口:功能入口卡按参照物对齐 + 导航按 tiaoyue 源站重建 + 密度 A 方案
原型(执行会话/目标-…-d85687/ui/mcn-workbench.html)
- 功能入口卡改三段纵向(图标/标题/描述各一行),68 → 111.19px,对齐 mcn-work-shop
  参考卡(同视口 1249×1277 实测 133px),补 --sh-L1 投影;主因是排布不是字号
- 左侧导航重建:由「纯图标 + 悬停提示」改为 64px 药丸浮栏,图标 24 在上、名字常驻在下
  (名字一律 2 字,说明走 data-tip);真值取自 tiaoyue 源站实测
  (栏 64/内衬 3/圆角 100/项 56×78/字 12px-500-行高 16)
- 密度 A 方案:≤1000 卡最小宽 200→160、≤820 统计条最小宽 132→96
  (两处 auto-fit 只在真装不下时才缩)⇒ 768/700/560 三处转绿,其余 10 个视口未动
- 移动档隐藏导航条横向滚动轨(16px 轨道曾吃掉 52px 条高的三成,还白吃 16px 主区)

取证通道
- _tools/cap.py 改为「只连不起」:只连 9223 常驻实例,视口走 Emulation.setDeviceMetricsOverride,
  不再自起 headless Chrome(顺带解除 500px 视口下限,390×844 可测)
- _tools/check_js.py 新增第 5 道门禁(node --check + 模板内注释反引号扫描)

文档
- 复盘-为什么第一版做得很差.md(新建):13 轮时间轴/四类反作用/三重归因/已修与仍欠
- 3d-审查报告.md:更正 §九 那条假 ✓(把「§5.5 五条逐条过完」记成机核,实际零覆盖,
  正是「五道闸门全绿却难看」的开关),补 §十二 功能入口卡高差、§十三 tiaoyue 导航逐条对照
- 3b-实测记录.md/DESIGN.md/3c-GPT 参考版与会诊/布局排版参考 ×2

机制与记忆
- .workbuddy/collab/collabctl.py:off --ws 不再全机扫描(原先一次杀掉他区+看板共 5 个进程)
- .workbuddy/memory/:本轮纪律与实测真值
- .gitignore:补排运行时噪音(ui/_scratch/__pycache__/浏览器取证临时目录/*.bak-*/一次性脚本)

闸门:语法全过/骨架八页 39 板块/变异对照 15-15/逐视口 14 绿(500×844 唯一红,缺口待拍板)/命名 2060-0-27
2026-10-08 22:21:42 +08:00

3.0 KiB
Raw Blame History

布局排版参考 · AI 内容工作台(小曾 · 两视频关键帧)

来源:参考资料/AI内容工作台_功能点与截图/(16 张关键帧截图 + AI内容工作台_功能点梳理.md)。 两视频=Bilibili BV1gsHn6AEk6(工作台 3.0)+ YouTube jVHyoCYidLM(工作台 2.0)。 用途:与本项目同品类(内容运营工作台)的重点布局/风格参照。⛔ 是参照物,不是照抄目标。


一、外壳与导航

  • 顶部横向 Tab 导航(⛔ 不是左侧栏):十个 Tab,按创作工作流排序 —— 首页 / 对标与热点 / 选题 / 拆解与沉淀 / 创作 / 发布与经营 / 计划 / 常用助手 / 画板 / 收支。
  • 主体是居中的单列宽内容区,顶部放一个全局搜索框(「搜索选题、文案和资料…」)。
  • 子层用胶囊子 Tab:如 精选总览 / 对标动态 / AI 热点 / Twitter 动态;创作台内 聊思路 / 写文案 / 起标题 / 做封面 / 发布检查。

二、首页

  • Hero 区=问候 + 大钟(「上午好 11:55」)+ 日期 + 手绘插画底;右侧一张日历卡。
  • 首页下半:本月之星(本月表现最好的作品)、作品与机会陈列。

三、数据与列表

  • 指标卡一排:四张等宽卡,各自一个色相(绿 / 紫 / 蓝 / 土黄),卡内=标签 + 大数字 + 单位小字。
  • 资产库=表格:三列(文案原文含标题 / 这类角度叫什么 / 原文怎么写);上方一行说明「18 条资产 · 左右滚动查看各维度,点击名称查看完整拆解」。
  • 对标内容:卡片带「N 倍平时互动」的倍数徽标。

四、创作流水线

  • 顶部子 Tab 本身就是流水线;发布检查页给了明确的分步指示「1 导入文案 → 2 检查问题 → 3 处理建议 → 4 复核后发布」。
  • 主体=左(表单与动作:发布平台 / 正文 / 封面 / 开始检查)+ 右(内容正文预览)。
  • 主按钮是橙色药丸(更新动态 / 开始检查),次按钮描边。

五、视觉调性(这份参考自己的)

  • 深色底(墨绿、近黑),圆角面板约 10–14px,阴影克制。
  • 多色强调:每张指标卡一个色相;主按钮用橙。
  • 手绘插画(Hero 底、图标)。
  • 数字用近似等宽的字形。

六、我们能借什么、得先定什么(供③段取舍)

  • 可借(风格中性):顶部按工作流排序的 Tab、居中宽列 + 顶部搜索、胶囊子 Tab、指标卡一排大数字、创作环节的分步指示、资产用三列表格。
  • ⚠️ 冲突(须先定):① 深色底 vs 我们的浅色纸感;② 多色指标卡 vs 基础层 oil-ui-pro 的「同一层级保持一致重量、避免每张普通卡片用不同强调色」;③ 橙色主按钮 vs 我们的品牌紫。

(配套:同目录 16 张截图可逐屏核对;与 ui/布局排版参考-mcn-work-shop.md 同形,可并读。)