\chapter{附录2：Vibe Coding与工具链} 本附录介绍Vibe Coding的概念与实践，以及VsCode、Claude Code、Markdown/Obsidian、Git/GitHub等核心工具的使用方法。 \subsubsection{Vibe Coding的概念与工具}\label{vibe-codingux7684ux6982ux5ff5ux4e0eux5de5ux5177} \paragraph{什么是Vibe Coding} 传统编程：\textbf{明确需求 → 设计算法 → 编写代码} Vibe Coding：\textbf{模糊想法 → AI辅助 → 迭代完善} Vibe Coding是一种以AI为核心的编程新模式：开发者用自然语言描述意图，AI生成代码，再通过迭代对话逐步完善。对于编程经验较少的设计专业读者而言，这种模式大幅降低了技术门槛------不需要记住语法细节，只需要清楚地表达“想要什么”。 \paragraph{工作流程} \begin{enumerate} \def\labelenumi{\arabic{enumi}.} \item \textbf{描述意图}：用自然语言说明需求 \end{enumerate} ``帮我创建一个简单的图像分类模型'' \begin{enumerate} \def\labelenumi{\arabic{enumi}.} \setcounter{enumi}{1} \item \textbf{AI生成代码}：自动生成完整代码框架 \item \textbf{运行测试}：发现问题或需要调整 \item \textbf{迭代优化}：通过对话逐步改进 \end{enumerate} ``把隐藏层改成128个神经元'' \begin{enumerate} \def\labelenumi{\arabic{enumi}.} \setcounter{enumi}{4} \item \textbf{理解学习}：阅读AI生成的代码，理解实现原理 \end{enumerate} \paragraph{实践技巧} {\def\LTcaptype{none} % do not increment counter \begin{longtable}[]{@{} >{\raggedright\arraybackslash}p{(\linewidth - 2\tabcolsep) * \real{0.1184}} >{\raggedright\arraybackslash}p{(\linewidth - 2\tabcolsep) * \real{0.3905}}@{}} \toprule\noalign{} \begin{minipage}[b]{\linewidth}\raggedright 技巧 \end{minipage} & \begin{minipage}[b]{\linewidth}\raggedright 说明 \end{minipage} \\ \midrule\noalign{} \endhead \bottomrule\noalign{} \endlastfoot 明确需求 & 详细描述输入输出，提供上下文 \\ 分步实现 & 复杂功能拆解为小任务，逐步完成 \\ 验证结果 & 运行并检查AI生成的代码是否正确 \\ 学习思考 & 不盲目接受，理解AI为什么这样写 \\ \end{longtable} } \paragraph{工具生态} {\def\LTcaptype{none} % do not increment counter \begin{longtable}[]{@{} >{\raggedright\arraybackslash}p{(\linewidth - 6\tabcolsep) * \real{0.1982}} >{\raggedright\arraybackslash}p{(\linewidth - 6\tabcolsep) * \real{0.1475}} >{\raggedright\arraybackslash}p{(\linewidth - 6\tabcolsep) * \real{0.2970}} >{\raggedright\arraybackslash}p{(\linewidth - 6\tabcolsep) * \real{0.2366}}@{}} \toprule\noalign{} \begin{minipage}[b]{\linewidth}\raggedright 工具 \end{minipage} & \begin{minipage}[b]{\linewidth}\raggedright 形态 \end{minipage} & \begin{minipage}[b]{\linewidth}\raggedright 特点 \end{minipage} & \begin{minipage}[b]{\linewidth}\raggedright 适用场景 \end{minipage} \\ \midrule\noalign{} \endhead \bottomrule\noalign{} \endlastfoot ChatGPT / Claude & 网页对话 & 代码生成与解释 & 学习咨询、快速原型 \\ GitHub Copilot & 编辑器插件 & 实时代码补全 & 日常开发 \\ Cursor & AI原生IDE & 对话式编程 & 快速原型、中型项目 \\ Claude Code & 终端CLI & 终端AI编程、多文件协作 & 项目级开发 \\ Replit Agent & 在线平台 & 端到端开发 & 小型项目、学习实验 \\ \end{longtable} } \subsubsection{Claude Code简介与使用}\label{claude-codeux7b80ux4ecbux4e0eux4f7fux7528} \paragraph{什么是Claude Code} Claude Code是Anthropic推出的命令行AI编程工具（CLI），能够直接在终端中理解项目上下文、读写文件、执行命令，实现端到端的AI辅助开发。它也提供VSCode扩展，可以在编辑器中无缝使用。 \paragraph{安装与配置} \emph{\# 安装（需要 Node.js 18+）}\\ npm install -g @anthropic-ai/claude-code\\ \strut \\ \emph{\# 进入项目目录后启动}\\ cd my\_project\\ claude 启动后进入交互式对话界面，直接用自然语言描述需求即可。 \paragraph{核心使用方式} \textbf{对话式开发}：用自然语言描述任务，Claude Code会自动读取相关文件、编写代码、执行测试。 \textgreater{} 帮我创建一个数据预处理的Python脚本，读取CSV文件并清洗缺失值 \textbf{文件操作}：Claude Code可以直接读取、创建和编辑项目中的文件，每次修改前会征得确认。 \textbf{命令执行}：可以请求Claude Code运行终端命令，如安装依赖、运行脚本等。 \paragraph{VSCode中的Claude Code}\label{vscodeux4e2dux7684claude-code} Claude Code提供VSCode扩展，在编辑器中获得同样的AI辅助能力： \begin{enumerate} \def\labelenumi{\arabic{enumi}.} \item 在VSCode扩展商店搜索 ``Claude Code'' 并安装 \item 打开项目文件夹 \item 使用快捷键或侧边栏打开Claude面板 \item 在编辑器中选中代码后，可以直接向Claude提问或请求修改 \end{enumerate} \textbf{常用场景}： - 选中一段代码，请求“解释这段代码” - 选中函数，请求“添加错误处理” - 在Claude面板中输入“帮我写单元测试” \paragraph{典型项目工作流} \textbf{推荐项目结构}： project/\\ ├── data/ \# 数据文件\\ ├── notebooks/ \# Jupyter笔记本\\ ├── src/ \# 源代码\\ │ ├── models/ \# 模型定义\\ │ ├── utils/ \# 工具函数\\ │ └── train.py \# 训练脚本\\ ├── requirements.txt \# 依赖列表\\ └── README.md \# 项目说明 \subparagraph{开发流程：} \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 \subsubsection{Markdown语法及Obsidian工具}\label{markdownux8bedux6cd5ux53caobsidianux5de5ux5177} \paragraph{Markdown简介}\label{markdownux7b80ux4ecb} Markdown是一种轻量级标记语言，用纯文本格式编写文档，可以方便地转换为HTML、PDF等格式。它的语法简洁直观，是技术文档、笔记、学术写作的常用工具。 本书全部内容即使用Markdown编写。 \paragraph{基础语法} \textbf{标题}： \# 一级标题\\ \#\# 二级标题\\ \#\#\# 三级标题 唯一的一级标题：在一个文档中，通常只使用一个一级标题作为文档的主标题，这符合良好的文档结构规范。 \textbf{文本格式}： *斜体* **加粗** ***粗斜体*** \textasciitilde\textasciitilde 删除线\textasciitilde\textasciitilde{} \textless{}\textbf{u}\textgreater 下划线\textless/\textbf{u}\textgreater{} \emph{\textbf{`行内代码`}} \textbf{==高亮文本==} \_\_\_分隔线 包含反引号的代码：当代码本身包含反引号时，使用两个反引号包围，使用 `code` 这样的格式 \textbf{列表}： 列表可以嵌套使用 - 无序列表项1 - 无序列表项2 \begin{enumerate} \def\labelenumi{\arabic{enumi}.} \item 有序列表项1 \end{enumerate} \begin{verbatim} 2. 有序列表项2 \end{verbatim} - {[} {]} 未完成的任务 \begin{verbatim} - [x] 已完成的任务 \end{verbatim} \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{代码块}： \emph{\textbf{```python}}\\ print("Hello, World!")\\ \emph{\textbf{```}} 带行号的代码区块（需要渲染器支持，如 Docusaurus、VuePress）： \emph{\textbf{```javascript linenums="1"}}\\ \emph{\textbf{function greet(name) \{}}\\ \emph{\textbf{console.log(`Hello, \$\{name\}!{\kern0pt}`);}}\\ \emph{\textbf{\}}}\\ \emph{\textbf{```}} 表格： \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{} - 掌握核心功能特性 \subparagraph{图表绘制（Mermaid）：} 使用 ```mermaid 代码块，部分渲染器（GitHub、Typora、Obsidian）支持： 流程图： \emph{\textbf{```mermaid}} \emph{\textbf{graph LR}} \begin{enumerate} \def\labelenumi{\Alph{enumi}.} \item \emph{\textbf{{[}开始{]} -\/-\textgreater{} B\{条件判断\}}} \item \emph{\textbf{-\/-\textgreater\textbar 是\textbar{} C{[}执行操作1{]}}} \item \emph{\textbf{-\/-\textgreater\textbar 否\textbar{} D{[}执行操作2{]}}} \item \emph{\textbf{-\/-\textgreater{} E{[}结束{]}}} \item \emph{\textbf{-\/-\textgreater{} E}} \end{enumerate} \emph{\textbf{```}} 时序图： \emph{\textbf{```mermaid}}\\ \emph{\textbf{sequenceDiagram}}\\ \emph{\textbf{participant 用户}}\\ \emph{\textbf{participant 系统}}\\ \emph{\textbf{用户-\textgreater\textgreater 系统: 登录请求}}\\ \emph{\textbf{系统-\/-\textgreater\textgreater 用户: 返回结果}}\\ \emph{\textbf{```}} 甘特图： \emph{\textbf{```mermaid}}\\ \emph{\textbf{gantt}}\\ \emph{\textbf{title 项目计划}}\\ \emph{\textbf{dateFormat YYYY-MM-DD}}\\ \emph{\textbf{section 设计}}\\ \emph{\textbf{需求分析 :done, 2024-01-01, 15d}}\\ \emph{\textbf{section 开发}}\\ \emph{\textbf{编码实现 :active, 2024-01-16, 30d}}\\ \emph{\textbf{```}} 饼图： \emph{\textbf{```mermaid}}\\ \emph{\textbf{pie}}\\ \emph{\textbf{title 市场份额}}\\ \emph{\textbf{"Chrome" : 65}}\\ \emph{\textbf{"Safari" : 15}}\\ \emph{\textbf{"其他" : 20}}\\ \emph{\textbf{```}} \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}\] \paragraph{Obsidian：Markdown笔记工具}\label{obsidianmarkdownux7b14ux8bb0ux5de5ux5177} \href{https://obsidian.md/}{Obsidian} 是一款基于Markdown的知识管理工具，适合构建个人知识库和笔记系统。 \textbf{核心特性}： - \textbf{本地存储}：所有笔记以Markdown文件保存在本地，数据完全自主 - \textbf{双向链接}：用 {[}{[}笔记名{]}{]} 在笔记之间建立链接，形成知识网络 - \textbf{图谱视图}：可视化笔记之间的关联关系 - \textbf{插件生态}：丰富的社区插件扩展功能（如日历、看板、模板等） - \textbf{实时预览}：编辑Markdown时实时渲染效果 \textbf{使用建议}： - 用Obsidian打开本教材的根目录，即可获得完整的阅读与编辑体验 - 建议安装“目录”插件，方便在长文档中快速导航 - 利用双向链接功能，将学习笔记与教材内容关联起来 \subsubsection{Git版本管理与GitHub协作}\label{gitux7248ux672cux7ba1ux7406ux4e0egithubux534fux4f5c} \paragraph{为什么需要版本管理} 在项目开发过程中，文件会不断修改。版本管理工具可以： - 记录每一次修改的内容和时间 - 随时回退到之前的任意版本 - 多人协作时避免互相覆盖 Git是当前最流行的分布式版本管理系统。 \paragraph{Git基础操作}\label{gitux57faux7840ux64cdux4f5c} \subparagraph{初始化仓库：} \emph{\# 在项目目录中初始化Git}\\ cd my\_project\\ git init \subparagraph{日常三步曲：} \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 \paragraph{GitHub：云端协作平台}\label{githubux4e91ux7aefux534fux4f5cux5e73ux53f0} \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 查看内容的演变历史。 \paragraph{推荐工作流} 对于设计专业的学习和研究项目，建议采用以下简化工作流： 编写/修改文档 → git add → git commit → git push 每次完成一个阶段性工作（如写完一节内容、完成一次实验）后提交一次，附上简洁的说明。这样既保留了完整的历史记录，也不会因为误操作而丢失工作成果。