📌 项目地址：zarazhangrui/frontend-slides | ⭐ 19,551 颗星 | 🔧 JavaScript | 📜 MIT
这东西解决什么问题
你要做个技术分享幻灯片，内容准备好了，但不想花时间调字体、对齐和颜色渐变。你也不是不会CSS/JS，只是懒得为一次演讲搞一套完整前端工作流。
Frontend Slides是一个Claude Code插件，你只需用自然语言描述内容、页数、粗略风格，它直接输出一个单HTML文件。浏览器打开就能翻页，依赖为零——所有CSS和JS都内联在文件里，不用npm install、不用webpack、不用CRA。
GitHub上19551个星。这个数字说明开发者群体里，想要”跳过PPT时代、不用写前端也能做演示页”的人确实多。
核心设计：视觉预览替代形容词
AI生成设计时，常见做法是让你写需求描述，比如”极简风格，白底，灰色字体，蓝色点缀”。问题在于大多数人的审美词汇量不够，写出来的描述和实际想要的效果有落差。
这个项目的做法是：AI先生成4～6个不同的风格预览截图，你选出看着顺眼的那个，然后在这个风格上继续迭代。全程不需要你用形容词描述”什么是好看”。
模板包有两套：一套是内置的bold-template-pack，风格偏设计师，不会生成那种”白背景+紫色渐变”的典型AI审美。另一套是兜底的保守样式（viewport-base.css等文件），如果模板包加载失败，默认样式不会崩。
安装：README写清楚了，但我踩了坑
方式一：Claude Code插件市场
必须拆成两步执行，不能把两行命令粘贴在一起。
第一步：
/plugin marketplace add https://github.com/zarazhangrui/frontend-slides等执行完，再输入第二步：
/plugin install frontend-slides@frontend-slides注意链接必须用完整的HTTPS URL。我第一次简写成zarazhangrui/frontend-slides，Claude Code尝试走SSH连接GitHub，但本地known_hosts没配置，连接失败。卡了两分钟才发现问题。
安装完成后，在Claude Code里用/frontend-slides:frontend-slides调用。命名规则是：插件安装的技能 = /插件名:技能名。
方式二：手工复制到本地技能目录
如果你不想走市场流程，直接把文件复制到~/.claude/skills/frontend-slides/：
mkdir -p ~/.claude/skills/frontend-slides/scripts
cp SKILL.md STYLE_PRESETS.md viewport-base.css html-template.md animation-patterns.md ~/.claude/skills/frontend-slides/
cp -R bold-template-pack ~/.claude/skills/frontend-slides/
cp scripts/extract-pptx.py scripts/deploy.sh scripts/export-pdf.sh ~/.claude/skills/frontend-slides/scripts/或者直接clone：
git clone https://github.com/zarazhangrui/frontend-slides.git ~/.claude/skills/frontend-slides然后输入/frontend-slides调用。这种安装方式没有命名空间。
其他能读写文件、执行shell的编码代理（比如Codex、Kimi Code、OpenCode、Gemini CLI）也可以用同样的SKILL.md。README说这是core skill，理论上能迁移。
使用流程推演
假设你要做一个关于CSS Grid的教学演示，8页。
第一轮：跟Claude Code说需求。它会规划页面结构，可能先问你要不要导入现有PPT，用scripts/extract-pptx.py提取内容。
第二轮：生成几个视觉预览截图。你选一个深色配高亮的方案。全程不用写一个形容词。
第三轮：你对第5页的字号不满意，说”第五页正文放大一号”。它调整。
输出文件固定16:9，代码有注释，方便你手动改颜色、字号或布局。
局限性
- PPT转换只保留图片和文字，不保留动画和过渡。转换流程是先用
scripts/extract-pptx.py提取PowerPoint结构化内容，然后让AI重新生成HTML。它不是格式转换，而是”内容移植”。如果你的PPT有复杂动效，在这里会丢失。 bold-template-pack风格确实大胆。色彩饱和度高。如果需要商务白底蓝字风格，用默认的保守样式兜底。- 依赖AI代理的上下文窗口。对话太长的话，Claude Code可能忘记之前做的调整。建议一页一页改，别一次性改20页。
- README提到三个脚本但没有给出详细用法：
extract-pptx.py、deploy.sh、export-pdf.sh。你需要自己读脚本源码才知道参数。我看了下deploy.sh和export-pdf.sh，部署脚本需要指定输出路径，PDF导出脚本可能依赖puppeteer。但这些脚本的用法说明缺失，第一次用需要试错。
谁适合装这个
- 技术分享频繁的开发者。你不想花时间排版，内容比字体重要。
- 内部培训讲师。把笔记转成可展示的HTML，一天出十页。
- 团队要统一演示风格，不想让每人搞一套不同的PPT模板。
不适合需要像素级控制或复杂动效的视觉设计师。这种场景还是用Keynote或Figma更靠谱。
一个值得注意的细节
extract-pptx.py不是直接转格式，而是”提取 -> 重新生成”的流程。这个设计有个好处：你不继承PowerPoint里任何丑的格式残留（比如默认文本框边框、过时字体），拿到的是内容一致但视觉全新的HTML幻灯片。
如果真要试，记住：安装链接必须是完整的HTTPS URL，不要用简写。别像我一样卡在SSH上两分钟。