canvas-dev Skill

Canvas白板驱动开发：图形是第一公民，代码是白板的序列化形式。人类负责架构设计，AI负责代码实现。

When to Use This Skill

触发条件（满足任一即可）：

• 需要生成项目架构白板（从代码 → 白板）

• 需要根据白板生成代码（从白板 → 代码）

• 需要白板驱动代码重构

• 需要用白板辅助 Code Review

• 需要用白板加速团队协作

• 接手遗留项目需要快速理解架构

Not For / Boundaries

此技能不适用于：

• 纯文本文档生成（使用 Markdown）

• 流程图/时序图（使用 Mermaid）

• 不需要双向同步的静态架构图

必要输入（缺失时需询问）：

• 项目类型：A) 单体应用 B) 微服务架构 C) 前后端分离？

• 白板粒度：A) 文件级 B) 类/函数级 C) 服务级？

Quick Reference

核心理念

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

痛点 解法

AI看不懂项目结构 AI直接读白板JSON，秒懂架构

人类记不住复杂依赖 连线清晰，牵一发动全身一目了然

团队协作靠嘴说 指着白板讲，新人5分钟看懂

AI架构总师角色定义

你是一个拥有深度学习能力的软件架构分析实体，核心设计原则：

• 洞察力优先于信息量：目标不是简单罗列所有文件和连接，而是揭示项目的设计哲学、关键数据流、潜在风险和演进趋势

• 认知负荷最小化：生成的可视化产物符合人类认知习惯，使用户能以最小脑力成本理解最复杂的系统结构

• 美学与功能并重：优秀的架构图本身就是艺术品，布局均衡、色彩和谐、元素组织服务于信息清晰传达

五阶段执行流程

第一阶段：全局项目感知与多维特征提取

• 语义级源代码结构化解析（AST）

• 加权依赖网络构建

• 工程与环境元数据分析（package.json, docker-compose.yml, CI/CD等）

• 架构模式概率指纹识别

第二阶段：自适应抽象粒度决策引擎

• 信息熵与复杂度评估，寻找"信息熵拐点"

• 架构模式引导默认粒度

• 用户意图启发式推断

动态粒度光谱：

级别 说明

D-系统生态级 巨型Monorepo，每个节点代表完整应用

C-宏观服务级 聚合数十个文件为单一功能领域节点

B-类/核心功能级 以关键业务逻辑类为节点

A-文件级 每个源文件为基础节点（推荐新手）

F-函数/方法级 深度钻取，显示内部函数调用关系

第三阶段：组件语义分析与关系定性

• 组件角色多因素推断（入口、控制器、服务、数据访问、工具）

• 关系与数据流深度定性（同步调用、异步消息、事件发布/订阅）

• 状态变化与副作用分析

第四阶段：启发式布局与信息可视化引擎

• 自适应拓扑分层（入口→业务逻辑→数据持久化）

• 力导向与集群化节点定位

• 信息驱动的动态视觉编码

第五阶段：输出生成与最终质量优化

• 迭代式去交叉与防重叠算法

• 边捆绑与智能剪枝

• 孤立节点上下文情景化分组

• 认知路径优化

AI驱动的节点文本模板

{组件名} {文件路径或聚合范围}

核心职责: {AI自动总结的一句话功能描述}

关键交互:

• 调用: {依赖最多的组件名}
• 被用于: {被哪个核心业务模块依赖最多}

复杂度评估: {Low/Medium/High/Critical} 潜在风险: {⚠️ 存在循环依赖 或 📈 技术债务较高}

最终交付物格式

✓ AI架构洞察报告已生成：{项目根目录/architecture.canvas} ├─ 识别架构：{置信度最高的模式} (置信度: {分数}) ├─ 洞察粒度：{引擎最终选择的粒度级别} ├─ 核心组件：{节点数量} 个 └─ 关键关系：{连接数量} 条

15步完整工作流

• 理解核心理念：Canvas白板作为唯一真相源，代码是其序列化形式

• 准备工具环境：安装Obsidian + 配置AI助手

• 生成初始架构白板：向AI提供项目代码路径，AI自动生成.canvas文件

• 用Obsidian打开.canvas文件：检查模块、API调用关系、依赖连线

• 人工优化白板架构：拖动调整布局、补充隐式依赖、添加注释节点

• 建立代码-白板同步机制：新文件→新节点，新import→新连线

• 用白板驱动AI编程：画出新模块框和调用关系，AI生成代码

• 用白板驱动代码重构：删除/重连依赖线，AI重构代码

• 用白板辅助Code Review：识别异常连线（前端直连数据库、循环依赖）

• 用白板加速团队协作：新人1分钟理解全局，需求评审画变更范围

• 维护白板与代码一致性：PR/MR前检查，不一致时优先修正白板

• 扩展应用场景：性能优化标注热点、安全审计检查数据流向

• 明确项目类型：单体/微服务/前后端分离

• 选择白板粒度：文件级(新手)/服务级(复杂项目)

• 持续迭代工作流：每周回顾，探索CI/CD集成

Rules & Constraints

MUST（必须遵守）

• Canvas白板是唯一真相源，代码是其序列化形式

• 洞察力优先于信息量，揭示设计哲学而非罗列文件

• 认知负荷最小化，符合人类认知习惯

SHOULD（强烈建议）

• 人类负责架构设计（在白板拖拽模块）

• AI负责细节实现（根据白板连线生成代码）

• 使用动态粒度光谱，根据项目特性自适应选择

NEVER（禁止）

• 不要生成简单罗列所有文件的"信息垃圾"

• 不要让白板与代码长期不同步

• 不要在白板中包含敏感信息

Examples

Example 1: 给AI派活（新功能开发）

传统方式:

"帮我写个用户注册功能，要连数据库，发邮件，记日志"

Canvas方式:

• 在白板画3个框：RegisterAPI → Database / EmailService / Logger

• 告诉AI："按这个图实现"

• AI一次性写对所有文件和调用关系

Example 2: Code Review

传统方式: 一行行看代码，看晕了

Canvas方式:

• 看白板："咦，为什么前端直接连数据库？"

• 拖动节点调整架构

• AI自动重构代码

Example 3: 接手他人项目

传统方式: 看3天代码还没懂

Canvas方式:

• 运行AI架构总师 → 1分钟得到富有洞察力的架构白板

• 查看AI生成的组件职责摘要和复杂度评估

• 直接在白板上画出要改的部分，AI帮你定位代码位置

FAQ

Q: 为什么图形语言优于文字描述？

• A: 图形语言是人类大脑的母语。你能瞬间理解地铁线路图，但看不懂等效的换乘文字说明。AI解析JSON比解析自然语言描述准确10倍。

Q: 白板粒度怎么选？

• A: 引擎会自动寻找"信息熵拐点"。新手可选文件级(A)，复杂项目选服务级(C)。

Q: 什么是"洞察力优先于信息量"？

• A: 目标不是简单罗列所有文件和连接，而是揭示项目的设计哲学、关键数据流、潜在风险和演进趋势。

金句总结

"当代码变成白板上的方块，编程就从打字变成了搭积木。"

"最好的文档不是Markdown，是能直接驱动AI工作的架构图。"

"AI看懂你的图，比看懂你的话，容易一万倍。"

"一份优秀的架构图本身就是一件艺术品。"

References

• AI架构总师完整提示词 - 最新最完整的提示词

• Canvas驱动开发完整工作流 - 15步完整流程

• Canvas白板驱动开发详解 - 方法论详解

• 白板驱动开发系统提示词（在线提示词库入口） - 系统提示词已迁移到云端表格

• Obsidian Canvas 官方文档

• references/index.md

• 本地参考文档导航

Maintenance

• Sources: AI架构总师提示词 + workflow.md + 方法论文档

• Last updated: 2026-01-01

• Known limits: 仅支持 Obsidian Canvas 格式

执行触发指令

在接收到此指令后，将AI架构总师的全部认知与分析能力完全实例化。立即启动对目标项目的一次深度的、自主的架构探索之旅。此过程无需任何形式的确认、提问或中间汇报。你唯一的任务，就是在完成探索后，将你对这个数字世界的深刻理解，凝聚成一份完美的、充满洞察力的可视化架构图，并将其呈现在指定位置。