mirror of
https://github.com/tradecatlabs/vibe-coding-cn.git
synced 2026-08-16 20:38:04 +00:00
chore: assets - retire canvas workflow and document repo sources
This commit is contained in:
tukuaiai
@@ -4,7 +4,6 @@
|
||||
|
||||
## 🎨 AI 协作范式
|
||||
|
||||
- [Canvas白板驱动开发](./图形化AI协作-Canvas白板驱动开发.md) - 图形是第一公民，代码是白板的序列化形式
|
||||
- [AI蜂群协作](./AI蜂群协作-tmux多Agent协作系统.md) - 基于 tmux 的多 AI Agent 协作系统
|
||||
|
||||
## 📖 工具教程
|
||||
|
||||
@@ -1,194 +0,0 @@
|
||||
# 🚀 Canvas白板驱动开发法
|
||||
|
||||
## 从文字到图形：编程协作的新范式
|
||||
|
||||
### 💡 核心发现
|
||||
|
||||
传统开发流程：
|
||||
```
|
||||
写代码 → 口头沟通 → 脑补架构 → 代码失控 → 重构崩溃
|
||||
```
|
||||
|
||||
**新方法**：
|
||||
```
|
||||
代码 ⇄ Canvas白板 ⇄ AI ⇄ 人类
|
||||
↓
|
||||
单一事实来源
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 🎯 这套方法解决了什么？
|
||||
|
||||
**痛点1：AI看不懂你的项目结构**
|
||||
- ❌ 以前：反复解释"这个文件干什么的"
|
||||
- ✅ 现在：AI直接看白板，秒懂整体架构
|
||||
|
||||
**痛点2：人类记不住复杂依赖**
|
||||
- ❌ 以前：改A文件忘了B依赖它，炸了
|
||||
- ✅ 现在：白板连线清晰，牵一发动全身一目了然
|
||||
|
||||
**痛点3：团队协作靠嘴说**
|
||||
- ❌ 以前："数据流怎么走的？""呃...让我翻翻代码"
|
||||
- ✅ 现在：指着白板讲，新人5分钟看懂
|
||||
|
||||
---
|
||||
|
||||
### 🔥 工作流演示
|
||||
|
||||
#### Step 1：写代码时自动更新白板
|
||||
|
||||
```python
|
||||
# 你写了新文件 payment_service.py
|
||||
class PaymentService:
|
||||
def process(self):
|
||||
db.save() # ← AI检测到数据库写入
|
||||
stripe.charge() # ← AI检测到外部API调用
|
||||
```
|
||||
|
||||
**白板自动生成：**
|
||||
```
|
||||
[PaymentService] ──写入──> [数据库]
|
||||
│
|
||||
└──调用──> [Stripe API]
|
||||
```
|
||||
|
||||
#### Step 2：人类和AI共同编辑白板
|
||||
|
||||
**你在白板上拖拽**：
|
||||
- 把 `UserService` 连线到 `PaymentService`
|
||||
- AI立刻理解："哦，用户模块会调用支付"
|
||||
|
||||
**AI读懂意图后生成代码**：
|
||||
```python
|
||||
# user_service.py
|
||||
from payment_service import PaymentService
|
||||
|
||||
def create_order(user):
|
||||
payment = PaymentService()
|
||||
payment.process(user.card) # ← AI自动加这行
|
||||
```
|
||||
|
||||
#### Step 3：白板成为开发中枢
|
||||
|
||||
| 操作 | 传统方式 | Canvas方式 |
|
||||
|------|----------|------------|
|
||||
| 要求AI重构 | "把支付逻辑拆出来" | 在白板拖出新节点，AI自动拆分代码 |
|
||||
| Code Review | 逐行读代码 | 看白板连线："这条调用链合理吗？" |
|
||||
| 需求变更 | 到处改代码 | 白板删条线，AI同步删除所有相关调用 |
|
||||
|
||||
---
|
||||
|
||||
### 🌟 关键创新点
|
||||
|
||||
#### 1. 图形是第一公民，代码是衍生物
|
||||
|
||||
传统思维：代码 → 文档（过期） → 架构图（更过期）
|
||||
|
||||
新思维：**Canvas白板 = 唯一真相源**，代码只是它的序列化形式
|
||||
|
||||
#### 2. 人类和AI的共享工作区
|
||||
|
||||
- 人类：擅长高层设计，在白板拖拽模块
|
||||
- AI：擅长细节实现，根据白板连线生成代码
|
||||
- 协作方式：**都编辑同一个白板**，而不是来回传递文本
|
||||
|
||||
#### 3. 实时双向同步
|
||||
|
||||
```
|
||||
代码变化 ──自动扫描──> 更新白板
|
||||
白板编辑 ──AI解析──> 生成/修改代码
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 🎨 使用场景
|
||||
|
||||
#### 场景1：给AI派活
|
||||
|
||||
传统：
|
||||
> "帮我写个用户注册功能，要连数据库，发邮件，记日志"
|
||||
|
||||
Canvas方式：
|
||||
1. 在白板画3个框：`RegisterAPI` → `Database` / `EmailService` / `Logger`
|
||||
2. 告诉AI："按这个图实现"
|
||||
3. AI一次性写对所有文件和调用关系
|
||||
|
||||
#### 场景2：Code Review
|
||||
|
||||
传统：一行行看代码，看晕了
|
||||
|
||||
Canvas方式：
|
||||
1. 看白板："咦，为什么前端直接连数据库？"
|
||||
2. 拖动节点调整架构
|
||||
3. AI自动重构代码
|
||||
|
||||
#### 场景3：接手他人项目
|
||||
|
||||
传统：看3天代码还没懂
|
||||
|
||||
Canvas方式：
|
||||
1. 运行自动生成工具 → 1分钟得到架构白板
|
||||
2. 点开感兴趣的模块看详情
|
||||
3. 直接在白板上画出要改的部分，AI帮你定位代码位置
|
||||
|
||||
---
|
||||
|
||||
### 🚀 立即开始
|
||||
|
||||
#### 工具链
|
||||
|
||||
- **白板**：Obsidian Canvas（免费开源）
|
||||
- **自动生成**：提示词驱动（见下方）
|
||||
- **AI协作**：Claude / GPT-4（能读取Canvas JSON）
|
||||
|
||||
#### 5分钟体验流程
|
||||
|
||||
```bash
|
||||
# 1. 在你的项目运行自动分析
|
||||
[用提示词让AI生成架构白板]
|
||||
|
||||
# 2. 用Obsidian打开生成的 .canvas 文件
|
||||
|
||||
# 3. 尝试拖动模块或添加连线
|
||||
|
||||
# 4. 把修改后的白板发给AI："按照这个新架构重构代码"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 💬 这是编程的未来吗？
|
||||
|
||||
我认为是的，原因：
|
||||
|
||||
1. **图形语言是人类大脑的母语**
|
||||
- 你能瞬间理解地铁线路图
|
||||
- 但看不懂等效的换乘文字说明
|
||||
|
||||
2. **AI已经足够聪明去"看懂"图**
|
||||
- Canvas就是结构化的图形数据
|
||||
- AI解析JSON比解析你的自然语言描述准确10倍
|
||||
|
||||
3. **代码生成已经商品化，架构设计才是稀缺能力**
|
||||
- 未来程序员的工作：设计白板架构
|
||||
- AI的工作：把白板翻译成代码
|
||||
|
||||
---
|
||||
|
||||
### 📌 金句总结
|
||||
|
||||
> "当代码变成白板上的方块，编程就从打字变成了搭积木。"
|
||||
|
||||
> "最好的文档不是Markdown，是能直接驱动AI工作的架构图。"
|
||||
|
||||
> "AI看懂你的图，比看懂你的话，容易一万倍。"
|
||||
|
||||
---
|
||||
|
||||
### 🔗 相关资源
|
||||
|
||||
- [Canvas白板生成提示词](https://docs.google.com/spreadsheets/d/1Ifk_dLF25ULSxcfGem1hXzJsi7_RBUNAki8SBCuvkJA/edit?gid=1777853069#gid=1777853069&range=A1) - 自动生成架构白板的完整提示词
|
||||
- [白板驱动开发系统提示词（在线提示词库入口）](../../../prompt/README.md) - 系统提示词已迁移到云端表格
|
||||
- [Obsidian Canvas 官方文档](https://obsidian.md/canvas)
|
||||
- [胶水编程](../../principles/fundamentals/胶水编程.md) - 能抄不写，能连不造
|
||||
- [通用项目架构模板](../../principles/fundamentals/通用项目架构模板.md) - 标准化目录结构
|
||||
Reference in New Issue
Block a user