frontend-slides
frontend-slides 是一个基于网页的幻灯片制作工具，通过Claude的前端开发能力，帮助用户快速创建包含动画效果的高质量HTML演示文稿。它支持从零开始设计，也能将PowerPoint文件转换为网页格式，特别适合需要兼顾视觉效果与技术实现的场景。
这个工具解决了传统演示文稿制作的两大痛点：一是非技术人员难以通过代码控制样式，二是AI生成内容常出现千篇一律的视觉风格。通过"可视化预选"机制，用户无需描述设计偏好，只需从系统生成的多个视觉方案中选择即可完成定制。对于需要将PPT迁移至网页的用户，它能完整保留原始内容并自动适配响应式布局。
主要面向需要制作专业演示文稿但缺乏前端开发经验的用户群体，包括创业者、研究人员、教育工作者等。开发者也能受益于其零依赖架构——所有内容打包为单个HTML文件，无需安装框架或构建工具。技术亮点包括：12种精心设计的视觉主题（涵盖暗色系、极简风、赛博朋克等风格），内置PPT解析器支持图片与批注提取，以及通过渐进式加载策略优化交互体验。生成的代码具备良好的可访问性和注释规范，方便后续二次开发。
使用场景
某 AI 创业团队的技术合伙人急需向投资人展示产品路线图，但他不懂设计且时间紧迫，必须在明天会议前定稿。
没有 frontend-slides 时
- 手动调整 PPT 动画与排版耗费大量精力，常因细节对齐问题反复修改半天。
- 现有模板风格过于通用，难以传达产品的科技感，容易给投资人留下廉价印象。
- 演示文件依赖本地软件，跨设备分享时常出现字体缺失或兼容性问题。
- 若尝试制作网页版，需花费数天学习 CSS 框架并处理复杂的构建流程。
使用 frontend-slides 后
- frontend-slides 一键生成包含内联样式的单 HTML 文件，无需安装任何环境即可打开。
- 提供多种视觉预览供选择，无需懂代码即可通过点击锁定理想的设计风格。
- 自动实现响应式布局，确保在手机、平板及大屏上均能完美呈现交互效果。
- 内置反平庸化设计库，避免紫色渐变等廉价 AI 审美，显著提升演示的专业度。
frontend-slides 将原本需要数小时的设计工作压缩至分钟级，让内容创作者专注于核心表达而非样式调试。
运行环境要求
- 未说明
未说明
未说明
快速开始
前端幻灯片
一个用于从头开始或转换 PowerPoint 文件来创建精美、动画丰富的 HTML 演示文稿的 Claude Code 技能。
功能概述
Frontend Slides 帮助非设计师在不懂 CSS 或 JavaScript 的情况下创建美观的网页演示文稿。它采用“展示而非告知”的方法：不是让你用文字描述审美偏好，而是生成视觉预览并让你挑选喜欢的样式。
以下是通过该技能制作的演示文稿示例：
https://github.com/user-attachments/assets/ef57333e-f879-432a-afb9-180388982478
核心功能
- 零依赖 — 包含内联 CSS/JS 的单 HTML 文件。无需 npm，无需构建工具，无需框架。
- 视觉风格发现 — 无法清晰表达设计偏好？没问题。从生成的视觉预览中进行选择。
- PPT 转换 — 将现有的 PowerPoint 文件转换为网页版，保留所有图片和内容。
- 反 AI 滥造（Anti-AI-Slop） — 精选独特风格，避免通用的 AI 美学（告别白底紫渐变）。
- 生产级质量 — 可访问性强、响应式设计、注释良好的代码，支持自定义。
安装
适用于 Claude Code 用户
将技能文件复制到您的 Claude Code 技能目录：
# Create the skill directory
mkdir -p ~/.claude/skills/frontend-slides/scripts
# Copy all files (or clone this repo directly)
cp SKILL.md STYLE_PRESETS.md viewport-base.css html-template.md animation-patterns.md ~/.claude/skills/frontend-slides/
cp scripts/extract-pptx.py ~/.claude/skills/frontend-slides/scripts/
或者直接克隆：
git clone https://github.com/zarazhangrui/frontend-slides.git ~/.claude/skills/frontend-slides
然后在 Claude Code 中输入 /frontend-slides 即可使用。
使用方法
创建新演示文稿
/frontend-slides
> "I want to create a pitch deck for my AI startup"
该技能将：
- 询问你的内容（幻灯片、消息、图片）
- 询问你想要的感觉（印象深刻？兴奋？平静？）
- 为你生成 3 个视觉风格预览以供比较
- 在你选择的风格下创建完整的演示文稿
- 在你的浏览器中打开它
转换 PowerPoint
/frontend-slides
> "Convert my presentation.pptx to a web slideshow"
该技能将：
- 提取你 PPT 中的所有文本、图片和备注
- 向你展示提取的内容以确认
- 让你选择视觉风格
- 生成包含所有原始素材的 HTML 演示文稿
内置风格
深色主题
- Bold Signal — 自信、高冲击力、深色背景上的鲜艳卡片
- Electric Studio — 干净、专业、分栏面板
- Creative Voltage — 充满活力、复古现代、电光蓝 + 霓虹色
- Dark Botanical — 优雅、精致、暖色调点缀
浅色主题
- Notebook Tabs — 编辑风格、井井有条、带彩色标签的纸张
- Pastel Geometry — 友好、亲切、垂直胶囊形状
- Split Pastel — 俏皮、现代、双色垂直分割
- Vintage Editorial — 风趣、个性驱动、几何形状
特色风格
- Neon Cyber — 未来感、粒子背景、霓虹发光
- Terminal Green — 面向开发者、黑客美学
- Swiss Modern — 极简、包豪斯风格、几何图形
- Paper & Ink — 文学感、首字下沉、引用块
架构
该技能采用渐进式披露（progressive disclosure）策略 —— 主 SKILL.md 是一份简洁的地图（约 180 行），支持文件仅在需要时按需加载：
| 文件 | 用途 | 加载时机 |
|---|---|---|
SKILL.md |
核心工作流程与规则 | 始终（技能调用时） |
STYLE_PRESETS.md |
12 个精选视觉预设 | 第 2 阶段（风格选择） |
viewport-base.css |
必需的响应式 CSS | 第 3 阶段（生成） |
html-template.md |
HTML 结构与 JS 功能 | 第 3 阶段（生成） |
animation-patterns.md |
CSS/JS 动画参考 | 第 3 阶段（生成） |
scripts/extract-pptx.py |
PPT 内容提取 | 第 4 阶段（转换） |
scripts/deploy.sh |
部署到 Vercel | 第 6 阶段（分享） |
scripts/export-pdf.sh |
导出幻灯片为 PDF | 第 6 阶段（分享） |
此设计遵循 OpenAI 的 Harness Engineering 原则：“给代理一张地图，而不是一本 1000 页的操作手册。”
理念
该技能的诞生源于以下信念：
你不需要成为设计师也能制作美好的事物。 你只需要对所见之物做出反应。
依赖即债务。 单个 HTML 文件将在 10 年后依然有效。2019 年的 React 项目？祝你好运。
通用即平庸。 每个演示文稿都应感觉是量身定制的，而非模板生成的。
注释是善意。 代码应能向未来的自己（或任何打开它的人）解释自身。
分享你的演示文稿
创建演示文稿后，该技能提供两种分享方式：
部署到在线链接
一条命令即可将你的幻灯片部署到一个永久、可分享的链接，可在任何设备上工作 —— 手机、平板、笔记本电脑：
bash scripts/deploy.sh ./my-deck/
# or
bash scripts/deploy.sh ./presentation.html
使用 Vercel（免费层）。如果是第一次使用，该技能会引导你完成注册和登录。
导出为 PDF
将你的幻灯片转换为 PDF，用于邮件、Slack、Notion 或打印：
bash scripts/export-pdf.sh ./my-deck/index.html
bash scripts/export-pdf.sh ./presentation.html ./output.pdf
使用 Playwright 以 1920×1080 分辨率截图每张幻灯片并组合成 PDF。如果需要会自动安装。动画不会被保留（这是静态快照）。
要求
- Claude Code CLI
- 对于 PPT 转换：Python 及
python-pptx库 - 对于 URL 部署：Node.js + Vercel 账户（免费）
- 对于 PDF 导出：Node.js（Playwright 会自动安装）
致谢
由 @zarazhangrui 使用 Claude Code 创建。
灵感来源于“氛围编码”（Vibe Coding）理念 —— 在不作为传统软件工程师的情况下构建美好事物。
许可证
MIT —— 使用它，修改它，分享它。
版本历史
v2.0.02026/03/04常见问题
相似工具推荐
everything-claude-code
everything-claude-code 是一套专为 AI 编程助手（如 Claude Code、Codex、Cursor 等）打造的高性能优化系统。它不仅仅是一组配置文件，而是一个经过长期实战打磨的完整框架，旨在解决 AI 代理在实际开发中面临的效率低下、记忆丢失、安全隐患及缺乏持续学习能力等核心痛点。 通过引入技能模块化、直觉增强、记忆持久化机制以及内置的安全扫描功能，everything-claude-code 能显著提升 AI 在复杂任务中的表现，帮助开发者构建更稳定、更智能的生产级 AI 代理。其独特的“研究优先”开发理念和针对 Token 消耗的优化策略，使得模型响应更快、成本更低，同时有效防御潜在的攻击向量。 这套工具特别适合软件开发者、AI 研究人员以及希望深度定制 AI 工作流的技术团队使用。无论您是在构建大型代码库，还是需要 AI 协助进行安全审计与自动化测试，everything-claude-code 都能提供强大的底层支持。作为一个曾荣获 Anthropic 黑客大奖的开源项目，它融合了多语言支持与丰富的实战钩子（hooks），让 AI 真正成长为懂上
NextChat
NextChat 是一款轻量且极速的 AI 助手，旨在为用户提供流畅、跨平台的大模型交互体验。它完美解决了用户在多设备间切换时难以保持对话连续性，以及面对众多 AI 模型不知如何统一管理的痛点。无论是日常办公、学习辅助还是创意激发，NextChat 都能让用户随时随地通过网页、iOS、Android、Windows、MacOS 或 Linux 端无缝接入智能服务。 这款工具非常适合普通用户、学生、职场人士以及需要私有化部署的企业团队使用。对于开发者而言，它也提供了便捷的自托管方案，支持一键部署到 Vercel 或 Zeabur 等平台。 NextChat 的核心亮点在于其广泛的模型兼容性，原生支持 Claude、DeepSeek、GPT-4 及 Gemini Pro 等主流大模型，让用户在一个界面即可自由切换不同 AI 能力。此外，它还率先支持 MCP（Model Context Protocol）协议，增强了上下文处理能力。针对企业用户，NextChat 提供专业版解决方案，具备品牌定制、细粒度权限控制、内部知识库整合及安全审计等功能，满足公司对数据隐私和个性化管理的高标准要求。
ML-For-Beginners
ML-For-Beginners 是由微软推出的一套系统化机器学习入门课程，旨在帮助零基础用户轻松掌握经典机器学习知识。这套课程将学习路径规划为 12 周，包含 26 节精炼课程和 52 道配套测验，内容涵盖从基础概念到实际应用的完整流程，有效解决了初学者面对庞大知识体系时无从下手、缺乏结构化指导的痛点。 无论是希望转型的开发者、需要补充算法背景的研究人员，还是对人工智能充满好奇的普通爱好者，都能从中受益。课程不仅提供了清晰的理论讲解，还强调动手实践，让用户在循序渐进中建立扎实的技能基础。其独特的亮点在于强大的多语言支持，通过自动化机制提供了包括简体中文在内的 50 多种语言版本，极大地降低了全球不同背景用户的学习门槛。此外，项目采用开源协作模式，社区活跃且内容持续更新，确保学习者能获取前沿且准确的技术资讯。如果你正寻找一条清晰、友好且专业的机器学习入门之路，ML-For-Beginners 将是理想的起点。
ragflow
RAGFlow 是一款领先的开源检索增强生成（RAG）引擎，旨在为大语言模型构建更精准、可靠的上下文层。它巧妙地将前沿的 RAG 技术与智能体（Agent）能力相结合，不仅支持从各类文档中高效提取知识，还能让模型基于这些知识进行逻辑推理和任务执行。 在大模型应用中，幻觉问题和知识滞后是常见痛点。RAGFlow 通过深度解析复杂文档结构（如表格、图表及混合排版），显著提升了信息检索的准确度，从而有效减少模型“胡编乱造”的现象，确保回答既有据可依又具备时效性。其内置的智能体机制更进一步，使系统不仅能回答问题，还能自主规划步骤解决复杂问题。 这款工具特别适合开发者、企业技术团队以及 AI 研究人员使用。无论是希望快速搭建私有知识库问答系统，还是致力于探索大模型在垂直领域落地的创新者，都能从中受益。RAGFlow 提供了可视化的工作流编排界面和灵活的 API 接口，既降低了非算法背景用户的上手门槛，也满足了专业开发者对系统深度定制的需求。作为基于 Apache 2.0 协议开源的项目，它正成为连接通用大模型与行业专有知识之间的重要桥梁。
PaddleOCR
PaddleOCR 是一款基于百度飞桨框架开发的高性能开源光学字符识别工具包。它的核心能力是将图片、PDF 等文档中的文字提取出来，转换成计算机可读取的结构化数据，让机器真正“看懂”图文内容。 面对海量纸质或电子文档，PaddleOCR 解决了人工录入效率低、数字化成本高的问题。尤其在人工智能领域，它扮演着连接图像与大型语言模型（LLM）的桥梁角色，能将视觉信息直接转化为文本输入，助力智能问答、文档分析等应用场景落地。 PaddleOCR 适合开发者、算法研究人员以及有文档自动化需求的普通用户。其技术优势十分明显：不仅支持全球 100 多种语言的识别，还能在 Windows、Linux、macOS 等多个系统上运行，并灵活适配 CPU、GPU、NPU 等各类硬件。作为一个轻量级且社区活跃的开源项目，PaddleOCR 既能满足快速集成的需求，也能支撑前沿的视觉语言研究，是处理文字识别任务的理想选择。
OpenHands
OpenHands 是一个专注于 AI 驱动开发的开源平台，旨在让智能体（Agent）像人类开发者一样理解、编写和调试代码。它解决了传统编程中重复性劳动多、环境配置复杂以及人机协作效率低等痛点，通过自动化流程显著提升开发速度。 无论是希望提升编码效率的软件工程师、探索智能体技术的研究人员，还是需要快速原型验证的技术团队，都能从中受益。OpenHands 提供了灵活多样的使用方式：既可以通过命令行（CLI）或本地图形界面在个人电脑上轻松上手，体验类似 Devin 的流畅交互；也能利用其强大的 Python SDK 自定义智能体逻辑，甚至在云端大规模部署上千个智能体并行工作。 其核心技术亮点在于模块化的软件智能体 SDK，这不仅构成了平台的引擎，还支持高度可组合的开发模式。此外，OpenHands 在 SWE-bench 基准测试中取得了 77.6% 的优异成绩，证明了其解决真实世界软件工程问题的能力。平台还具备完善的企业级功能，支持与 Slack、Jira 等工具集成，并提供细粒度的权限管理，适合从个人开发者到大型企业的各类用户场景。