用 Claude 做 Vibe Coding：Claude 对话、Claude Code 与从 Claude 构建应用

用 Claude 做 vibe coding 有三种方式。Claude 对话 可以在对话中直接构建单页小应用。Claude Code 是一个智能体，可以编辑你电脑上或云端的真实项目，适合熟悉代码库的人。而 Claude 加上通过 MCP 连接的应用构建器，则让你无需离开 Claude 对话，就能构建、预览并发布带数据库的全栈应用。哪一种最合适，取决于你要做什么，以及你愿意自己掌控多少设置。

本指南会分别介绍这三种方式，附上提示词，并说明各自的局限。关于这一理念的整体介绍，请参阅 什么是 vibe coding。

方式一：用 Claude 对话做小工具

在普通的 Claude 应用中，你可以请它做一些可交互的东西，Claude 会把它写成与对话并排运行的代码：计算器、单词卡练习、小游戏，或者根据你粘贴的数据生成图表。之后你只需回复即可修改。

一条好的提示词应当自成一体：

做一个可交互的工具：我每行粘贴一条支出（格式为“金额, 分类”），它会按分类显示饼图和总额。附上一份示例列表，让它开箱即可使用。

它的优势： 快速做出只需一页的工具，供你自己使用，或者以链接的形式分享；还适合学习，因为你可以让 Claude 解释每一部分。

它的局限： 这些东西运行在 Claude 的环境中。没有你自己的持久化数据库，没有用户账号，没有自定义域名，也没有可以运行服务器的地方。当一个想法超出了单页的范围，你就需要下面两种方式之一。

方式二：在真实代码库中使用 Claude Code

Claude Code 是 Anthropic 的编程智能体。它可以在你的终端中运行，也可以在 VS Code 和 JetBrains 等编辑器、桌面应用以及网页中使用。你用平实的语言布置任务，它会阅读你的项目、编辑文件、运行命令和测试，并向你展示改动了什么。在撰写本文时，它包含在 Claude 的付费套餐中，并可通过 API 使用；当前的套餐信息请查看 Anthropic 官网。

典型的 vibe coding 会话大致如下：

添加一个 /bookings 页面，列出当前用户的预约，最新的在前，并带有取消按钮；如果距离课程开始不到两小时，则禁用该按钮。使用现有的身份验证辅助函数。完成后运行测试。

它的优势： 适合已经有项目、希望完全掌控技术栈，并愿意自己运行和部署的开发者与技术型创始人。它擅长多文件修改，也擅长遵循代码库中已有的约定。

它需要更多的工作： 你需要搭建开发环境，而 Claude Code 本身并不提供任何托管服务。数据库、机密、部署和域名都需要你自己安排。如需了解其他开发者工具的对比，请参阅 Cursor 对比 Windsurf 对比 Claude Code。

使用 Claude Code 的好习惯

• 在进行大改动之前先要计划。 “先列出你将修改的步骤和文件，然后等待我确认。”
• 保留一份项目笔记文件。 Claude Code 会读取一个项目记忆文件（CLAUDE.md）中的约定，这样你就不必反复说明。
• 审查差异。 即便是做 vibe coding，也要浏览一下敏感区域的改动：身份验证、支付，以及任何涉及用户数据的部分。
• 经常提交。 小的提交让撤销一次错误的步骤变得容易。

方式三：用 Mythex 从 Claude 构建并发布

如果你喜欢在 Claude 中工作，但最终希望得到一个真正的应用，包括数据库、登录、文件存储和公开网址，那么你可以通过 MCP 把 Claude 连接到 AI 应用构建器。MCP 是一种让 Claude 能使用托管在其他地方的工具的协议。（什么是 MCP 用通俗的语言解释了它。）

Mythex 运行着一个 MCP 服务器。连接之后，Claude 就可以创建 Mythex 项目、在私有云端沙盒中编写代码、启动实时预览、附加数据库和文件存储，并发布应用。每个结果都包含一个链接，供你在 Mythex 中实时查看项目。

如何连接

1. 在 Mythex 中打开 账号设置，复制 MCP 地址：https://mcp.mythex.ai/mcp。
2. 在 Claude 中，进入 设置 → 连接器 → 添加自定义连接器，粘贴该地址，然后点击 连接。
3. 随后会打开一个 Mythex 页面。如有需要请先登录，然后选择 允许访问。无需复制任何 API 密钥。
4. 回到 Claude，告诉它你想要什么。

任何套餐的任何人都可以连接；沙盒工具需要 Mythex Pro（每月 $25）。Claude 的用量仍计入你的 Claude 套餐，沙盒时间、预览和托管则来自你的 Mythex 积分。完整的操作步骤请参阅 用 Claude、Cursor 或 Codex 构建 Mythex 应用。

可以试试的第一条提示词

使用 Mythex 新建一个项目：为我的小型设计工作室做一个简单的客户关系管理（CRM）工具。联系人包含姓名、公司、邮箱、电话、阶段（潜在客户、进行中、已结束）和备注。按阶段显示看板，可把联系人在各列之间拖动，并提供搜索框。添加数据库以便数据持久保存，并添加登录功能，让只有我能看到数据。启动预览，并在运行后把链接发给我。

然后在同一段对话中逐步迭代，每次只做一处修改：

在 Mythex 项目中，为联系人添加“下次跟进”日期，并在首页增加一个列表，显示本周到期的跟进事项。在预览中确认效果。

发布这个 CRM，并把线上网址发给我。

它的优势： 适合习惯用 Claude 思考，又希望成果能托管、带数据库，而无需自己搭建服务器的人。你也可以随时切换：先在 Claude 中开始，然后在 Mythex 聊天中继续；反过来也可以，因为它们是同一个项目。

应该用哪一种？

与 Claude 配合时，更重要的提示技巧

Claude 会严格遵循详细的指令，这一点有利也有弊。

• 说明不要改动什么。 “保持布局和颜色不变，只修改表单验证。”
• 给出完成的标准。 “完成的标准是：新建一个联系人能保存，出现在看板上，并且刷新后依然存在。”
• 让它检查自己的工作。 在 Claude Code 中，这意味着运行测试；在 Mythex 中，这意味着检查实时预览，或运行浏览器测试。
• 当你看不懂某处改动时，要求它用平实的语言解释。 这是了解你的应用在做什么的最快方法。

我们的 vibe coding 提示词速查表 提供了 30 条提示词，适用于这三种方式中的任何一种。

三种方式通用的安全提示

• 不要把真实的 API 密钥或密码粘贴到 Claude 对话中。使用 Mythex 时，机密应放在项目的机密设置中，Claude 可以看到机密的名称，但看不到其值。
• 发布之前，检查谁能看到什么。“已登录的用户能否打开其他用户的记录？”是首先应该问的问题。
• 审查敏感代码。Claude 是一个能力很强的编程助手，但做 vibe coding 意味着你不会逐行阅读，因此要挑出重要的那几行来看。参见 vibe coding 安全吗？。

如果你也在使用 ChatGPT，配套指南涵盖了 用 ChatGPT 和 Codex 做 vibe coding。如果你更希望完全跳过设置，请打开 AI 应用构建器，直接在那里描述你的应用。

常见问题