frontend-slides

frontend-slides 技能概览

frontend-slides 是一个 Claude Code 技能，用于制作富动画效果的 HTML 幻灯片，或将 PPT/PPTX 文件转换为可直接在浏览器中使用的演示文稿。它最适合需要快速做出精致 deck、但又不想手写 CSS、搭框架，或者靠猜来处理布局和动效的人。它要解决的核心问题很直接：把粗糙内容变成一套看起来经过精心设计、能适配视口、并且可以通过视觉方式持续迭代，而不是靠抽象描述反复修正的演示稿。

frontend-slides 适合谁

当你需要用于演讲、路演、内部演示、个人作品集，或把 PowerPoint 转成 web 演示时，可以使用 frontend-slides 技能。它尤其适合你能提供内容、但还没有最终视觉方向的场景，因为它的工作流本身就围绕视觉探索和风格选择展开。

frontend-slides 的差异点

frontend-slides 强调零依赖的 HTML、鲜明的视觉风格，以及强制视口适配。这种组合对两类需求特别重要：一类是你在意输出的可移植性，希望它能直接在浏览器里运行而不需要构建步骤；另一类是你想要更高的演示品质，而不是千篇一律的“AI-slop”排版。它比普通提示词更有主张，因为它会把你往更强的字体体系、更统一的配色系统，以及按页保持内容纪律的方向推。

什么时候不适合用 frontend-slides

如果你要的是快速的纯文本摘要、类似表格的报告，或者必须完整保留复杂 PowerPoint 交互模型的 deck，就不该用 frontend-slides。它也不适合你无法把信息拆成幻灯片级别的内容块的情况，因为这个技能把溢出视为内容问题，而不是滚动问题。

如何使用 frontend-slides 技能

安装 frontend-slides

实际安装 frontend-slides，通常从 Claude Code marketplace 配置开始：

/plugin marketplace add zarazhangrui/frontend-slides
/plugin install frontend-slides@frontend-slides

如果你的环境使用手动存放 skill 的方式，就把该 skill 复制到 Claude Code skills 目录，并把附带脚本一起保留。仓库里还包含 .claude-plugin/ manifest；如果你的安装流程依赖 marketplace 元数据，它会很有用。

提供技能真正能用的输入

想把 frontend-slides 用好，起点是内容，不是形容词。请提供：

• 演示目标
• 受众
• deck 页数
• 幻灯片大纲或原始文本
• 任何必须保留的品牌元素
• 你是在转换 PPT/PPTX，还是从零创建

弱提示词会说：“把这个 presentation 做得现代一点。”
更强的提示词会说：“为一个 B2B developer tool 做一套 7 页投资人介绍 deck。保持语气自信、克制，使用深色编辑风格，并原样保留这三个产品主张。”

先读对文件

做 frontend-slides 的指导或二次开发时，先看 SKILL.md，再检查：

• html-template.md，了解基础幻灯片结构
• STYLE_PRESETS.md，了解基于预设的视觉方向
• animation-patterns.md，了解与语气绑定的动效选择
• viewport-base.css，了解不可妥协的适配规则
• scripts/extract-pptx.py 和 scripts/export-pdf.sh，如果你在做转换或导出

这些文件比粗略扫一遍 README 更重要，因为它们直接说明了这个 skill 优化什么、又绝不妥协什么。

能产出更好 deck 的工作流

一个稳定的 frontend-slides 幻灯片工作流通常是：

1. 先定义 deck 的目的和受众，
2. 把内容拆成适合单页呈现的单位，
3. 从 presets 里选定一个视觉方向，
4. 生成第一版，
5. 检查是否有页面需要拆分，
6. 确认信息已经适配视口之后，再做细化。

如果你在转换 PowerPoint，先保结构，再做风格；如果你是从零生成，先决定叙事走向，再追求视觉润色。

frontend-slides 技能 FAQ

frontend-slides 只是用来转换 PowerPoint 吗？

不是。PowerPoint 转换只是其中一个用途，frontend-slides 也很适合原创 HTML 演示。如果你已经有大纲形式的幻灯片内容，这个技能可以直接把它变成浏览器可用的 deck，而不必从 PPTX 起步。

我需要会 CSS 或 JavaScript 吗？

不用一开始就会。frontend-slides 的用意，就是让 skill 负责实现细节。你如果能明确语气、品牌和内容边界，结果通常会更好，但不需要自己手写整套 deck。

它和普通提示词有什么不同？

普通提示词可以要求生成幻灯片；frontend-slides 额外提供了明确的演示工作流、零依赖输出模型、视觉风格探索，以及视口适配规则。当你关心可安装性、可重复性，以及输出在浏览器里是否真的像一套幻灯片时，这些差异会显著减少试错。

什么时候不该用 frontend-slides？

如果内容需要长文滚动、密集的参考信息，或者超出演示范畴的交互式应用行为，就不要用它。若你想要的是风格方向很少、非常通用的企业幻灯片，frontend-slides 也不合适，因为它的设计目标就是推动更有辨识度的视觉选择。

如何改进 frontend-slides 技能

提供更强的源材料

质量提升最大的来源，是更好的输入。不要只说“做得好看”，而是提供：

• 一句话主张
• 精确页数
• 演讲备注或讲稿要点
• 品牌色或禁用色
• 必须逐字保留的文本

这样 frontend-slides 才不容易自己发明出一套和你的信息不匹配的结构。

留意常见失败模式

最常见的失败模式是内容过载、审美过于笼统，以及转换假设不够明确。如果某页显得拥挤，就拆页；如果视觉方向太泛，就强制指定某个 preset 或明确的参考方向；如果 PPTX 转换时丢了意思，就先给出优先级：先保文字，再保图片，再简化布局，最后才是风格化。

用有针对性的修改来迭代

拿到第一版后，改 frontend-slides 最有效的方式是只修真正重要的地方：

• “把第 3 页拆成两页。”
• “把配色调得更暗、更像 editorial。”
• “文案更紧凑一些，标题对比更强。”
• “图表标签必须逐字保留。”
• “结尾页减少动效。”

这种修改方式，比笼统要求“整体重做一版”更有效。

把仓库当作决策工具

如果你在采用 frontend-slides 之前想评估它，先看模板、presets 和导出脚本，再决定是否纳入工作流。它们能直接说明这个 skill 是否适配你的环境、团队是否能维护输出，以及 frontend-slides guide 是否比普通提示词更符合你的制牌习惯。