AI编程新体验：豆包+Trae，线上线下联动编程

豆包推出了AI 编程，在「编辑模式」下可以直接前端改图和文字，我体验了一下，结论是：

坏消息是做前端的人更加水深火热了，好消息是后端暂时还比较安全。

我试了下豆包的这个功能，点击后，它直接给了我一个Prompt模板：

分析以下内容，并将其转化为清晰美观的可视化HTML网页：

粘贴内容详情，如财报数据、旅游攻略、新闻资讯、论文总结等

下图为豆包的AI编程示例prompt。

其实这一点儿并没有什么稀奇的，因为生成一段HTML代码并且直接可视化，在很多AI大模型都已经实现了，包括但不限于DeepSeek，ChatGPT，Claude等等。Prompt跟豆包的AI编程一个思路，就是生成HTML代码。

下图就是我用DeepSeek生成的HTML代码，并且直接在DeepSeek网页版运行，可以看到很完美的实现了我的需求：生成一个html代码，展示从0-9的数字不同写法。

至于为什么是HTML，因为这个代码就是构成我们平时看的网页的实现方法，这个代码你直接保存在本地，双击就可以直接显示为网页，DeepSeek或者豆包只不过是帮我省去了下载到本地再运行这一步而已。

下面的gif动图你可以看到，我现在编辑的这个知乎回答网页，本质上也是html代码生成的。

我用豆包的AI编程也做了同样的尝试，还是给AI一样的任务，可以看到下图中豆包也是给了两部分内容。

1 代码，即生成的HTML代码

2 预览，就是用html渲染出来的网页。

明显看得出豆包生成出来的跟DeepSeek的风格都不一样，豆包的美观程度更高。

并且这种网页还有个好处，那就是它会随着你的屏幕大小变化而变化，当我把网页拉宽后，网页的展示就从5行2列，变成了2行5列，这也是这种方法的优势，那就是所有的屏幕它都能自适应的调整。

各种型号的手机、电脑或者平板，只要能打开网页的，它就都能用。

豆包的主要功能就是这个编辑，它可以在不改变其他位置的前提下只改动部分内容。

比如说我不喜欢这个按钮的颜色，要让它变成红色，按以前你要告诉AI，然后它来操作。

但是这个过程有一个问题，那就是它在改动颜色的时候，说不定也会把其他位置也改了，这就叫“牵一发而动全身”。

豆包的AI编程功能相当于是把这个“局部调整”的功能做了优化，你可以更加精准的修改自己想要修改的地方。下面的动图就是整个操作逻辑。

做了局部修改后，代码版本从v1->v2，按钮颜色也改了，没毛病。

但是有个问题，它在改动的时候会重新输出整个过程，但实际上改动的地方就只有一行代码，如果是我改的话，只需要几秒钟，这一点儿还需要继续优化。

其他的几个预设功能都是类似的，要么是生成HTML代码。

要么是生成SQL代码。

这些有用，但是作用不大，因为这都是“代码碎片”，需要成百上千甚至上万才能发挥作用。

不过它打了一个补丁，那就是可以在Trae中打开，也算是弥补了一个沦为玩具的大概率结果。

导入到本地之后，可编辑性明显变大了，可以自己选择调整代码。

比如就可以在Trae的编辑栏里面直接改颜色。

比如我选中这行代码，然后让Trae给我改成红蓝渐变色。

它会自主思考我的指令，并提出结果办法以及自动执行。

经过思考，自主执行后，你会发现按钮颜色变了，它的确按照我们的想法变了，这就是AI编程的优势所在。

你只需要描述清楚你想要的结果，那么AI就可以替你去实现。

但是也要注意，现在AI编程的能力还不足以运行非常复杂的代码，但是这种显示个网页的工作完全没问题，你大可以任意刁难AI。