pengxiao/2026_DesignAI

Files

T

pengxiao 49ceadeb0d fix: 修正附录目录嵌套，移除旧 officefile 附录文件

- 将 officefile/appendix/appendix/ 下的文件提升一级
- 旧 officefile 的 glossary/references/tools.md 移入 Archive

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

2026-05-25 14:02:01 +08:00

11 KiB

Raw Blame History

附录2：Vibe Coding与工具链

本附录介绍Vibe Coding的概念与实践，以及Claude Code、Markdown/Obsidian、Git/GitHub等核心工具的使用方法。

1 Vibe Coding的概念与工具

1.1 什么是Vibe Coding

传统编程：明确需求 → 设计算法 → 编写代码

Vibe Coding：模糊想法 → AI辅助 → 迭代完善

Vibe Coding是一种以AI为核心的编程新模式：开发者用自然语言描述意图，AI生成代码，再通过迭代对话逐步完善。对于编程经验较少的设计专业读者而言，这种模式大幅降低了技术门槛——不需要记住语法细节，只需要清楚地表达"想要什么"。

1.2 工作流程

1. 描述意图：用自然语言说明需求

"帮我创建一个简单的图像分类模型"

2. AI生成代码：自动生成完整代码框架

3. 运行测试：发现问题或需要调整

4. 迭代优化：通过对话逐步改进

"把隐藏层改成128个神经元"

5. 理解学习：阅读AI生成的代码，理解实现原理

1.3 实践技巧

技巧	说明
明确需求	详细描述输入输出，提供上下文
分步实现	复杂功能拆解为小任务，逐步完成
验证结果	运行并检查AI生成的代码是否正确
学习思考	不盲目接受，理解AI为什么这样写

1.4 工具生态

工具	形态	特点	适用场景
ChatGPT / Claude	网页对话	代码生成与解释	学习咨询、快速原型
GitHub Copilot	编辑器插件	实时代码补全	日常开发
Cursor	AI原生IDE	对话式编程	快速原型、中型项目
Claude Code	终端CLI	终端AI编程、多文件协作	项目级开发
Replit Agent	在线平台	端到端开发	小型项目、学习实验

2 Claude Code简介与使用

2.1 什么是Claude Code

Claude Code是Anthropic推出的命令行AI编程工具（CLI），能够直接在终端中理解项目上下文、读写文件、执行命令，实现端到端的AI辅助开发。它也提供VSCode扩展，可以在编辑器中无缝使用。

2.2 安装与配置

# 安装（需要 Node.js 18+）
npm install -g @anthropic-ai/claude-code

# 进入项目目录后启动
cd my_project
claude

启动后进入交互式对话界面，直接用自然语言描述需求即可。

2.3 核心使用方式

对话式开发：用自然语言描述任务，Claude Code会自动读取相关文件、编写代码、执行测试。

> 帮我创建一个数据预处理的Python脚本，读取CSV文件并清洗缺失值

文件操作：Claude Code可以直接读取、创建和编辑项目中的文件，每次修改前会征得确认。

命令执行：可以请求Claude Code运行终端命令，如安装依赖、运行脚本等。

2.4 VSCode中的Claude Code

Claude Code提供VSCode扩展，在编辑器中获得同样的AI辅助能力：

在VSCode扩展商店搜索 "Claude Code" 并安装
打开项目文件夹
使用快捷键或侧边栏打开Claude面板
在编辑器中选中代码后，可以直接向Claude提问或请求修改

常用场景：

选中一段代码，请求"解释这段代码"
选中函数，请求"添加错误处理"
在Claude面板中输入"帮我写单元测试"

2.5 典型项目工作流

推荐项目结构：

project/
├── data/              # 数据文件
├── notebooks/         # Jupyter笔记本
├── src/               # 源代码
│   ├── models/        # 模型定义
│   ├── utils/         # 工具函数
│   └── train.py       # 训练脚本
├── requirements.txt   # 依赖列表
└── README.md          # 项目说明

开发流程：

# 1. 创建环境
conda create -n myproject python=3.10
conda activate myproject

# 2. 安装依赖
pip install -r requirements.txt

# 3. 启动 Claude Code 进行AI辅助开发
claude

# 4. 保存环境
conda env export > environment.yml

3 Markdown语法及Obsidian工具

3.1 Markdown简介

Markdown是一种轻量级标记语言，用纯文本格式编写文档，可以方便地转换为HTML、PDF等格式。它的语法简洁直观，是技术文档、笔记、学术写作的常用工具。

本书全部内容即使用Markdown编写。

3.2 基础语法

标题：

# 一级标题
## 二级标题
### 三级标题

唯一的一级标题：在一个文档中，通常只使用一个一级标题作为文档的主标题，这符合良好的文档结构规范。

文本格式：

 *斜体*  **加粗**   ***粗斜体***  ~~删除线~~   <u>下划线</u>  `行内代码` ==高亮文本== ___分隔线

包含反引号的代码：当代码本身包含反引号时，使用两个反引号包围，使用 `code` 这样的格式

列表：列表可以嵌套使用

- 无序列表项1
- 无序列表项2

1. 有序列表项1
2. 有序列表项2
   
- [ ] 未完成的任务
- [x] 已完成的任务

链接与图片：

[链接文字](https://example.com)          <!-- 行内链接 -->
[链接文字][1]                             <!-- 参考式链接 -->
[跳转到基础](#基础)                        <!-- 锚点链接 -->

[1]: https://www.example.com              <!-- 参考链接定义 -->

![图片说明](image.png)                    <!-- 基本图片 -->
*图7.8 路杀动物*                           <!-- 图片下方用斜体作为图注 -->

<!-- 图片居中对齐并指定宽度 -->
<div align="center">
  <img src="image.png" alt="说明" style="width:10cm;"/>
  <p><em>图片标题</em></p>
</div>

代码块：

```python
print("Hello, World!")
```

带行号的代码区块（需要渲染器支持，如 Docusaurus、VuePress）：

```javascript linenums="1"
function greet(name) {
    console.log(`Hello, ${name}!`);
}
```

表格：

| 列1 | 列2 | 列3 |
|-----|-----|-----|
| 内容 | 内容 | 内容 |

对齐方式：:--- 左对齐，:---: 居中，---: 右对齐：

| 左对齐 | 居中对齐 | 右对齐 |
| :----- | :------: | -----: |
| 内容   | 内容     | 100    |

注记：输入后在Obsidian编辑器中会自动弹出添加注记模块

 脚注[^1]

引用：

> 这是一段引用文字

> 多级嵌套引用
> > 第二层
> > > 第三层

> **本章要点**
>
> - 了解项目背景和目标
> - 掌握核心功能特性

图表绘制（Mermaid）：

使用 ```mermaid 代码块，部分渲染器（GitHub、Typora、Obsidian）支持：

流程图：

```mermaid
graph LR
    A[开始] --> B{条件判断}
    B -->|是| C[执行操作1]
    B -->|否| D[执行操作2]
    C --> E[结束]
    D --> E
```

时序图：

```mermaid
sequenceDiagram
    participant 用户
    participant 系统
    用户->>系统: 登录请求
    系统-->>用户: 返回结果
```

甘特图：

```mermaid
gantt
    title 项目计划
    dateFormat  YYYY-MM-DD
    section 设计
    需求分析 :done, 2024-01-01, 15d
    section 开发
    编码实现 :active, 2024-01-16, 30d
```

饼图：

```mermaid
pie
    title 市场份额
    "Chrome" : 65
    "Safari" : 15
    "其他" : 20
```

数学公式：

行内公式用 $...$ ，块级公式用 $$...$$，语法基于 LaTeX：

质能方程 $E = mc^2$，其中 $c$ 为光速。


\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}

多行对齐公式：


\begin{align}
f(x) &= ax^2 + bx + c \\
f'(x) &= 2ax + b
\end{align}

矩阵：


\begin{pmatrix}
a & b \\
c & d
\end{pmatrix}

3.3 Obsidian：Markdown笔记工具

Obsidian 是一款基于Markdown的知识管理工具，适合构建个人知识库和笔记系统。

核心特性：

本地存储：所有笔记以Markdown文件保存在本地，数据完全自主
双向链接：用 [[笔记名]] 在笔记之间建立链接，形成知识网络
图谱视图：可视化笔记之间的关联关系
插件生态：丰富的社区插件扩展功能（如日历、看板、模板等）
实时预览：编辑Markdown时实时渲染效果

使用建议：

用Obsidian打开本教材的根目录，即可获得完整的阅读与编辑体验
建议安装"目录"插件，方便在长文档中快速导航
利用双向链接功能，将学习笔记与教材内容关联起来

4 Git版本管理与GitHub协作

4.1 为什么需要版本管理

在项目开发过程中，文件会不断修改。版本管理工具可以：

记录每一次修改的内容和时间
随时回退到之前的任意版本
多人协作时避免互相覆盖

Git是当前最流行的分布式版本管理系统。

4.2 Git基础操作

初始化仓库：

# 在项目目录中初始化Git
cd my_project
git init

日常三步曲：

# 1. 查看当前修改状态
git status

# 2. 将修改添加到暂存区
git add filename.md          # 添加指定文件
git add .                     # 添加所有修改

# 3. 提交修改（附带说明）
git commit -m "添加了数据预处理功能"

查看历史：

# 查看提交历史
git log --oneline

# 查看某次提交的具体改动
git show abc1234

回退操作：

# 查看某文件的历史版本
git log -- filename.md

# 恢复某个文件到指定版本
git checkout abc1234 -- filename.md

4.3 GitHub：云端协作平台

GitHub 是基于Git的代码托管平台，提供云端存储和协作功能。

核心概念：

仓库（Repository）：项目的存储空间，包含所有文件和历史记录
远程同步：将本地仓库推送到GitHub，或从GitHub拉取更新
协作：多人通过分支和合并协同工作

常用操作：

# 关联远程仓库
git remote add origin https://github.com/username/project.git

# 推送到远程
git push -u origin main

# 从远程拉取更新
git pull

本书的Git管理：

本书内容即通过Git进行版本管理。每个章节的修改都有完整的提交记录，可以通过 git log 查看内容的演变历史。

4.4 推荐工作流

对于设计专业的学习和研究项目，建议采用以下简化工作流：

编写/修改文档 → git add → git commit → git push

每次完成一个阶段性工作（如写完一节内容、完成一次实验）后提交一次，附上简洁的说明。这样既保留了完整的历史记录，也不会因为误操作而丢失工作成果。

11 KiB Raw Blame History Unescape Escape