1
全局:网站和应用有何不同
如果说网站是 “用来展示的”,应用就是 “能运转的”。用户输入、数据被保存、重开还在,才是真正的应用。
我们用 Web 技术做应用。无需安装包,把做好的东西添加到手机主屏,就能像普通 App 一样用(PWA),也不必经过应用商店审核。
小贴士
第一个应用要小。一个 “待办清单” 就能学全输入、保存、删除这些应用核心。
免费 · 基础
制作应用
用说话,做出点一下就真的能用的应用
约 40 分钟9 步
完成后你将拥有
能保存数据、还能装到手机的专属 Web 应用
准备清单
Claude Pro 及以上订阅必需
这是氛围编程的大脑。最低用 Claude Pro($20/月)就足以开始;如果你每天大量创作,Max 套餐额度更宽裕。免费版可以浅尝,但很快会触及上限。
一台电脑(Windows 或 Mac)必需
配置基本无所谓,能上网的笔记本就够了。
Node.js(LTS 版本)必需
运行代码的引擎。到 nodejs.org 下载标注 “LTS” 的稳定版。安装会在第1步一起完成。
VS Code(Visual Studio Code)必需
免费的代码编辑器。在这里装上 Claude Code 扩展,就能 “和 AI 对话来编程”。注意它与微软的 Visual Studio(另一款更重的 IDE)不同。
2
第1步, 安装 Node.js 并验证
到 nodejs.org 装 “LTS” 版,在 VS Code 终端用下面命令验证。
终端
$node -v$npm -v
v20.18.0 10.8.2
出现这样就成功了
出现两个版本号即成功。
遇到报错怎么办？
3
第2步, 把 Claude 接入 VS Code
装好 VS Code 后,在扩展里装 “Claude Code”,用 Sign in 连上订阅。
小贴士
先把应用点子讲给 Claude,问 “该先做哪个功能?”,它会帮你排好顺序。
4
第3步, 新建 Next.js 应用项目
用下面命令搭好骨架。TypeScript、Tailwind、App Router 都建议 Yes。
终端
$npx create-next-app@latest my-app
✔ TypeScript … Yes ✔ Tailwind CSS … Yes ✔ App Router … Yes Success! Created my-app
出现这样就成功了
出现 “Success! Created my-app” 即成功。
5
第4步, 运行应用并预览
进入文件夹启动开发服务器,用浏览器打开 “http://localhost:3000”。该窗口开着。
终端
$cd my-app$npm run dev
▲ Next.js 15 - Local: http://localhost:3000 ✓ Ready in 1.4s
出现这样就成功了
出现默认界面即准备就绪。
遇到报错怎么办？
6
第5步, 用氛围编程做功能
向 Claude 具体描述行为。例:“把 app/page.tsx 做成 ‘待办应用’。顶部有输入框和添加按钮,添加后显示在下方列表,每项有完成勾选和删除按钮,已完成的用灰色删除线。”
在浏览器里实际点按并打磨:“完成的移到最下”“显示数量”。应用尤其重在 ‘点一点再改’ 的循环。
小贴士
发现 bug 就直接说症状:“点完成按钮没反应”,Claude 会找出原因并修复。
遇到报错怎么办？
7
第6步, 保存数据 + 让它可装到手机
现在刷新可能会丢内容。对 Claude 说 “把输入的待办保存到浏览器(localStorage),重开还在”,就更像真应用了。
接着说 “把这个应用做成可加到手机主屏的 PWA,设置好应用图标和名称”,在手机浏览器里用 ‘添加到主屏幕’ 即可像 App 一样安装。
小贴士
想确认保存是否生效:添加一项后完全关闭浏览器再打开,若还在就成功。
遇到报错怎么办？
8
第7步, 用 Vercel 发布
与网站路线相同。用下面命令部署到 Vercel,得到真实地址,可在手机打开并安装。
终端
$npm i -g vercel$vercel
Vercel CLI ✅ Production: https://my-app.vercel.app
出现这样就成功了
出现 https://...vercel.app 即完成。
遇到报错怎么办？
9
完成!以及下一步
恭喜,你做出了能输入、能保存、能安装的真正应用。
接下来登录、通知、深色模式、多端同步,都能用同样方式扩展。到职业街机里组队,挑战更大的应用吧。
