Doubao-Seed-Code 自主规划 + Bug 修复 + 超强视觉理解,端到搞定复杂应用

1. 前言

在11月11日,火山引擎正式发布豆包编程模型(Doubao-Seed-Code),本次发布的豆包 code 模型,是一次面向 Agentic 编程任务的深度优化,支持 256k 长上下文,可以让模型轻松处理长代码文件,多模块依赖等复杂场景,能够更好的支持端到端自主编程,在全栈开发中表现良好,尤其是前端能力表现突出,其次,Doubao-Seed-Code 还是国内首个支持视觉理解能力的编程模型,可以参考 UI 设计稿,截图或者手绘草图来生成代码,或者对生成页面进行视觉比对,能够自主完成样式和 bug 修复,大幅提高前端开发效率。

来看下 Doubao-Seed-Code 在 Terminal Bench、SWE-Bench-Verified-Openhands、Multi-SWE-Bench-Flash-Openhands 等多项权威基准测试中的表现

picture.image

可以看出,Doubao-Seed-Code 在这几个指标中领先国内的大模型,和Claude-4.5-Sonnet 不相上下,甚至在一些方面上也做到了领先

  1. 超大优惠力度

那么能力如此出色的大模型,他的优惠力度也是非常的诱人,Doubao-Seed-Code 不止性能强,更考虑开发者的实际需求,将成本红利最大限度交给开发者。其沿用了火山引擎首创的分层定价模式,并配合全量透明 Cache 能力,在多轮对话中进一步降低成本。综合来看,Doubao-Seed-Code 输入、输出单价已达国内最低:

  • 0-32k 输入区间:输入1.20元/百万 Tokens,输出8.00元/百万 Tokens
  • 32-128k 输入区间:输入1.40元/百万 Tokens,输出12.00元/百万 Tokens
  • 128-256k 输入区间:输入2.80元/百万 Tokens,输出16.00元/百万 Tokens

举例来说,创建一个美观的交互式英语学习网站,相同 Tokens量下(0-32k 输入区间),Claude Sonnet 4.5 成本约 4.05 元,GLM-4.6 约 0.77元,而 Doubao-Seed-Code 仅 0.34 元。

还有方舟 Coding Plan 首月特惠,仅需 9.9 就能体验到 Doubao-Seed-Code,用量也是 Claude Pro 的 3 倍

picture.image

  1. 实战演示

3.1 模型接入

现在来全程交给 Doubao-Seed-Code 来开发一个简易版的贪吃蛇小游戏,首先我们需要在火山引擎的官网来创建 API-KEY 来便于之后的调用:

picture.image

然后来到开通管理这里,一键开通所有的模型服务,每个模型都赠送了 50 万的 token 来便于开发者体验开发

picture.image

官网也为我们提供了接入教程:

https://www.volcengine.com/docs/82379/1928261

picture.image

可以看到,Doubao-Seed-Code 支持了大部分市面上主流的开发工具,极大地方便了开发者们的开发需求

以 Trae-cn 为例来演示一下接入方式:

这里选择添加模型,

picture.image

picture.image

然后选择火山引擎和豆包大模型,再输入刚刚创建的 API 密钥,就可以来进行开发了

3.2 工程能力

我们先来看下 Doubao-Seed-Code 的功能能力怎么样,先初始化一个 Spring 项目,然后再用 Trae 打开,这里我们直接告诉 AI 我们想要开发一个贪吃蛇小游戏,

picture.image

picture.image

AI 深度思考之后,开始进行规划,列出了开发步骤,先做什么,再做什么,前端后端一站式生成

picture.image

创建之后,AI 也自动帮我们启动好了项目,来看下效果:

picture.image

刚开始的时候,效果还是有些简陋的,但是功能都正常,接下来我们可以给这个小游戏丰富一下,比如说前端的显示,还有点击的效果

picture.image

picture.image

在生成的过程中,大模型也会复查代码的 bug 并进行修改,并且创建这个项目,涉及到了大量的文件和代码,Doubao-Seed-Code 能够如此精准的理解需求并修改问题,足以见出能够存储的超长上下文。

并且,我的提示词都是很简单的一句话来概括的,可以说,就算不是专业的程序员,也能够通过简单的自然语言描述来创建出一个简单的应用,这就是 Doubao-Seed-Code 大模型的强大之处

来看最终的效果,还是很不错的,玩了之后也是很流畅

picture.image

再来个前端的 Vue 工程代码来看下,提示词这次用的专业些:

你是一位专业的前端开发,请帮我根据下列信息来生成对应的前端项目代码。
主页
采用全屏风景轮播设计,自动切换不同自然风光(如山川、湖泊、森林、星空),每张图片配有简短诗意描述。
顶部导航栏包含 “首页”“风景图鉴”“摄影技巧”“关于我们” 四个选项,支持 hover 效果。
页面中央显示网站名称 “自然之窗” 及副标题 “探索世界美景”,下方设置 “开始探索” 按钮,点击跳转至风景图鉴页面。
底部添加页脚,包含版权信息、联系方式及社交媒体图标(微信、微博、Instagram)。
风景图鉴页面
采用瀑布流布局展示风景图片,每张图片设置点击放大查看功能。
顶部设置分类筛选栏,支持按地区(如国内、国外)、季节(春、夏、秋、冬)、风景类型(山川、湖泊、森林等)筛选。
图片卡片包含图片缩略图、风景名称、拍摄地点及点赞数,支持点赞功能(点击后变色并增加计数)。
页面右侧添加热门风景推荐栏,展示点赞数最高的前 5 张图片。
摄影技巧页面
采用左右分栏布局,左侧为技巧分类导航(如构图技巧、光线运用、后期处理等),点击后右侧显示对应内容。
右侧内容区包含文字说明、步骤拆解及示例图片,支持图文混排。
部分技巧添加视频教程链接,点击后弹出视频播放窗口。
页面底部设置 “提问互动” 区域,用户可输入问题并提交。
技术选型
Vue3 项目,使用 <script setup> 语法。
路由管理采用 Vue Router 4。
UI 组件库使用 Element Plus,具体包括:
El-Carousel:实现主页风景轮播。
El-Button:用于按钮设计(如 “开始探索”“点赞” 按钮)。
El-Card:实现风景图片卡片布局。
El-Select/El-Option:实现分类筛选功能。
El-Drawer:用于图片放大查看。
El-Tabs:实现摄影技巧页面分类切换。
状态管理使用 Pinia,存储用户点赞数据及筛选条件。
图片懒加载使用 VueUse 的 useIntersectionObserver 实现。
样式采用 SCSS 编写,支持变量定义及嵌套语法。
响应式设计适配不同屏幕尺寸(移动端、平板、桌面端)。

picture.image

这个 Vue 的项目结构也是纯 AI 自主规划生成的,这么多文件下来,这个上下文也没有丢失,看下最终的效果

picture.image

picture.image

生成下来之后,也没有遇到什么大的 bug ,一些小问题 AI 也自主解决了,体验下来这个页面交互也是流畅的,

3.3 视觉理解

接下来通过前端项目来看看 Doubao-Seed-Code 的视觉理解能力怎么样:

picture.image

打开之后还是比较惊艳的,这个色彩的处理确实很不错,并且配上了文案,文案的字体也很搭配

picture.image

接着让他换个主题颜色呢,看大模型理解的怎么样:

picture.image

看起来也还可以的

  1. 总结

通过实际的体验下来,Doubao-Seed-Code 在多个方面都拥有着出色的表现,并且自带视觉理解能力,并不是简单的工具调用实现,无论是个人开发者,还是企业开发者,都能够大大提高开发效率,并且现在的性价比也挺高,综合使用成本相比业界平均水平降低62.7%,现在推出的火山方舟 Coding Plan 是为广大开发者量身打造的 AI Coding 场景订阅服务,支持最新的 Doubao-Seed-Code 模型多款主流 AI 编码工具,为开发者提供畅快、智能、稳定的编码体验,大幅提升代码编写效率与质量,值得使用。

0
0
0
0
评论
未登录
暂无评论