Skip to content

Code Agent

更新: 8/21/2025 字数: 0 字 时长: 0 分钟

最近公司有一个前端代码生成的工作,交给了我来做前期的调研与demo的制作,由于整个项目选择了在该领域上并非主流的Java语言,以及选择了我这个知识贫瘠的人作为前期人员工,因此在整个项目的推进中可以说是四处碰壁,不过也算是有了一些理解,这里发上来和大家一起分享一下。

参考文献

  1. 淘宝——一位Cursor深度用户的原理探析与实验验证(也是阅读了这篇文章促使了我写本文)

  2. 淘宝——淘宝交易前端AI生码技术的创新实践

  3. 淘宝——万字长文解码如何玩转Prompt(附实践应用)

  4. 淘宝——技术人的大模型应用初学指南

  5. 探索 Trae 技术 实现-codebase 介绍

  6. 腾讯云 AI 代码助手:Codebase 本地工程检索

  7. AI 辅助理解现有代码:自然语言搜索的 RAG 策略设计与 IDE 插件的落地

  8. Bolt.diy 开源前端生成项目

最初的尝试

最开始我使用了Bolt作为参考对象,不过由于我平日使用的代码主要是Java,因此对该语言使用的Remix框架并不太熟悉,最后只能通过和Trae以及算法的小伙伴一同讨论这个项目是如何生成的前端代码

最后我得到了这样一个结论:这个项目的代码生成逻辑十分简单

这对于我是很意外的,因为一个简单的逻辑能生成这么好的前端代码,这现实吗?

不过结果就是这样,我也只能闷着头去干了,试着一点一点的将原本项目中ts代码的逻辑移植到Java中

Prompt

首先肯定是找到Prompt了,这一找直接吓我一跳,我测,上百行,说出来不怕大家笑话,这是我第一次见这么长的Prompt,给了当时的我一定的震撼。

不过事情总是要干的,我将这个Prompt复制到了我们的项目中,然后一行行的将他翻译成中文(为了项目后续维护的方便),试图理解这个Prompt(由于理解不能又去专门学了一些Prompt相关的知识)[3]

这个项目的Prompt可以说是十分详尽了,我对他做出了针对我们项目需求的修改,最后也是实现了我需要的Prompt的理想效果

上下文

最初我的尝试是使用Tool(这个Tool能获取一个结构化后的文件内容)来让大模型在一次对话的过程中实现文件的调用,但是却意外的发现大模型会反复调用Tool以试图读取项目所有文件,这给Token带来了很大的消耗,而一次性将项目代码全部交给大模型又显然是不可行的,到这里也就遇到了项目的第一次碰壁

多模态

我们的基模选用的是一款不支持图片理解功能的大模型,而实际需求中又需要这个功能,我试图通过引入多模态大模型配合主要模型来实现这个功能,但是却会发生一定的内容丢失,这也是项目的第二次碰壁

绝望

到了项目阶段性验收的时间,我给leader展示了我的demo,不出意外的没有通过,然后我们两个人又花了一定的时间研究了Bolt商业项目和开源项目的区别,最后决定将demo的内容退回到两天前的版本,重新去写新的逻辑和代码

白干两天,这对我来说是一个蛮大的打击,那天下午我脑子里只有一个想法:“我能不能跑路,能不能劝leader换个人来做这个项目,或者要不大家一起跑路?”

又一次学习

玩归玩,闹归闹,该干还是得干,问题是死的人是活的,世界上的代码都是人写的,图灵完备的语言理论上啥都能干,别人能实现的我为啥不能实现。

抱着这样的信念,又开始了新一轮的学习。

这一次正巧看到了阿里的一篇技术文档[1],这篇文档解答了我心中的一个疑惑:为什么原本的开源项目逻辑这么简单却能有这么好的效果

image.png

可以看到,即时是目前最强的AI IDE之一的Cursor也是一个简单的流程(特别注意的是,这里指的是流程的简单,而不是代码或者架构的简单)

同样的,我们的Agent demo为什么复刻了部分开源项目的逻辑还是不能达到一样的效果:因为基模差距太大

上下文输入

根据阿里对Cursor的研究,我们可以发现Cursor的代码检索是基于codebase_search Tool实现的,得到了这个关键字就简单了,我立刻去Google了“Codebase Search Tool 实现”

果然有相关的文章[4,5,6],我一顿看,最后得出了结论:这里需要使用Rag技术进行进一步的优化

结合我们的项目需求,会在生成代码之前进行一步Search,通过这一步获得相关的代码,然后再交给核心的代码生成模块进行处理

多模态

这个是无法避免的了,因为客观因素,我们不可能使用多模态模型生成代码,只能使用之前的两者结合的方案,那么如何让生成代码的模块可以有效的获取到图片的信息就是很重要的了。

无独有偶,淘宝也分享过自己内部这方面的实践经验[2]

虽然这篇文章中的很多技术实践是闭源的,而且阿里如此规范便准的工作流程也不是我们这种小公司可以复刻的,但是其本身的技术实现仍然有可以学习的地方。

  1. 首先我们需要使用一个多模态大模型,将UI图的内容准换成一种dsl,这个dsl中应该包含了UI图的组件嵌套关系,类型,样式等内容

  2. 给予AI组件设计规范,这里应该包含了前端代码中的一些标准,以至于生成出的组件可以有效的UI图,减少bug

  3. 基于AI设计规范,这里包含了整套系统的css应该如何设计,包括整体的颜色,间隔使用px大小,文字的px大小等

这样的一个步骤虽然达不到完美复刻UI,但是现阶段能想到的最好的方案了

结束

这么一个demo搞了这么多天,也是逐渐的了解到了代码生成Agent开发的艰难了,后面还有很长的陆要走,总之还是慢慢来吧

感谢大厂的技术文档以及Github上开源项目的贡献者

如果没有这些知识的话恐怕我已经提桶跑路了(逃

本站访客数 人次      本站总访问量