弟弟想看恐龙,用文心快码3.5S快速打造恐龙乐园

作者简介:战场小包,前端工程师,掘金、InfoQ签约作者,2025上半年接触百度文心快码智能代码助手,当时的技术团队急需AI提效,由此评估了多款Coding 工具,综合下来Comate体验非常棒。

前言

包哥惹了祸最近,前面去大同访友时,恰有几分闲暇功夫,又恰逢博物馆很近,随之就预约了。万万没想到的是,大同不止有着丰富的文物馆藏,还有一个单独的恐龙化石馆。说实话,这还是包第一次见到活生生的恐龙化石,快速相机捏了几张,然后开心得分享给家人。这好家伙,弟弟看到,难受住了,你小子在外面看恐龙,好潇洒啊。不行,我也要看。这,我也变不出来啊,该咋办,愁坏包了。

还好,9月的Wavesummit 开发者大会百度文心快码发布3.5S(Super Synergistic AgentS)版本,打造"多智能体自协同引擎"让智能体之间真正实现自主协作、共同完成任务 。AI coding 这一年来,大家肯定都不陌生了,Cursor、Trae、Comate各自登台亮相,每一款产品都体验过,有些包都在深度使用,已经融入了包的日常开发中,成为密不可分的一部分。那这次不如咱们就试试,使用文心快码 3.5S 做一个恐龙乐园,让弟弟看个够。

先说结论,文心快码 3.5S 的体验非常nice,实现的效果也特别不错,先来看一下实现效果~

无奖竞猜:实现下面的效果,小包+文心快码 3.5S共使用了多久时间?

实现过程

小包并没有选择使用插件的方式,直接选择安装了 Comate AI IDE。

1 获取模型

在实现一个恐龙乐园之前,首先需要一些准备工作。这里比较推荐 sketchfab,从里面下载一下,恐龙的模型非常多,porsche_taycan 模型相对少一些,而且不够精美。注意红框处,代表内置动画和支持免费下载。

其他 3D 模型获取方式:free3d cgmodel cgtrade ...模型有很多种格式,本文选用 GLTF 格式,根据扩展名可以分为两种:

gltf: gltf 格式文件没有被压缩,会附带额外的 bin 数据文件,在文本编辑器中容易阅读,方便进行调试。

glb: 所有数据都包含在二进制文件中,文件小,推荐使用,本文选用。

2 框架实现

框架搭建部分直接交给文心快码3.5S来完成,直抒胸臆交待要求即可。

先插入几句,使用的时候,发现文心快码 3.5S提供了多种Agent,小包去稍微查了一下,大致如下:

Zulu综合智能体: 不仅懂你还会灵活调用工具,多文件协同编辑,代码一步到位。

Plan规划智能体: 与你协同澄清并完善需求,拆解为清晰可执行的步骤,确保生成的代码是你想要的。

UT单测智能体: 写单测超棒,同步提供覆盖率报告,助你发现潜在 bug。

F2C 设计稿转代码智能体: 高保真还原设计稿,自动生成可运行、可维护的前端代码。

评估下来,综合智能体Zulu最适合,输入需求。目的是要做一个展示平台,过程中也没有很仔细去想细节,想尽可能增加文心快码3.5S发挥的自由度。最后提示词给出如下,比较简单:

文心快码3.5S会首先规划要做的事,将上面笼统且复杂的任务拆解成9个清晰的todo,看到这里,小包心中大定。

比想象中快很多,大约等了5-6分钟,运行项目,竟然一次成功啦! 预想是三次交互能成功就非常不错了,结果也令人惊喜,而且还做了一些舒适的细节处理 ,比如展示台和空中的移动云朵效果等。文心快码3.5S,首先检查了dinosaur-glb文件夹下模型的大小和信息,并编写脚本将模型同步到了public/assets中:

接着给出了后续优化的指导:

3 持续优化

初步分析后,发现了两个问题:1.点击选择xxx龙按钮没反应(这里其实并没问题,迅猛龙的模型过大,导致挡住了其他两个模型)2.龙的位置没有在草坪上

继续输入需求,进行改进:

后续完成后,才发现上面两个问题是存在歧义的,当时并没有意识到模型元素的大小会存在不同。模型是随便下载的,不成体系,各个模型的尺寸差距很大。后续就这个问题拉扯了几番,也没能实现,毕竟提出的需求就是有些问题的

这时候发现文心快码3.5S一个超强的功能 ,爱了。文心快码 3.5S 提供 IDE 內预览的能力,正如你所想,就是在IDE中打开网页,进行预览。嗨,那这有什么稀奇的?

还真有!除了能正常的预览外,右下角提供了选择元素和发送console.log错误的功能,可以将页面中的元素和错误作为Agent的上下文进行使用。 这功能有点强啊,相当于 AI 来帮我调试。

因此看不到迅猛龙(这里真的有些了,当前页面中显示的就是迅猛龙,当时误解为霸王龙了,毕竟霸王龙他大啊),选中了迅猛龙按钮元素,传递到 Agent。

根据我的需求,文心快码3.5S调整了迅猛龙的位置,才发现中间躲着一个小龙(霸王龙)。突然意识到,可能是模型大小存在差异,我倒,但问题是此时我还是认错了龙。。。。

由于一直改正不成功,怀疑是不是有一些基础性问题,由此去重新看了一下模型效果,发现大的是迅猛龙(被蠢哭),我倒啊。修改描述,重新询问,得到阶段性效果如下:

4 最终效果

恐龙不够多,不够壮观,又去模型网站下载了几个模型,只需一句话,文心快码3.5S就给同步完成了。

同样的问题再次出现了,模型的大小不一致。文心快码3.5S生成的代码非常清晰,在前面的交互基础上,找到相应代码位置,手动修改完成了。

光有恐龙也没啥意思,如果想要具备科教意义,需要添加一些文字介绍。

依旧是todo先行,没一会,成功实现非常简约又美观的卡片效果~

至此,就成功得到文章开头的效果。

总结

体验下来,文心快码3.5S这次升级效果之好,令人惊艳。

  • 在恐龙乐园的整体代码生成过程中,中途没出现过一次报错,这部分真的惊叹到小包了。
  • Todo拆解得非常合理、清晰。把复杂琐碎的需求拆解成合理、清晰的需求,点赞!
  • 响应速度很快 ,中间小包由于错误理解,导致了一些时间浪费,即使是这样,恐龙乐园总消耗时间不到1h;
  • 很多非常人性化的功能,提供了多款官方智能体、IDE预览、Agent 理解图片的能力等;
  • 生成代码逻辑清晰,审美也超好。 恐龙乐园整个沟通过程中,只使用了"可爱"一个风格词,最后的布局、整体风格都有些惊喜。

推荐大家都快快去体验一下,感觉文心快码3.5S是近期最大的收获了,不止可以成为工作的有力助手,还安抚了我的老弟。

相关推荐
码客前端1 分钟前
理解 Flex 布局中的 flex:1 与 min-width: 0 问题
前端·css·css3
Komorebi゛1 分钟前
【CSS】圆锥渐变流光效果边框样式实现
前端·css
qq_2562470511 分钟前
除了“温度”,如何用 Penalty (惩罚) 治好 AI 的“复读机”毛病?
后端
工藤学编程14 分钟前
零基础学AI大模型之CoT思维链和ReAct推理行动
前端·人工智能·react.js
徐同保14 分钟前
上传文件,在前端用 pdf.js 提取 上传的pdf文件中的图片
前端·javascript·pdf
怕浪猫15 分钟前
React从入门到出门第四章 组件通讯与全局状态管理
前端·javascript·react.js
内存不泄露21 分钟前
基于Spring Boot和Vue 3的智能心理健康咨询平台设计与实现
vue.js·spring boot·后端
qq_124987075322 分钟前
基于Spring Boot的电影票网上购票系统的设计与实现(源码+论文+部署+安装)
java·大数据·spring boot·后端·spring·毕业设计·计算机毕业设计
欧阳天风23 分钟前
用setTimeout代替setInterval
开发语言·前端·javascript
麦兜*26 分钟前
【Spring Boot】 接口性能优化“十板斧”:从数据库连接到 JVM 调优的全链路提升
java·大数据·数据库·spring boot·后端·spring cloud·性能优化