前几天看到很多公众号都在吹 Trae ------ 国内首个 AI 原生 IDE。
输入一句话就能自动生成一个完整的游戏。这真的有这么神奇吗？
正好我有一个需求。
最近在看一本关于焦虑的书，有一个很重要的部分就是要认识自己的价值观。当感到焦虑的时候，不要陷入焦虑的漩涡中，而是要做和自己价值观相符的事情。书中提供了一种方法：给出一系列价值观相关的词汇，进行排序，选出最重要的词语，然后对比当前的行为是否符合自己的核心价值观。
我就想开发一个交互式网页，帮助用户识别和整理自己的价值观。
最开始我利用 Trae 的 Builder 模式，体验是不错。Trae 能够自动生成项目框架，运行命令、修改代码时基本只需要点击"同意"即可。但做了好几个小时还是没搞出来，总是有报错，就算修了报错，页面还是加载有问题，花了很多时间也没搞定。
当我准备放弃的时候，我突然想起可以直接通过聊天的方式将需求发给大模型，没想到效果还不错。我就把相同的提示词发给了不同的大模型，看看他们的表现。
提示词如下
markdown
设计一个网页，要求如下。由于输出结果可能较长，可以把代码分为三个部分，现在返回第一部分
界面布局
页面分为上下两部分：
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
Claude
DeepSeek-R1
DeepSeek-V3
通义
Trae
总结一下
- 整体风格：国内的大模型生成的结果都比较简洁，样式也都比较简单，而 ChatGPT、Claude 都添加了一些额外的样式。
- 最佳效果：Claude 的结果可能不是最符合提示词的，但最得我心。样式很好看，还添加了导出和进度条，修改修改就可以使用，而其他大模型的结果距离对外使用还有较大的距离。
- 体验最佳：ChatGPT 的代码预览体验是最好的，如果让它生成第二部分代码，它会在原有文件逐行扫描，不用修改的行就跳过，需要修改的就替换。
- 技术栈：除了 Trae 用了 React 框架，剩下的都是 html + css + javascript，但 Trae 的效果并没有更好，甚至有一些误解，比如每一项后面都加了不重要。
- 问题修正：每个模型生成的结果或多或少都会有一些问题，这些通过继续回复应该都能够解决。
大家对于 AI 编程都有哪些想法或体验呢？欢迎大家在评论区分享自己使用 AI 进行编程的想法和体验。