# 一稿登台：演示前端引擎七测 ## 概述 ## 评测对象一览 ## 深度评测 ### 1. frontend-slides —— 浏览器演示的"零依赖美学派" 来源：社区自研｜安装：`git clone` 后放入 `~/.claude/skills/frontend-slides` frontend-slides 是本期设计哲学最纯粹的一款。它输出单文件 HTML，inline 全部 CSS/JS，零 npm、零构建工具，双击即放浏览器全屏演讲。其杀手锏是 Phase 2 的 **"show, don't tell" 风格发现机制**：不问用户"要极简还是大胆"，而是根据情绪选择生成 3 个迷你预览页（Bold Signal、Dark Botanical、Neon Cyber 等 12 套预设），让用户看着实物挑——这套方法本身就是非设计师产品设计的教科书。 工程上它有一条不可逾越的红线：**每页严格等于一个视口高度（100vh/100dvh），绝不允许页内滚动**。为此它内置了从 700px/600px/500px 三档断点到 `clamp()` 响应式字号的全套 CSS 架构，并规定了内容密度上限（标题页 1 标题 1 副标题、内容页最多 4-6 个 bullet、特性网格最多 6 卡）。溢出？拆页，而非缩字。图片经 Pillow 圆裁/缩放后用相对路径引用（不转 base64 以瘦身）。 **评分**：功能完整度 ★★★★★｜上手 ★★★★☆｜变现 ★★★★★｜训练营 ★★★★★｜社区 ★★★☆☆ 变现上它是天然的 SaaS 种子：HTML 易于托管、易分享链接、易做模板订阅；训练营中它同时是"响应式 CSS""滚动锚定动画""渐进式披露"三课的活教材。与 Slidev/reveal.js 相比，它的优势是无需 Node 环境、AI 生成即所得、风格高度定制化；劣势是生态插件远不如成熟框架。 ### 2. pptx-official —— Anthropic 官方的"双引擎工业母机" 来源：Anthropic 官方 example-skill｜协议：Proprietary（详见 LICENSE.txt） 作为官方出品，它是本期依赖最重、能力最全的"工业母机"。它把演示任务切成三条互不干扰的流水线：**从零创建走 html2pptx**（先写 HTML 幻灯片，再用 `html2pptx.js` + PptxGenJS 翻译成 .pptx）、**编辑既有文件走 OOXML**（unpack 解包→改 XML→validate 校验→pack 重打包）、**模板复用走 inventory 三步法**（rearrange 重排→inventory 抽取占位符→replace 灌内容）。 设计部分最值得称道的是它内置 **18 套命名配色创意库**（Burgundy Luxury、Coastal Rose、Retro Rainbow……），并反复强调"反 AI slop"——拒绝紫色渐变白底、拒绝 Inter/Roboto、拒绝标准蓝。它还有一条其它 Skill 都没有的**视觉验证闭环**：`thumbnail.py` 生成缩略图网格，Claude 用多模态逐页排查截字/重叠/对比度，反复迭代到无误。但代价是依赖链庞大：Node + PptxGenJS + Playwright + Sharp + LibreOffice + Poppler 全员到齐。 **评分**：功能 ★★★★★｜上手 ★★★☆☆｜变现 ★★★★☆｜训练营 ★★★★☆｜社区 ★★★★★ 官方背书带来信任溢价，适合企业报告/咨询交付自动化；但 Proprietary 协议限制改作商用，需谨慎。训练营价值在于它是 OOXML 与 html2pptx 双范式的最佳实物教材。 ### 3. pptx-generator —— PptxGenJS 的"设计系统派" 来源：MIT 社区｜参考文件：slide-types / design-system / pitfalls / pptxgenjs pptx-generator 与官方版同样基于 PptxGenJS，但走了**"设计系统先行"**的轻量路线。它把每张幻灯片严格归类为 5 种页型（Cover 封面 / TOC 目录 / Section Divider 分隔 / Content 正文 / Summary 总结），并强制一份 **theme 对象契约**——只有 `primary/secondary/accent/light/bg` 五个键，编译脚本统一注入，杜绝命名漂移。风格上提供 Sharp（锐利）/Soft（柔和）/Rounded（圆角）/Pill（药丸）四套配方。 工程亮点是**模块化 + 并发生成**：每页一个独立 `slide-XX.js`（导出同步 `createSlide(pres, theme)`），可单页预览，也可最多 5 页用 subagent 并发生成再 `compile.js` 合并。每页右下角强制页码 badge（圆形或药丸形），统一品牌节奏。 **评分**：功能 ★★★★☆｜上手 ★★★★☆｜变现 ★★★★☆｜训练营 ★★★★★｜社区 ★★★☆☆ MIT 协议意味着可自由改作——把它的 design-system 参考文件换成自家品牌色卡，就能快速孵化一个垂直模板品牌。训练营中，它的"theme 契约 + subagent 并发 + 页型枚举"是设计工程化教学的黄金案例。 ### 4. knowledge-to-slides —— 知识库转教学素材的"教研派" 来源：学通信自媒体（MIT）｜依赖：obsidian-mermaid、context7、pdf 它的核心方法论是**线性递进教学设计**：从基础到高级一次性讲透，一章 30-50 页，一天课程 80-100 页。更巧妙的是调用 **Context7 确认开源项目最新稳定版本**，写进实验手册的安装命令与兼容性说明，避免"教材写完版本已过时"的经典痛点。 **评分**：功能 ★★★★☆｜上手 ★★★☆☆｜变现 ★★★★★｜训练营 ★★★★★｜社区 ★★★☆☆ ### 5. 51xtx-ppt-writer —— 中文章节课件的"品牌 IP 派" 来源：51学通信自研｜模板：reference/51xtx_template.pptx（上海 Nordri 设计） 这是本期"中文排版精细度"最高的一款。它把 51学通信的视觉规范固化成代码：中文统一用**思源黑体 ExtraLight（免费商用，规避黑体版权）**、正文 16pt、行距 100%、段前 20%；标题用 **bg1 白色方案**（反直觉但成片高级）；lvl1-5 项目符号层级（•/–/•/–/»）显式 buChar 设置，确保跨设备渲染一致。 配图策略很务实：用 `mermaid.ink` 在线 API 渲染 Mermaid（无需本地 mmdc），图片源码写进幻灯片备注便于二次编辑；图片经 `add_picture_safe()` 按 EMU 比例自动缩放防溢出；正文不足 150 字的页强制配 Mermaid（动态比例至少 1/10 页）。v2 版还新增内容密度规则（每页≤10 bullet、标题≤2 行）和"禁 emoji"纪律。 **评分**：功能 ★★★★☆｜上手 ★★★☆☆｜变现 ★★★★☆｜训练营 ★★★★☆｜社区 ★★★☆☆ 它演示了一条清晰的 IP 变现路径：把个人/机构视觉规范沉淀成可复用模板引擎，每份课件都自带品牌水印（51学通信原创制作，绿色 #00B050）。对 51学通信（站长爱卫生，微信 gprshome201101）这类知识付费自媒体，它把"做一节课"从半天压缩到分钟级。门槛在于需懂 lxml/EMU/OpenXML 细节。 ### 6. ericsson-ppt-writer-v2 —— 企业级的"批量题库工厂派" 来源：企业内部风格自研｜入口：`python3 ericsson_ppt_v2.py slides.json output.pptx` ericsson-ppt-writer-v2 走的是**最窄但最深的脚本化路线**。它只做一件事：把 JSON 幻灯片数据按爱立信 LPD 母版精确渲染成 .pptx。精度令人印象深刻——Level 0 标题 20pt 加粗无符号、Level 1 正文 18pt 配 em dash（—）项目符号、Ericsson Hilda Light 字体、段前 12pt、行距 90%、颜色 #181818，全部对齐官方母版视图设置。 真正的护城河不在样式而在**规模**：它的 `pptx/content/` 目录已沉淀 **100+ 个 ICT 知识点 JSON 题库**（TCP/IP 四层、Transformer 架构、3GPP 标准体系、SLAM、量子计算……），配合 `batch_generate_ict.py` 可一键批量产出整套技术课件。这是"知识资产 + 渲染引擎"双轮驱动的典范。 **评分**：功能 ★★★☆☆｜上手 ★★★★★｜变现 ★★★★☆｜训练营 ★★★☆☆｜社区 ★★☆☆☆ 门槛极低（一行命令），但功能窄（无图表/复杂布局），定位是"已经囤好题库的批量工厂"。变现上，100+ 题库本身就是可售卖的数字资产；短板是样式被锁死在单一企业风，灵活性弱。 ### 7. pptx-test —— 批量生成前的"QA 门禁派" 来源：自研配套｜触发：`/pptx-test ` pptx-test 是本期最"小而美"的一款，却是工业闭环不可或缺的一环。它的定位是**批量生成前的单页验证闸门**：生成一张测试幻灯片，按检查清单逐项核验——HTML/CSS 渲染、长文本自动换行、UTF-8 中文无乱码、emoji 与符号（✓→←）、python-pptx `.rgb` 颜色 API 兼容性。失败时给出明确修复指向（中文乱码→加 encoding='utf-8'、溢出→手写换行逻辑、打不开→查 python-pptx 版本）。 **评分**：功能 ★★☆☆｜上手 ★★★★★｜变现 ★★☆☆｜训练营 ★★★★☆｜社区 ★★☆☆ 它难独立变现，但完美诠释了"测试先行"的工程纪律。在训练营里，它是"为什么批量跑 100 页前先跑 1 页"的最佳教学道具，也是把"踩坑经验"沉淀为可执行检查清单的范本。与前两款批量引擎（ericsson-v2、51xtx）天然互补。 ## 生态分类思维导图 ## 推荐排行榜 **按上手难度排序（从易到难）** 1. ericsson-ppt-writer-v2 —— 一行命令 2. pptx-test —— `/pptx-test` 单命令 3. pptx-generator —— theme 契约清晰、参考完善 4. frontend-slides —— 纯 HTML 门槛低，需懂 clamp 5. pptx-official —— 依赖链庞大、需啃两份大文档 **按训练营教学价值排序** 1. frontend-slides —— 响应式/动画/渐进披露三课合一 2. knowledge-to-slides —— "一本书拆一门课"方法论范本 3. pptx-generator —— 设计工程化（契约+并发+页型枚举） 4. pptx-official —— OOXML 与 html2pptx 双范式教材 5. pptx-test —— "测试先行"工程纪律教学 ## 结论与延伸 演示前端这一赛道已悄然完成三段式进化：**从"能生成"（脚本堆砌占位符）→ 到"会设计"（配色创意库 + 风格预览 + 反 AI slop 纪律）→ 再到"自验证"（缩略图视觉闭环 + 单页 QA 门禁）**。本期 7 款 Skill 恰好覆盖了进化链的不同生态位。 延伸阅读方向：本期未覆盖但同属演示生态的还有 `content-to-video`（slides→配音视频）、`51xtx-ppt-writer` 与 `course-video-maker-zh` 的串联（PPTX→中文字幕视频），以及 frontend-slides 的 `STYLE_PRESETS.md` 里那 12 套预设的逐套拆解——后者足以单独成篇。 ## 参考来源 1. [Claude Code Skills 完全指南：从入门到实战（附 PPT 生成示例）](https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/162055628) — CSDN，系统介绍 pptx skill 机制与 PPT 生成示例 2. [ClaudeCode Skills - Document-Skills PPT 制作技能技术实现详解](https://www.skill-cn.com/practice/196) — skill-cn.com，html2pptx 用 HTML+CSS 当画笔生成演示文稿的实践 3. [我让 Claude Code 的 pptx Skill 帮我做 PPT](https://zhuanlan.zhihu.com/p/2038203704449488623) — 知乎，pptx skill 渐进式披露机制与自然语言出片实测 4. [python-pptx 官方文档](https://python-pptx.readthedocs.io/) — python-pptx，51xtx/ericsson/pptx-test 共同依赖的底层库 API 参考 5. [PptxGenJS 官方仓库](https://github.com/gitbrent/PptxGenJS/) — GitHub，pptx-official 与 pptx-generator 的渲染引擎来源 > [!tip] 51学通信知识星球 > **星主：爱卫生**（微信：gprshome201101）——公众号「51学通信」创办者，19 年通信行业运维与讲师经验，著有《GPRS网络信令实例详解》《EPC原理与实践》《5G核心网原理与实践》三本纸质书（各大电商平台有售）。 > **星球定位**：深耕 5G 核心网、IMS、NFV/AI、云原生等 ICT 领域，主打运维岗位与信令分析。 > **当前规模**：5200 篇主题 / 990 个回答，198 元/年。 > **加入福利**：加入星球后请加爱卫生微信，拉您进知识星球年度陪伴与答疑群——不限量回复您的各种问题，另有群内分享。 > **AI 加持**：51学通信知识星球已作为 skill 接入 WorkBuddy，使用 deepseek-4-flash 在海量星球帖子中精准找贴、找视频、找 FAQ 和案例，做总结、找文档和 PPT 等场景全覆盖。