用 ChatGPT 做 Vibe Coding：Canvas、Codex 与从 ChatGPT 构建应用

你可以通过三种方式用 ChatGPT 做 vibe coding：在聊天中请它做一个小应用，并在 canvas 中预览；把真实代码库上的任务交给 OpenAI 的编程智能体 Codex；或者连接 AI 应用构建器（例如 Mythex），让 ChatGPT 构建、托管并发布带数据库的完整应用。第一种对于单页工具最快，第二种适合开发者，第三种则让你不离开 ChatGPT 就能得到带登录和数据的线上应用。

下面介绍每种方式如何运作、各配一条提示词，以及它们各自的局限。如果你想了解这个术语的背景，请阅读 什么是 vibe coding。

方式一：ChatGPT 对话与 Canvas

如果只是要一个快速工具，直接提出需求即可。ChatGPT 会编写代码；在 Canvas 中，它可以展示简单的 HTML 和 React 页面，让你点一点、再提出修改。

写一个单页的小费计算器，包含账单金额输入框、小费比例（10%、15%、20% 的按钮以及自定义输入框）和用餐人数。随着输入实时显示小费金额和人均金额。在手机上看起来要整洁。

适合： 计算器、简单游戏、落地页草稿，以及学习。问一句“像对新手那样解释这个文件”，你会很快学会。

局限所在： 它没有后端。你输入的内容不会为其他用户保存，没有登录功能，要分享它，就得把代码复制到某个地方，自己托管。一旦你说“把它保存下来，让我的团队也能看到”，你就已经超出了聊天的能力范围。

复制粘贴式的 vibe coding

很多人一开始就是向 ChatGPT 要代码，然后粘贴进电脑上的文件，或者粘贴到托管服务中。对于小型静态网站，这样做可以奏效，但很快就会力不从心。每次修改都要找对文件、粘贴对位置，还要祈祷你替换掉的内容没有被其他地方依赖。如果你发现自己已经这样做了好几次，就该转向接下来的两种方式之一了。

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

Codex 是 OpenAI 用于软件开发的智能体。你用平实的语言布置一个任务，它就会在代码仓库中工作：阅读代码、跨文件修改、运行命令和测试，并把结果交给你审查。OpenAI 在 ChatGPT 中、作为命令行工具以及作为编辑器扩展程序提供它；哪些套餐包含它，以及当前的限额，请查看 OpenAI 官网。

这种面向任务的提示词最适合它：

在这个仓库里，为订单页面添加一个导出 CSV 的按钮。它应当导出当前筛选后的订单，包含日期、客户、总额和状态这几列。为导出函数添加测试，并运行测试套件。

适合： 已有项目、希望由智能体接手整块任务的开发者和技术型创始人。它能配合你的技术栈和既有约定。

你仍需自己处理： 应用运行在哪里、数据库、机密、部署和域名。Codex 修改代码，但它不是托管平台。

把 Codex 与 Mythex 一起使用

Codex 也可以连接 MCP 服务器，包括 Mythex 的服务器。在 Codex 中把 https://mcp.mythex.ai/mcp 添加为自定义 MCP 服务器，在 Mythex 上批准访问，之后 Codex 就可以在其云端沙盒中处理一个 Mythex 项目，而预览、数据库和发布都由 Mythex 负责。我们的文章 用 Claude、Cursor 或 Codex 构建 Mythex 应用 逐步介绍了这一过程。

方式三：用 Mythex 从 ChatGPT 构建完整应用

如果你希望留在 ChatGPT 的对话中，最终却得到一个真正的线上应用，就连接 Mythex。Mythex 可以作为应用在 ChatGPT 中运行：ChatGPT 通过 MCP 调用 Mythex 的工具，MCP 是一种开放协议，让助手能够使用托管在其他地方的工具（参见 什么是 MCP）。

连接之后，ChatGPT 可以创建 Mythex 项目、在私有云端沙盒中编写代码、启动实时预览、添加数据库和文件存储，并把应用发布到公开网址。结果会附带一个链接，你可以打开它，在 Mythex 中查看项目并观看预览。

如何连接

1. 在 Mythex 中打开 账号设置，复制 MCP 地址。
2. 在 ChatGPT 中，从应用或连接器设置里用该地址添加 Mythex。ChatGPT 的菜单会不时变化，如果名称有所不同，请按照 OpenAI 关于添加应用的帮助页面操作。
3. 随后会打开一个 Mythex 页面：登录，并选择 允许访问。无需粘贴任何密钥。
4. 开始一段对话，并在请求中提到 Mythex。

任何 Mythex 套餐都可以连接。构建、预览、发布等沙盒工具需要 Mythex Pro（每月 $25），沙盒时间和托管则来自你的 Mythex 积分。你在 ChatGPT 中的使用量仍计入你的 OpenAI 套餐。

可以试试的第一条提示词

请使用 Mythex 帮我做一个求职申请追踪器。我可以添加申请记录，包括公司、职位、链接、投递日期、状态（已投递、面试、offer、已拒绝）和备注。按状态显示看板，卡片可以拖动；另外提供一个按周统计申请数量的简单图表。把所有内容保存到数据库中，并用登录功能加以保护。启动预览，并把链接发给我。

然后，每次只提一个修改：

在 Mythex 项目中，为每条申请记录添加提醒日期，并把提醒日期为今天或已逾期的卡片高亮显示。

发布它，并把线上网址发给我。

适合： 习惯在 ChatGPT 中规划和思考，希望成果能直接上线、数据能持久保存，又不想学习如何托管的人。由于它就是一个普通的 Mythex 项目，你随时都可以切换到 Mythex 聊天中继续工作。

按目标选择合适的方式

在 ChatGPT 中行之有效的提示习惯

• 需要时直接点名工具。 “使用 Mythex 来……”能让人清楚地知道，这个请求是针对你的项目，而不是泛泛的回答。
• 每条消息只提一个修改。 一长串编辑意味着一长串副作用。
• 在大的步骤之前先要计划。 “在改动任何内容之前，先列出你要修改的地方，等我确认后再做。”
• 粘贴确切的报错。 完整的报错文字，比任何描述都更有价值。
• 询问改了什么。 “用平实的语言总结你最近三次的修改”，在你不阅读代码时，能帮你保持方向感。

更多提示词请参见我们的 vibe coding 提示词速查表。

保持安全

• 永远不要在 ChatGPT 对话中粘贴真实的密码或 API 密钥。如果你的应用需要密钥，请把它存放在项目的机密设置中。Mythex 的工具只会报告机密的名称，绝不会显示其值。
• 发布之前，检查用户是否能看到彼此的数据，以及是否有密钥被写进了运行在浏览器中的代码里。我们的指南 vibe coding 安全吗？ 列出了这些检查，并附有可直接粘贴的提示词。

如果你也在使用 Claude，配套指南涵盖了 用 Claude 和 Claude Code 做 vibe coding。如果想按模型进行整体比较，请参阅 ChatGPT 对比 Claude 对比 Gemini 构建应用。

常见问题