447 lines
16 KiB
TeX
447 lines
16 KiB
TeX
\chapter{Vibe Coding与工具链}
|
||
|
||
本附录介绍Vibe Coding的概念与实践，以及VsCode、Claude
|
||
Code、Markdown/Obsidian、Git/GitHub等核心工具的使用方法。
|
||
|
||
\section{Vibe Coding的概念与工具}
|
||
|
||
\subsection{什么是Vibe Coding}
|
||
|
||
传统编程遵循``明确需求 → 设计算法 → 编写代码''的线性流程，而 Vibe Coding 则转变为``\textbf{模糊想法 → AI辅助 → 迭代完善}''。这是一种以AI为核心的编程新模式：开发者用自然语言描述意图，AI生成代码，再通过迭代对话逐步完善。对于编程经验较少的设计专业读者而言，这种模式大幅降低了技术门槛——不需要记住语法细节，只需要清楚地表达”想要什么”。
|
||
|
||
然而，编程技术门槛的降低并不意味着对原理理解的放松。《Unix编程艺术》\cite{RP2EHXXB}中提出了一条经典原则——``机制，而非策略''（Mechanism, not policy）：好的系统应当提供稳定、通用的底层能力（机制），而将具体的使用方式和决策（策略）交给使用者。在 Vibe Coding 中，这一关系发生了有趣的反转：AI 承担的恰恰是``策略''的角色——它根据开发者的意图，自主选择实现方案、生成具体代码、决定技术路线；而开发者则必须掌握``机制''——理解算法原理、架构模式和调试方法——才能判断 AI 的策略是否正确。这意味着，Vibe Coding 对开发者的要求从``会写代码''转向了``会判断代码''：你需要理解架构原理才能审查AI的方案，需要掌握调试方法才能发现AI的错误，需要对领域知识有足够认知才能提出正确的问题。换言之，\textbf{AI 降低了编程的执行门槛，却提高了对思维门槛的要求}。
|
||
|
||
\subsection{工作流程}
|
||
|
||
Vibe Coding 的基本流程是：\textbf{描述意图}→AI生成代码→运行测试→迭代优化→理解学习。例如，先让AI"创建一个图像分类模型"，运行后发现问题，再逐步调整——"把隐藏层改成128个神经元"——最终阅读并理解AI生成的代码。简单任务可直接通过对话完成；面对较复杂的项目，推荐采用更结构化的四阶段工作流——\textbf{Explore-Plan-Code-Commit}（EPCC，表\ref{tab:epcc}），将 Vibe Coding 从"随意迭代"提升为"有章法的 AI 协作"。
|
||
|
||
\begin{table}[htbp]
|
||
\centering
|
||
\caption{Explore-Plan-Code-Commit 工作流四阶段}
|
||
\label{tab:epcc}
|
||
\begin{tabular}{@{} l l p{3.5cm} p{5.5cm} @{}}
|
||
\toprule
|
||
\textbf{阶段} & \textbf{英文} & \textbf{目的} & \textbf{典型操作} \\
|
||
\midrule
|
||
探索 & Explore & 理解项目全貌，避免脱离实际 & 通读现有代码、搜索相关文件、理解架构与已有模式 \\[3pt]
|
||
规划 & Plan & 先想清楚再动手，确保方向正确 & 让 AI 生成实施方案，审查确认后再编码 \\[3pt]
|
||
编码 & Code & 按计划逐步实现 & 分步实现功能、逐步验证、遇到问题回退调整 \\[3pt]
|
||
提交 & Commit & 阶段性成果存档，保留历史轨迹 & 及时 git commit，附上有意义的说明 \\
|
||
\bottomrule
|
||
\end{tabular}
|
||
\end{table}
|
||
|
||
\textbf{示例场景}：为景观设计项目创建一个植物配置推荐工具。
|
||
|
||
\begin{enumerate}
|
||
\def\labelenumi{\arabic{enumi}.}
|
||
\item
|
||
\textbf{Explore}：让 AI 先通读项目中的植物数据库、现有推荐逻辑和用户反馈文件，理解上下文
|
||
\item
|
||
\textbf{Plan}：请求 AI 制定方案——``先分析需求，列出要实现的模块，我确认后再开始写代码''
|
||
\item
|
||
\textbf{Code}：按方案逐模块实现，每完成一个模块就运行验证
|
||
\item
|
||
\textbf{Commit}：每个功能模块完成后提交一次，如 ``feat: 添加按气候区域筛选植物的功能''
|
||
\end{enumerate}
|
||
|
||
EPCC 的核心理念是\textbf{先理解、再规划、后动手、常存档}——这与传统的"边写边想"形成对比，特别适合设计专业读者在 AI 辅助下管理复杂项目。
|
||
|
||
\subsection{工具生态}
|
||
|
||
当前 AI 编程工具已形成多种产品形态，各有侧重（表\ref{tab:ai-tools}）。
|
||
|
||
\begin{table}[htbp]
|
||
\centering
|
||
\caption{AI 编程工具的分类与代表产品}
|
||
\label{tab:ai-tools}
|
||
\begin{tabular}{@{} l l p{3.2cm} p{4.5cm} @{}}
|
||
\toprule
|
||
\textbf{类别} & \textbf{代表工具} & \textbf{特点} & \textbf{适用场景} \\
|
||
\midrule
|
||
网页对话 & ChatGPT、Claude.ai & 代码生成与解释，零配置 & 学习咨询、快速原型 \\[3pt]
|
||
编辑器插件 & GitHub Copilot、Cline & 实时补全与对话，融入现有 IDE & 日常开发 \\[3pt]
|
||
AI 原生 IDE & Cursor、Windsurf & 对话式编程，深度集成项目理解 & 快速原型、中型项目 \\[3pt]
|
||
终端智能体 & Claude Code、Codex CLI & CLI 操作，多文件协作，架构级推理 & 项目级开发、大型重构 \\[3pt]
|
||
云端自主智能体 & OpenAI Codex、Devin & 云端沙箱全自动执行 & 重复性任务、CI/CD 集成 \\
|
||
\bottomrule
|
||
\end{tabular}
|
||
\end{table}
|
||
|
||
初学者可从``网页对话''入手，逐步过渡到``编辑器插件''和``AI 原生 IDE''。对于需要深度掌控项目结构的中大型工作，``终端智能体''提供了最强的控制力和推理深度。``云端自主智能体''正在快速发展，能够独立完成从需求到部署的全流程，但在可控性和代码质量方面仍有提升空间。选择工具时，核心考量因素包括：上下文理解能力（能否理解整个项目而非单文件）、代码质量与幻觉控制（生成结果是否可靠）、以及成本效率（每次交互的 token 消耗）。
|
||
|
||
\section{Claude Code简介与使用}
|
||
|
||
\subsection{什么是Claude Code}
|
||
|
||
Claude
|
||
Code是Anthropic推出的命令行AI编程工具（CLI），能够直接在终端中理解项目上下文、读写文件、执行命令，实现端到端的AI辅助开发。它也提供VSCode扩展，可以在编辑器中无缝使用。
|
||
|
||
\subsection{安装与配置}
|
||
|
||
\emph{\# 安装（需要 Node.js 18+）}\\
|
||
npm install -g @anthropic-ai/claude-code\\
|
||
\strut \\
|
||
\emph{\# 进入项目目录后启动}\\
|
||
cd my\_project\\
|
||
claude
|
||
|
||
启动后进入交互式对话界面，直接用自然语言描述需求即可。
|
||
|
||
\subsection{核心使用方式}
|
||
|
||
\textbf{对话式开发}：用自然语言描述任务，Claude
|
||
Code会自动读取相关文件、编写代码、执行测试。
|
||
|
||
\textgreater{}
|
||
帮我创建一个数据预处理的Python脚本，读取CSV文件并清洗缺失值
|
||
|
||
\textbf{文件操作}：Claude
|
||
Code可以直接读取、创建和编辑项目中的文件，每次修改前会征得确认。
|
||
|
||
\textbf{命令执行}：可以请求Claude
|
||
Code运行终端命令，如安装依赖、运行脚本等。
|
||
|
||
\subsection{VSCode中的Claude
|
||
Code}
|
||
|
||
Claude Code提供VSCode扩展，在编辑器中获得同样的AI辅助能力：
|
||
|
||
\begin{enumerate}
|
||
\def\labelenumi{\arabic{enumi}.}
|
||
\item
|
||
在VSCode扩展商店搜索 ``Claude Code“ 并安装
|
||
\item
|
||
打开项目文件夹
|
||
\item
|
||
使用快捷键或侧边栏打开Claude面板
|
||
\item
|
||
在编辑器中选中代码后，可以直接向Claude提问或请求修改
|
||
\end{enumerate}
|
||
|
||
\textbf{常用场景}： - 选中一段代码，请求”解释这段代码“ -
|
||
选中函数，请求”添加错误处理” - 在Claude面板中输入”帮我写单元测试”
|
||
|
||
\subsection{典型项目工作流}
|
||
|
||
\textbf{推荐项目结构}：
|
||
|
||
project/\\
|
||
├── data/ \# 数据文件\\
|
||
├── notebooks/ \# Jupyter笔记本\\
|
||
├── src/ \# 源代码\\
|
||
│ ├── models/ \# 模型定义\\
|
||
│ ├── utils/ \# 工具函数\\
|
||
│ └── train.py \# 训练脚本\\
|
||
├── requirements.txt \# 依赖列表\\
|
||
└── README.md \# 项目说明
|
||
|
||
\paragraph{开发流程：}
|
||
|
||
\emph{\# 1. 创建环境}\\
|
||
conda create -n myproject python=3.10\\
|
||
conda activate myproject\\
|
||
\strut \\
|
||
\emph{\# 2. 安装依赖}\\
|
||
pip install -r requirements.txt\\
|
||
\strut \\
|
||
\emph{\# 3. 启动 Claude Code 进行AI辅助开发}\\
|
||
claude\\
|
||
\strut \\
|
||
\emph{\# 4. 保存环境}\\
|
||
conda env export \textgreater{} environment.yml
|
||
|
||
\subsection{Markdown语法及Obsidian工具}
|
||
|
||
\subsubsection{Markdown简介}
|
||
|
||
Markdown是一种轻量级标记语言，用纯文本格式编写文档，可以方便地转换为HTML、PDF等格式。它的语法简洁直观，是技术文档、笔记、学术写作的常用工具。
|
||
|
||
本书全部内容即使用Markdown编写。
|
||
|
||
\subsubsection{基础语法}
|
||
|
||
\textbf{标题}：
|
||
|
||
\# 一级标题\\
|
||
\#\# 二级标题\\
|
||
\#\#\# 三级标题
|
||
|
||
唯一的一级标题：在一个文档中，通常只使用一个一级标题作为文档的主标题，这符合良好的文档结构规范。
|
||
|
||
\textbf{文本格式}：
|
||
|
||
*斜体* **加粗** ***粗斜体***
|
||
\textasciitilde\textasciitilde 删除线\textasciitilde\textasciitilde{}
|
||
\textless{}\textbf{u}\textgreater 下划线\textless/\textbf{u}\textgreater{}
|
||
\textbf{\emph{`行内代码`}} \textbf{==高亮文本==} \_\_\_分隔线
|
||
|
||
包含反引号的代码：当代码本身包含反引号时，使用两个反引号包围，使用
|
||
`code` 这样的格式
|
||
|
||
\textbf{列表}： 列表可以嵌套使用
|
||
|
||
- 无序列表项1
|
||
|
||
- 无序列表项2
|
||
|
||
\begin{enumerate}
|
||
\def\labelenumi{\arabic{enumi}.}
|
||
\tightlist
|
||
\item
|
||
有序列表项1
|
||
\end{enumerate}
|
||
|
||
\begin{lstlisting}
|
||
2. 有序列表项2
|
||
\end{lstlisting}
|
||
|
||
- {[} {]} 未完成的任务
|
||
|
||
\begin{lstlisting}
|
||
- [x] 已完成的任务
|
||
\end{lstlisting}
|
||
|
||
\textbf{链接与图片}：
|
||
|
||
{[}链接文字{]}(https://example.com) \textless!-\/- 行内链接
|
||
-\/-\textgreater{}\\
|
||
{[}链接文字{]}{[}1{]} \textless!-\/- 参考式链接 -\/-\textgreater{}\\
|
||
{[}跳转到基础{]}(\#基础) \textless!-\/- 锚点链接 -\/-\textgreater{}\\
|
||
\strut \\
|
||
{[}1{]}: https://www.example.com \textless!-\/- 参考链接定义
|
||
-\/-\textgreater{}\\
|
||
\strut \\
|
||
!{[}图片说明{]}(image.png) \textless!-\/- 基本图片 -\/-\textgreater{}\\
|
||
*图7.8 路杀动物* \textless!-\/- 图片下方用斜体作为图注
|
||
-\/-\textgreater{}\\
|
||
\strut \\
|
||
\textless!-\/- 图片居中对齐并指定宽度 -\/-\textgreater{}\\
|
||
\textless div align="center"\textgreater{}\\
|
||
\textless img src="image.png" alt="说明"
|
||
style="width:10cm;"/\textgreater{}\\
|
||
\textless p\textgreater\textless em\textgreater 图片标题\textless/em\textgreater\textless/p\textgreater{}\\
|
||
\textless/div\textgreater{}
|
||
|
||
\textbf{代码块}：
|
||
|
||
\textbf{\emph{```python}}\\
|
||
print("Hello, World!")\\
|
||
\textbf{\emph{```}}
|
||
|
||
带行号的代码区块（需要渲染器支持，如 Docusaurus、VuePress）：
|
||
|
||
\textbf{\emph{```javascript linenums="1"}}\\
|
||
\textbf{\emph{function greet(name) \{}}\\
|
||
\textbf{\emph{console.log(`Hello, \$\{name\}!{\kern0pt}`);}}\\
|
||
\textbf{\emph{\}}}\\
|
||
\textbf{\emph{```}}
|
||
|
||
表格：
|
||
|
||
\textbar{} 列1 \textbar{} 列2 \textbar{} 列3 \textbar{}\\
|
||
\textbar-\/-\/-\/-\/-\textbar-\/-\/-\/-\/-\textbar-\/-\/-\/-\/-\textbar{}\\
|
||
\textbar{} 内容 \textbar{} 内容 \textbar{} 内容 \textbar{}
|
||
|
||
对齐方式：:-\/-\/- 左对齐，:-\/-\/-: 居中，-\/-\/-: 右对齐：
|
||
|
||
\textbar{} 左对齐 \textbar{} 居中对齐 \textbar{} 右对齐 \textbar{}\\
|
||
\textbar{} :-\/-\/-\/-\/- \textbar{} :-\/-\/-\/-\/-\/-: \textbar{}
|
||
-\/-\/-\/-\/-: \textbar{}\\
|
||
\textbar{} 内容 \textbar{} 内容 \textbar{} 100 \textbar{}
|
||
|
||
\textbf{注记}： 输入后在Obsidian编辑器中会自动弹出添加注记模块
|
||
|
||
脚注{[}\^{}1{]}
|
||
|
||
\textbf{引用}：
|
||
|
||
\textgreater{} 这是一段引用文字\\
|
||
\strut \\
|
||
\textgreater{} 多级嵌套引用\\
|
||
\textgreater{} \textgreater{} 第二层\\
|
||
\textgreater{} \textgreater{} \textgreater{} 第三层\\
|
||
\strut \\
|
||
\textgreater{} **本章要点**\\
|
||
\textgreater{}\\
|
||
\textgreater{} - 了解项目背景和目标\\
|
||
\textgreater{} - 掌握核心功能特性
|
||
|
||
\paragraph{图表绘制（Mermaid）：}
|
||
|
||
使用 ```mermaid 代码块，部分渲染器（GitHub、Typora、Obsidian）支持：
|
||
|
||
流程图：
|
||
|
||
\textbf{\emph{```mermaid}}
|
||
|
||
\textbf{\emph{graph LR}}
|
||
|
||
\begin{enumerate}
|
||
\def\labelenumi{\Alph{enumi}.}
|
||
\item
|
||
\textbf{\emph{{[}开始{]} -\/-\textgreater{} B\{条件判断\}}}
|
||
\item
|
||
\textbf{\emph{-\/-\textgreater\textbar 是\textbar{} C{[}执行操作1{]}}}
|
||
\item
|
||
\textbf{\emph{-\/-\textgreater\textbar 否\textbar{} D{[}执行操作2{]}}}
|
||
\item
|
||
\textbf{\emph{-\/-\textgreater{} E{[}结束{]}}}
|
||
\item
|
||
\textbf{\emph{-\/-\textgreater{} E}}
|
||
\end{enumerate}
|
||
|
||
\textbf{\emph{```}}
|
||
|
||
时序图：
|
||
|
||
\textbf{\emph{```mermaid}}\\
|
||
\textbf{\emph{sequenceDiagram}}\\
|
||
\textbf{\emph{participant 用户}}\\
|
||
\textbf{\emph{participant 系统}}\\
|
||
\textbf{\emph{用户-\textgreater\textgreater 系统: 登录请求}}\\
|
||
\textbf{\emph{系统-\/-\textgreater\textgreater 用户: 返回结果}}\\
|
||
\textbf{\emph{```}}
|
||
|
||
甘特图：
|
||
|
||
\textbf{\emph{```mermaid}}\\
|
||
\textbf{\emph{gantt}}\\
|
||
\textbf{\emph{title 项目计划}}\\
|
||
\textbf{\emph{dateFormat YYYY-MM-DD}}\\
|
||
\textbf{\emph{section 设计}}\\
|
||
\textbf{\emph{需求分析 :done, 2024-01-01, 15d}}\\
|
||
\textbf{\emph{section 开发}}\\
|
||
\textbf{\emph{编码实现 :active, 2024-01-16, 30d}}\\
|
||
\textbf{\emph{```}}
|
||
|
||
饼图：
|
||
|
||
\textbf{\emph{```mermaid}}\\
|
||
\textbf{\emph{pie}}\\
|
||
\textbf{\emph{title 市场份额}}\\
|
||
\textbf{\emph{"Chrome" : 65}}\\
|
||
\textbf{\emph{"Safari" : 15}}\\
|
||
\textbf{\emph{"其他" : 20}}\\
|
||
\textbf{\emph{```}}
|
||
|
||
\textbf{数学公式}：
|
||
|
||
行内公式用 \$...\$，块级公式用 \$\$...\$\$，语法基于 LaTeX：
|
||
|
||
质能方程 \$E = mc\^{}2\$，其中 \$c\$ 为光速。
|
||
|
||
\[\int_{- \infty}^{\infty}e^{- x^{2}}dx = \sqrt{\pi}\]
|
||
|
||
多行对齐公式：
|
||
|
||
\[\begin{aligned}
|
||
f(x) & = ax^{2} + bx + c \\
|
||
f'(x) & = 2ax + b
|
||
\end{aligned}\]
|
||
|
||
矩阵：
|
||
|
||
\[\begin{pmatrix}
|
||
a & b \\
|
||
c & d
|
||
\end{pmatrix}\]
|
||
|
||
\subsubsection{Obsidian：Markdown笔记工具}
|
||
|
||
\href{https://obsidian.md/}{Obsidian}
|
||
是一款基于Markdown的知识管理工具，适合构建个人知识库和笔记系统。
|
||
|
||
\textbf{核心特性}： -
|
||
\textbf{本地存储}：所有笔记以Markdown文件保存在本地，数据完全自主 -
|
||
\textbf{双向链接}：用 {[}{[}笔记名{]}{]}
|
||
在笔记之间建立链接，形成知识网络 -
|
||
\textbf{图谱视图}：可视化笔记之间的关联关系 -
|
||
\textbf{插件生态}：丰富的社区插件扩展功能（如日历、看板、模板等） -
|
||
\textbf{实时预览}：编辑Markdown时实时渲染效果
|
||
|
||
\textbf{使用建议}： -
|
||
用Obsidian打开本教材的根目录，即可获得完整的阅读与编辑体验 -
|
||
建议安装“目录”插件，方便在长文档中快速导航 -
|
||
利用双向链接功能，将学习笔记与教材内容关联起来
|
||
|
||
\subsection{Git版本管理与GitHub协作}
|
||
|
||
\subsubsection{为什么需要版本管理}
|
||
|
||
在项目开发过程中，文件会不断修改。版本管理工具可以： -
|
||
记录每一次修改的内容和时间 - 随时回退到之前的任意版本 -
|
||
多人协作时避免互相覆盖
|
||
|
||
Git是当前最流行的分布式版本管理系统。
|
||
|
||
\subsubsection{Git基础操作}
|
||
|
||
\paragraph{初始化仓库：}
|
||
|
||
\emph{\# 在项目目录中初始化Git}\\
|
||
cd my\_project\\
|
||
git init
|
||
|
||
\paragraph{日常三步曲：}
|
||
|
||
\emph{\# 1. 查看当前修改状态}\\
|
||
git status\\
|
||
\strut \\
|
||
\emph{\# 2. 将修改添加到暂存区}\\
|
||
git add filename.md \emph{\# 添加指定文件}\\
|
||
git add . \emph{\# 添加所有修改}\\
|
||
\strut \\
|
||
\emph{\# 3. 提交修改（附带说明）}\\
|
||
git commit -m "添加了数据预处理功能"
|
||
|
||
\textbf{查看历史}：
|
||
|
||
\emph{\# 查看提交历史}\\
|
||
git log -\/-oneline\\
|
||
\strut \\
|
||
\emph{\# 查看某次提交的具体改动}\\
|
||
git show abc1234
|
||
|
||
\textbf{回退操作}：
|
||
|
||
\emph{\# 查看某文件的历史版本}\\
|
||
git log -\/- filename.md\\
|
||
\strut \\
|
||
\emph{\# 恢复某个文件到指定版本}\\
|
||
git checkout abc1234 -\/- filename.md
|
||
|
||
\subsubsection{GitHub：云端协作平台}
|
||
|
||
\href{https://github.com/}{GitHub}
|
||
是基于Git的代码托管平台，提供云端存储和协作功能。
|
||
|
||
\textbf{核心概念}： -
|
||
\textbf{仓库（Repository）}：项目的存储空间，包含所有文件和历史记录 -
|
||
\textbf{远程同步}：将本地仓库推送到GitHub，或从GitHub拉取更新 -
|
||
\textbf{协作}：多人通过分支和合并协同工作
|
||
|
||
\textbf{常用操作}：
|
||
|
||
\emph{\# 关联远程仓库}\\
|
||
git remote add origin https://github.com/username/project.git\\
|
||
\strut \\
|
||
\emph{\# 推送到远程}\\
|
||
git push -u origin main\\
|
||
\strut \\
|
||
\emph{\# 从远程拉取更新}\\
|
||
git pull
|
||
|
||
\textbf{本书的Git管理}：
|
||
|
||
本书内容即通过Git进行版本管理。每个章节的修改都有完整的提交记录，可以通过
|
||
git log 查看内容的演变历史。
|
||
|
||
\subsubsection{推荐工作流}
|
||
|
||
对于设计专业的学习和研究项目，建议采用以下简化工作流：
|
||
|
||
编写/修改文档 → git add → git commit → git push
|
||
|
||
每次完成一个阶段性工作（如写完一节内容、完成一次实验）后提交一次，附上简洁的说明。这样既保留了完整的历史记录，也不会因为误操作而丢失工作成果。
|