57 lines
1.9 KiB
Markdown
57 lines
1.9 KiB
Markdown
# 🎨 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/02-方法论/图形化AI协作-Canvas白板驱动开发.md)
|
||
- [白板驱动开发系统提示词](../../prompts/01-系统提示词/AGENTS.md/12/AGENTS.md)
|
||
- [胶水编程](../../documents/00-基础指南/胶水编程.md)
|