Yq editorial presentation html

Editorial Presentation (HTML + PPTX 双模)

这个 skill 是什么

一套可规划、可验证、可变体的视觉设计语言 skill，源自 Pfizer 血液科 IFI 案例分享 v5 desktop 版，并把单一成品样式拆成稳定 DNA 与可选 style profile。

核心价值：先按受众、目的、正式度、密度和语义关系规划，再渲染 HTML/PPTX。复用的是编辑设计原则、角色化 token、构图语法与质量门，不是把不同主题替换进同一套米色卡片模板。

双输出模式:

• HTML 模式（默认）：用于浏览器演示的横向全屏 deck。F11 下每页固定 100vw × 100vh，支持左右翻页、底部圆点、触屏/滚轮、ESC overview，并完整支持 profile 与构图语法。
• PPTX 模式：用于必须交 .pptx 文件的场景（高管会、客户演示、传统企业）。通过 python-pptx 程序化生成，与 HTML 共用 manifest；只选择明确支持 PPTX 的 profile。

两种模式共享的设计 DNA：

1. 温暖但克制的编辑质感、证据可读性和固定 16:9 舞台。
2. display / body / data 三类字体角色；具体字族由 profile 决定，原始 Pfizer profile 仍使用 Fraunces / Inter / JetBrains Mono。
3. 颜色通过 canvas / surface / ink / primary / secondary / signal / positive / negative 等角色分配，不锁死一组 RGB。
4. 先判断数据关系、基数、密度、不确定性和叙事角色，再分别选择表达家族与构图。
5. 同一 profile 内保持一致，但相邻页面不得机械复用相同构图、几何和背景节奏。
6. HTML 与 PPTX 共用同一份 slide manifest；格式降级必须记录，不能全部退化为卡片网格。

何时使用(必须主动触发,不要等用户说风格名)

任一信号出现时使用：

• 明确要求 "warm editorial / Anthropic / Pfizer / 编辑设计 / 类似血液科那套"
• "做一个 presentation / slides / PPT / 幻灯片 / 演示文稿 / 汇报" 且上下文要求高规格视觉设计
• "做 case sharing / 案例分享 / 项目展示 / 战略汇报"
• "给老板/director/VP 看 / 给客户演示"
• "类似血液科那套 / Pfizer 风格 / Anthropic 风格 / warm editorial / 编辑设计风格"
• "把 X 内容做成可演示的页面 / 做成 deck"
• 用户给一份内容(产品发布、市场调研、技术分享、案例复盘),需要做成展示

普通 PPT 编辑、只改一行文字或用户已指定另一套视觉系统时不要抢占。触发后也先选择 profile 与构图语法，不默认套原始 Pfizer 配色。

第 0 步:判断输出格式

问自己 / 看用户表述:

用户说...	用
"做 HTML 页面 / 网页 / 浏览器演示 / F11 全屏 / 加跳转链接 / 嵌入视频"	HTML 模式
"做 PPT / .pptx / PowerPoint / 幻灯片文件 / 给传统企业用"	PPTX 模式
"做 presentation"(没说格式)	默认 HTML 模式(更高保真),并主动问"要不要也出一份 PPT 版?"
"做一份给客户演示用的"(看上下文)	客户是 IT/科技 → HTML;客户是医药/金融/政府 → PPTX
"做幻灯片样式"但没说文件类型	HTML 模式(横向全屏 deck)

如果不确定,默认 HTML(因为它复刻度最高,后续可再衍生 PPT)。

---

HTML 模式工作流

Step 1 · 读 references

按需读:

• references/visual-grammar.md 必读 — profile 选择、密度模式、slide manifest、构图语法与反重复质量门。
• references/style-index.json 必读 — 只做 shortlist；选定后只把一个 profile 的角色 token 带入生成上下文。
• references/design-tokens.md 必读 — invariant token 与 profile 角色映射。只有用户锁定原始 Pfizer look 时才原样使用 legacy token block。
• references/typography.md 必读 — display / body / data 角色与 projection scale；具体字族来自选定 profile。
• references/chart-selection.md 必读 — 图表选择规则。先判断数据关系,再选 stat / timeline / matrix / funnel / bar 等组件。禁止把所有数字都画成条形图。
• references/components.md — 视觉组件的 HTML+CSS 切片,包含每类组件的"何时用 / 不何时用"。
• references/layouts.md — 横向全屏 deck 的 slide 节奏、grid 布局、navigation。
• references/rewrite-existing-html.md — 改写已有 HTML deck 的专用流程。保留内容 section,只替换演示 shell / CSS / JS。
• references/qa.md — 生成后检查。重点查主内容宽度、垂直沉底、页脚遮挡、overview 和滚动条。

Step 2 · 用 behavior-only shell 起手

assets/deck-shell.html 是默认行为骨架：横向全屏 deck shell、底部圆点、左右翻页、ESC overview、触屏与滚轮。它不提供成品内容页，避免示例内容和版式预先支配生成。不要从旧的纵向滚动 starter 开始。

动手前先读 shell 的行为 CSS 和 <script>。shell 是 #deck、overview、dots、wheel/touch 的结构来源，不是视觉方向或 slide anatomy 的来源。构图来自 manifest 和选定 profile。assets/starter-template.html 仅作为 legacy Pfizer component gallery，除非用户锁定原始 profile，否则不要加载。

Step 2.2 · 先生成 slide manifest

先整理 brief JSON 和 slide intents，再运行：

python assets/plan_deck.py brief.json -o deck-manifest.json

检查 validation.passed。生成 HTML 与 PPTX 时复用同一份 manifest。用户锁定 profile 时传 locked_profile；未锁定且视觉空间较大时，先展示三个真正不同的方向供选择。相同 brief + profile + seed 必须生成相同 manifest。

Step 2.4 · 用同一 manifest 渲染

新 deck 优先使用共享 renderer，而不是让 HTML 和 PPTX 各自猜一遍布局：

python assets/render_manifest.py deck-manifest.json --output-dir output/deck

它会生成 deck.html、deck.pptx 和 render-report.json，把同一 manifest SHA256 写入两种输出，并记录每页 composition 与 major-region signature。只需 HTML 或 PPTX 时使用 --html-only / --pptx-only。legacy add_*_slide() 只用于兼容旧调用或需要自定义低层绘制的页面。

Step 2.5 · 如果用户给的是已有 HTML

打开 references/rewrite-existing-html.md。这种任务的目标不是重写内容,而是把旧 deck 按本 skill 的 shell 重新渲染:

• 保留原始 <section class="slide"...>...</section> 的内容块,除非用户明确要求改文案。
• 替换纵向 scroll-snap / scrollIntoView / IntersectionObserver 为横向 fixed deck。
• 把旧整页深色主题降级为局部语义色,整体仍用 v5 warm editorial。
• 按 references/qa.md 跑检测,不通过就先修 skill / 模板规则,再重新生成。

Step 3 · 按需嵌组件

references/components.md 是组件粘贴库和使用说明:

• 数据展示:stat-card / stat-grid / market-bars / evidence-pyramid / literature-funnel / proof-bars
• 时间与流程:timeline / clock-path / decision-window / phase-pill / wf-phase / ttet-step / arch-overview
• 匹配关系:matrix / gene-drug-map / product-path-card / before-after
• 导航跳转:jump-row / subpage-card / aux-card
• CTA / Callout:cta-grid / data-pain / iron-rule-band / anti-pattern-callout
• 品牌:product-card / dual-products

Step 4 · 图表选择(先做,不要跳过)

打开 references/chart-selection.md，先把每页的关系、基数、系列数、密度、不确定性和叙事角色列出来。表达家族与页面构图是两个决策，不要把 comparison 永远映射为同一张 bar slide。

数据关系	组件
一个数字很重要	stat-card / big-number
多个独立 KPI	stat-grid / stat-strip
时间先后 / 诊疗窗口	timeline / decision-window
输入到输出 / 操作步骤	pipeline / phase-pill
病原体 / 基因型 / 机制 / 产品匹配	matrix / gene-drug-map
文献筛选数量递减	funnel
证据强弱分层	pyramid / evidence-ladder
同一指标跨对象比较	proof-bars / ranked bars
患者旅程阶段覆盖	market-bars

硬规则：

• 条形图只用于同一指标的横向比较、完成率、覆盖率、通过率。
• 多个互不相干 KPI 不得画成 proof-bars。
• 时间路径、机制匹配、证据链、决策流程不得画成普通 bar chart。
• 一个 deck 默认至少使用 3 类不同表达家族；10-12 页 deck 在内容允许时至少 5 个构图 ID、4 种主几何。
• 相邻非续页不得使用相同 composition_id；不得连续 3 页使用相同主几何或 tone。
• 重复同一表达家族时，必须改变构图或注释结构。

Step 5 · 颜色语义化分配

从选定 profile 读取角色 token：canvas、surface、contrast_surface、ink、muted、primary、secondary、signal、positive、negative。状态色语义在整份 deck 内固定；分类色不能误用 positive / warning / negative。按 profile cadence 安排背景节奏，不逐页随机换色，也不连续三页使用同一 tone。

Step 6 · 章节节奏（按论证结构规划，不默认 11 页）

opener → context/tension → evidence → explanation → decision → close

这是论证语法，不是固定页数。投资人、技术评审、学术报告、产品发布和运营复盘应产生不同节奏。每页在 manifest 中声明 narrative_role，需要续页时声明 continuation_of。

每个 slide 固定 width:100vw;height:100vh,内容区居中但必须吃满演讲画布。常规页面优先 .wrap,.frame { max-width:min(1690px,88vw) };内容密集或投影演讲页面可用 .wrap.wide,.frame.wide { max-width:min(1760px,93vw) },避免主体缩在屏幕中间太小。常规页标题应接近 90-106px,lead 应接近 28-36px;长标题或 1440×900 下可降到 78px,但 1920 下 regular title median 不能只有 78-85px。dense-slide 不等于 compact:dense 页可以更宽、更紧,但非 compact dense 页不能把标题封顶到 84px。只有 evidence/table/appendix .compact 页可以降级。页脚留在 slide flex 流里,但 .wrap 不要用 margin:auto auto 0 / margin:auto,否则会和 footer 的 auto margin 叠加,导致偶发内容沉到底部。不要使用页面纵向滚动来展示下一页。

HTML 验证清单

• :root 完整 80+ 变量
• 选定 profile 的 display + body + data 三个字体角色都已映射，并有系统 fallback
• body 有噪声纹理叠层(body::before)
• #deck 横向 fixed flex,每个 .slide 是 100vw × 100vh
• 无页面纵向滚动条;F11 下页脚不遮挡正文
• 底部圆点、左右键、滚轮、触屏、ESC overview 可用
• 至少有一个 .gradient-text 锚点
• 至少 3 种 brand 色出现(不要单色到底)
• 数据使用 profile 的 data 字体和 tabular-nums；决定性大数字可使用 display 字体
• 至少 3 类不同图表表达家族;不要全 deck 都是 bar / proof-bars
• 选定一个明确 style profile；没有把所有 profile 同时混入一份 deck
• manifest 通过反重复验证；相邻构图、三页几何/tone run、卡片占比均合格
• overview/contact sheet 在不读文字时仍能看出清楚的节奏变化
• 主内容区不能过小:1920×1080 下 .wrap/.frame 可视宽度通常不低于 80%,常规投影页接近 88%
• 字号不能过小:常规页主标题不低于 78px,hero 标题不低于 110px,lead/subtitle 不低于 24px;只有 .compact 页例外
• 1920×1080 下 regular title median 接近 90-106px;.dense-slide:not(.compact) 不能用 78-85px 作为常态
• .wrap 不使用 margin:auto auto 0 / margin:auto;这会和 footer auto margin 叠加造成内容沉底
• 独立 KPI 没被画成 proof-bars
• 时间窗口没被画成普通 bar chart
• 机制匹配没被画成条形图
• 移动断点处理 720px / 900px

---

PPTX 模式工作流

Step 1 · 读 references

• references/visual-grammar.md 必读 — PPTX 与 HTML 共用 manifest；不允许 PPTX 全部降级为 card grid。
• references/style-index.json 必读 — 只选择 formats 包含 pptx 的 profile。
• references/pptx-mode.md 必读 — PPT 输出模式的完整说明:design tokens 如何映射到 PPT 主题、组件如何用 shape 实现、哪些视觉特性降级、字体如何嵌入。
• references/chart-selection.md 必读 — PPTX 也必须先判断数据关系,不要默认 proof-bars。
• references/design-tokens.md — 共享的色板/字号 scale(直接复用)
• references/typography.md — 共享的字体规则(直接复用)

Step 2 · 用 generate_pptx.py 生成

assets/render_manifest.py 是新 deck 的默认入口；assets/generate_pptx.py 提供兼容 API 和低层 python-pptx builder：

• EditorialDeck 类:封装好的 deck builder,自动应用色板/字体/版面
• 11 个 legacy slide 模板函数:add_why_slide(), add_hero_slide(), add_evidence_slide(), add_architecture_slide(), add_workflow_slide(), add_coverage_slide(), add_relationship_slide(), add_proof_slide(), add_limitations_slide(), add_bonus_slide(), add_cta_slide()
• 组件函数:draw_stat_grid(), draw_decision_timeline(), draw_gene_drug_matrix(), draw_evidence_list(), draw_double_bar_chart(), draw_evidence_pyramid(), draw_phase_pill_row(),...
• 用法:

from generate_pptx import EditorialDeck

deck = EditorialDeck(
    industry="medical",
    style_profile=manifest["deck_profile"],
    manifest=manifest,
)
deck.add_hero_slide(
    eyebrow="HEMATOLOGY · IFI MARKET INTELLIGENCE · 2026",
    title_main="一句话起跑",
    title_accent="AI 编排 7 大血液疾病抗真菌药市场调研",
    sub="用户输入一句话疾病名 → 系统跑通 5 phase 流水线 → 4 件交付物",
    stats=[("38亿", "血液 IFI 总市场"), ("7", "Disease Modules"), ("22", "Engineered Charts"), ("43", "PMID Refs")]
)
deck.add_evidence_slide(
    eyebrow="EVIDENCE · TRACEABILITY",
    title="每一个数字都能回溯",
    funnel=[("PubMed 触达", "数千"), ("初筛", "~500"), ("纳入", "43")],
    pyramid=[("最高级", 18, "green"), ("重要级", 17, "blue"), ("参考级", 7, "gold")]
)
deck.save("output/blood_oncology_v5.pptx")

Step 3 · 字体处理

PPT 不能像浏览器那样动态加载 web 字体。两条路:

A. 字体嵌入(推荐 · Windows + 桌面 PowerPoint):

deck = EditorialDeck(embed_fonts=True)

要求 Fraunces、Inter、JetBrains Mono 已安装，且字体自身允许文档嵌入。生成器先用 python-pptx 写文件，再调用 assets/embed_pptx_fonts.ps1 让桌面 Microsoft PowerPoint 以 EmbedFonts=true 重新保存，并逐一比对请求字体、ppt/fonts/ 与 embeddedFontLst。仅注册了兼容 COM 的 WPS Office 不满足此要求。如果 PowerPoint 不可用、字体未安装或字体授权禁止嵌入，任务必须失败并列出请求字体或缺失字体，不能静默声称已嵌入。

在非 Windows、没有桌面 PowerPoint或不需要嵌入时，使用 embed_fonts=False 和降级字体。

B. 字体降级(共享/在线场景):

• Fraunces → "Cambria"(Windows 自带) / "Times New Roman" 或客户机器装的衬线
• Inter → "Calibri"(Windows 自带) / "Segoe UI"
• JetBrains Mono → "Consolas"(Windows 自带)

降级会损失一点辨识度,但配色/版面/组件仍然 ~85% 还原。

Step 4 · 视觉特性降级地图

HTML 特性	PPT 实现	保真度
profile 角色色	EditorialDeck(style_profile=...) 映射到 PPT shape/theme 色	100%
profile cadence	根据 manifest 切换页面 tone；不支持的暗色 profile 在规划阶段拒绝	90%
Fraunces / Inter / Mono	嵌入字体或降级到 Cambria / Calibri / Consolas	95% / 70%
软阴影卡片	shape 加 outer shadow + 圆角 12pt	100%
渐变文字	text fill gradient 三色 stop	100%
噪声纹理	slide background image fill 用 noise.png	80%
径向渐变光晕	shape 径向渐变填充 alpha	90%
玻璃态 backdrop-filter	半透明白色填充 + 软阴影	70%
Section navigation	PPT 没有滚动,改用 slide-jump hyperlinks	N/A
reveal 滚动动效	用 PPT 进入动画(渐入)等价	不同机制
clamp() 响应式	PPT 固定布局,16:9 1920×1080 设计	N/A

PPTX 验证清单

• 主题色板覆盖 6 brand 色
• 标题用衬线字体(Fraunces 嵌入或 Cambria 降级)
• 数据用等宽字体(JetBrains Mono / Consolas)
• 至少 3 张 slide 用了不同 brand 色
• 至少 3 类不同图表表达,proof-bars 只用于同一指标比较
• style_profile 与 manifest 一致，且 profile 支持 PPTX
• manifest 通过构图、几何、tone 和卡片占比检查
• render-report.json 中 HTML/PPTX 的 slide IDs、composition IDs 与 manifest hash 一致
• PPTX shape region signatures 不少于 HTML 的语义构图种类，且至少有 3 种页面 background/tone 映射
• 不支持的 HTML 构图有记录明确的 PPTX 替代，而不是统一退化为卡片网格
• 每张 slide 都有 eyebrow tag(顶部小字)+ 大标题 + 主组件
• CTA slide 用赭石主色实心按钮形 shape
• 16:9 1920×1080 分辨率
• 请求字体嵌入时，last_font_embedding_report.embedded == true，且 .pptx 解压后存在 ppt/fonts/ 和 embeddedFontLst

---

关键设计原则(两模通用,不要破坏)

1. 不要全部正文用 Fraunces — 衬线长篇阅读疲劳
2. 不要把所有 deck 都锁定同一 palette — 先选 profile，再按角色 token 和 cadence 用色
3. 不要把所有数字都画成条形图 — 图表先表达关系,再表达大小
4. 不要用纯黑文字 — 用 #141413 暖墨
5. 不要让每页/每屏背景一样 — 按选定 profile 的 cadence 形成对比节拍，不随机换色
6. 不要混用按钮风格 — 主 CTA 一种样式,辅 CTA 另一种,跳转第三种,不要乱
7. 不要把演讲 deck 做成网页报告 — 常规页必须采用 projection typography;放不下就拆页或 compact,不要全局缩字
8. PPT 模式:不要在 PPT 里写 CSS — 所有视觉走 python-pptx 的 shape API,不要嵌网页
9. 不要把组件数量当作视觉多样性 — 相同白卡、相同标题位置和相同网格，即使名字不同也属于重复
10. 不要用随机性掩盖重复 — 使用稳定 seed 和 novelty penalty；语义正确优先于新奇

常见任务模板

任务 A · "做一份 X 主题的 case sharing presentation"

→ HTML 模式 default → 选择 profile 与密度 → 生成 manifest → 拷贝行为 shell → 按构图语法渲染 → 反重复与视口 QA

任务 B · "做一份 X 主题的 PPT 给客户演示"

→ PPTX 模式 → 生成 manifest → 选择 PPTX-compatible profile → 用 EditorialDeck(style_profile=..., manifest=...) → 按语义构图生成 → save .pptx

任务 C · "把这份 HTML presentation 转成 PPT 版"

→ 解析 HTML 11 sections → 每节调用对应 add_*_slide() → 字体降级 / 嵌入选一 → save

任务 D · "我要 HTML 和 PPT 都要,内容一致"

→ 同一份内容数据先抽成 JSON / dict → 生成一次 manifest → HTML 与 PPTX 分别渲染 → 记录格式替代并分别 QA

为什么这个 skill 重要

原始 Pfizer deck 证明了 warm editorial DNA 的可用性；本 skill 把它从一个固定成品扩展为可选择、可复现和可审计的设计系统。复用它意味着：

• 每次做 presentation 不必从零定义设计规则，但也不会自动得到同一套配色和卡片
• HTML / PPT 双格式无缝切换,保持视觉一致
• 跨项目沉淀视觉资产，同时让不同受众和内容拥有可辨识的 deck identity
• 客户/老板第一眼会觉得"这是花了心思的",而不是"模板套出来的"

源版本参考:血液科市场调研 v5 desktop deck。