第4章 Vibe Coding 实战工作流

潘志宏_ZHPAN

41人浏览 · 2026-08-08 14:42:54

潘志宏_ZHPAN · 2026-08-08 14:42:54 发布

第4章　Vibe Coding 实战工作流

本章你将完成的事：

搭建你的 Vibe Coding 开发环境（Python + API Key + TRAE）

学会提示词设计四要素，把需求变成 AI 能听懂的指令

掌握与 AI 协作的迭代节奏：小步快跑、逐步完善

用代码审查清单确保项目"真的能跑"

体验一个 Demo：提示词优化工作台

4.1　环境搭建：三件事准备好

开始 Vibe Coding 之前，你需要准备好三样东西。整个过程不超过 15 分钟。

4.1.1　安装 Python

Python 是 AI+X 项目的编程语言基础。即使你不会写代码，也需要安装它——因为 TRAE 生成的代码需要 Python 环境来运行。

安装步骤：

访问 python.org，下载 Python 3.10 或更高版本
安装时务必勾选 “Add Python to PATH”（把 Python 添加到环境变量）
安装完成后，打开命令行，输入：

python --version

如果显示 Python 3.10.x 或更高版本，说明安装成功。

⚠️ 常见坑：如果没有勾选 “Add Python to PATH”，后面所有命令都会报错 “python 不是内部或外部命令”。重新运行安装程序，选择 “Modify”，勾选即可。

4.1.2　获取硅基流动 API Key

硅基流动是一个国内的 AI 模型 API 平台，提供 DeepSeek、Qwen、GLM 等国内大模型的免费调用额度。

获取步骤：

访问 siliconflow.cn，注册账号
登录后，进入"API 密钥"页面
点击"新建 API 密钥"，复制生成的 sk- 开头的字符串
这个字符串就是你的 API Key，妥善保管，不要泄露

💡 免费额度说明：硅基流动为新用户提供免费额度，Qwen2.5-7B、DeepSeek-R1 等模型都有免费调用额度。做本书的项目完全够用。

4.1.3　安装 TRAE

TRAE 是你的 AI 编程搭档——你用自然语言描述需求，它帮你生成代码。

安装步骤：

访问 trae.cn，下载 TRAE 安装包
安装并启动 TRAE
用你的账号登录
创建一个新项目文件夹，用 TRAE 打开

💡 TRAE 的角色：在 Vibe Coding 中，TRAE 是你的"代码生成器"。你不需要手动写代码，只需要用自然语言告诉它你想做什么，它就会帮你生成完整的可运行代码。

4.1.4　环境验证清单

打开命令行，逐行执行以下命令，确认环境搭建成功：

python --version          # 应显示 Python 3.10+
pip --version             # 应显示 pip 版本信息

在 TRAE 中创建一个新文件 test.py，输入以下内容：

import requests
print("环境搭建成功！")

用 TRAE 运行这个文件。如果输出"环境搭建成功！"，说明你的环境已经准备好了。

4.2　提示词设计：把需求变成代码

环境搭建好了，接下来是 Vibe Coding 的核心技能：提示词设计。

4.2.1　为什么提示词这么重要

在 Vibe Coding 中，提示词就是你的"需求文档"。同样一个项目想法，不同的提示词写法，AI 生成的代码质量天差地别。

看一个对比：

❌ 糟糕的提示词：

“帮我写一个分析古诗的工具”

AI 不知道你要分析什么、用什么技术、界面长什么样，生成的代码大概率不能用。

✅ 优秀的提示词：

“帮我用 Python + Streamlit 写一个古诗风格分析工具，调用硅基流动的 Qwen 模型，用户输入一首古诗，AI 分析其用词特点、句式结构、情感基调，并用结构化卡片展示结果”

AI 清楚地知道：用什么技术栈、做什么功能、界面怎么展示，生成的代码直接就能跑。

4.2.2　提示词设计四要素

一份好的 TRAE 提示词，包含四个要素：

要素	说明	示例
目标清晰	用一句话说清楚要做什么	“写一个古诗风格分析工具”
技术明确	指定语言、框架、模型	“Python + Streamlit + 硅基流动 Qwen 模型”
功能分点	逐条列出核心功能	“1. 输入古诗 2. 分析用词 3. 分析句式 4. 展示结果”
边界说明	告诉 AI 注意什么	“API Key 从 .env 文件读取，不要硬编码”

记住这个公式：

好的提示词 = 目标 + 技术栈 + 功能列表 + 边界说明

4.2.3　提示词模板

你可以直接套用这个模板来写提示词：

帮我用 Python + [界面框架] 写一个 [项目名称]，调用硅基流动的 [模型名称] 模型。

功能需求：
1. [功能1]
2. [功能2]
3. [功能3]

界面要求：
- 用 [Streamlit/Gradio] 做界面
- [布局描述]

数据来源：
- [数据从哪里来]

特别说明：
- API Key 从 .env 文件读取，变量名为 SILICONFLOW_API_KEY
- [其他注意事项]

一个完整的例子：

帮我用 Python + Streamlit 写一个古诗风格对比分析工具，调用硅基流动的 Qwen/Qwen2.5-7B-Instruct 模型。

功能需求：
1. 用户输入两首古诗
2. AI 分别分析每首诗的用词特点、句式结构、情感基调
3. 对比两首诗的风格差异，用表格展示

界面要求：
- 用 Streamlit 做界面
- 顶部是两个文本输入框，并排排列
- 中间是"开始分析"按钮
- 下方展示分析结果，先展示每首诗的分析，再展示对比表格

数据来源：
- 用户手动输入古诗文本

特别说明：
- API Key 从 .env 文件读取，变量名为 SILICONFLOW_API_KEY
- 使用 requests 库调用 API，不要用 openai SDK
- 如果 API 调用失败，显示友好的错误提示

4.2.4　体验：提示词优化工作台

为了帮助你快速写出好的提示词，我为你准备了一个工具：提示词优化工作台。

这个工具的功能是：你随便写一段粗糙的项目想法，AI 帮你优化成结构化的 TRAE 提示词。

第一步：获取代码

代码保存在 chapter4code/ 文件夹里：

chapter4code/
├── app.py              # 主程序（提示词优化工作台）
├── requirements.txt    # 依赖清单
└── .env.example        # API Key 配置模板

第二步：配置并运行

cd chapter4code
pip install -r requirements.txt
# 把 .env.example 复制为 .env，填入你的 API Key
streamlit run app.py

第三步：填写信息并生成

在界面里填写你的专业和项目想法（随便写，不用管格式），点击"优化提示词"按钮。
在这里插入图片描述

第四步：查看优化结果

AI 会把你的粗糙想法优化成一份结构化的 TRAE 提示词，包含项目目标、技术栈、功能需求、界面要求、数据来源和特别说明。

在这里插入图片描述

第五步：复制到 TRAE 开始开发

把优化后的提示词复制到 TRAE 对话框里，按下回车，TRAE 就会开始帮你生成代码。

4.3　迭代调试：与 AI 协作的节奏

TRAE 生成代码后，你需要运行、测试、修改。这个过程叫"迭代调试"。

4.3.1　小步快跑原则

Vibe Coding 的核心节奏是小步快跑：不要等所有功能都生成完才测试，而是一个功能一个功能地验证。

推荐节奏：

1. 提需求 → TRAE 生成基础代码
2. 运行 → 发现问题
3. 告诉 TRAE 问题 → TRAE 修改代码
4. 再运行 → 验证修复
5. 提下一个需求 → TRAE 添加新功能
6. 重复 2-5

4.3.2　告诉 TRAE 问题的正确方式

运行代码遇到报错时，不要自己闷头解决——把报错信息直接复制给 TRAE。

正确做法：

我运行代码时出现了以下报错：

Traceback (most recent call last):
  File "app.py", line 15, in <module>
    response = requests.post(url, json=payload, headers=headers)
requests.exceptions.HTTPError: 401 Client Error

请帮我修复这个问题。

TRAE 会分析报错原因，告诉你哪里出了问题，并给出修复方案。

错误做法：

代码跑不了，帮我修一下。

不告诉 TRAE 具体报错信息，它只能靠猜，修复效率很低。

4.3.3　迭代调试的三种常见场景

场景一：代码报错

把完整报错信息复制给 TRAE，它会帮你定位问题并修复。

场景二：功能不满足需求

告诉 TRAE 你想要什么效果，它会修改代码。例如：

现在的界面太简陋了，请帮我加上：
1. 一个标题
2. 输入框旁边加个说明文字
3. 结果区域加个边框

场景三：想添加新功能

直接告诉 TRAE 你想加什么：

请在现有代码基础上，添加一个"导出结果"按钮，
点击后把分析结果保存为 txt 文件下载。

4.3.4　迭代节奏示范

以"古诗风格分析工具"为例，展示完整的迭代过程：

第一轮：生成基础代码

提示词：“帮我用 Python + Streamlit 写一个古诗风格分析工具，用户输入一首古诗，调用硅基流动 Qwen 模型分析用词特点和情感基调，用结构化方式展示结果。API Key 从 .env 文件读取。”

TRAE 生成代码 → 运行 → 基础功能可用 ✅

第二轮：修复报错

提示词：“运行后报错：ModuleNotFoundError: No module named ‘dotenv’。请帮我修复。”

TRAE 修改 import 语句 → 运行 → 报错消失 ✅

第三轮：添加功能

提示词：“请添加一个模型选择下拉框，让用户可以选择 Qwen2.5-7B 或 Qwen3-8B。”

TRAE 添加下拉框 → 运行 → 新功能可用 ✅

第四轮：美化界面

提示词：“请把结果展示区域改成卡片样式，每张卡片显示一个分析维度。”

TRAE 修改界面代码 → 运行 → 界面更美观 ✅

这就是 Vibe Coding 的节奏：提需求 → 运行 → 修问题 → 加功能 → 再运行。每一轮都让项目变得更好一点。

4.4　代码审查清单：让代码"真的能跑"

TRAE 生成的代码，大部分时候能直接用，但偶尔也会有问题。你需要一份"代码审查清单"来确保项目真的能跑。

4.4.1　五项审查清单

每次 TRAE 生成或修改代码后，对照这份清单检查：

序号	检查项	怎么检查	常见问题
1	依赖完整性	检查 import 语句，确认所有依赖都安装了	`ModuleNotFoundError`
2	API Key 安全	确认 Key 从 `.env` 读取，不在代码里硬编码	Key 泄露风险
3	错误处理	确认 API 调用有 try-except，网络错误有提示	程序崩溃
4	界面可用性	运行后手动测试一遍，确认所有按钮能点	按钮无响应
5	输出正确性	检查 AI 返回的结果是否合理	格式错误、内容缺失

4.4.2　如何用 TRAE 做代码审查

你不需要自己逐行检查代码——让 TRAE 帮你审查：

请帮我检查这段代码，重点看以下几点：
1. 所有 import 的库是否都列在 requirements.txt 里
2. API Key 是否从环境变量读取，有没有硬编码
3. API 调用是否有错误处理
4. 有没有可能导致程序崩溃的未处理异常
5. 界面交互是否完整，按钮点击后是否有响应

TRAE 会逐项检查，并告诉你哪里需要修改。

4.4.3　常见问题速查表

问题	原因	解决方法
`ModuleNotFoundError`	依赖未安装	`pip install 包名`
`HTTP 401`	API Key 错误	检查 `.env` 文件中的 Key
`HTTP 429`	请求太频繁	等几秒后重试
`ConnectionError`	网络问题	检查网络连接
`KeyError: 'choices'`	API 返回格式异常	检查模型名称是否正确
界面打不开	Streamlit 未启动	运行 `streamlit run app.py`
中文乱码	编码问题	在文件开头加 `# -- coding: utf-8 --`

本章小结

本章你学会了 Vibe Coding 的完整工作流：

环境搭建：安装 Python、获取硅基流动 API Key、安装 TRAE——三件事准备好，15 分钟搞定。
提示词设计：好的提示词 = 目标 + 技术栈 + 功能列表 + 边界说明。写得越清楚，AI 交付的代码越靠谱。
迭代调试：小步快跑——提需求、运行、修问题、加功能、再运行。每一轮都让项目变得更好。
代码审查：用五项清单确保代码"真的能跑"——依赖完整、Key 安全、错误处理、界面可用、输出正确。

下一步，你将进入第 5 章：让代码"跑起来"的三个关键。在那里，你将学会 API 调用、模型选择和界面部署的实战技巧。

课后练习

基础题

按照本章 4.1 节的步骤，搭建你的 Vibe Coding 开发环境。运行验证代码，确认环境搭建成功。
打开提示词优化工作台，输入你的专业和一个项目想法，看看 AI 优化后的提示词是否符合四要素标准。

进阶题

用提示词模板（4.2.3 节）写一份完整的 TRAE 提示词，描述你想做的一个 AI+X 项目。然后把这段提示词输入 TRAE，看看生成的代码能否运行。
运行 TRAE 生成的代码，记录遇到的报错信息。把报错信息复制给 TRAE，让它帮你修复。记录下完整的迭代过程。

挑战题

完整体验一次 Vibe Coding 工作流：选题 → 写提示词 → TRAE 生成代码 → 运行测试 → 迭代调试 → 代码审查。记录每一步的操作和结果，形成一份"项目开发日志"。这是你第一个真正用 Vibe Coding 完成的 AI+X 项目。

本章代码清单

文件	路径	说明
主程序	`chapter4code/app.py`	提示词优化工作台完整代码
依赖清单	`chapter4code/requirements.txt`	Python 依赖包列表
配置模板	`chapter4code/.env.example`	API Key 配置模板

运行环境要求

Python 3.10+
pip（Python 包管理器）
TRAE（AI 编程工具）
硅基流动 API Key（免费注册获取）

常见报错

报错信息	可能原因	解决方法
`ModuleNotFoundError: No module named 'requests'`	依赖未安装	运行 `pip install -r requirements.txt`
`SILICONFLOW_API_KEY` 未找到	`.env` 文件未创建	在 `chapter4code/` 目录下创建 `.env` 文件
HTTP 401 错误	API Key 格式错误	检查 Key 是否有多余的空格或引号
HTTP 429 错误	免费额度已用完	等待几秒后重试，或升级到付费套餐
页面打不开	Streamlit 服务未启动	在终端运行 `streamlit run app.py`
TRAE 生成的代码无法运行	提示词不够清晰	按照 4.2.2 节的四要素重新描述需求