For agentic workers: REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (
- [ ]) syntax for tracking.
Goal: 生成 16 页内部版 PPT(对外沟通·统一口径作战手册),供对外相关团队宣讲与沉淀参考。
Architecture: 复用既有 HTML 幻灯片管线:每页一个自包含 HTML(1280×720,内联 CSS + CSS 变量),输出到独立目录 ppt-output/internal/slides/,用 Python 生成器产出 iframe 预览页。4 个 Agent 并行生成 4 组页面,随后统一渲染验证。
Tech Stack: 纯 HTML/CSS/SVG(无 JS 运行时、无动画)、Python 3(预览生成器)、Chrome DevTools(渲染验证)
docs/superpowers/specs/2026-08-07-xaf-internal-communication-design.md(信息卡在下方 Task 中完整复制,Agent 必须逐条实现,不增删事实)ppt-output/runtime/html-spec.md): body 固定 width:1280px; height:720px; overflow:hidden;禁止动画/@keyframes/transition;禁止伪元素视觉装饰;禁止 background-image 放图(用 <img>);禁止 SVG 内 <text>;禁止 conic-gradient(用 SVG circle + stroke-dasharray);禁止 background-clip:text 渐变文字;所有颜色必须 var(--xxx)(CSS 变量展开自 style.json 的 css_variables 到 :root),禁止硬编码色值ppt-output/style.json(style_id: tech_blue_warm_orange)——bg-primary #0A1A2F、accent-1 #FF8C42、五维色 five_earth #FF8C42 / five_fire #FF6B9D / five_metal #6366F1 / five_wood #10B981 / five_water #F59E0Bppt-output/internal/slides/slide-{N}.html(N=1..16),禁止写入/覆盖 ppt-output/slides/(外部版 16 页)position:absolute; top:20px; right:40px,z-index 高于 header),页脚格式 内部·统一口径 | NN / 16#EF4444 系(必须作为 CSS 变量 --danger: #EF4444 定义后引用),❌⚠️✅ 语义图标用真实 SVG <circle>/<path> 或 HTML 字符 + 语义色font-variant-numeric: tabular-nums;每页 ≥2 种 card_style;accent/elevated 各 ≤1;每页内容卡打 data-card-id 标记,装饰节点打 data-decoration-layer + aria-hidden="true"write 会被拒绝(报 "File already exists")——先用 read 读一次该文件再 write| 文件 | 责任 |
|---|---|
ppt-output/internal/slides/slide-1~16.html |
16 页幻灯片(本计划主体产物) |
ppt-output/internal/preview-internal.html |
16 页预览页(iframe src 引用 slides/,Task 6 生成) |
ppt-output/runtime/gen_preview_internal.py |
预览生成器(复制 gen_preview16.py 改造) |
docs/superpowers/PROJECT-OVERVIEW.md |
文档索引同步(Task 7) |
| Task | 内容 | 产出 |
|---|---|---|
| 1 | 目录准备 + 参考模板确认 | ppt-output/internal/slides/ 存在 |
| 2 | slide-1~4(封面/定位三句话/五维平台/身份话术) | 4 个 HTML |
| 3 | slide-5~8(成果/平台/检测/案例话术) | 4 个 HTML |
| 4 | slide-9~12(合作/理念话术 + 红线 2 页) | 4 个 HTML |
| 5 | slide-13~16(脱敏红线/Q&A×2/行动项) | 4 个 HTML |
| 6 | 预览生成器 + preview-internal.html | 1 个 py + 1 个 html |
| 7 | 渲染验证 16 页 + 文档同步 | 验证记录 + PROJECT-OVERVIEW 更新 |
Files:
ppt-output/internal/slides/(目录)Read: ppt-output/runtime/html-spec.md、ppt-output/style.json、ppt-output/slides/slide-2.html(参考骨架)
[ ] Step 1: 创建输出目录
New-Item -ItemType Directory -Force -Path "D:\workspace\cfc\ppt-output\internal\slides"
[ ] Step 2: 确认参考模板可读
读取 ppt-output/slides/slide-2.html 确认骨架::root 变量展开 → .grid-overlay → .slide-header → .slide-footer → 内容区。内部版沿用同一骨架,另加右上角内部角标。
确认 ppt-output/internal/ 为空(或仅含待覆盖文件),且 ppt-output/slides/slide-1~16.html 未被触碰(外部版产物)。
Files:
ppt-output/internal/slides/slide-1.html ~ slide-4.htmlInterfaces:
.slide-header / .slide-footer)、style.json CSS 变量、内部角标规范(Global Constraints)视觉基调: 第一部分为"共识层"——低到中密度,深蓝底 + 暖橙强调 + 网格点阵;slide-1 封面大字号冲击力(H0 ≥80px),slide-2/3 信息密度逐级上升。
[ ] Step 1: 生成 slide-1.html(封面)
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8">
<style>
/* :root 展开 style.json css_variables(含 --danger: #EF4444) */
/* body 1280×720 overflow:hidden + grid-overlay 点阵 */
/* 右上角角标 .internal-badge: 半透明胶囊「内部 · 统一口径」 */
</style>
内容(来自设计文档 S1):
内部·统一口径 | 01 / 16card_style 混用:标题区 transparent + 落款 outline;装饰节点打标
[ ] Step 2: 生成 slide-2.html(定位三句话)
内容(S2)——三句标准表述,必须逐字一致:
布局:三句横排三卡(递减节奏或主副节奏,禁止等宽等高排一行);每卡编号气泡 01/02/03(真实 div),卡标题(谁/解决什么/怎么做)+ 正文;顶部强调条"电梯陈述 · 对外开场必须一致";底部讲解要点 caption。页脚 02 / 16。
内容(S3):
<text>)五维色系点缀;页脚 03 / 16
[ ] Step 4: 生成 slide-4.html(身份话术)
内容(S4):
页脚 04 / 16
[ ] Step 5: 生成后自检(每页)
按 html-spec.md 第 10 节清单自检:body 1280×720、颜色全走变量、无动画/伪元素/background-image、SVG 无 text、card 有 data-card-id、装饰有 data-decoration-layer、≥2 种 card_style、数字 tabular-nums、无溢出。
Files:
ppt-output/internal/slides/slide-5.html ~ slide-8.htmlInterfaces:
视觉基调: 第二部分为"话术层"——中高密度;slide-5 数据页大号水印数字 + Data-Hero(≥64px);slide-8 案例页引入外部版案例表述但脱敏(化名小辰)。
内容(S5)——核心 KPI 四卡(Data-Hero ≥64px,tabular-nums):
每 KPI 卡至少一个 CSS 可视化(进度条/对比柱/sparkline);页脚 05 / 16
[ ] Step 2: 生成 slide-6.html(平台话术)
内容(S6):
页脚 06 / 16
[ ] Step 3: 生成 slide-7.html(检测话术)
内容(S7):
页脚 07 / 16
[ ] Step 4: 生成 slide-8.html(案例话术)
内容(S8):
页脚 08 / 16
[ ] Step 5: 生成后自检(每页)
同 Task 2 Step 5。
Files:
ppt-output/internal/slides/slide-9.html ~ slide-12.htmlInterfaces:
--danger: #EF4444 与 ❌⚠️✅ 语义图标视觉基调: slide-9 合作话术收束、slide-10 理念话术(五维色再次点亮);slide-11/12 进入红线层——视觉风格陡变:红色系强调、警示图标、语义色分级,与前半部分形成"安全提示"区隔。
内容(S9):
页脚 09 / 16
[ ] Step 2: 生成 slide-10.html(理念话术)
内容(S10):
页脚 10 / 16
[ ] Step 3: 生成 slide-11.html(沟通红线·数据与业绩)
内容(S11)——红线页,红色系基调:
--danger / warning #F59E0B / success #10B981,warning/success 走 CSS 变量)页脚 11 / 16
[ ] Step 4: 生成 slide-12.html(沟通红线·合作与合规)
内容(S12):
布局: 红橙(danger)区为主体 + 底部黄绿(warning/success)带;页脚 12 / 16
[ ] Step 5: 生成后自检(每页)
同前 + 红线页确认语义色全部走 CSS 变量(无硬编码红色)。
Files:
ppt-output/internal/slides/slide-13.html ~ slide-16.htmlInterfaces:
Produces: 4 个 HTML,供 Task 6/7 使用
[ ] Step 1: 生成 slide-13.html(沟通红线·脱敏与案例)
内容(S13):
视觉: 与 slide-11/12 同红线系(danger 强调);页脚 13 / 16
[ ] Step 2: 生成 slide-14.html(常见问答·基础)
内容(S14)——四张问答卡(Q 橙 / A 深蓝底配对成卡):
布局: 2×2 问答卡网格,但禁止等宽等高排一行——用主副节奏或交错;页脚 14 / 16
[ ] Step 3: 生成 slide-15.html(常见问答·敏感)
内容(S15)——四张问答卡(同 S14 布局语言):
视觉: 较 S14 更"敏感"——问答卡边框用 outline,顶部加"敏感问题·注意口径"提示条;页脚 15 / 16
[ ] Step 4: 生成 slide-16.html(结尾·行动项)
内容(S16):
页脚 16 / 16
[ ] Step 5: 生成后自检(每页)
同前。
Files:
ppt-output/runtime/gen_preview_internal.pyppt-output/internal/preview-internal.html(由脚本生成)Interfaces:
Produces: preview-internal.html(iframe src 引用 slides/slide-{N}.html,翻页工具栏 + 键盘 ←→ 导航)
[ ] Step 1: 编写生成器
复制 ppt-output/runtime/gen_preview16.py 并修改:
ppt-output/internal/preview-internal.htmlppt-output/internal/slides<title> → 浠艾福 · 对外沟通统一口径(内部版 16 页)src="slides/slide-{N}.html"(相对 internal/ 目录)← → 翻页 · 内部资料 · 统一口径工具栏加"内部"角标样式(background: rgba(239,68,68,0.15); color:#FCA5A5)
#!/usr/bin/env python3
# -*- coding: utf-8 -*-
"""生成 internal/preview-internal.html(16 页内部版预览,iframe src 引用)"""
import os, html
BASE = os.path.dirname(os.path.dirname(os.path.abspath(__file__))) # ppt-output
OUT = os.path.join(BASE, 'internal', 'preview-internal.html')
SLIDES_DIR = os.path.join(BASE, 'internal', 'slides')
SLIDES = [f'slide-{i}.html' for i in range(1, 17)]
for s in SLIDES:
p = os.path.join(SLIDES_DIR, s)
if not os.path.exists(p):
raise SystemExit(f'缺少 {p}')
# 骨架同 gen_preview16.py:toolbar + stage + iframe(src="slides/slide-{i}.html") + resize/show/nav 脚本
# title: 浠艾福 · 对外沟通统一口径(内部版 16 页)
# nav-hint: ← → 翻页 · 内部资料 · 统一口径
# 工具栏右上角加红色系角标「内部 · 统一口径」
[ ] Step 2: 运行并验证
python D:\workspace\cfc\ppt-output\runtime\gen_preview_internal.py
Expected: 输出 已生成 ...preview-internal.html(16 页...);文件存在且含 16 个 iframe。
Chrome 打开 file:///D:/workspace/cfc/ppt-output/internal/preview-internal.html,确认第 1 页加载、Next/Prev 与键盘翻页正常(无需逐页截图,Task 7 做)。
Files:
docs/superpowers/PROJECT-OVERVIEW.mdModify: docs/superpowers/specs/2026-08-07-xaf-internal-communication-design.md(状态字段)
[ ] Step 1: 逐页渲染截图验证(slide-1~16)
Chrome DevTools 逐页打开 file:///D:/workspace/cfc/ppt-output/internal/slides/slide-{N}.html 截图,用 look_at 检查:
截图偶发超时(MCP error -32001)时等待 8-15 秒重试
[ ] Step 2: 失败修复
任一页失败 → 定位问题(溢出/数据/角标缺失)→ 用 edit 修正该页 → 重新截图验证。禁止批量重写通过的页面。
[ ] Step 3: 更新 PROJECT-OVERVIEW.md
specs 索引 2026-08-07-xaf-internal-communication-design.md → 状态 ✅ 已实施(内部版 16 页交付,对外沟通统一口径)
plans 索引新增 2026-08-07-xaf-internal-communication.md → 状态 ✅ 已实施
(参考行格式:| 文件 | 状态 | 说明 |)
[ ] Step 4: 更新设计文档状态
specs/2026-08-07-xaf-internal-communication-design.md 头部 - **状态**: 已确认(待实施) → - **状态**: 已实施(slide-1~16 全量交付,渲染验证通过)
ppt-output/internal/ 全计划一致;角标文案「内部 · 统一口径」一致;页脚格式 内部·统一口径 | NN / 16 一致。