前几天看到很多公众号都在吹 Trae —— 国内首个 AI 原生 IDE。

输入一句话就能自动生成一个完整的游戏。这真的有这么神奇吗?

Trae.png

正好我有一个需求。

最近在看一本关于焦虑的书,有一个很重要的部分就是要认识自己的价值观。当感到焦虑的时候,不要陷入焦虑的漩涡中,而是要做和自己价值观相符的事情。书中提供了一种方法:给出一系列价值观相关的词汇,进行排序,选出最重要的词语,然后对比当前的行为是否符合自己的核心价值观。

我就想开发一个交互式网页,帮助用户识别和整理自己的价值观。

最开始我利用 Trae 的 Builder 模式,体验是不错。Trae 能够自动生成项目框架,运行命令、修改代码时基本只需要点击“同意”即可。但做了好几个小时还是没搞出来,总是有报错,就算修了报错,页面还是加载有问题,花了很多时间也没搞定。

当我准备放弃的时候,我突然想起可以直接通过聊天的方式将需求发给大模型,没想到效果还不错。我就把相同的提示词发给了不同的大模型,看看他们的表现。

提示词如下

设计一个网页,要求如下。由于输出结果可能较长,可以把代码分为三个部分,现在返回第一部分

界面布局 

页面分为上下两部分: 
1. 待选列表:横向排列,仅突出显示当前词(居中大字体),后续词汇以模糊缩略形式堆叠在左侧,用标签格式展示。操作的按钮也需要横向排列。
2. 已选列表:垂直排列,支持拖拽排序,默认显示前30项,超出部分隐藏并提供“展开/收起”按钮。

需要同时适配网页端和移动端

数据

支持中文/英文两套数据,数据分为价值观以及描述两部分,价值观使用比描述更大的字体。

中文数据节选: 
富足 – 生活充满由内心驱动的体验 
接受 – 接纳周围的人与经历 
责任感 – 坚守自己的承诺

英文数据节选: 
ABUNDANCE – to have a life filled with heart-driven experiences 
ACCEPTANCE – to accept the people and experiences around me 
ACCOUNTABILITY – to hold true to my commitments

核心交互

待选列表操作: 
1. 每次进入页面时,待选词顺序自动打乱,增强探索感。
2. 提供“不重要”按钮将其自动放入已选列表末尾。 
3. 可以拖动待选词进入已选列表,拖动后待选词自动从待选列表中移除。

已选列表操作: 
1. 支持拖拽调整顺序。 
2. 超过30项时折叠,点击“显示全部”展开完整列表。
3. 列表项不支持删除操作。

中英文切换:
1. 切换中英文数据时需要将待选列表切换为对应语言的数据,已选列表进行清空

针对 Claude,我特别添加了“代码拆分三部分返回”的说明,以适应其输出长度限制,而对于其他大模型,则省略此要求。

我做的处理就是将返回的代码拼接到一起,用完整的数据替换示例数据,其他未做任何修改。

想要直接体验各个大模型生成结果的朋友可以直接点击在线体验。有兴趣的也可以查看代码

下面我们依次看看各个模型的结果

ChatGPT

ChatGPT.png

Claude

Claude.png

DeepSeek-R1

DeepSeek-R1.png

DeepSeek-V3

DeepSeek-V3.png

通义

通义.png

Trae

Trae 生成结果.png

总结一下

  1. 整体风格:国内的大模型生成的结果都比较简洁,样式也都比较简单,而 ChatGPT、Claude 都添加了一些额外的样式。
  2. 最佳效果:Claude 的结果可能不是最符合提示词的,但最得我心。样式很好看,还添加了导出和进度条,修改修改就可以使用,而其他大模型的结果距离对外使用还有较大的距离。
  3. 体验最佳:ChatGPT 的代码预览体验是最好的,如果让它生成第二部分代码,它会在原有文件逐行扫描,不用修改的行就跳过,需要修改的就替换。
  4. 技术栈:除了 Trae 用了 React 框架,剩下的都是 html + css + javascript,但 Trae 的效果并没有更好,甚至有一些误解,比如每一项后面都加了不重要。
  5. 问题修正:每个模型生成的结果或多或少都会有一些问题,这些通过继续回复应该都能够解决。

大家对于 AI 编程都有哪些想法或体验呢?欢迎大家在评论区分享自己使用 AI 进行编程的想法和体验。


码农张思壮
31 声望6 粉丝