你好！

如果你想使用 Vibe 编程开始 AI 编程，本指南将带你一步步了解：它是什么，如何开始，以及即使你是编程新手，如何用它实际构建一些东西。

1. 什么是 Vibe 编程？

Vibe 编程是一种风格，（在某些工具中，也是一个名称），用于将 AI 作为你的编程伙伴。你不再盯着空白编辑器，而是：

  • 用自然语言描述你想要什么
  • 让 AI 生成或重构代码
  • 通过聊天 + 代码并排快速迭代

它类似于使用以下工具：

但其核心“氛围”（vibe）是：快速反馈 + 对话 + 实验。你提问，AI 尝试；你运行，调试，完善。

2. 先决条件：你需要什么才能开始

开始 AI 编程，你不需要太多东西：

  1. 一个代码编辑器

  2. 一个 AI 编程助手（选择一个开始）：

  3. 对命令行有基本了解（可选但有帮助）：

    • cd, ls, mkdir, npm, python 等

你不需要成为一名编程专家。AI 可以帮助你在构建实际项目的同时学习基础知识。

3. 设置：分步指南

3.1 安装 VS Code（或 Cursor）

按照你的操作系统（Windows、macOS、Linux）的安装步骤进行。

3.2 添加 AI 编程扩展（如果使用 VS Code）

在 VS Code 中：

  1. 打开扩展面板（Ctrl+Shift+X 或 Cmd+Shift+X）。
  2. 搜索：
    • GitHub Copilot，或
    • Codeium，或
    • Continue，或其他 AI 助手。
  3. 点击安装并按照登录/授权流程进行。

完整设置指南：

如果你选择了 Cursor，AI 已内置其中；只需登录即可开始。

4. 你的第一次 AI 辅助编程会话（Vibe 编程流程）

以下是使用 AI 开始“Vibe 编程”的简单方法。

4.1 创建新项目

示例：一个显示随机名言的微型网站。

  1. 创建一个文件夹，例如 ai-vibe-quote-app
  2. 在 VS Code 或 Cursor 中打开它。
  3. 创建这些文件：
    • index.html
    • style.css
    • script.js

4.2 与 AI 对话：描述氛围

在编辑器中打开你的 AI 聊天窗口，并粘贴类似以下内容：

我是一名初学者。请帮助我使用 index.html、style.css 和 script.js 构建一个简单的网页，该网页：

  • 显示一条随机的励志名言
  • 有一个居中且样式美观、现代的卡片
  • 有一个“新名言”按钮，点击后更改名言 请在每一步都进行解释，以便我学习。

这就是 Vibe 编程的核心：描述、生成、测试、完善。

4.3 让 AI 生成初始代码

AI 通常会给你：

  • index.html 结构
  • style.css 用于布局和颜色
  • script.js 用于逻辑

将代码粘贴到你的文件中（如果你的工具提供“插入”按钮，则使用它们）。

5. 示例：最小启动代码（以便你进行比较）

这是一个你可以使用或与 AI 生成的代码进行比较的简单版本。

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Vibe Coding Quotes</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="app">
    <h1>Vibe Coding with AI</h1>
    <div class="card">
      <p id="quote"></p>
      <button id="new-quote">New Quote</button>
    </div>
  </div>
  <script src="script.js"></script>
</body>
</html>

style.css:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at top, #1f2933, #111827);
  color: #f9fafb;
}

.app {
  text-align: center;
}

h1 {
  margin-bottom: 1.5rem;
  font-size: 1.8rem;
}

.card {
  background: rgba(15, 23, 42, 0.9);
  padding: 2rem;
  border-radius: 1rem;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
  max-width: 420px;
  width: 100%;
}

# quote {
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

button {
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #6366f1, #ec4899);
  color: white;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
}

button:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.4);
  opacity: 0.95;
}

button:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

script.js:

const quotes = [
  "Code with curiosity, not fear.",
  "Let AI handle the boring parts so you can focus on the ideas.",
  "Small projects, repeated often, beat big plans never started.",
  "Read the errors: they’re your roadmap, not your enemies.",
  "The best way to learn to code is to actually ship something."
];

const quoteElement = document.getElementById("quote");
const button = document.getElementById("new-quote");

function showRandomQuote() {
  const index = Math.floor(Math.random() * quotes.length);
  quoteElement.textContent = quotes[index];
}

// initial quote
showRandomQuote();

button.addEventListener("click", showRandomQuote);

在浏览器中打开 index.html。你现在有了一个可运行的迷你应用。

下一步：与 AI 迭代：

让背景更暗，卡片更具玻璃感。 添加一个平滑的淡入淡出动画，当名言改变时。 建议 10 条新名言并更新数组。

让 AI 更新你的 CSS 和 JS，然后你进行测试和调整。

6. 使用 AI 进行 Vibe 编程时如何“思考”

要获得高质量的结果，请关注你如何提示和迭代。

6.1 使用结构化提示

不要只说“帮助”，试试这样说：

我正在使用 HTML/CSS/JS 构建一个小型 Web 应用。 当前行为：[描述]。 我想添加：[功能]。 约束：保持对初学者友好，并在注释中解释更改。 这是我当前的 script.js：

// code here

这为 AI 提供了上下文、目标和约束。

6.2 进行短循环迭代

  1. 请求一个小的更改
  2. 让 AI 提出代码
  3. 粘贴/插入并运行
  4. 如果出现问题，粘贴错误消息和当前代码，然后询问：

这是确切的错误 + 我当前的文件。 解释哪里出了问题，并向我展示修复后的版本，附带注释。

7. 常见的 AI 友好型初学者项目创意

这些非常适合 Vibe 编程会话：

  • 待办事项列表应用
  • 番茄钟计时器
  • 简单预算追踪器
  • 习惯追踪器
  • 抽认卡学习应用
  • Markdown 笔记查看器

对于每个项目，你可以这样开始：

帮助我使用纯 HTML/CSS/JS 创建一个非常简单的 [项目]。 将工作分解成小步骤。 每一步完成后，请等待我确认后再继续。

你还可以在这里探索新手项目创意：

8. 使用 AI 时有效学习的技巧

AI 可以提高你的生产力，但你仍然希望学习。

  1. 寻求解释

    • “逐行解释这段代码。”
    • “这种方法的权衡是什么？”

  2. 寻求变体

    • “展示一个更简单的替代解决方案，即使效率较低。”

  3. 用自己的话重写

    • AI 解释完某事后，在代码注释中总结。

  4. 有意识地实验

    • 更改值，故意破坏东西，看看会发生什么。
    • 询问：“当我更改 X 时，应用为什么会这样表现？”

  5. 同时使用官方文档

9. 使用 AI 逐步学习一门新语言

如果你是编程新手，请选择一种对初学者友好的语言：

  • 对于 Web：JavaScript
  • 对于通用目的：Python

然后告诉 AI：

我是编程完全新手，我想通过大量小型实用示例学习 [JavaScript/Python]。 给我一个从基础到小型项目的 10 步路线图，并在每一步都与我同行。

可能的路线图：

  1. 变量和类型
  2. 条件语句（if, else）
  3. 循环
  4. 函数
  5. 数组 / 列表
  6. 对象 / 字典
  7. DOM 操作（针对 JS）
  8. 简单的 API 调用
  9. 小型项目（例如，名言应用、天气应用）
  10. 重构并用注释清理代码

你还可以遵循公开的路线图，并要求 AI “教我这一步”：

10. 下一步：提升你的 AI 编程氛围

一旦你熟悉了基本的 AI 辅助编程，可以尝试：

  • 使用 API

  • 连接前端 + 后端

    • 请求 AI 帮助你使用以下技术创建简单的 REST API：
      • Node.js + Express
      • 或 Python + FastAPI / Flask

  • 自动化枯燥任务

    • 生成脚本来：
      • 重命名文件
      • 清理 CSV 数据
      • 发送基本通知

每当你遇到困难时，将 AI 视为导师：

我在 [问题] 上卡住了。 这是我的代码和错误/输出。 像教编程新手一样，一步步指导我调试。

如果你告诉我：

  • 你使用的设备/操作系统（Windows/macOS/Linux），以及
  • 你想开始学习的语言（Python 或 JavaScript）

我就可以为你提供一个具体、可直接复制粘贴的设置 + 第一个项目计划，完全由 AI Vibe 编程驱动。