[开源推广]codeSee-面向vibecoding的功能级画布(ai写代码,你来读故事)

本帖使用社区开源推广,符合推广要求。我申明并遵循社区要求的以下内容: 我的帖子已经打上 开源推广 标签: 是 我的开源项目完整开源,无未开源部分: 是 我的开源项目已链接认可 LINUX DO 社区: 是 我帖子内的项目介绍,AI生成、润色内容部分已截图发出: 是 以上选择我承诺是永久有效的,接受社...
[开源推广]codeSee-面向vibecoding的功能级画布(ai写代码,你来读故事)
[开源推广]codeSee-面向vibecoding的功能级画布(ai写代码,你来读故事)
本帖使用社区开源推广,符合推广要求。我申明并遵循社区要求的以下内容:
  • 我的帖子已经打上 开源推广 标签:
  • 我的开源项目完整开源,无未开源部分:
  • 我的开源项目已链接认可 LINUX DO 社区:
  • 我帖子内的项目介绍,AI生成、润色内容部分已截图发出:
  • 以上选择我承诺是永久有效的,接受社区和佬友监督:

以下为项目介绍正文内容,AI生成、润色内容已使用截图方式发出


codeSee

起因

在经历大量vibecoding后,个人发现有一些非常真实的痛点和需求:

  • ai开发代码的速度和人类review代码的速度根本不对称。ai能在几分钟内写5000行代码,而我们审查5000行需要几个小时甚至更多,并且审查的质量和效果递减。

  • 在大多数vibecoding的场景下,我需要审查的其实不是代码,而是逻辑。如果一个代码中混合大量的专业技术、不同语言,而我的精力和时间是非常有限的,这代表着我不可能先学会这个项目中所有的技术和语言再进行review。我真正需要审查的是这个功能做了什么,它的上下游是谁,影响谁。这是语义层面的东西。

  • 排查一个问题的时候需要全链路追踪能力,例如当功能 A 出了问题,根本原因可能是由于功能 B 和功能 A 互斥所导致的,所以我需要的是功能层面的影响地图。

  • 除了开发上的痛点外,还有个人的一些心理问题。我需要对这个项目的参与感和掌控感,我不想vibecoding后完全不理解我的项目。而可视化的功能画布能让我在不读代码的情况下,仍然“拥有”这个项目 :melting_face:(也算是个人的一点小小需求)

那么基于上述需求和痛点,就有了以下这个项目:

github.com

GitHub - Kaka-cheaper/codeSee: Visualize your project's feature logic as a...

Visualize your project's feature logic as a semantic flow graph — not call graphs, not import maps. AI writes the data, you see the story.

干啥的?

让 ai 探索或者开发时实时更新功能视图,我能够看到整个项目的逻辑链条。这个项目以一种奇妙的方式进入我的脑袋里 :grinning_face:

针对以下两个场景:

  • 从0开始vibecoding一个项目(这是我推荐的最佳实践):从第一天就把codeSee集成到项目中,ai永远不会丢失上下文,代码是刚写的,对应的功能视图即时更新。每一次同步只涉及几个小功能,ai 也不会去猜测已有的代码干啥了,因为这是它刚刚写的 :zany_face:,而我们能够在任何时候审查这个画布(相较于枯燥的代码我觉得我更愿意看这个)

  • 接入已有的项目:如果是小型项目还好,但如果是重型项目,无论提示词设计的好还是坏,无论是分出多少步来进行扫描项目的工作流,ai 总可能会出现幻觉或者覆盖不到的地方,尤其是针对不那么强的模型来说

效果演示:

overview
features
steps

具备三个视图:

  • 概览视图:从用户故事把整个项目的功能逻辑说清楚
  • 功能视图:每一个概览视图中的节点都对应功能视图中的一个容器,容器内包含了这个节点的所有子功能
  • 步骤视图:双击功能视图中的子功能即可查看它的详细逻辑链条和步骤

怎么用?

这个项目分为 web 前端和 prompt,clone 项目到本地后,通过安装脚本把prompt、校验器、agents.md注入到你的项目(不必担心覆盖原有的AGENTS.md,如果已经有了会直接追加内容)。注入项目的目录大概长这样(由于块引用视觉效果不太好,我这里就放截图了哈 :slightly_smiling_face:):

image

注入后让你的 ai ide 直接阅读 agents.md 产出 features.json 即可。

产出 features.json 后在本项目的 viewer 目录下运行 npm install 和 npm run dev 。

接下来你就可以打开 http://localhost:5173/ 查看项目的功能视图啦 :blush:(开始享受⑧),记得把产出的 features.json 拖进去哦 :slightly_smiling_face:

开发重点

欢迎大家来尝试和体验 :smiling_face_with_three_hearts:

如果有佬友认可我的项目可以加个:star: star :heart:,您的认可也是我的动力 :heart:

同时欢迎各位佬友指出不足和提PR :smiling_face_with_three_hearts:

目前项目后续的重点完善方向是:

  • prompt 优化:虽然已经做出了一些规范,但是个人使用后产生的真实痛点和案例才是 prompt 的壁垒和护城河,类似于 skill。人人都可以经历真实使用后做出自己的 prompt 贡献。

  • 前端布局算法优化:受限于个人经验和知识面广度,目前的布局算法还是有一些问题,个人认为不太美观。并且这个布局算法我认为不应该单纯的基于节点位置和关系,更应该加入功能逻辑、语义层面的布局。目前已经在这个方向做出了努力:添加了单独的 layout.json 布局文件把布局位置解耦出来,后续可能也会让 ai 直接进行操作和语义布局。

15 个帖子 - 4 位参与者

阅读完整话题

来源: LinuxDo 最新话题查看原文