frontend-slides

frontend-slides 技能概览

frontend-slides 的作用

frontend-slides 技能可以帮助你创建在浏览器中运行、富有动画效果的 HTML 演示文稿，既可以从零开始制作，也可以把 .ppt/.pptx 内容转换成更适合 Web 原生呈现的 deck。它最适合那些想要做出精致演示、但又不想完整开发一个应用，也不想依赖通用幻灯片模板的用户。frontend-slides 技能的核心价值在于快速的视觉探索：它会把设计推向更有辨识度、可直接用于演示的版式，而不是一开始就把风格框死。

它最适合谁

frontend-slides 适合演讲、路演 deck、工作坊 deck、内部演示，以及任何对动效、字体和版式有要求的幻灯片集合。它尤其适合不擅长设计、但能清楚描述目标的人。相对来说，如果你需要的是标准企业风格、强品牌规范、可编辑的 PowerPoint 输出，或者必须在传统办公软件里完成的幻灯片，它就不太合适。

安装前最需要注意什么

它最明显的差异点是：只面向浏览器交付、默认零依赖、并且严格遵循视口适配。这意味着它优化的对象是自包含的 HTML 输出——每一页幻灯片都铺满一个屏幕，而且内部不会出现滚动。如果你想要一个能产出紧凑、高冲击力幻灯片的 frontend-slides 技能，并且要求动效干净、渲染结果可预测，那它很合适。若你的工作流依赖大段文字、把演讲备注作为主要内容，或者需要多文件 Web 应用，那你就得对结果做额外调整。

如何使用 frontend-slides 技能

frontend-slides 的安装与初始化

使用 npx skills add affaan-m/everything-claude-code --skill frontend-slides 安装该技能。安装完成后，先从 skills/frontend-slides/SKILL.md 开始，再在生成任何内容之前阅读 STYLE_PRESETS.md。第二个文件不是可选项：它包含了安全适配视口的基础 CSS、幻灯片密度限制、预设使用指南，以及能让整套 deck 保持可用而不只是“好看”的 CSS 规则。

如何写出高质量提示词

一条优秀的 frontend-slides 提示词，会明确告诉技能：演示任务是什么、面向谁、需要多少页，以及来源材料是什么。好的输入可以像这样：“为一个 B2B 排期应用制作 7 页投资人路演；整体风格保持深色、编辑感、强调动效；包含标题、问题、方案、产品流程、证据、定价和结尾 CTA。”如果是 PPTX 转换，请说明原始 deck 的用途、哪些页面要保留、哪些部分可以压缩。做设计探索时，应描述信息重点和受众，而不是只报一个泛泛的主题名。

实际工作流程

先决定你需要的是新 deck 还是转换现有材料。然后用粗略提纲提供内容，而不是直接给成稿，这样技能才能自己处理层级和节奏。第一轮可以先让它专注于结构和视觉方向，等你看过预览后，再去细化动效、信息密度和品牌气质。每页内容都要保持克制；这个技能最适合把每一屏当作一个独立的视觉陈述，而不是一页文档。

先读哪些文件

如果你想最快拿到稳定输出，先读 SKILL.md，了解激活规则和约束，再读 STYLE_PRESETS.md，掌握版式限制和风格选项。在这个 repo 里，支持文件就这两个，所以安装决策其实很直接：这个技能刻意做得自包含，输出质量更多取决于你是否遵守规则，而不是去翻一堆额外资料。

frontend-slides 技能 FAQ

frontend-slides 适合普通幻灯片提示词吗？

适合，但当你要的是以 HTML 为先、同时带有明确动效和视觉打磨的演示输出时，它比普通提示词更强。普通提示词只能描述幻灯片；frontend-slides 技能还内置了视口适配、密度控制和风格探索能力。所以当演示质量取决于版式纪律，而不只是文案时，它会更可靠。

新手能用 frontend-slides 吗？

可以，而且它其实对新手很友好，因为它减少了设计上的模糊地带：你只要描述演讲目标、受众和氛围，技能就能帮你推进方向。新手最常见的错误是把太多文字塞进一页。如果你的 brief 足够简洁，技能就能替你完成更多构图工作。

什么情况下不该用它？

如果你最终需要的是可编辑的 .pptx 输出，或者内容必须能滚动，或者每一页都必须严格套用品牌模板、几乎不能有视觉偏离，那就不要用 frontend-slides。它也不适合密集型报告、参考文档，或者那种主要依赖长篇演讲备注而不是幻灯片本身传达信息的 deck。

如何改进 frontend-slides 技能

提供更好的源材料

提升幅度最大的，永远是更清晰的输入：受众、目标、页数，以及哪些内容必须保留。不要只说“做一个关于 onboarding 的演示”，而要说“为产品经理做一个 8 页 onboarding 演示，目的是解释 activation 指标；每个概念一页，结尾给出明确建议”。如果是用于 UI Design 的 frontend-slides，还要补充产品背景、你希望传达的情绪，以及整套 deck 应该偏实验感、高级感、技术感还是极简感。

保护视口约束

大多数失败都来自每页内容太多。如果一页需要承载超过一个核心观点，就把它拆开。如果要放代码，就尽量短。如果要做对比，就控制列数或卡片数。frontend-slides 的基本原则很简单：先保证清晰，再考虑动效和风格。

优化动效和风格，而不只是文字

首稿出来后，真正有效的改进通常不是重写文案，而是调整过渡、留白、字体和预设选择。你可以提出更具体的修改，比如“让开场页更有电影感”、“减少功能页的视觉噪音”，或者“在保持结构不变的前提下，换成更温暖的编辑风配色”。这类迭代通常比要求彻底重做更有效。

注意常见失败模式

最常见的问题是页面塞得太满、视觉语言过于泛化，以及层级不够清楚。如果输出看起来像模板，就要明确要求更有辨识度的构图和更少的默认 SaaS 风格。如果 deck 显得太薄，就补充一个具体证据点、一个产品流程细节，或者一个面向特定受众的例子。frontend-slides 技能提升最快的方式，就是把它当成视觉编辑工具来用：输入要简洁，输出要精准。