小白用Claude Code把纯文字变成炫酷PPT并部署到Github上，可以用网址访问

大家好，我是火箭叔

💡读完这篇，你会掌握：把任何文字稿 → 网页 PPT → 发布上网，全程靠对话完成。用 Claude Code，小白也能把一篇文字稿变成炫酷网页 PPT，还自带网址，别人打开就能看。全程不用自己写一行代码。

01

开干前:脑子里先有一张图

整条流程其实就 8 步：

1. 在桌面建好「工作区文件夹」和「项目文件夹」
2. 用 VS Code 打开项目文件夹，启动 Claude Code
3. 跟 Claude 对齐思路（不要让它直接写代码）
4. 让 Claude 帮你装 GitHub CLI（需要科学上网）
5. 用 gh auth Login 把 GitHub 账号登上
6. 安装 find-skills 这个「技能搜索器」
7. 用 find-skills 找到 frontend-slides 技能，把你的文字稿丢进项目文件夹，让 Claude 自动生成 PPT
8. 部署到网址（GitHub Pages 或 Vercel）

下面一步一步来。

02

前期环境准备

项目与工具初始化

首先建项目文件夹

然后建tasks文件夹

再打开VScode

第四步打开文件夹

第五步打开刚建的文件夹

Mac用户参考下面这张图

打开文件夹后确认左边已经有这2个文件夹了

第六步点击图标打开Claude

第七步万能公式，先写这句话，Claude就不会瞎干，你可以根据Claude提供的方案，指挥他:

我是小白，我现在想干XXX，让我可以实现XXX，你先不要写代码，我们先对齐思路，对齐后再开干。

GitHub CLI 安装配置

先确认电脑开着魔法网络

⚠安装GitHubCLI需要"魔法"网络，不能明说，懂的都懂。如果没开，安装命令会卡死。一旦开好，直接告诉Claude「刚才没开XXX,现在开了」让它重试就行。

高手可以直接用命令行：安装 GitHub CLI（gh）

GitHub CLI 是 GitHub 的命令行工具，用来创建仓库、推送代码。一条命令安装：

winget install --id GitHub.cli

装完后登录：

gh auth login

选 GitHub.com → HTTPS → Login with a web browser，浏览器点授权就完事了。

🎁Windows 下建议新开一个终端窗口执行，否则可能找不到 gh 命令。如果网络不好（国内常见），记得开魔法。

第八步装完之后,让Claude帮你打开浏览器

⚠千万不要自己手动开浏览器！万一你打开的不是默认浏览器，登录信息对不上，前面全白干。一句「帮我打开浏览器」就行。

在弹出的GitHub登录页,用Google账号登录

提前在浏览器登好你的Google账号，然后直接点「Continue with Google」——免去注册和填邮箱密码的麻烦。如果你还没有 GitHub 账号，点页面上的 Create an account 用邮箱注册一个（免费）。

把GitHub账号绑到本机(gh auth 1ogin)

第九步: 新开一个PowerShell终端

Claude自带的终端不行，必须自己新开一个。

怎么开?

同时按键盘上的windows键+ X：

在弹出的菜单里点「WindowsPowerShell(管理员)」：

第十步在powershell里输入gh auth login , 回车

接下来会一连串问你几个问题，按下面这个顺序一个个回答：

• 问题①:where do you use GitHub?

选GitHub.com，直接回车（默认就是它）。

• 问题②:what is your preferred protocol for Gitoperations?

选HTTPS，直接回车。

• 问题③:Authenticate Git with your GitHub credentials?

自己敲一个Y,再回车。

• 问题④:How would you like to authenticate GitHub CLI?

选Login with a web browser，直接回车。

第十一步: 复制屏幕上的8位验证码(例如8B22-77C5)

浏览器会弹出一个页面, 把刚才那8位密码输进去,点Continue

第十二步:进入Authorize GitHub CLI页面, 点Authorize github完成授权

第十三步: 看到这个绿色对勾congratulations,you're all set!!就说明授权成功

安装技能搜索器

find-skills是一个Agent技能包，装完以后你只要问Claude「有没有能帮我做 XX 的技能？」，它就会自动从skills.sh注册中心搜索并推荐合适的技能。

第十四步: 复制网址, 回到claude对话框, 发这一句

我是小白,我想安装这个 skills
https://github.com/vercel-labs/skills/blob/main/skills/find-skills/SKILL.md

第十五步:claude会给你解释这是什么, 然后一条命令帮你装好

看到「安装成功！find-skills已安装到ClaudeCode，现在可用了」就OK了：

03

寻找并安装演示文稿技能

搜索合适的技能

用find-skills找演示文稿技能

第十六步: 直接问claude:「有没有能帮我做演示文稿的技能?

Claude会列出搜到的技能, 按安装量排序,并给出推荐

通常Google官方的google workspace/clie recipe-create-presentation安装量最高，但它做的是Google Slides,不是网页PPT，不太符合我们要部署成网址的目标。

第十七步: 如果你已经知道哪些技能好, 直接把链接丢给claude做对比

例如把这两个链接丢给Claude，让它比对：

https://github.com/zarazhangrui/frontend-slides

https://github.com/Lijigang/Ljg-skills/blob/master/skills/Ljg-present/SKILL.md

Claude会做完整的对比分析，告诉你哪个最匹配你的目标：

这次的结论： frontend-slides （1 7K Star、专做网页幻灯片、能部署 GitHub Pages、小白友好）和你的目标最匹配。可以让 Claude 把它装上。

04

生成网页PPT

准备文字稿

第三步：把文字稿放到项目文件夹

在桌面建一个项目文件夹，把你的文字稿（.txt 就行）放进去。

比如我的例子：AI赋能OPC跨境电商.txt，内容就是一个演讲稿，纯文字，没有任何格式。

VSCode左侧立刻能看到这个文件：

对话生成PPT

在 Claude Code 里直接说：把这个 XXX.txt 生成 HTML 演示文稿。

Claude Code 会自动：

1. 读取你的文字稿，理解内容结构
2. 问你几个问题：用途（演讲/汇报/教学）、长度（5-10页/10-20页/20+页）、要不要能在浏览器里编辑
3. 生成 3 个风格预览让你挑——看效果选，不用凭空想象
4. 生成完整 HTML 文件，包含翻页动画、键盘导航、全屏模式

风格预览长这样

Claude Code 会生成 3 个不同风格的标题页让你选：

• 暗调植物风：深黑底 + 金色光斑，沉稳高级

• 复古编辑风：奶油白底 + 几何装饰，温暖有故事感

• 柔和几何风：灰蓝底 + 白色卡片，清爽现代

你看哪个顺眼就选哪个，然后它一次性生成完整 PPT。

我的 29 页 PPT 生成了什么

章节	内容
封面	标题 + 标签 + 副标题
开篇	自我介绍、OPC 概念
第一章	早年红利 & 骚扰式营销
第二章	认知颠覆（Matt、8秒法则等）
第三章	AI 破局（红人、小语种、中年焦虑）
实操方法	4个方向的具体做法
结尾	金句 + 总结

每一页都有渐进动画，按键盘 → ← 翻页，F 全屏。最厉害的是——按 E 键可以直接在浏览器里编辑文字，改了按 Ctrl+S 保存。

🎨核心体验：你不用懂 HTML/CSS/JS，不用排版，不用调动画。所有技术细节 AI 帮你搞定，你只负责选风格和确认内容。

核心体验：你不用懂 HTML/CSS/JS，不用排版，不用调动画。所有技术细节 AI 帮你搞定，你只负责选风格和确认内容。

做出来不满意?一句话让它重做

如果生成的 PPT 你觉得太丑， 不用客气, 直接说：

Claude 会承认上一版"太死板"，然后重新设计一个真正好看的——AI 不会伤心，请放心吐槽。

05

部署到公网获取访问链接

最后一步：一键部署到网址

文件生成好了，接下来发布到网上。用 Vercel 一键部署：

直接告诉Claude，让他帮你部署到Github，让别人可以访问。

第一次需要登录（用 GitHub 账号就行），之后就一条命令搞定。部署完会给你一个网址：

`https://你的项目名.vercel.app`

任何设备打开就能看——手机、平板、电脑全兼容。发给别人也只需要甩一个链接。

⚡全程不需要买服务器、不需要配域名、不需要懂部署。Vercel 免费额度对个人完全够用。

06

总结

小白操作清单

步骤	做什么	时间
1	装 GitHub CLI + 登录	5分钟
2	装 frontend-slides 技能	1分钟
3	把文字稿放进文件夹	1分钟
4	跟 Claude Code 对话生成 PPT	3分钟
5	一键部署到网址	2分钟

总计 10 分钟左右，从一篇纯文字到拥有一个带网址的精美网页 PPT。

🌟这就是 AI 时代做内容的逻辑：你负责想法和内容，AI 负责所有技术实现。不需要学编程，不需要学设计，不需要学部署。对着 AI 说话，就行了。

补充：还能做什么

• 导出 PDF：`bash scripts/export-pdf.sh 文件名.html`生成 PDF 发给别人

• 易拉宝海报：让 Claude Code 根据内容生成 80cm×200cm 的展架海报
  

• 导入飞书文档：让 Claude Code 把内容转成飞书云文档，用壹伴导入公众号
  

一句话总结

1. 建工作区 → 桌面建英文文件夹，里面再建项目文件夹和 tasks
2. VS Code 打开项目文件夹 → 启动 Claude Code
3. 先对齐思路再开干 → 「我是小白，我想干 XX，先别写代码」
4. 开 VPN 装 GitHub CLI → 让 Claude 装，让 Claude 开浏览器
5. 新开 PowerShell跑gh auth Login → 一路回车 + 输 8 位验证码 + 浏览器授权
6. 装 find-skills → 谷歌搜链接丢给 Claude
7. 找 frontend-slides → 装上
8. 文字稿丢进项目文件夹 → 告诉 Claude 「文件在这」
9. 选风格 → 让 Claude 生成 → Vercel 一键部署
10. 不满意就吐槽, 让它重做