不会 CSS 也能做出惊艳 PPT！Frontend Slides这个开源 Claude Code 技能让 AI 帮你生成 12 种风格演示文稿，告别千篇一律的紫渐变

不会 CSS 也能做出惊艳 PPTFrontend Slides这个开源 Claude Code 技能让 AI 帮你生成 12 种风格演示文稿告别千篇一律的紫渐变 每次做 PPT 都在 Powerpoint 里拖来拖去最后做出来还是那个味儿Frontend Slides 让你用一句话描述需求AI 生成 3 种风格预览让你挑——12 套精心设计的视觉预设、零依赖单 HTML 文件、还能把 PPT 直接转成网页演示这才是 AI 时代做幻灯片的正确姿势。目录1. 项目简介2. 核心亮点5 大理由爱上它3. 12 套视觉风格全览4. 动画系统让幻灯片活起来5. 架构设计渐进式披露6. 使用方式从创建到分享7. 快速安装8. 适用场景与优缺点9. 总结 1. 项目简介做演示文稿这件事长期以来只有两条路要么用 PowerPoint/Keynote 拖拽排版要么用 reveal.js/Slidev 写代码。前者费时费力还容易做得丑后者门槛高且调试痛苦。Frontend Slides给出了第三条路——让 AI 帮你做你只需要看和选。它是一个 Claude Code 技能Skill专门用来创建动画丰富的 HTML 演示文稿。最妙的是它的Show, Don’t Tell理念不需要你用语言描述我想要什么风格而是直接生成 3 种视觉预览让你对比选择——看一眼胜过千言万语。 一句话定义Claude Code 技能一句话生成惊艳 HTML 演示文稿——12 种风格、零依赖、PPT 可转。 GitHub 地址https://github.com/zarazhangrui/frontend-slides 开源协议MIT 作者zarazhangrui️ 运行环境Claude Code CLI 灵感Vibe Coding 哲学——不做传统软件工程师也能构建美好事物 2. 核心亮点5 大理由爱上它① Show, Don’t Tell——视觉风格发现这是 Frontend Slides 最独特的设计。传统方式你告诉 AI我想要简洁现代的风格AI 猜来猜去做出来还是千篇一律。Frontend Slides 方式AI 直接生成 3 种风格预览你用眼睛选——“说不清喜欢什么没关系看到就知道了。”② 零依赖——单 HTML 文件❌ 不需要 npm install ❌ 不需要 Webpack/Vite ❌ 不需要 React/Vue ❌ 不需要任何构建工具生成的演示文稿是单个 HTML 文件所有 CSS/JS 全部内联。这意味着双击就能打开任何浏览器都能运行10 年后照样能用React 2019 年的项目祝你好运随时分享、随时部署③ PPT 一键转换已有 PowerPoint 文件直接转成网页演示提取所有文字、图片和备注展示提取内容让你确认让你挑选视觉风格生成包含所有原始素材的 HTML 演示④ ️ Anti-AI-Slop——反 AI 审美“Bye-bye, purple gradients on white.”Frontend Slides 明确拒绝以下 AI 生成内容的通病❌ 不使用原因Inter / Roboto / Arial太通用毫无个性#6366f1通用靛蓝色AI 生成内容的标准配色白底紫渐变AI 生成的审美重灾区千篇一律的居中英雄区毫无记忆点写实插画 滥用毛玻璃廉价感满满每个预设都有独特的字体搭配、配色方案和布局语言——让人一眼就记住而不是一眼就忘掉。⑤ 生产级代码质量生成的不是一次性原型而是可维护的生产级代码✅ 响应式设计——手机/平板/电脑都能看✅ 无障碍支持——可访问性合规✅ 代码注释完善——方便后续修改✅ CSS 变量管理——一键换色 3. 12 套视觉风格全览 暗色主题4 套风格气质布局特色字体搭配Bold Signal自信、高冲击力深色渐变 鲜艳色块卡片 大号章节编号Archivo Black Space GroteskElectric Studio干净、专业上下分屏白蓝 品牌角标Manrope 全家桶Creative Voltage活力、复古现代电光蓝左 深色右 霓虹黄点缀 半调纹理Syne Space MonoDark Botanical优雅、精致居中内容 柔和渐变圆 暖色点缀Cormorant衬线 IBM Plex SansBold Signal的标志性元素——鲜艳的橙色卡片作为视觉焦点配合大号章节编号01/02/03在深色背景上极具冲击力--card-bg:#FF5722;/* 鲜艳橙 */--bg-primary:#1a1a1a;/* 深色底 */Creative Voltage更是大胆——电光蓝配霓虹黄半调纹理图案增加质感Script 字体增添创意气息--bg-primary:#0066ff;/* 电光蓝 */--accent-neon:#d4ff00;/* 霓虹黄 */☀️ 浅色主题4 套风格气质布局特色字体搭配Notebook Tabs编辑风格、有序奶油纸卡片 右侧彩色标签页 活页孔装饰Bodoni Moda DM SansPastel Geometry友好、亲切白卡片 右侧竖向彩色胶囊标签Plus Jakarta SansSplit Pastel活泼、现代桃色/薰衣草双色竖分 圆角徽章OutfitVintage Editorial俏皮、有个性奶油底 几何图形点缀 粗边框 CTAFraunces Work SansNotebook Tabs极具辨识度——在深色背景上放置奶油色纸卡片右侧有薄荷绿/薰衣草/粉色/天蓝/奶油黄五种标签页左侧还有活页孔装饰--tab-1:#98d4bb;/* 薄荷绿 */--tab-2:#c7b8ea;/* 薰衣草 */--tab-3:#f4b8c5;/* 粉色 */--tab-4:#a8d8ea;/* 天蓝 */--tab-5:#ffe6a7;/* 奶油黄 */ 特色主题4 套风格气质布局特色字体搭配Neon Cyber未来感、科技粒子背景 霓虹辉光 网格图案Clash Display SatoshiTerminal Green开发者、极客扫描线 闪烁光标 代码语法高亮JetBrains MonoSwiss Modern精确、包豪斯可见网格 非对称布局 几何图形Archivo NunitoPaper Ink文学、典雅首字下沉 引用拉出 优雅横线Cormorant Garamond Source Serif 4Terminal Green特别适合技术分享——GitHub 深色底 终端绿文字扫描线效果、闪烁光标一秒穿越到黑客帝国--bg-primary:#0d1117;/* GitHub Dark */--accent-green:#39d353;/* Terminal Green */✨ 4. 动画系统让幻灯片活起来Frontend Slides 有一套完整的动画-情感映射系统根据你想要的氛围匹配动画效果想要的感觉动画方案视觉暗示 戏剧/电影感慢速淡入(1-1.5s) 大缩放(0.9→1) 视差滚动深色背景 聚光灯效果 全出血图片 科技/未来感霓虹辉光 故障/乱码效果 网格揭示粒子系统 网格图案 等宽字体 青/品红/电蓝 活泼/友好弹性缓动(弹簧物理) 浮动/摆动圆角 粉彩/亮色 手绘元素 专业/商务微妙快速动画(200-300ms) 干净切换藏青/石板灰/炭灰 精确间距 数据可视化 平静/极简极慢微妙运动 柔和淡入大量留白 柔和色调 衬线字体 编辑/杂志交错文字揭示 图文交织强字体层级 引用拉出 打破网格的布局入场动画4 种基础模式动画代码适用场景淡入 上滑opacity:0 → 1translateY(30px) → 0最通用适合大多数场景缩放进入opacity:0 → 1scale(0.9) → 1强调重点内容左侧滑入opacity:0 → 1translateX(-50px) → 0时间线、步骤展示模糊进入opacity:0 → 1blur(10px) → 0戏剧性揭示背景特效3 种特效效果适合风格渐变网格多层径向渐变叠加制造深度感Dark Botanical / Neon Cyber噪点纹理内联 SVG 噪点增加质感Vintage Editorial / Paper Ink网格图案微弱结构线条秩序感Electric Studio / Swiss Modern交互动效3D 倾斜悬浮鼠标移动时卡片跟随倾斜增加深度感滚动吸附scroll-snap-type: y mandatory实现幻灯片式滚动️ 5. 架构设计渐进式披露Frontend Slides 的架构设计遵循OpenAI 的 Harness Engineering 原则——“给 Agent 一张地图而不是一本 1000 页的说明书”。核心文件只有 180 行的SKILL.md其他文件按需加载文件用途加载时机SKILL.md核心工作流和规则始终加载技能调用时STYLE_PRESETS.md12 套精选视觉预设第 2 阶段风格选择时viewport-base.css强制响应式 CSS 基础第 3 阶段生成时html-template.mdHTML 结构和 JS 功能第 3 阶段生成时animation-patterns.mdCSS/JS 动画参考第 3 阶段生成时scripts/extract-pptx.pyPPT 内容提取第 4 阶段转换时scripts/deploy.sh部署到 Vercel第 6 阶段分享时scripts/export-pdf.sh导出为 PDF第 6 阶段分享时为什么这样设计节省上下文窗口不需要一次性加载所有信息⚡按需加载只有用到时才读取对应文件精准指引Agent 在每个阶段只需要当前阶段的指令 6. 使用方式从创建到分享创建新演示文稿/frontend-slides 我想为我的 AI 创业项目做一个融资路演 PPT工作流程 询问内容幻灯片、要点、图片 询问期望感觉令人印象深刻兴奋平静 生成 3 种视觉风格预览供你对比✍️ 用你选定的风格创建完整演示文稿 在浏览器中打开转换 PowerPoint/frontend-slides 把我的 presentation.pptx 转成网页幻灯片工作流程 提取所有文字、图片和备注✅ 展示提取内容让你确认 让你挑选视觉风格 生成包含所有原始素材的 HTML 演示分享演示文稿方式一部署到在线 URLbashscripts/deploy.sh ./my-deck/# 或bashscripts/deploy.sh ./presentation.html使用 Vercel 免费套餐一行命令部署到永久可访问的 URL——手机/平板/电脑都能看。方式二导出为 PDFbashscripts/export-pdf.sh ./my-deck/index.htmlbashscripts/export-pdf.sh ./presentation.html ./output.pdf使用 Playwright 逐页截图1920×1080并合成 PDF。自动安装依赖。 7. 快速安装方式一插件市场推荐两条命令搞定/plugin marketplaceaddzarazhangrui/frontend-slides /plugininstallfrontend-slidesfrontend-slides然后在 Claude Code 中输入/frontend-slides即可使用。方式二手动安装# 克隆到 Claude Code 技能目录gitclone https://github.com/zarazhangrui/frontend-slides.git ~/.claude/skills/frontend-slides方式三复制文件mkdir-p~/.claude/skills/frontend-slides/scriptscpSKILL.md STYLE_PRESETS.md viewport-base.css html-template.md animation-patterns.md ~/.claude/skills/frontend-slides/cpscripts/extract-pptx.py ~/.claude/skills/frontend-slides/scripts/环境要求功能需求基本使用Claude Code CLIPPT 转换Python python-pptx在线部署Node.js Vercel 账号免费PDF 导出Node.jsPlaywright 自动安装⚖️ 8. 适用场景与优缺点✅ 适合你如果……你不是设计师但想做出有设计感的演示文稿你用 Claude Code想快速生成高质量幻灯片你厌倦了 PowerPoint 的模板审美你需要把 PPT 转成可在线分享的网页你做技术分享/产品路演/创意提案你追求零依赖、长期可用的文件格式❌ 可能不适合如果……你不使用 Claude Code核心依赖你需要复杂的嵌入对象Excel 图表/视频等你需要多人协作编辑你必须使用原生 PPT 格式交付你需要精细到像素级的排版控制优缺点对比维度评分说明 视觉质量⭐⭐⭐⭐⭐12 套精选预设Anti-AI-Slop远超普通模板 易用性⭐⭐⭐⭐一句话创建 视觉预览选择但需要 Claude Code 可定制性⭐⭐⭐⭐代码全开放注释完善可深度修改 零依赖⭐⭐⭐⭐⭐单 HTML 文件10 年后照样能打开 PPT 转换⭐⭐⭐⭐python-pptx 提取保留图文内容 分享能力⭐⭐⭐⭐Vercel 一键部署 PDF 导出 动画效果⭐⭐⭐⭐情感映射动画系统6 种氛围 4 种入场 响应式⭐⭐⭐⭐⭐viewport-base.css 强制响应式基础 9. 总结Frontend Slides不是又一个 PPT 模板网站——它是一个重新定义做幻灯片这件事的 AI 技能Show, Don’t Tell→ 不用语言描述风格用眼睛选择Anti-AI-Slop→ 12 套独特预设告别千篇一律的紫渐变零依赖→ 单 HTML 文件10 年后照样能用渐进式架构→ 180 行核心 按需加载遵循 Harness Engineering动画-情感映射→ 6 种氛围感觉 → 自动匹配动画方案PPT 转换 一键部署→ 完整工作流从创建到分享推荐指数⭐⭐⭐⭐½4.5/5适合Claude Code 用户、非设计师、技术分享者、追求审美的创业者亮点Show-Don’t-Tell Anti-AI-Slop 零依赖 12 套精选风格不足强依赖 Claude Code不支持原生 PPT 格式输出复杂嵌入对象有限一句话总结如果你用 Claude Code又想做有审美的演示文稿——装上这个技能从此告别 PowerPoint 模板审美。 项目链接https://github.com/zarazhangrui/frontend-slides 插件市场/plugin marketplace add zarazhangrui/frontend-slides 灵感来源Vibe Coding 哲学标签#ClaudeCode #PPT #HTML #演示文稿 #VibeCoding #AI生成 #前端