AI Hub Icon
AIBit 发现开源项目
首页 / 实用开源项目

使用 Claude Code 的 Frontend Slides 创建网页幻灯片

February 20, 2026
类别: 实用开源项目
标签:
OpenSource ClaudeCode WebPresentation HTMLSlides NoDependencies

用 Claude Code 的 Frontend Slides 制作精美网页幻灯片

如果您曾因想要在不学习 CSS、JavaScript 或打包工具复杂细节的情况下制作干净、动画化的网页演示而苦恼，Front Slides 技能就像一剂良药。作为官方 Claude Code 技能，它让任何人都能 创建单一的自包含 HTML 文件，可以直接打开、分享或嵌入。

为什么这款工具如此重要

  • 零依赖 – 无需 npm install，无构建步骤，亦不需要关注任何框架。只需一个文件夹、若干 Markdown 文件以及一个 HTML 文件。
  • 视觉风格发现 – 取代输入风格名称或寻找主题，工具会生成 视觉预览，让您挑选喜爱的外观。
  • PPT 转 Web – 以前被锁在 PowerPoint 文件中的演示稿，瞬间在几秒内变为响应式、可访问的网页幻灯片。
  • 可访问性与响应式 – 输出支持桌面、平板、手机，并配备减动效支持。
  • 面向生产 – 内联 CSS/JS、语义化标记以及完整注释，使代码即时易懂且可修改。

入门 – 安装

  1. 克隆或下载 项目仓库： 

    git clone https://github.com/zarazhangrui/frontend-slides.git
    或者直接从 GitHub 下载 ZIP。

  2. 安装技能 – 对于 Claude Code 用户： 

    mkdir -p ~/.claude/skills/frontend-slides
cp frontend-slides/README.md ~/.claude/skills/frontend-slides/
cp frontend-slides/SKILL.md ~/.claude/skills/frontend-slides/
cp frontend-slides/STYLE_PRESETS.md ~/.claude/skills/frontend-slides/
    如果您不使用 Claude Code，只需将两个文件（SKILL.md 与 STYLE_PRESETS.md）复制到任意您选择的文件夹即可。

  3. 运行技能 – 在 Claude Code 终端中输入： 

    /frontend-slides
    对于非 Claude 用户，您可以运行 Python 辅助脚本来导入 PPT 并生成输出： 
    python convert_ppt.py <file.pptx>

使用方法：从提示到演示

  1. 描述您的演示 – 当您调用 /frontend-slides 时，机器人会快速询问关于内容、语调、期望情感及品牌提示等问题。
  2. 选择风格 – 在获取基础信息后，技能会生成 风格预设 的交互式画廊（如 Neon Cyber、Paper & Ink、Brutalist）。挑选最符合您需求的。
  3. 生成 – 技能会编译一个包含所有幻灯片、导航、动画和样式的单个 index.html。完成！
  4. 查看 – 在任何浏览器中打开文件；导航可使用方向键、鼠标滚轮或点击。

PPT 转换

如果您拥有旧版演示文稿： 1. ` 2. 输入："Convert my presentation.pptx to a web slideshow" 3. 工具提取所有文本、图片和演讲者备注，并引导您进行风格选择。 4. 生成的 HTML 保留原始资产与布局完整性。

探索内置预设

主题 风格 理想使用场景
Neo‑Cyber (Neon) 未来感、粒子特效 技术演示、数字代理推介
Midnight Executive 企业、可信 业务提案、董事会演示
Deep Space 电影感、鼓舞人心 创业预告、创意叙事
Terminal Green 黑客审美 开发者演讲、开源社区
Paper & Ink 编辑、精细 学术演讲、文学幻灯片
Swiss Modern 简洁、几何 设计机构、精炼数据演示
Soft Pastel 友好、俏皮 工作坊、青年互动
Brutalist 原始、粗犷 行动主义、前卫演示
Gradient Wave SaaS 主题 产品发布

随时通过编辑 STYLE_PRESETS.md 或编写自定义 CSS 来添加自己的主题。技能甚至支持 --style=custom ，供高级用户使用。

为什么强调“无依赖”？

  • 持久性 – 单个 HTML 文件可在任何现代浏览器持续运行多年，不受框架弃用影响。
  • 安全 – 最终演示不加载外部脚本或发起网络请求。
  • 简洁 – 任意人都可直接在文本编辑器中修改文件。

限制与未来路线图

  • 当前预览系统仅支持静态图像，后续版本将添加互动预览。
  • 动画使用内联 CSS 生成，用户可能想手工编写更复杂的 JS 动画。
  • 计划与其他 CLI 工具（例如 Markdown 转 PPT）集成。

准备好为您的幻灯片加速了吗？

无论您是想拥有专业外观的非设计师，还是希望简化演示流程的开发者，Frontend Slides 都能在无 Web 堆栈负担的情况下提供面向生产的输出。克隆仓库，安装技能，让 Claude Code 帮助您用视觉方式发声。

# 快速安装
git clone https://github.com/zarazhangrui/frontend-slides.git
cp frontend-slides/SKILL.md ~/.claude/skills/frontend-slides/
cp frontend-slides/STYLE_PRESETS.md ~/.claude/skills/frontend-slides/
# 运行
/foreground-slides

打开生成的 index.html，向观众展示基于网页的叙事未来。祝演示愉快！

原创文章: 查看原文

分享本文