第一个 Vibe Coding
Vibe Coding 的平台工具很多，有的主打零代码拖拽，有的强调工程化定制，还有不少专注于业务流程编排与多智能体协同开发。
不同工具平台，有不同的使用场景，本章节介绍四个工具，两个在线工具，两个本地工具：
| 工具名称 | 工具类型 | 核心特点与适用场景 |
|---|---|---|
| 秒哒 | ||
| 访问官网 |
| 零代码/自然语言 | 直接输入文字生成应用，纯口述生成，适合快速入门，体验 Vibe Coding | | MoneyCode
| AI 在线执行编码任务 | 在线应用，直接输入文字，平台里创建任务，让 AI 编码，在云端开发环境中使用终端、文件管理和预览 | | Claude Code
| 终端命令行 | CLI 交互，逻辑推理极强，极客跨文件重构利器 | | Copilot
| 经典 IDE 插件 | 智能代码补全（Tab 键），适合半自动微调代码 | | Trae
| AI 原生编辑器 | 字节跳动出品，AI 编辑器 | | Qoder
| AI 原生编辑器 | 阿里出品的 AI 编程工具 IDE |
0 生成应用代码
我们可以先用最简单的秒哒来生成应用， 先访问官网注册 秒哒官网 ，登录后在输入框输入要生成的应用。
接下来秒哒就开始生成一份需求文档，还是很详细的，然后我们可以在右侧点编辑文档或生成应用按钮，它就会根据我们的需求直接开始生成应用：
接下来就会开始生成代码，整个过程，都不用写一行代码，直接生成：
看下界面及使用效果，非常好用：
另外插件部分还提供了其他高级功能支持，比如视频：
如果你还不知道能看啥，还能去应用广场看看其他人做的优秀产品：
使用 MonkeyCode 进行 Vibe Coding
MonkeyCode 不仅是可以进行 Vibe Coding 的 AI 编程工具，它覆盖了 需求 → 设计 → 开发 → Review 全流程，免费使用，无需安装，内置云端开发环境。
注册与登录
首次使用 MonkeyCode，先完成账号注册。 点击 进入官网 ，右上角注册或直接登录，成功后会自动进入主界面开始使用。
进入页面后，点击右上角 注册 创建新账号，已有账号可直接登录使用。
注册成功后，我们进入控制台，输入我们的需求：
帮我写一个 JavaScript 小游戏：程序随机生成 1 到 100 的数字，让我猜，猜大了提示「太大了」，猜小了提示「太小了」，猜中了就结束。
开始执行，我们可以选择模型：
开始任务：
任务完成后可以查看生成的效果地址：
查看效果：
VS Code 中 Vibe Coding
VS Code 凭借丰富的 AI 插件，成为落地 Vibe Coding 最主流的编辑器，既可以用 Copilot 实现轻量开发，也可以安装专用 VIBE 智能体插件实现全自动多文件开发。
VS Code 教程：https://www.runoob.com/vscode/vscode-tutorial.html
新版 VS Code（1.116+ 最新正式版）原生内置 Copilot，不用手动装插件。
打开编辑器就能看到 Copilot 入口，只需要登录 GitHub 账号即可，无需去扩展市场安装插件。
登录后查看：
旧版 VS Code（1.115 及更早版本）必须手动安装两个扩展：
- GitHub Copilot：行内代码自动补全
- GitHub Copilot Chat：对话式 AI 编码助手
接下来我们创建一个目录文件夹：
mkdir runoob-vibe-coding进入目录：
cd runoob-vibe-coding使用 VS Code 打开：
code .在编辑器里添加一个文件 vibe-coding-runoob.html ：
左侧文件菜单我们选中创建的文件，点击右上角面板切换按钮，切换出 AI 工具，然后在对话框输入提示词：
帮我写一个 JavaScript 小游戏：程序随机生成 1 到 100 的数字，让我猜，猜大了提示「太大了」，猜小了提示「太小了」，猜中了就结束。AI 就会开始工作，看看最终效果：
全程我们不需要参与编码，HTML 代码、CSS 样式代码、 JavaScript 代码都帮我们自动生成。
CLI 编程工具
下面以 Claude Code（终端 CLI） 为例，展示 Vibe Coding 的典型工作流。
Claude Code 完整教程参考：https://www.runoob.com/claude-code/claude-code-tutorial.html
第一个项目：Hello, Vibe World!
**目标：**用 5 分钟，通过纯自然语言，让 Claude Code 帮你创建一个个人名片网页。
第一步：创建项目文件夹
mkdir my-card && cd my-card
claude
第二步：向 Claude 描述你想要的东西
在 Claude Code 的交互界面中，输入：
帮我创建一个个人名片网页，要求：
- 显示我的名字（张三）和职业（前端开发者）
- 有一个简短的个人简介区域
- 列出3个技能标签（React、Python、设计）
- 设计风格：简洁现代，深色背景，有轻微的渐变效果
- 单个 HTML 文件，不需要外部依赖第三步：观察 Claude 工作
你会看到 Claude Code 自动：
分析你的需求
创建 index.html 文件
写入完整的 HTML、CSS 和少量 JavaScript第四步：查看结果
open index.html # macOS
# 或
xdg-open index.html # Linux第五步：迭代修改
如果不满意，继续对话：
把背景色改成深蓝色渐变，字体换成更现代的 sans-serif，
技能标签加上悬停动画效果Claude Code 会直接修改文件，无需你碰任何代码。
AI 思考中...