零基础 Vibe Coding 迷你课 (一): 创造你的第一个 App 与 AI 编程导师

📺 视频版：零基础AI编程：实战10分钟搞定你的第一个app

本课程的视频版

第一步：选择工具并了解基本界面

刚开始，你可能会纠结应该用哪个 AI 工具。我的建议是：越简单越好。直接在 AI 的网站上让它编写代码并运行，能让你及时看到效果，收获成就感。我们会在后面的课程中介绍更复杂的工具，但第一步，先“干起来”看到效果最重要，不要被工具困住。

工具推荐：

海外用户： Claude AI, ChatGPT, Gemini 都是不错的选择。
国内用户： 可以尝试通义千问 (Qwen)、Kimi (选择 K2 模型) 或 DeepSeek (开启深度思考)。

上面提到的所有 AI 工具都提供免费的额度，对于完成我们这套迷你课的练习来说绰绰有余，你一分钱也不用花。

界面概览 (以 Gemini 为例)：
大多数 AI 编程工具的界面都大同小异。

左侧： 是你与 AI 的对话区。你在这里输入提示词（Prompt），也就是你的要求，下方是 AI 的回复和聊天框。
右侧： 是 AI 生成的代码区。你暂时不用关心代码的具体含义。这里通常会有一个 “Preview” (预览) 或“运行”按钮。

点击运行按钮后，你就可以在界面上实时看到代码运行起来之后的效果。

比如，这是一个通过 Vibe Coding 生成的吉他调音器：

吉他调音器提示词下载：

📎 下载附件：EP1 - Guitar Tuner 📎 下载附件：‎Gemini - 复古吉他调音器网页开发

第二步：召唤你的 AI 编程导师

看到这里，你应该明白了，Vibe Coding 的关键就是给 AI 一个具体的、高质量的提示词。你可能觉得上面演示的提示词看上去很复杂，但其实，写这样的提示词一点也不难，因为AI 可以帮你写。

我为你准备了一份提示词，它可以把任何一个强大的 AI 模型，变成你的全天候编程导师。当你需要帮助时，它会用浅显易懂的语言来引导你。

# 角色设定：我的AI编程伙伴与导师

从现在起，我希望你扮演我的专属“AI编程伙伴与导师”。

**关于我：**
我是一名对编程充满好奇，但没有任何技术背景的“小白”。我可能是一个市场专员、设计师、学生，或者任何一个希望用技术解决实际问题的职场人。请你始终牢记，我对代码、框架、数据库等一切技术术语都一无所知。

# 你的任务：

我的目标是学习Vibe Coding入门课。你的任务是帮助我学习如何使用自然语言提示词来构建应用，并在这个过程回答任何我的问题。如果我没有特别提及，默认为构建网页端应用Web App。

# 请遵守以下规则：

- 当我求助时，请用简单的方式解释概念，多使用生活中我能理解的类比，避免使用专业的技术术语，除非我主动询问，并且你必须先用类比解释它。
- 作为一个初学者，我随时可能感到挫败。请在我们的每一次互动中，都保持耐心、友好和充满鼓励的语气。
- 当我请求帮助构建一个app时，请通过提问的方式来明确需求；并引导我自己去创建一个更好的提示词，而不是直接给我最终的答案。
- 请以“你好，Vibe Coder！”以及简短的自我介绍，开始我们的对话。不必重复我以上的需求。

AI 编程导师设置提示词

你可以根据自己的情况，适当修改这个提示词，让它更适合你的水平。

第三步：实战演练 - 创造“今天吃什么”随机选择器

下面，我们来演示如何使用这位新导师，来完成我们的第一个项目。

“今天吃什么”随机选择器App的最终效果

1. 启动AI导师并提出想法

首先，将上面的“导师设置提示词”复制并发送给 AI。它会和你打个招呼。

接着，我把我的想法告诉它：“我想做一个‘今天吃什么’的随机选择器，来解决吃饭时的选择困难症。”

2. 在导师引导下，将想法具体化

AI 首先肯定了我的想法，然后开始通过提问，引导我更深入地思考。这是一个非常重要的环节，因为“随机选择器”这个需求很概念化，如果直接让 AI 写代码，结果很可能不是我们想要的。AI 不会读心术，你需要一步步把脑子里的想法清晰地告诉它。

AI 问了几个关键问题，引发了我的思考：

菜单上有什么？ 是中餐、西餐这种大类，还是麻辣烫、披萨这种具体菜名？
- 我的思考： 我希望 App 能给出具体菜的建议。但这需要一个全面的菜单。如果选择太多，早餐时推荐火锅就不太合适了，用户体验会很差。所以，我需要给用户一些筛选条件，比如用餐时段（早/午/晚）、口味（辣/酸甜）和预算。
怎么“摇号”？摇完怎么显示结果？ 这是在引导我思考具体的界面和交互。
- 我的思考： 界面保持简洁就好，一个按钮开始选择，一个明显的地方显示结果。
还有别的功能吗？
- 我的思考： 我觉得可以增加一个功能，允许用户自己添加食物到菜单里。

3. 与导师协作，生成最终提示词

我把这些想法都回复给 AI。它开始引导我自己写提示词，但我想“偷懒”，让它直接给我结果。它给了一个基本完善的提示词，但缺少美食列表。于是我告诉它：“你来帮我生成这个初始美食列表，至少包括 100 种常见菜。”

最终，AI 整合了所有信息，给出了最终的提示词，包含了详细的功能描述和长长的菜单。

📎 下载附件：EP1 - What to eat today?

4. 使用提示词生成 App (以 ChatGPT 为例)

现在，我们把最终的提示词复制下来，用它来生成我们的 App。

在电脑上打开浏览器，进入 chat.openai.com。
在聊天界面，选择 Canvas 模式。开启后，ChatGPT 生成的代码会自动在右侧运行，非常方便。
将我们准备好的最终提示词粘贴进去，然后回车。

等待不到一分钟，AI 就完成了所有代码的编写。

📎 下载附件：今天吃什么？_单文件_react_应用

5. 测试我们的 App

代码生成后，右侧窗口会自动预览 App 的效果（或点击 “Preview” 按钮）。我们来测试一下：

不加任何选择，直接推荐： 结果是“火锅”，不错。
选择“早餐”： 推荐了“小笼包”、“肠粉”、“重庆小面”，很合理。
限定“辣”： 推荐了“麻辣烫”、“宫保鸡丁”。
限定“省钱”： 推荐了“豆浆油条”、“茶叶蛋”。

我们还可以打开“你的菜单”，查看所有备选菜目，并添加一个新的菜，比如“蔬菜沙拉”，设定好它的时段、口味和预算。添加后，当我们筛选“清淡”口味时，就能在结果中看到我们新加的“蔬菜沙拉”了。

整个过程非常完美。如果你在实际操作中遇到问题，或者想进一步修改，可以直接在聊天框里继续和 AI 交流。

🔗 在线试用：今天吃什么？ - 单文件 React 应用

你可以通过这个链接来试用这个App

课程总结与课后练习

恭喜你！你已经完成了自己的第一个 Vibe Coding 项目。现在，用你做的这个 App，摇一个“奢侈一把”的选项，奖励自己吃点好的吧！

思考题：
我们这里演示了在 AI 工具里直接预览 App。但如果你的 AI 工具不支持预览，或者你想把代码下载下来保存，你该怎么办呢？和你的 AI 编程导师讨论一下这个问题吧。

今日作业：
想想你自己工作或生活中有没有什么小问题，试着用 Vibe Coding 创造一个最简单的解决方案。

到这里，我们“零基础 Vibe Coding 迷你课”系列的第一期就结束了。下一期，我们将深入学习如何写出结构更清晰、功能更强大的提示词，让 AI 更好地帮助你。

我们下期再见。