1.9 KiB
1.9 KiB
🎨 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 - 免费开源白板工具
- AI助手（Claude/GPT-4，需支持读取Canvas JSON）
2. 生成项目架构白板
# 将项目代码路径提供给AI，使用架构分析提示词
# AI自动生成 .canvas 文件
3. 用白板驱动开发
- 在白板上画出新模块和依赖关系
- 导出白板JSON发送给AI
- AI根据白板生成/修改代码