Vibe Coding 开发工作流：从自然语言到可运行软件的实践指南

这里写自定义目录标题

• 欢迎使用Markdown编辑器
• • 一、什么是 Vibe Coding：一场编程范式的变革
  • 二、Vibe Coding 的核心工作循环
  • 三、需求描述：Vibe Coding 的"第一生产力"
  • 四、代码审查：Vibe Coding 的"安全底线"
  • 五、实战案例：用 Vibe Coding 构建一个写作网站
  • 六、Vibe Coding 的适用边界与避坑指南
  • 七、建立自己的提示词资产库
  • 八、给 Vibe Coder 的进阶建议
  • 新的改变
  • 功能快捷键
  • 合理的创建标题，有助于目录的生成
  • 如何改变文本的样式
  • 插入链接与图片
  • 如何插入一段漂亮的代码片
  • 生成一个适合你的列表
  • 创建一个表格
  • • 设定内容居中、居左、居右
    • SmartyPants
  • 创建一个自定义列表
  • 如何创建一个注脚
  • 注释也是必不可少的
  • KaTeX数学公式
  • 新的甘特图功能，丰富你的文章
  • UML图表
  • 流程图
  • FLowchart流程图
  • 导出与导入
  • • 导出
    • 导入

欢迎使用Markdown编辑器

你好！ 这是你第一次使用# Vibe Coding 开发工作流：从自然语言到可运行软件的实践指南

一、什么是 Vibe Coding：一场编程范式的变革

Vibe Coding（氛围编程）是近两年最热门的开发方式之一。它的核心定义很简单：用自然语言描述你想要的软件效果，由 AI 完成代码生成、调试和迭代。开发者不再逐行敲代码，而是像"导演"一样描述需求、审查结果、提出修改意见。

这个概念的流行并非偶然。它背后是 AI 编程工具能力的质变——从最初只能"补全代码"的辅助工具，进化到能"理解需求、生成完整功能、自主调试"的编程伙伴。开发门槛从"会写代码"降到了"会提需求"，这让大量非专业开发者也能构建自己的软件。

但 Vibe Coding 不是"魔法"，它有自己的方法论和最佳实践。用得好，开发效率提升数倍；用不好，就是"AI 生成一堆 bug，你花更多时间修"。本文从实战角度，系统梳理 Vibe Coding 的完整工作流。

二、Vibe Coding 的核心工作循环

Vibe Coding 的工作方式可以归纳为一个循环：

描述需求 → AI 生成代码 → 运行验证 → 发现问题 → 反馈修改 → 再验证

这个循环和传统开发的"编码-调试"循环本质相同，但角色发生了转变：AI 负责"写"，你负责"审"和"导"。你的核心工作从"怎么写代码"变成了"怎么描述需求、怎么发现问题、怎么引导 AI 修正"。

这个转变带来三个关键能力要求：

第一，需求描述能力。AI 只能理解你表达出来的需求。需求描述得越清晰、越具体，AI 生成的代码越接近你的预期。模糊的需求只会得到模糊的实现。

第二，结果审查能力。AI 生成的代码可能有 bug、有安全隐患、有性能问题。你需要能看懂代码在做什么，能发现问题并准确反馈给 AI。

第三，迭代引导能力。软件开发是迭代的过程，AI 生成的第一版很少完美。你需要能指出问题、提出修改方向，引导 AI 逐步逼近目标。

三、需求描述：Vibe Coding 的"第一生产力"

需求描述是 Vibe Coding 中最重要也最容易被低估的环节。好的需求描述能让 AI 一次到位，差的需求描述会让 AI 反复返工。

高质量需求描述的几个要点：

明确目标和场景。不要只说"做一个记账软件"，要说清楚"给谁用、解决什么问题、核心功能有哪些"。比如"做一个面向自由职业者的记账软件，能记录收入和支出、按项目分类、生成月度报表"。

给出具体细节。界面布局、交互方式、数据格式、异常处理，越具体越好。AI 不会主动猜测你的偏好，你不说它就用默认方案。

分步描述，逐步实现。不要一次描述一个庞大系统，让 AI 一次性生成。先把核心功能跑通，再逐步添加细节。小步快跑是 Vibe Coding 的核心节奏。

提供示例和参考。如果你有参考的界面、数据样例或类似产品，直接提供给 AI，比文字描述高效得多。

一个实用的技巧是"角色 + 任务 + 约束"的结构化描述：告诉 AI 它扮演什么角色（“你是一位资深前端工程师”）、要完成什么任务（“实现一个任务管理页面”）、有什么约束（“使用 Vue 3 + TypeScript，样式简洁现代”）。

四、代码审查：Vibe Coding 的"安全底线"

AI 生成的代码不能盲目信任。代码审查是 Vibe Coding 工作流中不可省略的环节，它既是质量保障，也是安全底线。

审查的重点包括：

功能正确性：代码是否实现了需求描述的功能？边界情况是否处理了？比如输入为空、数据超长、网络异常等场景。

安全性：AI 生成的代码可能存在安全漏洞——SQL 注入、XSS、敏感信息硬编码、不安全的文件操作。尤其涉及用户数据、支付、权限控制的功能，必须仔细审查。

代码质量：是否有明显的性能问题？是否有冗余代码？是否符合项目的代码规范？AI 生成的代码风格可能和你的项目不一致，需要统一。

依赖安全：AI 可能引入不熟悉的第三方库，要检查这些库是否可信、是否有已知漏洞、是否有维护。

审查时如果发现问题，不要直接改代码，而是把问题反馈给 AI，让它修改。这样既能保持工作流的一致性，也能让 AI 学习你的偏好。

五、实战案例：用 Vibe Coding 构建一个写作网站

下面用一个真实案例，展示 Vibe Coding 的完整工作流。需求：一个写作者想要一个符合自己习惯的写作网站，集成灵感收集、分段写作、版本管理、多端同步等功能。

第一步，描述核心需求。向 AI 描述：“我要做一个个人写作网站，支持灵感收集、分段写作、段落涂色标记、多章节拼合、版本管理、多端实时同步、多种格式导出。”

第二步，搭建骨架。让 AI 生成项目骨架——技术栈、目录结构、基础页面。先跑通一个能打开的页面。

第三步，逐个实现功能。按优先级逐个添加功能：先做编辑器（分段写作、段落涂色），再做版本管理，再做同步和导出。每个功能实现后立即运行验证。

第四步，迭代打磨。使用过程中发现问题（比如某个交互不顺手、某个功能有 bug），随时反馈给 AI 修改。

这个案例的关键启示是：Vibe Coding 不是"一次生成一个完整产品"，而是"快速搭建 + 持续迭代"。写作者不需要懂编程，但需要清楚自己的需求，并能判断 AI 的实现是否符合预期。

六、Vibe Coding 的适用边界与避坑指南

Vibe Coding 很强大，但不是万能的。明确它的边界，能帮你避免踩坑。

适合的场景：工具类应用、原型验证、个人项目、中小型业务系统。这些场景需求相对明确、复杂度可控，AI 能高效完成。

不适合的场景：对性能要求极高的系统、涉及复杂算法和底层优化的项目、安全敏感的核心系统、需要深度领域知识的专业软件。这些场景 AI 生成的代码质量难以保证，需要专业工程师主导。

常见坑与对策：

一是"需求黑洞"。需求描述不清，AI 反复返工。对策：需求描述要具体、分步实现、及时反馈。

二是"代码失控"。AI 生成大量代码，但没人能看懂、没人能维护。对策：保持代码规模可控，定期重构，确保自己理解核心逻辑。

三是"安全盲区"。AI 生成的代码存在安全隐患。对策：涉及敏感数据的功能必须人工审查，必要时引入安全测试。

四是"过度依赖"。把 AI 当成"万能程序员"，遇到问题只会让 AI 改，自己完全不懂。对策：保持对代码的理解，把 AI 当工具而不是替代品。

七、建立自己的提示词资产库

Vibe Coding 效率的提升，很大程度来自"复用"。与其每次从零描述需求，不如把常用的需求模板、代码规范、审查清单沉淀成可复用的"提示词资产库"。

一个实用的提示词资产库通常包含几类内容：

需求模板：针对常见应用类型（CRUD 管理后台、数据看板、表单系统、内容网站）的标准化需求描述模板。每次新建项目时，套用模板再补充具体细节，能大幅减少描述成本。

代码规范提示词：把项目的代码规范（命名风格、目录结构、组件组织、错误处理方式）写成提示词，在每次让 AI 生成代码时附带，保证 AI 输出与项目风格一致。

审查清单：把代码审查的检查项（功能正确性、安全性、性能、依赖安全）固化成清单，每次审查时对照执行，避免遗漏。

常用工具链提示词：把常用的工具调用方式、第三方库用法、调试技巧记录下来，需要时直接引用。

资产库的维护本身也是 Vibe Coding 的实践——你可以让 AI 帮你整理、优化这些模板。随着资产库越来越丰富，你的 Vibe Coding 效率会越来越高，形成正向循环。

八、给 Vibe Coder 的进阶建议

最后给正在实践 Vibe Coding 的开发者几点建议。

第一，把需求描述当成"编程语言"来修炼。Vibe Coding 时代，需求描述能力就是你的核心竞争力。多练习把模糊想法转化为清晰、具体、可执行的需求描述。

第二，保持"人在环"的审查意识。AI 是高效的执行者，但你是最终的责任人。每个功能上线前，都要自己验证、审查。

第三，建立自己的"提示词资产库"。把常用的需求模板、代码规范、审查清单沉淀下来，形成可复用的提示词库，能大幅提升效率。

第四，关注工具演进。Vibe Coding 工具迭代极快，新工具、新能力层出不穷。保持学习，把更好的工具纳入自己的工作流。

Vibe Coding 不是"让 AI 替代程序员"，而是"让每个人都能成为软件创造者"。掌握这套工作流，你就能把想法快速变成可运行的软件，把精力从"怎么写"解放到"做什么"上。

Markdown编辑器所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。

新的改变

我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：

1. 全新的界面设计，将会带来全新的写作体验；
2. 在创作中心设置你喜爱的代码高亮样式，Markdown将代码片显示选择的高亮样式进行展示；
3. 增加了图片拖拽功能，你可以将本地的图片直接拖拽到编辑区域直接展示；
4. 全新的KaTeX数学公式语法；
5. 增加了支持甘特图的mermaid语法¹功能；
6. 增加了多屏幕编辑Markdown文章功能；
7. 增加了焦点写作模式、预览模式、简洁写作模式、左右区域同步滚轮设置等功能，功能按钮位于编辑区域与预览区域中间；
8. 增加了检查列表功能。

功能快捷键

撤销：Ctrl/Command+Z
重做：Ctrl/Command+Y
加粗：Ctrl/Command+B
斜体：Ctrl/Command+I
标题：Ctrl/Command+Shift+H
无序列表：Ctrl/Command+Shift+U
有序列表：Ctrl/Command+Shift+O
检查列表：Ctrl/Command+Shift+C
插入代码：Ctrl/Command+Shift+K
插入链接：Ctrl/Command+Shift+L
插入图片：Ctrl/Command+Shift+G
查找：Ctrl/Command+F
替换：Ctrl/Command+G

合理的创建标题，有助于目录的生成

直接输入1次#，并按下space后，将生成1级标题。
输入2次#，并按下space后，将生成2级标题。
以此类推，我们支持6级标题。有助于使用TOC语法后生成一个完美的目录。

如何改变文本的样式

强调文本强调文本

加粗文本加粗文本

标记文本

删除文本

引用文本

H₂O is是液体。

2¹⁰运算结果是 1024.

插入链接与图片

链接: link.

图片:

带尺寸的图片:

居中的图片:

居中并且带尺寸的图片:

当然，我们为了让用户更加便捷，我们增加了图片拖拽功能。

如何插入一段漂亮的代码片

去博客设置页面，选择一款你喜欢的代码片高亮样式，下面展示同样高亮的代码片.

// An highlighted blockvarfoo='bar';

生成一个适合你的列表

• 项目
  • 项目
    • 项目

1. 项目1
2. 项目2
3. 项目3

• 计划任务
• 完成任务

创建一个表格

一个简单的表格是这么创建的：

项目	Value
电脑	$1600
手机	$12
导管	$1

设定内容居中、居左、居右

使用:---------:居中
使用:----------居左
使用----------:居右

第一列	第二列	第三列
第一列文本居中	第二列文本居右	第三列文本居左

SmartyPants

SmartyPants 是一个文本转换工具，主要功能是将普通的 ASCII 标点符号自动转换为更美观的印刷体标点符号。例如：

原始符号	转换后	说明
"引号"	“引号”	直引号变弯引号
'单引号'	‘单引号’	直单引号变弯单引号
--	–	两个连字符变短破折号
---	—	三个连字符变长破折号
...	…	三个点变省略号

创建一个自定义列表

Markdown

Text-to-HTMLconversion tool

Authors

John

Luke

如何创建一个注脚

一个具有注脚的文本。²

注释也是必不可少的

Markdown将文本转换为HTML。

KaTeX数学公式

您可以使用渲染LaTeX数学表达式 KaTeX:

Gamma公式展示Γ ( n ) = ( n − 1 ) ! ∀ n ∈ N \Gamma(n) = (n-1)!\quad\forall n\in\mathbb NΓ(n)=(n−1)!∀n∈N是通过欧拉积分

Γ ( z ) = ∫ 0 ∞ t z − 1 e − t d t . \Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,.Γ(z)=∫0∞​tz−1e−tdt.

你可以找到更多关于的信息LaTeX数学表达式here.

新的甘特图功能，丰富你的文章

• 关于甘特图语法，参考 这儿,

UML图表

可以使用UML图表进行渲染，例如下面产生的一个序列图：

• 关于UML图表语法，参考 这儿,

流程图

• 关于Mermaid语法，参考 这儿,

FLowchart流程图

我们依旧会支持flowchart.js的流程图语法：

• 关于Flowchart流程图语法，参考 这儿.

导出与导入

导出

如果你想尝试使用此编辑器, 你可以在此篇文章任意编辑。当你完成了一篇文章的写作, 在上方工具栏找到文章导出，生成一个.md文件或者.html文件进行本地保存。

导入

如果你想加载一篇你写过的.md文件，在上方工具栏可以选择导入功能进行对应扩展名的文件导入，
继续你的创作。

---

1. mermaid语法说明 ↩︎

2. 注脚的解释 ↩︎