name: visual-design-book
description: "把日志条目转化为可视化网页设计说明书（金橙暖色叙事长页）。用户在日志详情右键"转化为可视化设计"、dock 栏输入 /visual-design-book @日志路径、或说"这篇日志做成可视化"、"帮我做个 design book"、"生成设计说明书"、"变成可视化长图"、"可视化呈现这份日志"、"这个分享/讲座/课程做成可视化"时触发。读取已完成的日志 HTML，自动识别内容类型(产品设计 / 会议纪要 / 通用知识 / 授课分享)，按五层叙事结构生成自包含 HTML 并关联回 sources。四种类型共用同一套金橙视觉系统，仅思维结构与排版有别。不要在想法探索阶段使用 — 那是 ideate 的职责。"
Visual Design Book — 日志可视化说明书
契约
| 维度 | 声明 |
|---|
| reads | yyMM/*.mdx（源日志）、yyMM/*.html 或 yyMM/*.md（旧格式） |
| writes | yyMM/*-design-book.html（生成的 HTML）、yyMM/*.mdx（回写 sources） |
| depends | 无 |
读取一篇已完成的日志条目（.mdx、.html 或 .md），将其内容转化为单文件自包含 HTML 页面 —— 一份用「逻辑推演」叙事方式呈现的可视化说明书。
与 ideate 的区别：visual-design-book 是后处理工具 —— 输入是已完成日志，输出是金橙暖色叙事长页；ideate 是过程工具 —— 输入是碎片想法，输出是黑白点阵探索画板。想法形成中的可视化用 ideate。
输入：日志 workspace 相对路径，如 2604/12-产品评审会议.mdx
输出：同目录 HTML，如 2604/12-产品评审会议-design-book.html，路径写回日志元数据 sources
触发方式
- 日志详情右键菜单 →「转化为可视化设计」
- Dock 栏输入：
/visual-design-book @2604/12-xxx.md
- 对话中提到"可视化设计""design book""做成可视化"并 @ 引用日志
内容类型自适应
读取日志后，先判内容类型再选叙事透镜：
| 类型 | 识别信号 | 标题后缀 | 排版模式 |
|---|
| 产品设计 | 含 PRD / 需求 / 功能 / 用户故事 / 交互 / 原型 | 设计说明书 | 左右对照 .ch-body |
| 会议纪要 | 含 会议 / 讨论 / 决议 / 待办 / 参会人 / 议题 | 会议全景 | 左右对照 .ch-body |
| 授课 / 分享 | 含 分享会 / 讲座 / 授课 / 培训 / 课程 / Part / 讲者 / 教授 | 课程全景 | 单栏 Part 节律 + sticky NavBar |
| 通用知识 | 以上均不明显 | 知识图谱 | 左右对照 .ch-body |
判断不需要精确 — 看主要内容倾向即可。混合型取主导类型。
四类共用同一套金橙视觉系统（--ac:#C8933B / Noto Sans SC / 1100px .page / 暗色快照切换）。区别只在思维结构和排版模式。
对应透镜
- 产品设计：北极星=产品要解决的核心问题；推演链=需求 → 方案 → 实现路径；右侧=UI mockup / 交互流程 / 数据看板
- 会议纪要：北极星=核心议题 / 最重要决议；推演链=按逻辑递进而非议程顺序重组（问题诊断 → 方案讨论 → 资源分配 → 执行计划）；右侧=决策树 / 责任矩阵 / 时间线 / 方案对比表 / 风险热力图
- 授课 / 分享：北极星=整门课的「一针顶破天」；推演链=基本遵循讲者授课顺序（优秀讲者本身已按逻辑推演）；每 Part 节奏=summary-line 立意 → sub-label + 主视觉（SVG 演进 / info-grid / data-table）→ sub-label + case-card → quote 或 diff-alert 收束
- 通用知识：北极星=核心洞察；推演链=概念间的层级和关联；右侧=概念关系图 / 分类矩阵 / 对比框架
执行流程
1. 读取日志
workspace_path + 日志相对路径 → 读取完整 markdown（解析 frontmatter 和正文）
2. 判断内容类型并规划章节
按上表选透镜，然后规划章节标题（问句形式，授课类用 Part 0X 前缀）和每章的内容概要。确保：
- 章节之间递进，不是并列
- 每章回答一个问题（产品/会议/知识）或推进一个理论（授课）
- 终章能把所有线索汇聚
会议纪要特别注意：不要按议程顺序排章节；如果有明确决议和待办，终章应汇聚为「决议全景 + 行动路线图」；参会人、背景放在 Hero 区域不单独成章。
授课 / 分享特别注意：基本遵循讲者顺序但统一编号为 Part 01 Part 02；讲者简介 / 课程元数据全压 Hero（日期 · 机构 · 讲者 · 模块数 dot 分隔），不单独成章；每个 Part 至少一个 .case-card；终章做两件事——3-6 句讲者金句 quote 方阵 + 能力 / 框架合成图。
3. 生成 HTML
起点：references/structure-template.html 已解决色彩变量、暗色切换（快照恢复机制）、响应式、打印适配 — 直接用它作为起点，不要自己发明主题切换机制，不要为授课另造新 palette。
五层叙事结构（四种内容类型适配表）：读 references/narrative-structures.md
授课 / 分享的单栏排版 + 组件清单（NavBar / Part 标头 / summary-line / sub-label / SVG 演进 / info-grid / case-card / data-table / timeline / compare / quote / diff-alert）：读 references/lecture-components.md
标题适配：{日志标题} · {设计说明书 / 会议全景 / 课程全景 / 知识图谱}
输出路径：与源日志同目录，文件名 {DD}-{title}-design-book.html
4. 关联回日志
生成的 HTML 的 workspace 相对路径加入源日志 frontmatter 的 sources：
---
summary: 原摘要
tags: [原标签]
sources:
- 2604/12-产品评审会议-design-book.html
---
已存在 sources → 追加而非覆盖。
视觉设计系统（概览）
完整色彩变量和排版规范在 references/structure-template.html 内联 CSS 里。四类内容共用以下约定：
- 主强调色：
#C8933B（金橙，温暖文雅）— 与 ideate 的黑白点阵画板区分
- 字体：
Noto Sans SC + 系统 sans-serif
- 最大宽度：1100px 居中
- 章节间距：64px
- 圆角：8px
- 辅助色：
--green / --orange / --red / --purple（用于二元对立、警示、正向标记等语义强调）
授课类在此基础上追加 .lecture-nav / .part-head / .summary-line / .sub-label / .case-card / .info-grid / .data-table / .timeline / .compare / .diff-alert 等排版组件，全部使用上述 token，不引入新色。
叙事质量检查（交付前过一遍）
- 推演链是否连贯？
- 每章标题是否是问句（授课类是否用
Part 0X 编号）？副标题 / summary-line 是否点出立意？
- 左右对照是否匹配（产品/会议/知识）/ 单栏节律是否每 Part 有 case-card（授课）？
- 终章是否回扣 Hero？
- 明暗主题切换 3 次无色彩残留？
- HTML 路径已写回日志 sources？
- （会议纪要）章节按逻辑递进而非议程顺序？
- （会议纪要）决议和待办是否在终章汇聚？
- （授课）讲者简介 / 课程元数据是否全压 Hero 未单独成章？终章是否有金句方阵 + 能力合成图？
输出要求
- 格式：单个
.html 文件，自包含
- 语言：跟随日志语言
- 文件名：
{DD}-{title}-design-book.html（与源日志同目录）
- 关联：HTML 路径写回源日志 frontmatter
sources
