"There's a new kind of coding I call 'vibe coding', where you fully give in to the vibes, embrace exponentials, and forget that the code even exists."

"有一种新的编程方式，我称之为 'vibe coding'（氛围编程）。你完全沉浸在感觉中，拥抱指数级变化，甚至忘记代码的存在。"

—— Andrej Karpathy, 2025年2月

一、准备

1.1 安装工具

相关工具的详细使用说明可以查看官方文档或者网络上的教程

  1. 安装 Claude Code/CodeX/Gemini/OpenCode (命令行工具，根据自己习惯选择，需要提前安装 Node.js)
  2. 准备相关账号，比如模型供应商、Google 账号等（可以在闲鱼低价购买学生认证或低价折扣）

其他工具：

  1. cc-switch：管理 Claude Code 配置
  2. Antigravity-Manager（Antigravity Tools）：专业的 Antigravity 账号管理与切换工具。为 Antigravity 提供一键无缝账号切换功能。并可以提供反向代理功能将额度给 claude code 等工具使用。
  3. CodexBar：查看各模型供应商额度。Bug：现在的版本需要更多权限，而且在 Mac 上比较耗电

1.2 安装 Skills

Agent Skills 是扩展 Claude 功能的模块化能力。每个 Skill 包含指令、元数据和可选资源（脚本、模板），Claude 在相关时会自动使用这些资源。

https://platform.claude.com/docs/zh-CN/agents-and-tools/agent-skills/overview

可以使用 https://skills.sh 这个工具来方便的管理各个工具的 skills

使用到的 Skills：

npx skills add https://github.com/obra/superpowers --skill brainstorming -a gemini-cli

npm install -g uipro-cli
# Go to your project
cd /path/to/your/project
uipro init --ai gemini      # Gemini CLI

二、从想法开始

以实现一个名为「从从容容」工作助手为示例

2.1 设计文档

如果是很简单的网页/脚本，可以不用这么复杂，可以直接将需求描述给模型去实现

把自己的想法描述给大模型，让它生成一份详细的设计文档，比如：

想做一个「从从容容」工作助手（网页），可以用它来记录待办事项、记录灵感、习惯打卡以及一些趣味功能（比如下班倒计时、喝水提醒、站立提醒等）

关于 UI 界面相关的内容，不要AI风格，要清新、现代一些

生成一份详细的设计文档，记录到 @docs/design-document.md 文件中

自己审阅并完善，确保与你的愿景一致。初期可以很简陋，不必过度设计，后续会迭代。

2.2 技术栈(可选)

如果是完全不懂编程的小白，可以不用考虑技术栈

根据上面输出的设计文档来让大模型生成一份详细的技术栈文档

根据设计文档 @docs/design-document.md 生成最简单但最健壮的技术栈，保存到 @docs/tech-stack.md

可以稍微浏览一下生成的技术栈的内容，如果自身具有相关的专业知识，可以进行修改

2.3 模型生成规则

Claude Code、Codex、Gemini 等 CLI 工具都可以通过持久化上下文文件来提供项目特定的指令、定义角色或提供编码风格指南，从而使 AI 的响应更加准确并符合需求，常用命令行工具的上下文文件名称

  • Claude Code：CLAUDE.md
  • Gemini：GEMINI.md
  • CodeX：AGENTS.md

在终端中打开 gemini cli，使用 /init 命令，它会读取目录中的所有文件，生成一套规则来正确引导大模型，会在项目目录中生成GEMINI.md文件记录你的项目信息

在后续使用过程中，也可以根据自己的经验来完善（也可在网上查找别人分享的内容），比如：

## 沟通原则
- 与用户的所有回复与沟通，文档与代码注释均使用中文，必要时可保留英文专业名词，并在首次出现时附简要中文注释。

## 代码质量与开发原则
### skill 说明
- 使用合适的skill

### 前端开发特别说明
- 下拉框、日历选择框、提示框均要自定义实现，并且样式要与整体页面的样式、主题保持一致，不要使用浏览器默认功能

### 质量要求
- 只改动必要的部分，优先复用现有成熟代码，避免重复造轮子。
- 架构设计时让边界情况自然融入常规逻辑，而不是单独打补丁。
- 保持代码简单直观，不过度设计复杂架构方案。
- 代码应表达实际逻辑，结构清晰，不保留不再使用的代码，不留无用的混淆项，避免未来维护困惑。
- 在代码文件中使用与用户沟通一致的语言撰写简明专业的代码注释。

2.4 需求确认与制定实施计划

这一步是与模型沟通，问模型有哪些实现的细节是他不确认的，直到让模型完全了解你的想法和需求，再让模型把详细的to do给记下来，然后再去写代码。

对于要实现的需求，你现在还有哪些是不清楚的？你有哪些是需要确认的？我们先把这些沟通清楚，在我明确指示之前不要写代码。

对于像Claude code、Gemini这样一些命令行工具，打开之后，它默认是不会直接修改代码，或者它会在修改代码前让你先去确认，使用 Claude code 可以按 「Tab + Shift」切换到 plan 模式，也可以明确的指示模型，先不要写代码，直到完全理解你的需求。

当与模型沟通清楚你的需求后，让AI把它要做的事情列成 TODO 记录到一个文件里面，方便查看进展。

拆分你的具体实现步骤，记录到 @docs/TODO.md 中

2.5 了解相关专业术语

如果要做的应用是一个自己不是很了解的领域，为了在后续更好的引导模型去实现这个应用，可以在刚开始先去让模型帮助你去补充这方面的一些知识，比如：

  1. 作为一个从来没有接触过开发的人，要搞清楚「前端」「后端」等这样一些术语，了解数据库等等一些东西是用来做什么的
  2. 在后续部署服务时，如果使用了 Docker、K8S等技术的作用与使用
  3. 在接触其他的领域时，也要去了解其他领域的一些术语，才可以更好的去与模型交流，让模型去更好的更准确的去实现自己的想法
我想做一个「从从容容」工作助手网页，但是我是一个小白，对这方面不了解，请给我解释下需要掌握的专业技术术语

三、将想法化作现实

接下来就是最期待的时刻，让AI把你的想法化为实际

3.1 实现需求

让模型根据之前生成的文档去写代码

把当前目录初始化为Git仓库，然后根据 @docs 中的需求文档写代码

模型写完代码以后，让模型再给出具体的服务运行方式

如何运行服务，将具体的步骤写入到 @docs/user-guide.md 中

3.2 优化实现/解决BUG

在使用模型生成代码的过程中，很大一部分时间都是在这个环节

如果不出意外的话，模型生成出来的应用是与你的预期是有一定的差异的，现在就要让模型去根据你的想法去修改代码

在描述问题时，尽量把问题描述清楚，可以附带提供图片方便模型去更精准的识别当前的问题。

只使用一个模型时，有时候模型解决问题时会“转牛角尖”，可以适当的交替其他模型/工具来解决问题。比如使用 gemini 解决问题时久久不能有一个好的解决方法，可以切换 claude 来解决。

3.2.1 示例1: 页面UI不符合预期

目前实践发现在 Google AI Studio 中生成的UI页面效果更好一些

可能会由于前期沟通时对于页面UI上的各种组件、功能的展示没有明确的要求，模型“随意发挥”，导致页面样式与预期有很大的偏差，这个时候也可以与模型进行更详细的沟通，或者给模型提供一个现成的 UI 界面图片（比如找一个类似的网页，截图发给模型做参考）

当前页面与我预期不符合，需要改成xxx，可以参考 @images/ui-1.png

3.2.2 示例2: 应用页面bug

模型实现的页面可能会存在下拉框被其他的组件遮挡、错位等情况，可以直接截图，用框框住相应的地方，然后交给模型去修复

现在页面上xx位置的下拉框，展开时会被下面的xx组件遮挡，具体情况见图片 @images/u-err-1.png 中红框框住的位置，修复这个问题。

3.2.3 示例3: 增加/优化需求

在前期规划时某个功能可能是比较简单，当实现一个初版，在测试或者实际的使用过程中，会发现可优化的地方

比如对需要对记账功能日期解析能力的增强

用户使用记账功能时，对于“今天中午吃了牛肉面，花费20元，昨天下午晚饭花费10元”这样的记录，需要可以识别到不同的日期

3.3 让模型根据互联网上的文档实现功能

3.3.1 案例1：有想法、了解相关技术实现

比如想要实现的功能需要调用阿里云等云厂商服务的接口，可以先去云厂商相关产品的文档中查找相关的接口文档，然后将链接及相关需求发给AI

语音识别需要适配阿里云 Fun-ASR 相关模型，下面是相应的 API 文档链接
- https://bailian.console.aliyun.com/cn-beijing/?spm=5176.8351553.console-base_search-panel.dtab-product_sfm.31e81598s0bIqL&tab=api#/api/?type=model&url=2983778

3.3.2 案例2：有想法、不了解相关技术实现

有一个想法，但是不清楚有没有相关的工具去实现，比如想要获取元山A座附近2km的饭店，这时候如果不知道有没有什么好的方法，就让AI给出方案，但是像 Gemini 等模型可能提供的方案操作实施起来比较“愚蠢”，比如让你在饿了么/美团/大众点评等app上截图然后把图片发给它，然后模型通过图片识别来提取图片中的内容

可以使用 grok.com 来进行网络上内容的搜索总结，直接把自己的需求给AI描述

给 grok 提示词:

如何获取"元山A座"（上海市长宁区新泾镇淞虹路207号生命元山）周围2公里所有的饭店及对应的菜，用来要包含，饭店-位置-距离这个地点位置-菜名-价格，保存到一个json文件中

给出的结果中包含了可以使用高德地图提供的API来实现，并且提到个人开发者有免费使用额度

然后继续让Grok提供相关的接口文档：

给出使用高德地图API获取某个地点周围饭店的接口文档

然后让Gemini去写脚本，获取元山附近的饭店：

获取生命元山(长宁区新泾镇淞虹路207号生命元山)周围2公里以内所有的饭店，包括饭店名称、位置、距离这个地点位置、菜名(如果有的话)，保存到一个json文件中（保存到 @rest-data-gaode.json中，可以自己创建文件）

可以使用高德地图的API来实现，相关参考文档如下：
1. https://lbs.amap.com/api/webservice/guide/api-advanced/newpoisearch

请查阅文档，编写脚本来获取，需要使用到的 key 为：xxxx

3.4 功能扩展

自己的想法都实现之后，可以再让模型对当前的项目再给出优化推荐

针对现在的项目有什么优化建议、新增功能、UI界面样式优化，列出来我们讨论一下

3.5 安全考虑

自己在开发调试时，可能会把模型的 API KEY、某些用户名密码保存到项目文件中，这些信息可能会被模型在生成代码、测试的过程中硬编码到代码文件中，为了避免这些敏感信息被暴露，建议检查一下代码中是否存在这些信息，但是自身可能不了解代码，所以可以多个编程工具结合来检查

比如我主要使用 Gemini 来生成整个项目的代码，在检查时可以使用Claude code接着其他模型来检查整个项目中的代码，打开cloud code，输入以下内容：

检查整个项目中所有的代码配置，查看是否存在API KEY、密码等敏感信息硬编码的情况

3.6 经验总结

  1. 要把需求详细的描述出来，写到 markdown 文件中，作为 AI 工具的 Memory Bank
  2. 使用 git 管理 AI 写的代码，或者熟悉claude code/gemini 等工具的/rewind命令，防止 AI 把整个项目的代码搞崩
  3. 修改/实现功能不可贪多，每次一个即可，验证无误之后 git commit 代码（可以使用 claude code/gemini 等工具的自定义命令）
  4. 任何不懂的东西，都可以让 AI 做详细的解释
  5. 通过 CLAUDE.md/GEMINI.md 等上下文文件来指导/约束模型

四、扩展阅读

Vibe Coding:

工具使用：