字节悄悄上新豆包Coding模型,我在Claude Code用它看图复刻网页

AI 知识库2天前发布 AI沃茨
1,030 0 0
博思AIPPT
离2026还有不到60天了,GPT5.1疑似在OpenRouter上线了,跳票快一个月的Gemini3又画饼说这个月出,马斯克的Grok Code Fast 1一度成为了最近一个月Token使用量最多的模型,MiniMax M2是下半年我最没想到会跑出来的AI编程大黑马,GLM4.6,Kimi K2 Thinking和Qwen3系快把我Claude Code里默认模型的名额都占满了,

字节悄悄上新豆包Coding模型,我在Claude Code用它看图复刻网页

在这样的一个更新频率下,就我真的很难相信Claude Sonnet 4.5是一个九月30号新推出的模型。所以今天,推出两个月不到的Claude Sonnet 4.5又遇到新对手了,还是我们熟悉的豆包,
Doubao-Seed-Code

字节悄悄上新豆包Coding模型,我在Claude Code用它看图复刻网页

这几天我也靠着面子果实拿到了内测,想让大家第一时间看看豆包版Claude Code的编程水平怎么样,这次更新的Doubao-Seed-Code是支持图像模式的,玩法也会更多,可以做UI复刻,草图网页生成等等等等。

👍

这次用的提示语,生成的代码和效果都整理成文档了,公众号回复“豆包编程”就好啦。

这次我们直接上正餐,先不限制豆包,让它做一个双十一商品抢购的前端网页,

🎹

生成一个双十一咖啡大促的网页,网页使用绿黑色配色, 参考 Spotify 官网风格。Use whatever libraries to get this done but make sure I can paste it all into a single HTML file and open it in Chrome.make it interesting and highly detail , shows details that no one expected go full creative and full beauty in one code block.

因为不想Claude Code做出来的网页都是蓝绿配色,我这里是开了联网的后直接指定喜欢的产品色系搭配,豆包做出来的这个页面是一个经典的Hero布局,从上到下滑动每一幕是有视觉层级的,一开始是音乐播放器同款的首页和大标题,优惠额度,咖啡的详细信息使用了卡片+按钮设计,在页脚的时候也留下了各种次级链接。这次我用的提示语里会有固定的英文后缀,对于这类需要快速出页面设计结果的提示语来说,效果提升还蛮大的,这个是没加的效果,很明显卡片互动的效果就没那么好。

接下来就直接把难度拉起来,让豆包复刻figma上的模版,先试试看不给它任何可以用的图片素材,

因为支持图片模型,在Claude Code里面可以粘贴复制好的图片,搭配GoFullPage使用就不需要手动拼接截图,存到本地,再在cursor里@图片这一堆操作了

字节悄悄上新豆包Coding模型,我在Claude Code用它看图复刻网页

提示语简单到甚至有点粗糙,

🚅

Create me a Clone of [Image # 1]

可以确定的是豆包这次编程升级后是真会画SVG,硬生生造了一座山,整体的架子是有复刻下来的,顶部导航栏(左侧Logo、中间链接、右侧按钮)、主标题(Browse everything.)和下方的主视觉区域,这三个模块豆包都复现了。虽然没有图像素材,但豆包还是尽可能理解了这个头图,甚至还模仿了原图中的数据点,在它的SVG山峰上加了点星星。挑毛病的话就是字体,原版用的是衬线体,豆包用的是非衬线体,还有主题色绿色一个是嫩绿一个是橄榄绿。

字节悄悄上新豆包Coding模型,我在Claude Code用它看图复刻网页
字节悄悄上新豆包Coding模型,我在Claude Code用它看图复刻网页

那我尝试一下火力全开,在执行的目录上加上对应的图片素材,还用上plan mode的话(在claude code按shift+tab切换),深思熟虑后的豆包会不会给我多点惊喜,

字节悄悄上新豆包Coding模型,我在Claude Code用它看图复刻网页

肉眼可见就是复刻头图的SVG更加精细了,文字,折线,时间轴都复刻下来了,做出来的嵌套层级页更准确,刚刚还是用的白框当边界,现在已经可以理解图片是放在类似ipad的框再叠加在绿色背景上的,而且顶部的菜单和按钮现在和原版有90%像了,没有漏字错字。虽然没有用上我发的图片素材,但是质感真的又提升了不少,就是用plan mode的话运行时间会超级加倍。

按照惯例,这时候网页这一趴已经测试差不多了,还是要看看豆包在别的部分表现怎么样的,这次我用到的是游戏类和3D类,为了不要视觉疲劳,我多加了两个新case,但又为了兼顾大家可以跟别的模型做一个快速对比,我还留了两个经典cases,

🌰

编写一个经典的扫雷游戏要求:禁止使用任何改变应用结构或组件化范式的 JavaScript 框架/库(例如:React, Vue, Angular)。可以cdn引用第三方库以满足题目要求,如Three.js,p5js。最终产物必须是纯粹的 HTML、CSS 和 JS 文件。如果需要创建多个文件(HTML/CSS/JS),请确保所有文件引用均使用相对路径。所有文件需要保存在当前目录下

扫雷也是个老游戏了,中学电脑课上玩没网的电脑就只能玩扫雷和蜘蛛纸牌,我基本上5步内就g了,就还挺好奇有没有什么快速公式可以排雷的。

Build a complex Snake game in JavaScript with power-ups, multiple levels, and score tracking UI.

贪吃蛇就是一个比较经典的测试cases,主要是看模型在实现的过程中有没有把积分,关卡,蛇的长度都算进去,蛇碰到自己或者碰到墙壁后会不会Game Over也可以测出来模型对物理碰撞的理解,我这里还有一个提示语,我觉得是在3D飞行棋和3D台球难度下面一点,3D贪吃蛇难度上面一点的定位,是可以用来测模型上限的。

📌

Generate full HTML file of a clone of Geometry Dash, but if it was made in the 2000s, add music to levels (make the music using JS varied music that reflect levels) same physics as Geometry Dash game we want a full playable game. All in one HTML file, minimum 1k lines

轮到3D部分,比起游戏那一趴更多是看物理规律,比方说让小球围着六边形转,汽车碰撞,大象烧瓶等都属于3D类,每次我分开测评的时候都有蛮多朋友问我这个问题的,所以这里我也分享一下我的理解。

🍰

3D模拟,一个由弹力球组成的正方体漂浮在半空中,从正方体最下一层慢慢塌方,注意是,一层一层塌方,小球落在桌子上弹起来,直到静止,模拟整个塌方过程,整个过程符合物理规律,效果要酷炫,整个环境要尽量逼近真实,在单个HTML中实现

这个case里面豆包还原了层数,正方体和光照阴影,但是没有塌房效果。

🎹

Create a visually stunning, interactive 3D simulation of our Solar System elegantly encapsulated within a single HTML file. Highlight realistic orbital motions, dynamic lighting effects, accurate planetary textures, and smooth camera controls to deliver an immersive experience.

实话实说,豆包在3D模拟上的实力差点,可以做出来建模,但是互动做的不好,需要我切换成Plan Mode后跑四到五次,平均一次对话5-10轮左右跑出来的效果,但跟其他模型对比,低价的图片模式还是有点香的,搭配Claud-code-router后可以切换不同的模型,属于是我会留下来自用的。最后的最后,我带着开通API Key的文档来了🔗https://www.volcengine.com/docs/82379/1925114Claude Code我估计现在已经人手一个了,安装教程也已经被简化很多次了,就算是从零开始也就老三样,安装nodejs,安装claude code,接入豆包,选好linux,mac还是wins安装nodejs🔗nodejs.org/en/download

字节悄悄上新豆包Coding模型,我在Claude Code用它看图复刻网页

然后就是进入到你想要编程的目录,打开命令行终端,按顺序执行,

npm install -g @anthropic-ai/claude-code
cat<> ~/.zshrc# Anthropic Claude Code Configexport ANTHROPIC_BASE_URL=https://ark.cn-beijing.volces.com/api/compatibleexport ANTHROPIC_AUTH_TOKEN=export ANTHROPIC_MODEL=doubao-seed-code-preview-latesEOF
source~/.zshrc
claude

这个是mac的操作教程,我尝试让豆包直接帮我翻译成其他操作的系统的命令,也是没问题的。

字节悄悄上新豆包Coding模型,我在Claude Code用它看图复刻网页

看到这里就安装好了。

字节悄悄上新豆包Coding模型,我在Claude Code用它看图复刻网页

用Claude Code用的多了,还可以尝试看看设置几个用得多的快捷名

cat <> ~/.zshrc
# Claude Code Aliasesaliascc="claude"aliasccd="claude --dangerously-skip-permissions"aliasccp="claude --dangerously-skip-permissions -p"EOF
source ~/.zshrc

这样在项目启动Claude Code的时候,就可以用cc正常启动,ccd就是YOLO模式,模型会自动批准自己提出的所有操作,ccp的权限更强,你直接可以不看命令行界面等着收代码了。今天火山引擎还发布了Coding Plan,我主打的一个就是第一个月的羊毛先薅薅

字节悄悄上新豆包Coding模型,我在Claude Code用它看图复刻网页

写到结尾,仔细想想,我是什么时候开始觉得豆包能用来编程的呢?可能是豆包的AI浏览器,也可能是前段时间豆包上的编程模式,豆包的天然优势就是国民度真的很高,我侄子都经常拿着豆包对话聊天,夸张点说,使用门槛约等于零,如果这次Doubao-Seed-Code可以上架的话,我想,身边会有更多的人能体验上,用上好用的AI编程模型,去 do something,do anything,还蛮酷的。

@ 作者 / 卡尔


© 版权声明

相关文章