EthanYoQ 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：
- 温暖但克制的编辑质感、证据可读性和固定 16:9 舞台。
- display / body / data 三类字体角色；具体字族由 profile 决定，原始 Pfizer profile 仍使用 Fraunces / Inter / JetBrains Mono。
- 颜色通过 canvas / surface / ink / primary / secondary / signal / positive / negative 等角色分配，不锁死一组 RGB。
- 先判断数据关系、基数、密度、不确定性和叙事角色，再分别选择表达家族与构图。
- 同一 profile 内保持一致，但相邻页面不得机械复用相同构图、几何和背景节奏。
- 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
关键设计原则(两模通用,不要破坏)
- 不要全部正文用 Fraunces — 衬线长篇阅读疲劳
- 不要把所有 deck 都锁定同一 palette — 先选 profile，再按角色 token 和 cadence 用色
- 不要把所有数字都画成条形图 — 图表先表达关系,再表达大小
- 不要用纯黑文字 — 用
#141413暖墨 - 不要让每页/每屏背景一样 — 按选定 profile 的 cadence 形成对比节拍，不随机换色
- 不要混用按钮风格 — 主 CTA 一种样式,辅 CTA 另一种,跳转第三种,不要乱
- 不要把演讲 deck 做成网页报告 — 常规页必须采用 projection typography;放不下就拆页或 compact,不要全局缩字
- PPT 模式:不要在 PPT 里写 CSS — 所有视觉走 python-pptx 的 shape API,不要嵌网页
- 不要把组件数量当作视觉多样性 — 相同白卡、相同标题位置和相同网格，即使名字不同也属于重复
- 不要用随机性掩盖重复 — 使用稳定 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。