Claude Code 三合一设计工坊 · 演示文稿 · 模板库 · 交互式课程
你：帮我做个 AI 招聘工具的 pitch deck，要 investor-ready 的感觉
→ AI 跟你聊内容：什么场合？多少页？有内容了吗？
→ 出 3 个风格预览让你挑
→ 你选一个，AI 生成完整 HTML 幻灯片
→ 打开浏览器，直接演示
如果你又说：「部署到线上」
→ AI 一键部署到 Vercel，返回可分享链接，直接发投资人
你：把这个项目变成交互式教程 → https://github.com/xxx/yyy
→ AI 拉取代码，分析架构，设计 6 个模块
→ 代码旁边就是大白话翻译（一句代码配一句解释）
→ 组件之间「群聊动画」展示数据怎么流动
→ 每章结尾有测验，技术术语悬停即看解释
→ 打开浏览器，滚动学习，不离开页面
你：把我这个公司介绍 PPT 转成网页
→ AI 提取所有文字、图片、备注
→ 让你挑个视觉风格
→ 生成 HTML 版，手机电脑都能自适应
→ 可部署到链接直接发客户，也可导出 PDF
你：下周云原生大会演讲，帮我推荐个模板
AI：想给观众什么感觉？
你：想让他们觉得「酷，有技术感」
→ AI 从 32 套模板中挑了 3 个候选
→ 生成真实标题页预览让你看效果
→ 你选一个，AI 克隆模板填入内容
→ 打开浏览器，成品
# 安装
cp -r everything-in-html ~/.claude/skills/everything-in-html
# 使用
/everything-in-html
> "帮我做个产品发布的 slides"
> "把这个项目变成交互式教程"
> "有什么适合做 pitch deck 的模板？"| 你要什么 | 给它什么 | 拿回什么 |
|---|---|---|
| 演示文稿 | 几句话描述内容 | 自包含 HTML，零依赖，浏览器直接打开 |
| PPT 转换 | .pptx 文件 | HTML 版，保留文字+图片+备注 |
| 模板匹配 | 场合+情绪 | 从 32 套中推荐 3 个，生成预览供选择 |
| 交互式课程 | GitHub 链接或代码路径 | HTML 教程，含测验+动画+代码翻译 |
| 部署上线 | HTML 文件 | Vercel 可分享链接，全设备可用 |
| 导出 PDF | HTML 文件 |
技能包不仅能做一次性输出，还能生成持续更新的工作仪表盘。
┌──────────────────────────────────────────────────┐
│ 📊 项目仪表盘 最后更新 05/13 │
├──────────────────────────────────────────────────┤
│ 进行中: 3 待处理: 2 已完成: 7 通过率: 71% │
├────────────────────┬─────────────────────────────┤
│ 📋 最近任务 │ 📈 关键指标 │
│ ✅ 功能 A 开发完成│ [迷你趋势图] │
│ 🔄 正在审查 PR #42│ 指标一: +12% │
│ ⏳ 等待部署 │ 指标二: 0.84 │
├────────────────────┴─────────────────────────────┤
│ 🔗 快捷入口: [项目A] [项目B] [文档] │
└──────────────────────────────────────────────────┘
每次对话后更新一次，打开就看全局状态。适合同时跑多个事项需要总览的人。
┌────────────────────────────────────────────┐
│ 📰 会话简报 — 2026-05-13 │
├────────────────────────────────────────────┤
│ 本次做了什么 │
│ • 合并三个开源项目为统一技能包 │
│ • 审查并修复 3 个脚本的安全漏洞 │
│ • 视觉预设从 12 个扩展到 17 个 │
│ │
│ 变更摘要 │
│ 新增: 5 个视觉预设, .tour 导览文件 │
│ 修改: deploy.sh, extract-pptx.py (加固) │
│ 删除: 8 个重复的运行时文件 │
├────────────────────────────────────────────┤
│ 下一步建议 │
│ □ 安装技能包到 Claude Code 试跑 │
│ □ 跑一下新预设的生成效果 │
└────────────────────────────────────────────┘
对话结束时让 AI 生成，整合变更、关键数据、待办。适合每天多轮对话需要追踪进度的人。
┌────────────────────────────────────────────┐
│ 📋 工作区 [保存] │
├────────────────────────────────────────────┤
│ 待办 (点击切换完成状态) │
│ ☐ 跑一下新预设的生成效果 │
│ ☑ 审查并修复脚本安全问题 │
│ ☐ 安装技能包到 Claude Code │
│ │
│ 快速笔记 │
│ ┌────────────────────────────────────┐ │
│ │ 记得对比一下新方案再决定方向 │ │
│ └────────────────────────────────────┘ │
│ │
│ [上次未完成] 审查导出脚本 │
└────────────────────────────────────────────┘
基于 contenteditable + localStorage 自动保存，每次会话打开同一个文件，状态自动恢复。
- 零依赖 — 所有输出是单 HTML 文件，不需要 npm、构建工具、服务器
- MIT 协议 — 可自由使用、修改、分发
- 安全审计 — deploy.sh 路径穿越已修复，extract-pptx.py 已加固，Python 脚本通过类型审查
合并自 @zarazhangrui 的三个 MIT 开源项目： frontend-slides · beautiful-html-templates · codebase-to-course
MIT 许可，详见 LICENSE。