生成式 AI 的不断发展,正在让设计与开发界限逐渐模糊。今天,UI/UX 设计师的角色正在向「全链路」延伸。能否快速验证设计落地的可行性、与开发者高效协作,甚至自主实现简单的前端逻辑,已成为衡量设计师竞争力的新维度。AI 代码工具的出现,为设计师提供了一个低门槛的「技术跳板」——而工具的界面体验、交互逻辑与学习成本,直接决定了设计师能否顺利跨过这道技术鸿沟。在本文中,我们将从设计师的视角,深度体验Cursor、Trae_CN、CodeBuddy三款工具的表现。
往期测评:
关于 Manus 这类产品,我想说...
从 Manus 发布至今,围绕着这类通用型智能体的讨论从没停过。噱头大于实用?深度测评3款人气超高的AI智能体产品
与以往的测评相同,先放我们的主观评分:
由于 Cursor,Trae_CN,CodeBuddy 都是编译器,所使用模型基本来自各路大厂,因此本文不聚焦于代码质量,而是主要探讨对设计师等代码新手的使用体验问题。
由于,CodeBuddy 是三个产品中使用体验最好的产品,接下来我们将从它开始进行介绍。
CodeBuddy
CodeBuddy 是腾讯推出的 AI 编程工具,从宣传侧重点和时机效果来说,我们都觉得它在小程序的代码生成方面有比较好的效果,其关键是独特的可视化编程功能,可以让我们直接在页面上拖动组件,调整大小,像是调整原型图一样的调整前端页面。
目前,CodeBuddy 默认内置的大模型是 Hunyuan、Deepseek(r1/v3)、Ollama。但在 Craft 的代码生成模式仅支持 Deepseek v3 模型。用户可以通过 Craft 拆解需求、生成代码,Chat 模式理解工程、问答技术。
在测试中,我们觉得 CodeBuddy 的使用还是存在门槛的,但对于有一定开发背景或者对于开发流程较为熟悉的人来说还是比较适合的。下面我们将给大家展示下从 0 开始搭建小程序的流程:
1) 输入提示词,本次我们使用的提示词:“创建一个 AIGC 信息发布小程序,可以抓取网络上的 AIGC 咨询信息并以瀑布流图文展示,用户也可以自己上传内容、极简黑白 UI 风格。”
2) 大模型的生成大概用时 5 分钟,在此期间,需要我们对于代码进行选择,选择接受或重新生成,一定程度上也增加了用户参与感(这部分其实是需要用户审核生成的代码的,但能力有限,对于我们来说也只能作为参与感的体验了)。
3) 在初次生成后。 我们发现缺少了详情页面,对话输入增加详情页,以及支持用户点赞、评论、收藏等功能。于是我们通过对话的方式继续生成,此过程持续了约 4 分钟。
4) 在后续的调试中,我们惊喜的发现。可以通过点击“可视化”功能直接对对页面中元素进行位置、样式的微调,以“低代码”的形式完成修改,实现所见即所得。
5) 小程序做好后先自动检查代码问题,我们可以直接和 CodeBuddy 对话解决错误,例如说“帮我改成可以发布的状态”就会自动修复问题,修复完成后就可以进行审核上线的流程了。
Cursor
Cursor 是一个内置 AI 工具的代码编辑器。付费情况下支持更好的模型和更多的对话次数。目前 Cursor 解决了国内访问的网络问题,可以正常使用 chatgpt,可以作为国内访问 chatgpt 的一个替代手段。
付费模式
值得注意的是,当前的免费版本使用额度大幅缩水,补全次数从之前的 2000 次补全大幅缩水到了现在的 200 次,对话次数维持了 50 次不变。
Cursor 的界面与 VSCode 基本一致,而使用流程与之前介绍的 CodeBuddy 也较为类似,发送需求,即可坐等 AI 完成项目。目前免费支持的模型是 gpt 4.1
- 对于零基础的设计师来说,编程的第一关就是环境配置。但是 Cursor 可以直接将配置的代码发送出来,我们只要点击“run”即可自动安装代码所需的配置。
- 第二个麻烦之处则是复杂的程序目录,在之前仅使用 gpt 式对话 AI 助手编程时,我们需要手动创建各种代码文件并将其分类存放在目录地址下。而在 Cursor 中,AI 可以直接帮我们创建好目录,规划好结构。
- 在调试程序的时候,Cursor 可以直接基于代码进行修改,不需要像之前一样从 gpt 对话框中不断复制粘贴。
可以看到界面整体与 VScode 类似,较好上手
此次输入的任务是写一个 AIGC 相关的新闻页面,大致的使用流程与 CodeBuddy 一致,最终会在本地生成一个项目文件夹,并创建好相关文件。其中如果有未安装的库,也会提供一键安装的方法。
唯一令我感到疑惑的是反复出现的禁用情况,Cursor 似乎对于页面侵权等的判定非常严格,一旦我给出一张页面的参考图,马上就会被判定为“可疑行为”,从而被禁用。
Trae_CN
Trae_CN 是字节针对 Cursor 推出的同类型的基于 AI 大模型的代码编辑软件,可能是想要和 Cursor 抢占市场的需要吧,目前是免费使用的,且不需要魔法上网。目前,从能力的使用来说,和 Cursor 几乎保持了相同的水平,Trae 的主要界面展示如下:
与 Cursor 相同,Trae_CN 也是采用了代码框在左,对话框在右的模式;
目前,从我们这边测试的版本来看,Trae_CN 与 Cursor 保持相同,会给出几个默认的模型的选择。同时,Trae_CN 也支持用户自定义需要使用的模型,带给用户更好的体验上限,如下图所示:
目前的 Trae_CN 仅保留 build 模式,支持用户通过自然语言对话的方式,从 0 开始构建一个完整的项目。
在构建项目的过程中,大部分的任务 Trae_CN 都会帮用户写好,我们只需要根据 AI 的建议点击「全部接受」就好
最终效果的本地预览样式:
得承认,目前 Trae_CN 的项目目前看起来距离 Cursor 还是具有一定的距离,但 Trae_CN 极低的学习成本还是很值得尝试的。
在结束了整个测评后。我们发现当 AI 代码工具试图用算法解构设计语言时,我们看到的不仅是技术对创作流程的颠覆,更是一场关于「设计话语权」的静默革命。这些工具在降低技术门槛的同时,也在重塑设计师的职能边界——从像素的操控者进化为规则的制定者。
当下的 AI 代码生成仍处于「翻译」阶段:它能准确转译样式参数,却难以捕捉情绪化的设计意图;它能快速输出标准组件,却尚未学会在代码中保留品牌基因的温度。或许,这种矛盾恰恰揭示了设计师不可替代的核心价值:在效率与创意、规范与灵感之间找到精妙的平衡点。