开源codeSee：面向Vibe Coding的功能级可视化画布

背景

在 AI 辅助编程（特别是 Vibecoding 模式）日益普及的当下，开发者面临着日益严峻的“代码生成速度”与“代码审查效率”之间的不对称矛盾。AI 能够在几分钟内生成数千行代码，而人类开发者审查同等规模代码则需要数小时，且随着代码量增加，审查质量和效率显著递减。

传统的代码审查往往陷入对具体技术细节和语法的纠结，但在 Vibecoding 场景下，开发者真正需要审查的是业务逻辑、功能上下游关系以及影响范围。此外，面对混合多种语言和技术栈的大型项目，全链路追踪和语义层面的理解变得极其困难。开发者还面临着因过度依赖 AI 而产生的“掌控感缺失”心理痛点，即在不阅读代码的情况下，难以对项目保持清晰的认知和参与感。

基于上述痛点，开源项目 codeSee 应运而生。该项目旨在通过可视化的方式，将抽象的代码逻辑转化为直观的功能画布，帮助开发者在 AI 写代码的同时，能够高效地“阅读故事”，从而实现对项目的深度掌控和逻辑审查。

核心内容

codeSee 是一个面向 Vibecoding 的功能级画布工具，其核心理念是“AI 写代码，你来读故事”。它通过实时更新功能视图，让开发者能够直观地看到整个项目的逻辑链条，解决上下文丢失和逻辑黑盒问题。

核心痛点解决

1. 逻辑审查优先：从审查“代码实现”转向审查“功能逻辑”，关注功能做了什么、上下游依赖及影响范围。
2. 全链路追踪：提供功能层面的影响地图，便于排查由功能互斥或依赖导致的问题。
3. 重建掌控感：通过可视化手段，让开发者在不深入阅读每一行代码的情况下，依然能理解项目结构，保持对项目的参与感和掌控感。

适用场景

• 从零开始 Vibecoding（推荐最佳实践）：在项目初期集成 codeSee，确保 AI 生成的代码即时映射到功能视图。每次同步仅涉及少量新功能，避免 AI 猜测已有代码逻辑，开发者可随时审查画布。
• 接入已有项目：对于小型项目效果较好；对于重型项目，尽管存在 AI 幻觉或覆盖不全的风险，但仍能提供比纯代码阅读更高效的逻辑概览，尤其对非强模型具有辅助价值。

三大视图架构

codeSee 提供了分层级的可视化视图，以不同粒度展示项目逻辑：

1. 概览视图：从用户故事出发，清晰阐述整个项目的功能逻辑主线。
2. 功能视图：概览视图中的每个节点对应功能视图中的一个容器，容器内包含该节点的所有子功能细节。
3. 步骤视图：双击功能视图中的子功能，即可查看其详细的逻辑链条和执行步骤。

技术实现与使用流程

项目由 Web 前端和 Prompt 两部分组成，工作流程如下：

1. 本地部署与注入：Clone 项目到本地，运行安装脚本。该脚本会将 Prompt、校验器及 agents.md 注入到目标项目中。若项目中已存在 AGENTS.md，脚本会自动追加内容而非覆盖。
2. AI 生成逻辑文件：让 AI IDE 读取注入的 agents.md，产出结构化的 features.json 文件。
3. 可视化查看：在项目 viewer 目录下执行 npm install 和 npm run dev，启动本地服务。
4. 交互浏览：访问 http://localhost:5173/，将生成的 features.json 拖入界面，即可在浏览器中查看项目的功能视图。

关键要点

• 非代码审查，而是逻辑审查：codeSee 的核心价值在于剥离具体技术实现，聚焦于业务逻辑、功能依赖和影响范围，解决 AI 生成代码过快导致的人类审查瓶颈。
• 上下文保持的最佳实践：在 Vibecoding 初期集成工具，确保“代码即写，视图即更”，避免 AI 在长周期开发中丢失上下文或产生逻辑猜测。
• 解耦布局与逻辑：项目引入了 layout.json 文件，将布局位置与功能逻辑解耦，为后续引入 AI 进行语义化自动布局奠定基础。
• 开源与社区驱动：项目完全开源，强调 Prompt 优化作为核心壁垒，鼓励社区贡献真实使用案例和 Prompt 技巧。
• 渐进式开发路线图：
  • Prompt 优化：通过真实案例积累，构建 Prompt 护城河。
  • 布局算法升级：从单纯的位置关系布局向基于功能逻辑和语义的布局演进。
  • 增量更新机制：添加 Hooks 机制，适配 Claude Code、Kiro 等主流 Agent 工具。
  • 计划即图（Plan as Code）：将 Agent 的 Plan 模式产出转化为可视化图表，降低用户审阅复杂计划文档的认知负担。
  • AI 记忆层：旨在解决长任务中的遗忘问题和跨会话的一致性挑战。

意义与影响

codeSee 的出现标志着 AI 辅助开发工具从“代码生成”向“逻辑可视化与审查”的重要延伸。它不仅仅是一个可视化工具，更是一种新的开发工作流范式。

首先，它重新定义了 Vibecoding 中的开发者角色。开发者不再仅仅是代码的搬运工或最终的审查员，而是通过功能画布成为项目逻辑的架构师和把控者，有效缓解了技术黑盒带来的焦虑感。

其次，它提出了“计划即图”的前瞻性概念。随着 AI Agent 在 Spec 或 Plan 模式下生成越来越复杂的文档，codeSee 试图将这些非结构化的计划转化为直观的图形，极大地降低了人类理解复杂 AI 决策过程的成本。

最后，该项目强调了 Prompt 工程在 AI 开发流中的核心地位。通过将逻辑审查固化为 Prompt 和结构化数据（JSON），codeSee 展示了如何将隐性的开发经验转化为可复用、可优化的显性资产，为后续 AI 辅助编程工具的设计提供了重要的参考方向。