企业官网建设流程全解析

第2章 Vibe Coding：你的 AI 编程搭档

本章你将完成的事

• 理解 Vibe Coding 的核心理念与能力边界
• 学会使用 TRAE 这款 AI 编程工具
• 通过硅基流动平台接入国内大模型
• 动手跑通第一个 AI+X 小项目：智能书摘生成器
• 掌握与 AI 协作的三条黄金法则

预计用时：90 分钟（含动手实践）
难度：⭐（零基础可完成）

2.1 Vibe Coding 是什么、能做什么

2.1.1 从一个场景说起

假设你是一位中文系的学生，老师布置了一篇作业：分析《红楼梦》前五回的叙事结构。传统做法是——翻开书，逐回读，做笔记，写分析。一周下来，你可能写出了三千字，但总觉得"隔了一层"。

如果你会 Vibe Coding，你可以这样做事：

“我有一份《红楼梦》前五回的文本。请帮我写一个程序，自动抽取每一回的人物对话、场景描写和判词，并生成一张人物出场频次图。”

AI 会在几分钟内为你生成可运行的代码。你运行它，得到一张清晰的图表，再结合自己的文学素养去解读——技术帮你处理了繁琐的机械工作，而你的专业判断力依然是最值钱的部分。

这就是 Vibe Coding：用自然语言指挥 AI 写代码，让非计算机专业的你，也能做出可运行的项目。

2.1.2 Vibe Coding 的定义

Vibe Coding（直译"氛围编程"）一词由 AI 领域研究者 Karpathy 在 2025 年提出，核心理念是：

编程的重点不再是记忆语法，而是描述意图。你负责"想清楚要什么"，AI 负责"把它写出来"。

它与传统编程的区别如下：

2.1.3 Vibe Coding 能做什么、不能做什么

能做的：

• 生成完整的小型项目代码（网页、小程序、数据分析脚本）
• 调用大模型 API 完成智能任务（对话、生成、分析）
• 快速搭建可演示的界面（Gradio、Streamlit）
• 解释代码、修复报错、生成文档

不能（或暂不宜）做的：

• 完全替代你的专业判断——AI 不懂你的学科，需要你给出正确的方向
• 保证 100% 正确——它可能"一本正经地胡说"，你需要会验证
• 处理对安全性、可靠性要求极高的生产系统——这仍需专业工程师

💡一句话总结：Vibe Coding 让你从"代码工人"变成"项目导演"，但导演必须懂戏。

2.2 工具与模型：TRAE + 硅基流动

本节介绍贯穿全书使用的工具组合：TRAE（AI 编程环境）+硅基流动（国内大模型 API 平台）。这两个工具都对学生友好、国内可直接访问。

2.2.1 TRAE：你的 AI 集成开发环境

TRAE是一款面向 AI 时代的集成开发环境（IDE），你可以把它理解为"装了 AI 大脑的编辑器"。它的核心特点：

• 对话式编程：在侧边栏用自然语言描述需求，AI 直接在编辑器中生成或修改代码
• 项目级理解：AI 能读懂整个项目的文件结构，而不是只看当前文件
• 内置终端：生成代码后可直接运行、查看报错、让 AI 修复，形成闭环
• 国内直连：无需特殊网络配置，注册即用，对学生友好

安装与初次使用：

1. 访问 TRAE 官网下载安装包（支持 Windows / macOS）

2. 安装后使用邮箱注册登录

3. 新建一个文件夹作为你的项目目录，用 TRAE 打开

4. 在侧边栏对话框中输入你的第一条指令，例如：

“帮我创建一个 Python 项目，功能是接收用户输入的一段文字，返回它的字数统计。”

TRAE 会为你生成代码文件，你只需点击运行即可。

📌全书约定：书中所有"在 TRAE 中操作"的步骤，都会以引用块的形式给出指令原文，你可以直接复制粘贴到 TRAE 的对话框中。

2.2.2 硅基流动：一个 Key 接入国内大模型

硅基流动（SiliconFlow）是国内的 AI 模型 API 聚合平台。它的价值在于：注册一个账号、获取一个 API Key，就能调用几十种国内大模型，包括：

• 通义千问 Qwen 系列（如 Qwen2.5-7B-Instruct、Qwen3-8B，免费可用）
• DeepSeek 系列（如 DeepSeek-R1，免费可用）
• 智谱 GLM 系列
• 文心一言、百川、零一万物等

对学生来说，它最大的好处是：许多模型有免费额度，注册即用，无需复杂资质审核，国内网络直连。

获取 API Key 的步骤：

1. 访问硅基流动官网（siliconflow.cn），用手机号注册
2. 登录后进入"控制台" → “API 密钥”
3. 点击"新建 API 密钥"，复制生成的sk-xxxxxxxx格式的密钥
4. 保存好这个密钥，不要泄露、不要上传到公开仓库

⚠️安全提醒：API Key 等于你的钱包。书中所有代码示例都会用环境变量来读取密钥，绝不硬编码到代码里。请养成这个习惯。

2.2.3 硅基流动 API 的工作原理

硅基流动提供的是一套REST API——简单说，就是你用 HTTP 请求（就是网页加载时用的那种协议）向它的服务器发一条消息，服务器返回模型的回复。

一次完整的调用长这样：

请求地址：https://api.siliconflow.cn/v1/chat/completions 请求方法：POST 请求头： Authorization: Bearer sk-你的密钥 Content-Type: application/json 请求体（JSON）： { "model": "Qwen/Qwen2.5-7B-Instruct", "messages": [{"role": "user", "content": "你好"}] }

服务器会返回一段 JSON，里面包含模型的回复。

这意味着：我们只需要 Python 自带的requests库（用来发 HTTP 请求）就能调用大模型，不需要任何额外的 SDK。这种方式的好处是：

• 依赖极少，只装一个requests库
• 代码完全透明，你能看清每一次请求的结构
• 不绑定任何特定厂商的 SDK，迁移到别的平台也容易

2.2.4 验证你的 API 能用

在终端运行下面这段命令（替换为你自己的 Key），如果返回了一段文字，说明接入成功：

curlhttps://api.siliconflow.cn/v1/chat/completions ^-H"Authorization: Bearer sk-你的密钥"^-H"Content-Type: application/json"^-d"{\"model\":\"Qwen/Qwen2.5-7B-Instruct\",\"messages\": [{\"role\":\"user\",\"content\":\"你好，请用一句话自我介绍\"}]}"

📌Windows 用户注意：Windows 的curl命令行换行用^，JSON 里的引号要用\"转义。如果你觉得麻烦，可以直接跳到 2.3 节，用 Python 代码来验证，效果一样。

如果你看到一段 JSON 返回，里面包含模型的回复，恭喜你——你已经接入了 AI。

2.3 十分钟跑通第一个 AI+X 小项目：智能书摘生成器

项目目标：做一个网页应用，用户粘贴一段长文本（书章、论文、文章），系统自动生成结构化书摘（摘要 + 核心观点 + 金句 + 思维导图）。

学科融合点：这是一个人人可用的通用项目，但你可以替换成任何学科文本——中文系分析小说、历史系处理史料、法学系梳理判例、医学系整理文献。核心代码不变，变的只是你喂给它的文本。

技术栈：Python + requests + Streamlit + 硅基流动 API

2.3.1 项目规格说明书

2.3.2 第一步：准备项目环境

新建一个文件夹book-summary，用 TRAE 打开。在 TRAE 的对话框中输入：

“帮我创建一个 Python 项目，需要一个app.py主文件、一个requirements.txt依赖文件。requirements.txt中写入 requests、streamlit、python-dotenv 三个依赖。”

TRAE 会为你生成两个文件。你也可以手动创建。

requirements.txt内容如下：

requests>=2.28.0 streamlit>=1.30.0 python-dotenv>=1.0.0

安装依赖（在 TRAE 内置终端中运行）：

pipinstall-rrequirements.txt

💡为什么是这三个库？

• requests：发 HTTP 请求，调用硅基流动 API
• streamlit：用 Python 快速做网页界面
• python-dotenv：从.env文件读取密钥，避免硬编码

2.3.3 第二步：配置 API Key（安全做法）

在项目根目录创建一个.env文件（注意前面的点），写入：

SILICONFLOW_API_KEY=sk-你刚刚复制的密钥

再创建一个.gitignore文件，写入：

.env __pycache__/

这样你的密钥就不会被误传到公开仓库。

💡为什么这样做？后续你可能会把项目传到 GitHub 求职展示。一旦密钥泄露，别人就能用你的额度，可能造成经济损失。这是工程师的基本素养，从第一个项目就要养成。

2.3.4 第三步：编写核心代码

在 TRAE 对话框中输入以下指令，让 AI 帮你生成代码：

“请帮我实现一个 Streamlit 应用app.py。要求：1) 用requests库调用硅基流动的 API（地址 https://api.siliconflow.cn/v1/chat/completions），API Key 从.env文件读取；2) 用户在文本框粘贴一段长文本，选择模型，点击按钮后调用大模型生成结构化书摘；3) 书摘包含一句话摘要、核心观点、金句摘录、思维导图四部分；4) 界面用 Streamlit，标题叫’智能书摘生成器’。”

AI 会生成大部分代码。生成后，请对照下面的完整代码核对、补全：

importosimportrequestsimportstreamlitasstfromdotenvimportload_dotenv# 加载环境变量load_dotenv()# 硅基流动 API 配置API_URL="https://api.siliconflow.cn/v1/chat/completions"API_KEY=os.getenv("SILICONFLOW_API_KEY")# 书摘生成的提示词模板SUMMARY_PROMPT="""你是一位资深的阅读导师。请阅读下面这段文本，生成结构化书摘，严格按照以下格式输出： ## 一句话摘要 （用一句话概括这段文本的核心内容） ## 核心观点 （列出 3-5 个核心观点，每个观点用一句话说清楚） 1. 2. 3. ## 金句摘录 （摘录 2-3 句最精彩的原文，用引号标注） ## 思维导图 （用 Markdown 缩进列表表示，体现内容的层次结构） - 主题 - 子主题1 - 要点 - 子主题2 - 要点 --- 请阅读的文本： {text} """defgenerate_summary(text:str,model:str="Qwen/Qwen2.5-7B-Instruct")->str:"""调用硅基流动的大模型生成结构化书摘"""headers={"Authorization":f"Bearer{API_KEY}","Content-Type":"application/json",}payload={"model":model,"messages":[{"role":"user","content":SUMMARY_PROMPT.format(text=text)}],"temperature":0.7,"max_tokens":2000,}response=requests.post(API_URL,json=payload,headers=headers,timeout=60)response.raise_for_status()# 如果请求失败会抛出异常result=response.json()returnresult["choices"][0]["message"]["content"]# ============ Streamlit 界面 ============st.set_page_config(page_title="智能书摘生成器",page_icon="📚",layout="wide")st.title("📚 智能书摘生成器")st.caption("AI+X 暖身项目 · 粘贴文本，一键生成结构化书摘")# 输入区text_input=st.text_area("粘贴你的文本（建议 500 字以上）",height=300,placeholder="例如：粘贴《红楼梦》某一回的原文、一篇论文摘要、一段教材内容……")# 模型选择model_choice=st.selectbox("选择模型",options=["Qwen/Qwen2.5-7B-Instruct","Qwen/Qwen3-8B","deepseek-ai/DeepSeek-R1-0528-Qwen3-8B"],index=0)# 生成按钮ifst.button("✨ 生成书摘",type="primary"):ifnottext_input.strip():st.warning("请先粘贴一段文本")eliflen(text_input)<100:st.warning("文本太短，建议至少 100 字以获得有意义的书摘")else:withst.spinner("AI 正在阅读并生成书摘……"):try:result=generate_summary(text_input,model=model_choice)st.success("生成完成！")st.markdown(result)exceptrequests.exceptions.HTTPErrorase:st.error(f"API 调用失败（HTTP 错误）：{e}\n请检查 API Key 是否正确、是否有额度。")exceptrequests.exceptions.RequestExceptionase:st.error(f"网络请求失败：{e}\n请检查网络连接。")exceptExceptionase:st.error(f"发生未知错误：{e}")

📌代码解读（这部分是你要真正理解的，不是复制粘贴就完事）：

• load_dotenv()从.env文件读取密钥，避免硬编码
• API_URL和API_KEY分开定义，方便日后替换平台
• headers里的Authorization: Bearer ...是硅基流动鉴权的标准格式
• payload就是我们 2.2.3 节讲过的请求体，包含模型名、消息列表、温度参数
• response.raise_for_status()会在请求失败时抛出异常，被下面的try/except捕获，给用户友好的提示
• SUMMARY_PROMPT是这个项目的"灵魂"——它决定了输出质量。你可以反复修改它，这是 Prompt 工程的核心练习
• temperature=0.7控制生成的随机性，0 最稳定、1 最有创意

2.3.5 第四步：运行项目

在 TRAE 终端运行：

streamlit run app.py

浏览器会自动打开http://localhost:8501。粘贴一段你专业的文本（中文系粘贴小说、法学系粘贴判例、医学系粘贴文献），点击"生成书摘"，等待几秒，你就能看到一份结构化的书摘。

运行效果如图 2-1 和图 2-2 所示：图 2-1 是应用界面，粘贴文本并选择模型后点击"生成书摘"按钮；图 2-2 是生成结果，呈现了"生成完成"提示、一句话摘要、核心观点和思维导图。

🎉恭喜！你已经完成了第一个 AI+X 项目。虽然它很简单，但它具备了 AI+X 项目的全部要素：一个学科输入 + 一个 AI 能力 + 一段可运行代码 + 一个可用界面。

2.3.6 第五步：用 TRAE 继续迭代加功能

Vibe Coding 的精髓是"小步迭代"。现在我们让 TRAE 帮项目加一个新功能。在 TRAE 对话框中输入：

“请给app.py增加一个功能：在书摘生成后，显示一个’导出为 Markdown 文件’的按钮，点击后让用户下载生成的书摘，文件名默认为book-summary.md。”

TRAE 会直接修改你的app.py，你只需运行streamlit run app.py验证新功能是否生效。

如果报错了，把报错信息复制给 TRAE，让它修复。这就是 Vibe Coding 的迭代节奏：

提需求 → AI 改代码 → 你运行验证 → （报错就）反馈给 AI → 再验证 → 满意为止

2.3.7 第六步：换一个学科，再跑一次

这个项目的真正价值在于它的"可迁移性"。请你做以下练习：

你会发现：只要修改SUMMARY_PROMPT，同一个程序就能服务于不同学科。这就是 AI+X 的底层逻辑——AI 能力是通用的，学科知识是你的，两者结合就是融合。

2.4 与 AI 协作的三条黄金法则

跑完了第一个项目，你可能会兴奋，也可能会遇到挫折。在你继续往下读、做更复杂的项目之前，请记住这三条法则。它们会贯穿全书。

法则一：你是导演，AI 是演员

AI 不会替你思考"做什么"和"为什么做"。你必须：

• 先想清楚目标：我要解决什么问题？给谁用？做到什么程度算好？
• 再描述给 AI：越具体，输出越准。“做一个书摘工具"远不如"做一个 Streamlit 应用，输入长文本，输出包含摘要、观点、金句、思维导图的 Markdown”

🎬类比：导演不会冲进片场替演员演，但他必须知道这场戏要表达什么。你也是。

法则二：永远要验证，绝不盲信

AI 会"一本正经地胡说"——代码可能跑不通，结论可能是错的。你必须：

• 运行代码：跑通了才算数，跑不通就让 AI 改
• 核对结果：AI 生成的书摘，你至少要读一遍，看它有没有胡编
• 保留怀疑：尤其是涉及数据、引用、事实的输出

⚠️真实案例：有学生让 AI 分析《红楼梦》人物关系，AI 编造了一个"贾宝玉的表妹林黛玉的姑姑"——这个人物根本不存在。专业判断力是你的最后一道防线。

法则三：小步迭代，不要一次到位

不要试图一句话让 AI 生成完整项目。正确做法是：

1. 先让它生成最小可运行版本（能跑就行）
2. 运行，看效果
3. 提一个新需求，让它改进
4. 再运行，再改进
5. 重复，直到满意

📌这一步的体现：我们刚才的项目就是迭代出来的——先有基本功能（2.3.4 节），再用 TRAE 加上"导出 Markdown"功能（2.3.6 节）。下一章你会看到，所有复杂项目都是这样长出来的。

本章小结

• Vibe Coding让非计算机专业的你也能做出可运行的 AI 项目，核心是"描述意图、审查代码、迭代引导"
• TRAE是贯穿全书的 AI 编程环境，对话式编程 + 项目级理解 + 内置终端
• 硅基流动一个 Key 接入几十种国内大模型，我们用最基础的requests库直接调用其 REST API，不依赖任何厂商 SDK
• 你已经做出了第一个 AI+X 项目——智能书摘生成器，它具备所有 AI+X 项目的雏形
• 三条黄金法则（你是导演、永远验证、小步迭代）将贯穿全书

课后练习

1. 基础题：修改SUMMARY_PROMPT，让书摘生成器输出"适合发朋友圈的 3 句话精华版"。
2. 进阶题：在 TRAE 中提出需求，给项目增加"上传 TXT 文件"的功能，让用户可以直接上传文本文件而不用粘贴。
3. 挑战题：增加"对比阅读"功能——用户粘贴两段文本，AI 分别生成书摘并对比两者的异同。

💡 完成练习后，把你的项目传到 GitHub，写一份清晰的 README。这是你 AI+X 能力的第一份资产。下一章，我们会学习如何从零设计一个属于你专业的 AI+X 项目。

下一章预告：第3章《选题与设计：找到你的 AI+X 切入点》——我们将带你用"双轴设计法"，从你自己专业的痛点出发，找到一个既有学科深度、又能用 AI 解决的真问题。