# 🎨 Canvas白板驱动开发工作流

> 图形是第一公民，代码是白板的序列化形式

## 核心理念

```
传统开发：代码 → 口头沟通 → 脑补架构 → 代码失控
Canvas方式：代码 ⇄ 白板 ⇄ AI ⇄ 人类（白板为单一真相源）
```

| 痛点 | 解法 |
|:---|:---|
| 🤖 AI看不懂项目结构 | ✅ AI直接读白板JSON，秒懂架构 |
| 🧠 人类记不住复杂依赖 | ✅ 连线清晰，牵一发动全身一目了然 |
| 💬 团队协作靠嘴说 | ✅ 指着白板讲，新人5分钟看懂 |

## 文件结构

```
canvas-dev/
├── README.md                 # 本文件 - 工作流概述
├── workflow.md               # 完整工作流步骤（线性流程）
├── prompts/
│   ├── 01-架构分析.md        # 从代码生成白板的提示词
│   ├── 02-白板驱动编码.md    # 根据白板生成代码的提示词
│   └── 03-白板同步检查.md    # 校验白板与代码一致性
├── templates/
│   ├── project.canvas        # Obsidian Canvas 项目模板
│   └── module.canvas         # 单模块白板模板
└── examples/
    └── demo-project.canvas   # 示例项目白板
```

## 快速开始

### 1. 准备工具
- [Obsidian](https://obsidian.md/) - 免费开源白板工具
- AI助手（Claude/GPT-4，需支持读取Canvas JSON）

### 2. 生成项目架构白板
```bash
# 将项目代码路径提供给AI，使用架构分析提示词
# AI自动生成 .canvas 文件
```

### 3. 用白板驱动开发
- 在白板上画出新模块和依赖关系
- 导出白板JSON发送给AI
- AI根据白板生成/修改代码

## 相关文档

- [Canvas白板驱动开发详解](../../documents/guides/playbook/图形化AI协作-Canvas白板驱动开发.md)
- [白板驱动开发系统提示词（在线提示词库入口）](../../prompts/README.md)
- [胶水编程](../../documents/principles/fundamentals/胶水编程.md)