不会写代码，也能自己做 App：一篇教你「Vibe Coding」从网站到上架 App Store 的完整实战

一、准备工作：先拿到一套「最强 AI 编程工具」

要开始 Vibe Coding，你需要几件东西：

1. 一个能跑 AI 编程 Agent 的 Web 环境

推荐：sandbox.dev 这是一个已经帮你把各种模型和开发环境都预配好的在线「工作台」。

2. 几款顶级 AI 编码模型 / Agent

有一个很酷的事实：

就算你零基础，今天你也可以直接用到和顶级开发者同一档次的 AI 编码模型和工具。

世界上最好的开发者，日常就在用这些工具。而在这期内容里，我们用的就是同一批东西。

具体有三大类工具（桌面 / Web 端）：

1. Claude Code
2. Codex（很多人认为是目前最强的 AI 编码模型之一）
3. Gemini CLI
4. 一个移动端 App「Vibe Code App」

• 用它可以在手机上做和 sandbox 类似的事
• 同样能调用 Claude、GPT-5、Gemini 等 API
• 适合做语音笔记 App、移动端图片编辑 App 等

你可以先去 sandbox.dev 和 vibecodeapp.com 各注册一个账号

• 登录之后就可以跟着后面实操。
• 在 sandbox 里创建一个新的「sandbox 环境」

创建 sandbox 时你可以选择：

• 用哪个模型（例如 Claude Code）
• 用什么技术栈（例如 Next.js）

如果你想做一个现在大家常用、看起来够现代的 Web 网站，我会推荐你选 Next.js。这是目前最流行的一种组合。 所以我们会选：Claude Code + Next.js，然后就可以马上在 Web 里开干了。

此时我们已经：

• 打开 Claude Code
• 打开 Codex
• 打开 Gemini CLI

在正式开始疯狂造静态页面之前（例如 landing page、营销页、Lead Magnet 页、Dashboard 等等），我会先讲几个基础概念：

• 这些工具到底是什么？
• 为什么我觉得它们会是未来五年甚至更久最值得掌握的一套工具？
• 三个环境里面都能用哪些模型？
• 有哪些常用指令值得记住？

为什么要盯着这些编码模型：Claude Code、Codex、以及大公司下注

先说我为什么最近对这些编码模型这么上头，尤其是：

• Claude Code
• 以及最近 OpenAI 的 Codex

原因很现实： 这些公司都在为「AI 编码」这件事砸几十亿美金级别的钱。

举个例子：Anthropic 最近又拿了 130 亿美金的融资，目标就是打造世界上最强的 AI 编码模型。

Anthropic 的公司战略很明确： 他们要做的是「对开发者极度友好」的模型。

这也是为什么我要从 Claude Code 开讲。 虽然它一打开看起来挺吓人：

• 黑乎乎的终端
• 一堆看不懂的提示文本
• 很不像普通用户熟悉的图形界面

但把壳子扒开，你会发现：

• 左边其实就是 Claude Code 的「对话工作区」
• 右边是 Web 预览区（带可分享链接）
• 你在左边说什么，它就会去改右边这套代码，然后重新跑一遍给你看

我们来做一个最基础的例子

二、第一个体验：用一句话生成「Hello World」网页

进入 sandbox 后，新建一个项目：

1. 选择模型：Claude Code
2. 选择技术栈：Next.js

• 这是目前 Web 里最常用的一套现代栈
• 默认就长得挺好看，不需要你从零写样式

打开之后你会看到：

• 左边是「像终端一样」的聊天区
• 右边是网页预览

在左边输入一句话：

「请把这个页面改成一个只显示 Hello World 的 Landing Page，只要这一行内容。」

然后等一会儿，Claude 会：

• 自动改动项目里的代码文件
• 重新编译
• 在右侧预览里给你一个居中显示的 Hello World 页面

这就是 Vibe Coding 最基础的感受：

你不需要会「写 React 组件」 你只需要会「说人话」。

这就是 Vibe Coding 的核心：

你只负责说「我想要什么」， 剩下的事情交给 AI， 模型会自己去理解现有代码结构、做修改并跑起来。

随着模型变得越来越聪明、越来越稳，这种「你说 vibe，AI 写实现」的体验会越来越丝滑。

AI 改完之后，会告诉你：

• 已完成哪些文件改动
• 页面现在是什么样子

右边预览区刷新，你就会看到一个居中显示「Hello World」的页面。

接着你可以继续加要求，例如：

「让字体更偏日系风格，但保持英文」 「把这页改成 Riley 的 YouTube 频道 landing page」 「上网搜索 Riley Brown AI，为我做一个他的 Linktree 页面，样式超级简洁。」

Claude Code 会：

• 上网搜索相关信息（比如 TikTok、Twitter、公司网站等）
• 自动构造出一个简易 Linktree 页面
• 把这些链接以干净的布局呈现在右侧预览里

然后，你可以复制这段提示词，分别丢给 Codex 和 Gemini CLI，看不同模型在同样提示下的表现差异。 你会发现：

• Claude Code 非常稳
• Codex 有时候输出特别猛，但也可能漏一些东西
• Gemini 的风格又不太一样，样式上可能更对你的胃口

这也是使用多模型的一大乐趣： 你可以在同一个需求上，挑出你最喜欢的版本。

三、学会几条 Claude Code 的「生存指令」

Claude Code 里有一个命令系统，你可以通过按 / 调出命令列表，比如：

• /add-directory
• /agents
• /bash
• /bug
• /clear
• /compact
• /config
• /context
• /cost
• /model
• 等等

这里重点讲几个最实用的：

1. /cost

• 输入 /cost 回车，它会告诉你到目前为止花了多少钱
• 比如「到现在我们大概花了 0.35 美金」这种

2. /model（切换模型）

• 你可以把默认模型换成 Opus 等更强型号
• 比如从「默认（Sonnet + Opus 混合）」切成「只用 Opus」
• 代价：Opus 大概是 Sonnet 的五倍价格，但能力更强
• 同样道理，在 Codex 那边可以切 GPT-5 high 或 GPT-5 medium
• 一般：
• 日常小改动：用 medium 就够
• 第一次大改动、特别复杂的需求：可以上 high / Opus，虽然慢一点但更稳

3. 上下文窗口 & 为什么要 /clear 和 /compact

用过 ChatGPT 或 Claude 聊天的人应该都知道： 对话越聊越长，模型越容易跑偏。

这是因为：

• 模型有一个「上下文窗口」上限
• 聊天内容、代码、历史修改越多，就越接近这个上限
• 当「装不下」时，它会开始忘细节、理解混乱

很多人现在已经不再说「提示词工程」，而是说「上下文管理 / Context Engineering」： 你的任务不是写一个神奇大咒语，而是保证模型拿到的是正确、适量的上下文。

Claude Code 在上下文接近上限时，会给你一个小圆点提示，告诉你「上下文快满了」。

这时你可以：

• /clear：清空上下文
• 对话越长，模型越容易跑偏
• 当你觉得它「越来越不听话」，可以 /clear 从头来过
• 代码文件不会被删，清掉的是聊天上下文
• /compact：压缩对话记录
• 如果你做了很多轮迭代，但又不想彻底重置
• 可以让 Claude 把当前对话总结成一个更短的「压缩版上下文」，保留重点，同时腾出空间继续往下做
• 这样能保证后续回答更干净，同时不丢重要信息

/compact 会：

• 遍历当前长对话（哪怕上百万 tokens）
• 总结出一个浓缩版记录
• 用这份总结替换冗长历史，对后面继续修改代码很有帮助

4. /resume（恢复历史对话）

如果你之后想回到某个之前的项目 / 对话，可以：

• 输入 /resume
• 选择你要恢复的会话
• 重新打开那次工程的上下文和代码状态

总结一下对 Claude Code 的核心认知：

• 左边，你用自然语言下命令
• 右边，你看到的是代码执行后的结果
• 两边之间的桥梁，就是「当前代码仓库 + 上下文」
• 再配合几个指令（模型选择、clear、compact、cost、resume），你就能掌控它的行为

此外，右上角还有一个非常重要的能力： 分享链接。 选好你满意的预览版本之后，可以直接复制链接发给别人，别人不需要安装任何东西就能打开体验。

四、静态页面与 Vibe Marketing：先学会「一小时内做出一个像样的官网」

4.1 用截图让 AI 模仿 UI

你不需要会设计，只需要：

1. 找一个你喜欢的 Landing Page（可以是别人的产品页）
2. 截图保存到电脑
3. 在 Claude Code 左侧点击「上传图片」，把截图发给它
4. 输入指令类似：

「请根据这张截图的布局和风格，为我的产品 Vibe Code App 做一个 Landing Page。 保留我现有网站上的文案，但整体要更适合转化（让用户愿意点击下载 / 注册）。」

Claude 会：

• 把图片当作「设计稿」参考
• 生成你自己的版本

接下来，你可以不断用自然语言去微调：

• 换背景颜色：

> 「把背景改成深灰，去掉刺眼的粉色。」

• 调整文案：

> 「主标题改成‘The app that builds mobile apps.’，副标题强调用手机就能做 App。」

• 优化按钮：

> 「去掉复杂组件，直接用两个大按钮：App Store 和 Google Play，黑底白字，更容易点。」

你完全可以把同一组指令复制到 Codeex 和 Gemini，让三家各做一版，然后挑最喜欢的那一个继续细化。

4.2 Vibe Marketing 的玩法：Landing Page + Lead Magnet

所谓「Vibe Marketing」，有点像「用速度和体验来验证一个想法值不值得做」。

典型流程是：

1. 你有一个想试验的方向：

• 一个小工具
• 一门课程
• 一个功能想法

2. 先不急着真正开发，而是：

• 用 Claude Code 快速做一个 Landing Page
• 用 Tally 做一个表单
• Landing Page 上讲清楚：你打算做什么，解决谁的问题
• 表单里收集：
• 邮箱
• 需求
• 预算 / 用例（看具体场景）

3. 用户愿意留下邮箱甚至愿意先付一点钱，你再决定要不要把这个产品做下去。

这个过程中，Landing Page 就是你的「实验器」，而 Vibe Coding 让你几小时甚至几十分钟内就能把实验器搭出来。

五、Lead Magnet 实战：用 Tally 和 Claude 做一个能收集邮件的「指南领取页」

来一个完整操作路径，你可以直接照着做：

1. 写一份你真的有料的 PDF / 幻灯片指南

• 例如：《从零开始用 AI 做 App 的 10 个关键步骤》
• 用 Gamma / Canva / Excalidraw 做都行

2. 打开 Tally，新建一个表单：

• 标题：Get the guide
• 字段：
• 名字
• 邮箱
• 一两个调研问题（例如：你目前用过哪些 AI 工具？你主要想自动化什么？）

3. 在 Tally 里添加第 2 页：

• 标题：Get your guide
• 内容：嵌入刚才那份 PDF 的公开链接

4. 点击 Tally 的「Publish」，在「Share → Embed forms → Standard embed code」里复制那段 <iframe> 嵌入代码。
5. 回到 Claude Code，新建 Next.js 项目，对它说：

「我写了一份关于 Vibe Coding 的完整指南，想做一个简洁的 Landing Page： – 页面重点解释用户能得到什么 – 引导他们填写表单兑换指南 – 把这段 Tally 的嵌入代码插在页面中间 – 整体风格极简、干净、可信。」

并把刚才那段 <iframe> 代码粘进去。

Claude 会生成一个：

• 有清晰标题
• 有简单说明
• 中间嵌入表单
• 底部可以放一两句社交证明

的引导页。

最后：

• 复制这个 sandbox 的分享链接
• 发到 X / 小红书 / 朋友圈
• 看看有多少人愿意留下邮箱

你就完成了第一个 Vibe Marketing 闭环。

六、用 Vibe Coding 做「演示文稿、仪表盘、小游戏」

当你能做 Landing Page 之后，可以顺手解锁三种静态「工件」：

6.1 在线 Slide Deck：把你的研究变成可分享的演示页

思路是：

1. 你有一段关于某个主题的研究大纲 / 笔记（比如「Vibe Coding 完整路线图」）
2. 截一个简单的参考图（甚至是你手绘的一张框架图）
3. 在 Claude Code 里上传，输入：

「请做一个在线 Slide Deck： – 页面是一个全屏演示模式 – 白底黑字，风格接近 Teenage Engineering 那种克制极简 – 周围用淡色线条做一点点点缀 – 至少 9 张 slide，每张讲一个关键点 – 你可以先用网上资料把这个主题讲完整。 – 底部右侧放一个 slide 切换按钮，固定在位置上。」

Claude 会：

• 生成一个全屏 slide 模式的网页
• 支持点击按键左右切换
• 内容来自：你给的提示 + 它查到的补充信息

你可以：

• 把这个链接发给别人在线看
• 以后再接自定义域名、加上登录 / 付费墙

6.2 仪表盘：从一堆数据到「给投资人看的 Dashboard」

如果你有一份业务数据（就算是你让 ChatGPT 帮你编的），例如：

• 6 个理发师，一个月内每天的服务次数、营收、小费、支付方式等

你可以：

1. 把这份数据整体复制
2. 粘到 Codex（GPT-5 High）里，说：

「请为 Riley's Barber Shop 做一个数据仪表盘： – 至少包括： - 总营收、总单数等关键指标 - 每个理发师的小费率和营收贡献 - 支付方式占比 - 按日期的营收曲线 - 累计营收随时间变化 – 视觉上要适合向潜在投资人展示。 – 用 Next.js 搭结构。」

Codex 会：

• 解析数据
• 生成多个可视化组件
• 拼成一个整页 Dashboard

你再根据审美需求，让它调整样式即可。

6.3 小游戏：用 3JS 玩一把

新建 Claude Code 项目，栈选：

• gamedev → 3JS

然后说：

「请帮我做一个简单的 3D 小游戏： – 玩家控制一个纸飞机在空中飞 – 需要躲避红色障碍物 – 吃到金币加分，碰到障碍 Game Over – 可以上 GitHub 搜一些热门 3JS 小游戏作为灵感。」

跑完后你会得到一个：

• 操作简单
• 规则清楚
• 有分数、有失败状态

的小游戏。虽然远称不上「大作」，但足够证明：

你可以用自然语言，驱动 AI 帮你写出一个可玩的 Prototype。

七、升级难度：做一个带登录、数据库和图片上传的笔记 Web App

现在，从静态内容跨到「真正的 Web 应用」。

7.1 为什么用 InstantDB 而不是 Supabase

很多人会用 Supabase 做数据库 + 登录。 但现实是：

• Supabase 功能很全、也很复杂
• 对 AI 来说，它的 API 和权限配置不算「好驾驭」
• 你一旦不会调，很容易陷入各种奇怪的报错里

相比之下，InstantDB 更适合现在的 Vibe Coding：

• API 设计对 AI 更友好
• 文档简洁
• 权限配置相对清晰
• 模型比较容易一次接通

7.2 搭一个「可以登录、记笔记、传图片」的应用

完整流程：

1. 打开 instantdb.com，注册一个账号
2. 新建一个 App，叫 Riley To-do App 或任何你想要的名字
3. 记下它给你的 Public App ID
4. 回到 sandbox，新建 Claude Code + Next.js 项目
5. 对 Claude 说：

「我想做一个简单的笔记应用： – 用户可以用邮箱登录（用 magic link） – 登录后可以：新建、编辑、删除笔记 – 每个笔记可以上传一个或多个图片附件 – 后端使用 InstantDB 作为数据库和身份系统 – 这是我的 Public App ID：[粘贴] – 请先去读 InstantDB 文档，确保第一次就能跑通， 如果需要修改权限配置，也请告诉我需要粘贴什么到 Permissions。」

等一段时间之后，你会看到：

• 登录页面（输入邮箱、发送验证码）
• 登录成功后，是一个笔记列表
• 可以新建笔记、输入标题和内容
• 有一个上传图片的按钮

在 InstantDB 后台的 Explorer 里，可以看到：

• users 表
• notes 表
• files 或类似存储表

7.3 修 UI、修 Storage 权限

UI 丑不要紧，你可以：

1. 截一张当前界面的图
2. 上传给 Claude，说：

「现在文字颜色太浅，在浅背景上看不清楚。 请把整体风格改成更简洁、有质感的风格，参考 Bear Notes。 不要动任何和数据库、鉴权相关的逻辑。」

Claude 会：

• 改样式和布局
• 让整体看起来更像一款可用的产品

如果图片上传报错（例如「Permission denied」「Failed to fetch」），你可以：

1. 把完整错误信息贴给 Claude，让它先尝试修代码调用方式
2. 如果仍然报「权限问题」，告诉它：

「请给我一段可以直接粘贴到 InstantDB Storage Permissions 中的配置， 用最简单、可用的版本。」

它会给你一段规则文本，你：

• 复制 → 打开 InstantDB → Permissions → Storage
• 粘贴 → 保存

回到 App，再次上传图片，如果成功，就会看到图片显示在笔记里。

这样，你已经用 Vibe Coding 完成了一个：

• 有登录
• 有持久化数据
• 有图片上传
• 用真实云数据库的 Web App。

八、让 AI 帮你接入「最前沿的图像模型」：缩略图编辑器 App 实战

Web App 有了，我们把它变得更「AI」一点——做一个专门帮你改 YouTube 缩略图的工具。

8.1 先画出产品原型

你可以打开 Excalidraw 之类的画板工具，画出你想要的界面：

• 上方：一个大框，用来显示当前缩略图
• 下方：一个输入框，里面写着「描述你想要的改动」
• 底部：一个水平条，里面放着 V1、V2、V3…… 代表所有历史版本

写一些文字注释，比如：

• 「这里上传缩略图」
• 「在这个输入框里输入操作指令」
• 「每次生成新图，就在下面增加一个版本缩略图」

画完后，截图保存。

8.2 把原型交给 Claude，让它先做「假」的 UI

在 Claude Code + Next.js 项目中：

1. 上传刚才的截图
2. 输入指令：

「请根据这张草图，搭建一个缩略图编辑器的 UI 原型： – 现在先不用接入真实图像编辑，只做前端布局 – 用户可以上传图片 – 有一个输入框可以输入文字 – 每次点击‘应用’按钮时，在底部增加一张‘版本缩略图’（先用同一张图占位也没关系） – 整体风格极简，黑白灰为主。」

Claude 会帮你把这个原型变成一个可以点的网页。 虽然此时不能真的改图，但交互流程已经完整。

8.3 接入 Nano Banana / Gemini Image API

接下来是关键一步： 让这个原型真正能「改图」。

你需要：

1. 在文档或别的 AI 工具（比如 ChatGPT / Perplexity）里，问清楚：

「在 Next.js 中调用 Nano Banana / Gemini Image 编辑 API 的完整示例代码。」

2. 整理好它给你的：

• API Endpoint
• 请求体格式
• 如何上传图片（base64 / multipart）
• 如何接收返回的图片

3. 回到 Claude Code，把原型项目打开，对它说：

「我想让这个缩略图编辑器真正工作： – 上传缩略图后，前端要能把图片和文字指令一起发给 Nano Banana API – API 返回一张新图，把它显示在主图区域 – 同时把旧版缩略图放进右侧版本列表 – 版本列表里的每一张图都可以被选中，变成新的‘当前图’，再继续编辑 – 下面是 Nano Banana 的 API 文档和 Next.js 调用示例，请你认真阅读并正确集成。」

4. 去 Google AI Studio 生成一个 Gemini API Key，把它给 Claude，让它正确地配置在项目里（一般是 .env + 后端 route）。

完成后，你就可以在浏览器里实际测试：

• 上传一张缩略图
• 输入「给人物戴墨镜」
• 等一会儿，主图换成戴墨镜版本，底部多出 V2
• 再输入「让头发变长、变成金色」
• 主图变成长发金发版本，底部出现 V3
• 你可以来回在 V1/V2/V3 之间切换，选择一个最满意的，再继续编辑

同时，你可以不断微调交互和布局，让它更符合你的创作者习惯：

• 主图更大一点
• 版本列表放右侧、缩小一点但保证不被裁切
• 点击版本时有明显高亮

最后，你得到的是一个真正在为你做事的 AI 产品，而不只是一个 Demo：

• 底层用的是 Google 的最新图像模型
• 体验完全由你决定
• 对很多内容创作者来说，这种垂直工具是完全可以收费的

九、Vibe Coding 上手机：用 Vibe Code App 做语音笔记 & 图像编辑 App

前面的例子都在浏览器里完成。 现在换个视角：我们在手机上做同样的事情。

工具是 Vibe Code App。

9.1 做一款语音笔记 App：「Monkey Note」

目标功能：

• 底部有一个圆角大按钮写着「Record」
• 点击开始录音，再次点击结束录音
• 结束后自动：
• 用 OpenAI Whisper 识别语音为文字
• 用 GPT 把内容总结成一段摘要
• 用 GPT 帮你起一个标题
• 首页展示笔记列表：标题 + 摘要
• 点进去可以看到：
• 摘要
• 点击按钮展开完整转写文本

在 Vibe Code App 里，你只要把这些需求一次性描述清楚， 再指明：「用 OpenAI API（Whisper + GPT）来做转写和摘要」， Vibe Code 就会：

• 自动生成整个 App 的代码
• 在手机里编译运行

第一次运行出现报错也没关系：

• 像在 Claude Code 里一样，把错误信息复制到提示输入框
• 对 Vibe Code 说：「这是报错，请帮我修好，让录音和转写流程流畅、稳定。」
• 它会修改代码，再重新编译
• 重复这个过程几次，App 基本就稳定了

这时你已经有了一个真的可以每天用的语音笔记 App：

• 所有数据默认保存在手机本地
• 不用先去配置云端数据库
• 后面如果要同步，只要再接一次 InstantDB 就行，思路和 Web App 一样

9.2 把缩略图编辑器也搬上手机

对于前面那个缩略图编辑器（Nano Banana + Gemini）：

• 你可以在 Vibe Code Web 后台看到对应的工程
• 在电脑上继续用 Claude 细化产品体验
• 然后用一个二维码让它同步到手机

这样，你就得到了一个：

• 手机版缩略图编辑 App
• 同样支持上传照片、用自然语言改图、保留版本历史
• 可以一键导出全部图片到相册

从创作者视角看，这已经非常接近一个可以上架、收费的小工具 App。

十、最后一步：部署到 App Store 和 Web

10.1 把手机 App 推上 App Store

在 Vibe Code App 的「部署」界面，你需要几样东西：

1. Expo Access Token

• 按提示在 Expo 平台注册账号
• 创建一个 token
• 粘贴回来即可

2. Apple Developer 账号

• 这部分本身略微麻烦，需要单独的注册、审核流程
• 一旦开通，你就可以无限次上传 App

在 Vibe Code 的配置里填好：

• App 名称
• Bundle Identifier（自动生成即可，一般不用改）
• 版本号（比如 1.0）
• 用 AI 生成一个 App 图标

然后点击：

• 「Start build process」

Vibe Code 会自动：

• 用 Expo 构建
• 与你的 Apple 开发者账号绑定
• 把构建产物上传到 App Store Connect

之后你只需要：

• 在 App Store 后台补全：
• 应用描述
• 截图
• Terms of Service / Privacy Policy 的链接（可以用 Notion 页快速写一份）
• 提交审核

等通过，就可以在全球用户手机上下载到你刚才用 Vibe Coding 做出来的 App。

10.2 把 Web App 部署到互联网上

Web 端的部署有两种方式：

1. 未来的一键部署按钮

• sandbox.dev 会在顶部加一个「Deploy」按钮
• 点击即可自动部署到某个托管平台（视产品发展而定）

2. 手动部署（现在就能用）

• 在 sandbox 项目右上角点击「Download」
• 它会同时：
• 在云端保存你的项目
• 给你发一封邮件，里面有下载链接
• 下载代码后，用 Cursor / VS Code 打开
• 初始化一个 Git 仓库，推送到 GitHub
• 在 Vercel / Netlify 上：
• 关联到这个 Git 仓库
• 配置环境变量（API Key、InstantDB App ID 等）
• 点击部署

等部署完成，你就得到一个：

• 真正面向公众可访问的 Web 站点 / Web App
• 可以接自定义域名
• 可以放在产品主页、博客、简历里
• 可以作为一个可收费的产品存在

结尾：为什么现在是「学 Vibe Coding」的最好时机

你会发现，整套流程下来，你几乎没有直接写过「底层业务代码」：

• 静态页面：让 AI 抄 UI、写文案、调样式
• Lead Magnet：表单 + Landing Page，快速验证需求
• Slide / Dashboard / 游戏：用数据和草图喂给 AI，生成可以 demo 的工件
• Web App：InstantDB 解决登录和数据持久化
• AI 能力：Nano Banana / Gemini Image API 让你的 App 有真正差异化
• 移动端：Vibe Code App 帮你把同样的逻辑搬到手机上
• 部署：Web + App Store，真正变成别人手机里的一个图标

真正的门槛已经不再是「能不能写代码」，而是：

• 你能不能清楚表达自己想要的体验
• 你能不能管理好上下文，让模型专注在当前任务
• 你有没有耐心把报错一个个丢回去，让 AI 帮你修到跑通

如果你现在就开始练习 Vibe Coding， 等到一两年后「人人都在用 AI 做 App」的时候， 你已经不仅仅是在用工具，而是在设计体验、做产品、赚到真正的收入了。

这篇文章讲完，你完全可以照着这条路径，从最简单的 Hello World 开始，一直走到：

• 做出自己的缩略图编辑器
• 做出自己的语音笔记 App
• 把它们部署到 Web 和 App Store

剩下的，就是你要用这些能力去解决什么问题了。

三、

五、静态页面 & Vibe Marketing：Landing Page、Lead Magnet、Dashboard、小游戏

接下来进入「静态页面」这个大类。这里作者把它称为 Vibe Marketing 的典型场景。

静态页面包括：

• Landing Page（官网首页 / 活动页）
• Marketing Page（营销页面）
• Lead Magnet 页面（引流资料下载页）
• Dashboard / 仪表盘
• 各种简单的展示型页面 / 文档页
• 甚至简单的小游戏

这一类内容的共同特点是：

• 结构简单（前端为主，后端逻辑少）
• 很适合快速试错 &验证想法

1. 用截图当「设计稿」，让 Claude Code 抄 UI

如果你不喜欢从零写 Landing Page（很多人都不喜欢），可以用一个投机但很好用的方法：

1. 找到一个你喜欢的网页 / 截图
2. 保存成图片
3. 在 Claude Code 里上传这张图片
4. 给一句指令，例如：

「请为我的应用 vibecodeapp.com 设计一个 Landing Page。 样式尽量参考这张图，但保留我现在网站上的文案，并且整体为转化率优化：让更多人愿意点击并注册。」

Claude Code 会：

• 读取图片里的布局结构、颜色风格
• 把你现有站点的文案混合进去
• 最后生成一个高转化、风格类似的新 Landing Page

你也可以：

• 把这一套需求复制粘贴到 Codex
• 再复制到 Gemini CLI
• 让三家模型分别给你三个版本
• 然后你挑中最喜欢的一个，继续在上面做迭代

2. 迭代修改：文字、颜色、布局、交互

当你看到 Claude Code 输出的页面后，你可以继续微调，比如：

• 改标题：

> 「请把主标题改成 ‘The app that builds mobile apps’」

• 改背景：

> 「把左侧手机屏的背景调成深灰，整体背景改成更中性的深灰色，去掉刺眼的粉色」

• 改布局：
• 把 App Store / Google Play 的按钮从组件里移出来
• 改成简单的纯黑按钮，更容易点击

你可以一边截图、上传图片，一边给非常具体的局部修改指令，比如：

「针对这段区域（附截图），只改文案，不动布局，让它更适合一个‘在手机上生成 App’的产品。」

Claude 会：

• 识别你截图中标出的区域
• 根据你的描述，局部修改那一块的代码

同样的迭代思路也可以在 Codex 和 Gemini 身上用。 你会很快有直觉：谁在文案 / UI 风格上更合你胃口。

六、Lead Magnet：用 Tally 嵌入表单，收集邮箱 + 发放 PDF

静态页面的一个重要用途就是「收集线索」，也就是做 Lead Magnet。

典型玩法：

1. 你先做好一份「超干货 PDF / 幻灯片」：

• 可以用 Gamma、Canva、Excalidraw 等工具制作
• 内容是某个主题的深度指南 / 模板

2. 打开 Tally 网站，创建新表单

• 表单标题可以写：Get the guide
• 表单内容包括：
• 姓名
• 邮箱
• 一两个调研问题（例如：你现在用哪些 AI 工具？）
• Tally 提供了非常丰富的组件：
• 矩阵题
• 线性评分题（1～10 分）
• 多选题等等

3. 在 Tally 里添加「新页面」：

• 第一页：表单
• 第二页：填完以后展示「下载引导 / 打开 PDF 的按钮」
• 第二页可以写：
• 「点击这里查看指南」并嵌入你的公共链接（刚才 Gamma / Canva / Excalidraw 导出的公开链接）

4. 发布这个 Tally 表单，拿到一个「嵌入代码」

• 通常是一个 <iframe> 代码块
• 在 Tally 里点「Share → Embed forms → Standard embed code → Copy」

5. 回到 Claude Code / sandbox：

• 让 Claude 帮你做一个极简 Landing Page
• 明确告诉它：

> 「这是一个引导页，目的是让用户填写表单换取指南，帮我设计一个简洁但有说服力的页面，并把这段 Tally 嵌入代码插进页面中。」

Claude 会：

• 帮你写一个有说服力的引导文案
• 用不错的排版包裹你的嵌入表单
• 输出一个可分享的页面链接

最终效果：

• 你发一个链接到社交媒体
• 用户点开 → 看见页面 → 填表单 → 跳转到可读的指南
• 你这边在 Tally 后台看到收集到的所有邮箱和问卷结果

这是「vibe marketing」中最经典的一个闭环： 快速验证一个 idea 或一个主题是不是值得做产品 / 做课程。

七、更多静态「工件」：演示文稿、仪表盘与小游戏原型

针对「静态页面」这一块，视频还展示了几种典型玩法：

1. 用 Claude Code 直接做在线 Slide Deck

思路是：

1. 你本来有一份调研大纲 / 文档（比如 Notion / Google Docs）
2. 随便截一张图，上传给 Claude Code，当作「主题提示」
3. 提示词类似：

「请基于这张图片所代表的主题，做一个在线 Slide Deck： – 页面本质还是一个 Landing Page，但内容要表现成全屏的幻灯片切换 – 白底黑字，风格尽量接近 Teenage Engineering 那种极简风 – 四周加一点淡色边线点缀 – 至少 9 张内容 slide，可以左右切换 – 每一张 slide 是一个关键信息点，自己先去网上搜集相关资料。」

Claude 会：

• 帮你搭好「幻灯片模式」的页面结构
• 自动填充内容（先根据你原文的提纲，再补充自己查到的信息）
• 提供全屏浏览和切换控制
• 你可以继续让它增加 icon、微调布局、修改切换按钮位置等等

最后你会得到一个：

• 可以直接在浏览器展示的在线演示页面
• 可以发给别人看
• 还可以部署到公网，甚至后来加上付费墙

2. 用 Codex + GPT-5 做业务仪表盘

如果你有一份数据（哪怕是 ChatGPT 现场帮你生成的假数据），例如：

• 理发店一个月的营业数据：
• 每个理发师的服务次数、营收、小费、支付方式等等

你可以：

1. 把这份数据整理成 CSV 或直接复制文本表格
2. 丢给 Codex（选 GPT-5 High）并说：

「请基于这些数据，为 Riley's Barber Shop 做一个业务仪表盘页面： – 包含多张图表，从不同角度展示数据 – 例如：按日期的收入曲线、每个理发师的小费比例、支付方式占比、累计收入等 – 仪表盘要适合给潜在投资人看。」

Codex 会：

• 解析数据
• 自动生成一个多图表的 Dashboard 页面
• 包括关键汇总数字和图表

你可以再要求：

• 调整配色
• 调整布局
• 让某个指标变得更突出等等

3. 用 3JS + Claude Code 做简单小游戏

在 sandbox 里新建一个 Claude Code 项目，技术栈选：

• gamedev → 3JS

然后一句话：

「请帮我做一个简单的 3D 小游戏： – 玩家控制一个纸飞机在空中飞行 – 需要躲避障碍物、收集金币 – 可以上网搜索 GitHub 上热门的 3JS 小游戏项目作为灵感。」

Claude 会：

• 找一些现成项目作为参考
• 输出一套能运行的小游戏：
• 你可以用键盘控制「纸飞机」飞行
• 碰到红色障碍物就 Game Over
• 吃到金币就加分

虽然画面可能有点粗糙，但它说明：

用 Vibe Coding，你只要会「开口」， 就已经能做出不少可玩的东西了。

小结：这一段我们已经能用 Vibe Coding 做出：

• Landing Page
• Lead Magnet 页面 + 表单嵌入
• 在线 Slide 演示页
• 数据仪表盘
• 简单游戏
• 这些都可以马上生成可分享链接，之后再谈部署上线和付费墙

八、真正的 Web App：InstantDB + 登录 + 笔记 + 图片上传

接下来是视频的第三部分：做真正的 Web App。 和静态页面最大的区别是：

• 引入了「身份体系」：用户可以登录 / 注册
• 引入了「数据库」：数据会持久保存，不是刷刷新就没了

作者选择的数据库服务是 InstantDB。 它的优势是：

• 比 Supabase 简单很多
• AI 模型更容易正确调用它的 API
• 权限和存储配置更「傻瓜」

基本流程：

1. 打开 instantdb.com
2. 注册账号
3. 新建一个 App，例如：Riley Todo App
4. 拿到一个 Public App ID（这就是你前端 App 与数据库通信的「钥匙」）

回到 sandbox.dev → 新建 Claude Code + Next.js 项目，把这个 Public App ID 告诉 Claude：

「我想用 InstantDB 做这个 App 的数据库和身份系统。 需求如下： – 要有邮箱登录页面（发送 magic code 登录） – 登录成功后，可以创建、编辑、删除笔记 – 每条笔记可以上传图片作为附件 – 请用这个 InstantDB 的 Public App ID：[粘贴你的 App ID] – 请先去读 InstantDB 文档，保证第一次就能跑通。」

Claude 会：

• 自动去看 InstantDB 文档
• 搭好：
• 登录页（magic link 登录）
• 笔记列表页
• 笔记编辑页
• 图片上传组件
• 把数据结构、权限等配置好

跑起来之后，你可以：

• 用邮箱登录（收到验证码 → 填入 → 登录成功）
• 创建笔记、保存
• 在 InstantDB 后台的 Explorer 里看到：
• 一条条 notes 数据
• 当前用户信息
• 上传的文件信息

如果 UI 不好看，你可以：

1. 截图当前页面
2. 把截图丢给 Claude，说：

「这个界面现在文字颜色太浅，整体风格不好看。 请参考 Bear Notes 的视觉风格， 在不破坏现有数据库结构和功能的前提下， 重做一版 UI，让它更简洁、克制。」

Claude 会：

• 改 CSS / 组件布局
• 保留原有功能（登录 / 数据 / 上传）
• 输出一版更干净的 UI

如果图片上传报错（这是视频里真实发生的）：

• 你把错误信息整个复制粘贴给 Claude
• 让它帮你改前端调用方式
• 若还是不行，它会提示：
• InstantDB 权限配置不够
• 需要去「Permissions」里加一段 rules

你可以让 Claude：

「请直接给我一段可用的 storage 权限配置，我去后台粘贴。」

它会给你一段配置代码，你贴进 InstantDB 的「Permissions → Storage」里保存，再回来重试上传。

上传成功之后，你会在笔记界面看到：

• 文本内容
• 附件图片预览

这就是真正意义上的「有用户、有数据、有文件存储」的 Web 应用。

九、用 Nano Banana API 做「缩略图编辑器」：从原型到真产品

接下来，视频进入一个很重要的 API 实战部分： 以一个叫 Nano Banana 的图像编辑模型（Google Gemini 系体系）为例，做一个专门编辑 YouTube 缩略图的 Web App。

思路是：

1. 先用 Excalidraw 等画图工具，画出你脑海里的界面原型：

• 上方：显示当前缩略图
• 下方：输入框，用户输入「想怎么改图」
• 最底部：版本历史条，显示 V1、V2、V3… 每次修改的结果

2. 截图这张原型图
3. 在 Claude Code 的 Next.js 项目中上传截图，并说明：

「请帮我根据这张草图做一个原型 Web 界面： – 当前只做布局，不用实现真正的图片编辑 – 要能上传图片 – 能输入一条「编辑指令」 – 每次提交之后，在底部生成一个版本卡片（V1、V2…）。 – 整体风格极简，以布局为主。」

Claude 会：

• 做出一个完全可交互的「假」缩略图编辑器：
• 上传图片
• 输入文字
• 点击提交 → 版本列表增加一条（只是占位，没有真正改图）

4. 接下来，把这个原型升级成「真产品」：

这时你需要：

• 去看 Nano Banana / Gemini Image API 的官方文档
• 弄清楚调用方式（上传图片、传 prompt、返回图片的接口）

你可以让另一个 AI（比如 Perplexity / ChatGPT）帮你总结出：

「在 Next.js 里调用 Nano Banana 图像编辑 API 的完整示例代码。」

把文档整理好之后，回到 Claude Code：

「我想把刚才做的缩略图编辑原型，升级成一个真正可用的应用： – 上传缩略图后，每次在输入框里描述想要的改动 – 由前端调用 Nano Banana API，把图片和文字一起发过去 – 得到返回图像后，替换主图，并把旧版本放进右侧 version 列表 – version 列表里的每一张图都可以被再次选中继续编辑 – 下面是 API 文档和示例代码：[粘贴文档] – 请认真阅读，并在项目中正确接入。 – 我希望整个流程可以真正跑通。」

这时候，还需要一个 Gemini / Google AI Studio 的 API Key。 流程是：

1. 去 Google AI Studio 申请 API Key
2. 复制 Key
3. 给 Claude 明确说：

「这是我的 Gemini API Key，请你把它以正确、安全的方式配置进应用（例如环境变量 / server 端），并让应用可以用它调用 Nano Banana。」

Claude 会：

• 读取文档
• 改 Next.js 项目的后端路由 / API 调用逻辑
• 配置好环境变量（例如 .env）
• 把前端按钮连上后端接口

接下来你就可以实际测试：

• 上传一张 YouTube 缩略图
• 输入：

> 「让人物戴上墨镜」

• 等待生成 → 新版本出现
• 再输入：

> 「把头发变长、变成金色」

• 如此反复，形成一条逐步变形的缩略图版本链
• 右侧版本列表可以来回切换、选择某个版本继续编辑

中途如果有 UI 问题，比如：

• 主图太小看不清细节
• 版本列表占据太多空间
• 选中状态边框被裁切

你可以继续精细操作：

「请把主图放大 1.5 倍，版本列表变窄，改到右侧，所有缩略图显示完整，并且保持选中项有高亮边框但不被裁切。」

Claude 会持续修改 CSS 和布局，直到你满意。

最后你会得到一个真正可用、体验不错的「缩略图编辑器」：

• 专门围绕一个具体场景（YouTube 缩略图）设计
• 底层用的是 Google / Nano Banana 的强大模型
• UI、交互全部由你决定
• 非常适合拿来收费或做 SaaS

十、移动端 Vibe Coding：在手机上做语音笔记 + 图片编辑 App

之前所有东西都在浏览器 / 桌面端。 接下来视频展示了：在手机上做 Vibe Coding。

工具是 Vibe Code App（移动端）。

Vibe Code App 默认内置了很多 API 能力，比如：

• OpenAI（包括 Whisper 语音识别）
• Gemini
• XAI / Grok
• Anthropic（Claude）
• 11 Labs（语音相关）

示例 1：语音笔记 App「Monkey Note」

目标是做一个本地语音笔记应用，需求是：

• 底部有一个大大的圆角按钮（接近整行宽度），写着「Record」
• 点击之后可以录音
• 录完之后：
• 用 OpenAI Whisper API 转写成文字
• 用大模型自动生成一段摘要
• 用大模型自动生成一个标题
• 应用首页显示的是：
• 笔记列表（标题 + 简短摘要）
• 点进去某条笔记，可以看到：
• 详细摘要
• 点击「查看全文」按钮展开完整转写内容

在 Vibe Code App 里，你只需要把上边这段需求一次性说出来 / 打出来，然后选择：

• 使用 OpenAI API（Whisper + GPT）

Vibe Code 会：

• 自动写出录音、调用 API、展示结果的所有代码
• 编译打包成一个在你手机上能运行的 App
• 本地存储在你手机里（不用先搞数据库也能用）

第一次跑可能会报错，但这就是 Vibe Coding 的日常：

• 把报错信息原封不动复制到提示框
• 让 Claude / 模型根据错误信息修复
• 再跑一遍，直到流程跑通

最终你会得到一个：

• 界面还不错
• 功能完整
• 数据存本地
• 能真正用来记语音笔记的 App

如果你想同步到云端，也可以像 Web App 一样接入 InstantDB，只不过这一步视频里点到为止。

示例 2：手机端缩略图编辑 App（Nano Banana 移动版）

在完成 Web 版缩略图编辑器之后，作者又用 Vibe Code App 做了一个手机端版本，逻辑类似：

• 同样使用 Nano Banana / Gemini Image API
• 同样是：
• 上传图片
• 输入编辑指令
• 输出新版本
• 保留所有版本
• 支持导出所有图片到相册

这种 App 非常适合：

• 内容创作者
• 尤其是拍照 / 做封面的用户

而在 Vibe Code 的 Web 后台，你还能看到：

• 你在手机上做的这个 App，对应的代码工程
• 可以在电脑上继续用 Claude 改 UI / 改逻辑
• 改完后，用一个二维码直接同步到手机

十一、部署：把 Web / 移动 App 真正推到用户手里

最后一大块是「部署」：

1. 移动端：App Store 部署

在 Vibe Code App 里：

• 选择你要上架的 App
• 设置 App 名称（比如 Nano Banana Riley）
• 用简单的 prompt 生成一个 App 图标
• 配置好 Expo 访问 Token（按照引导创建）
• 配置好 Apple 开发者账号（这一块略复杂，视频里说未来会有专门教程）
• 填好 Bundle Identifier、版本号 1.0 等信息
• 点击「开始构建」

然后 Vibe Code 会：

• 和 Expo、Apple Developer 平台对接
• 把你的 App 构建并上传到 App Store Connect
• 后面你只需要在 Apple 的流程里补充：
• App 简介
• 截图
• Terms of Service / Privacy Policy 链接（甚至可以用 Notion 页面）

2. Web 端：部署到互联网上

视频里提到两种方式：

• 未来会在 sandbox.dev 里直接提供「一键部署」按钮
• 现阶段可以：

1. 点击「下载代码」
2. 收到邮件 → 下载项目压缩包
3. 在本地用 Cursor / VS Code 打开项目
4. 推送到 GitHub 仓库
5. 用 Vercel / Netlify 等平台部署

在部署前，你可以：

• 在 Claude Code 或 Cursor 里继续改代码
• 加上你自己的域名
• 配置环境变量（API Key 等）

这样：

• 静态页面（Landing Page、Lead Magnet、Slide Deck、Dashboard）
• Web App（Notes、Thumbnail Editor）
• 都可以在公网访问、对外收费、接入真实用户。

到这里，你已经学会了： 从「什么是 Vibe Coding」到：

• 静态页 → 营销页 / Lead Magnet / 演示 / 仪表盘 / 游戏
• Web App → 登录 + 数据库 + 文件上传
• API → 真正有价值的 AI 功能（图像编辑）
• Mobile → 语音笔记 + 图片编辑 App
• 部署 → Web + App Store