字節(jié)悄悄上新豆包Coding模型，我在Claude Code用它看圖復(fù)刻網(wǎng)頁(yè)

離2026還有不到60天了，

GPT5.1疑似在OpenRouter上線了，跳票快一個(gè)月的Gemini3又畫(huà)餅說(shuō)這個(gè)月出，馬斯克的Grok Code Fast 1一度成為了最近一個(gè)月Token使用量最多的模型，MiniMax M2是下半年我最沒(méi)想到會(huì)跑出來(lái)的AI編程大黑馬，GLM4.6，Kimi K2 Thinking和Qwen3系快把我Claude Code里默認(rèn)模型的名額都占滿(mǎn)了，

在這樣的一個(gè)更新頻率下，

就我真的很難相信Claude Sonnet 4.5是一個(gè)九月30號(hào)新推出的模型。

所以今天，推出兩個(gè)月不到的Claude Sonnet 4.5又遇到新對(duì)手了，

還是我們熟悉的豆包，

Doubao-Seed-Code

這幾天我也靠著面子果實(shí)拿到了內(nèi)測(cè)，

想讓大家第一時(shí)間看看豆包版Claude Code的編程水平怎么樣，這次更新的Doubao-Seed-Code是支持圖像模式的，玩法也會(huì)更多，可以做UI復(fù)刻，草圖網(wǎng)頁(yè)生成等等等等。

這次用的提示語(yǔ)，生成的代碼和效果都整理成文檔了，公眾號(hào)回復(fù)“豆包編程”就好啦。

這次我們直接上正餐，

先不限制豆包，讓它做一個(gè)雙十一商品搶購(gòu)的前端網(wǎng)頁(yè)，

生成一個(gè)雙十一咖啡大促的網(wǎng)頁(yè)，網(wǎng)頁(yè)使用綠黑色配色, 參考 Spotify 官網(wǎng)風(fēng)格。

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.

因?yàn)椴幌隒laude Code做出來(lái)的網(wǎng)頁(yè)都是藍(lán)綠配色，我這里是開(kāi)了聯(lián)網(wǎng)的后直接指定喜歡的產(chǎn)品色系搭配，

豆包做出來(lái)的這個(gè)頁(yè)面是一個(gè)經(jīng)典的Hero布局，從上到下滑動(dòng)每一幕是有視覺(jué)層級(jí)的，一開(kāi)始是音樂(lè)播放器同款的首頁(yè)和大標(biāo)題，優(yōu)惠額度，咖啡的詳細(xì)信息使用了卡片+按鈕設(shè)計(jì)，在頁(yè)腳的時(shí)候也留下了各種次級(jí)鏈接。

這次我用的提示語(yǔ)里會(huì)有固定的英文后綴，

對(duì)于這類(lèi)需要快速出頁(yè)面設(shè)計(jì)結(jié)果的提示語(yǔ)來(lái)說(shuō)，效果提升還蠻大的，

這個(gè)是沒(méi)加的效果，

很明顯卡片互動(dòng)的效果就沒(méi)那么好。

接下來(lái)就直接把難度拉起來(lái)，

讓豆包復(fù)刻figma上的模版，先試試看不給它任何可以用的圖片素材，

因?yàn)橹С謭D片模型，在Claude Code里面可以粘貼復(fù)制好的圖片，

搭配GoFullPage使用就不需要手動(dòng)拼接截圖，存到本地，再在cursor里@圖片這一堆操作了

提示語(yǔ)簡(jiǎn)單到甚至有點(diǎn)粗糙，

Create me a Clone of [Image # 1]

可以確定的是豆包這次編程升級(jí)后是真會(huì)畫(huà)SVG，硬生生造了一座山，

整體的架子是有復(fù)刻下來(lái)的，頂部導(dǎo)航欄（左側(cè)Logo、中間鏈接、右側(cè)按鈕）、主標(biāo)題（Browse everything.）和下方的主視覺(jué)區(qū)域，這三個(gè)模塊豆包都復(fù)現(xiàn)了。雖然沒(méi)有圖像素材，但豆包還是盡可能理解了這個(gè)頭圖，甚至還模仿了原圖中的數(shù)據(jù)點(diǎn)，在它的SVG山峰上加了點(diǎn)星星。

挑毛病的話(huà)就是字體，原版用的是襯線體，豆包用的是非襯線體，還有主題色綠色一個(gè)是嫩綠一個(gè)是橄欖綠。

那我嘗試一下火力全開(kāi)，在執(zhí)行的目錄上加上對(duì)應(yīng)的圖片素材，還用上plan mode的話(huà)（在claude code按shift+tab切換），深思熟慮后的豆包會(huì)不會(huì)給我多點(diǎn)驚喜，

肉眼可見(jiàn)就是復(fù)刻頭圖的SVG更加精細(xì)了，文字，折線，時(shí)間軸都復(fù)刻下來(lái)了，

做出來(lái)的嵌套層級(jí)頁(yè)更準(zhǔn)確，剛剛還是用的白框當(dāng)邊界，現(xiàn)在已經(jīng)可以理解圖片是放在類(lèi)似ipad的框再疊加在綠色背景上的，而且頂部的菜單和按鈕現(xiàn)在和原版有90%像了，沒(méi)有漏字錯(cuò)字。

雖然沒(méi)有用上我發(fā)的圖片素材，但是質(zhì)感真的又提升了不少，就是用plan mode的話(huà)運(yùn)行時(shí)間會(huì)超級(jí)加倍。

按照慣例，

這時(shí)候網(wǎng)頁(yè)這一趴已經(jīng)測(cè)試差不多了，

還是要看看豆包在別的部分表現(xiàn)怎么樣的，這次我用到的是游戲類(lèi)和3D類(lèi)，為了不要視覺(jué)疲勞，我多加了兩個(gè)新case，但又為了兼顧大家可以跟別的模型做一個(gè)快速對(duì)比，我還留了兩個(gè)經(jīng)典cases，

編寫(xiě)一個(gè)經(jīng)典的掃雷游戲要求：禁止使用任何改變應(yīng)用結(jié)構(gòu)或組件化范式的 JavaScript 框架/庫(kù)（例如：React, Vue, Angular）。可以cdn引用第三方庫(kù)以滿(mǎn)足題目要求，如Three.js，p5js。最終產(chǎn)物必須是純粹的 HTML、CSS 和 JS 文件。如果需要?jiǎng)?chuàng)建多個(gè)文件（HTML/CSS/JS），請(qǐng)確保所有文件引用均使用相對(duì)路徑。所有文件需要保存在當(dāng)前目錄下

掃雷也是個(gè)老游戲了，中學(xué)電腦課上玩沒(méi)網(wǎng)的電腦就只能玩掃雷和蜘蛛紙牌，

我基本上5步內(nèi)就g了，就還挺好奇有沒(méi)有什么快速公式可以排雷的。

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

貪吃蛇就是一個(gè)比較經(jīng)典的測(cè)試cases，主要是看模型在實(shí)現(xiàn)的過(guò)程中有沒(méi)有把積分，關(guān)卡，蛇的長(zhǎng)度都算進(jìn)去，蛇碰到自己或者碰到墻壁后會(huì)不會(huì)Game Over也可以測(cè)出來(lái)模型對(duì)物理碰撞的理解，

我這里還有一個(gè)提示語(yǔ)，我覺(jué)得是在3D飛行棋和3D臺(tái)球難度下面一點(diǎn)，3D貪吃蛇難度上面一點(diǎn)的定位，是可以用來(lái)測(cè)模型上限的。

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部分，比起游戲那一趴更多是看物理規(guī)律，比方說(shuō)讓小球圍著六邊形轉(zhuǎn)，汽車(chē)碰撞，大象燒瓶等都屬于3D類(lèi)，每次我分開(kāi)測(cè)評(píng)的時(shí)候都有蠻多朋友問(wèn)我這個(gè)問(wèn)題的，所以這里我也分享一下我的理解。

3D模擬，一個(gè)由彈力球組成的正方體漂浮在半空中，從正方體最下一層慢慢塌方，注意是，一層一層塌方，小球落在桌子上彈起來(lái)，直到靜止，模擬整個(gè)塌方過(guò)程，整個(gè)過(guò)程符合物理規(guī)律，效果要酷炫，整個(gè)環(huán)境要盡量逼近真實(shí)，在單個(gè)HTML中實(shí)現(xiàn)

這個(gè)case里面豆包還原了層數(shù)，正方體和光照陰影，但是沒(méi)有塌房效果。

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.

實(shí)話(huà)實(shí)說(shuō)，豆包在3D模擬上的實(shí)力差點(diǎn)，可以做出來(lái)建模，但是互動(dòng)做的不好，

需要我切換成Plan Mode后跑四到五次，平均一次對(duì)話(huà)5-10輪左右跑出來(lái)的效果，

但跟其他模型對(duì)比，低價(jià)的圖片模式還是有點(diǎn)香的，搭配Claud-code-router后可以切換不同的模型，

屬于是我會(huì)留下來(lái)自用的。

最后的最后，

我?guī)е_(kāi)通API Key的文檔來(lái)了

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

Claude Code我估計(jì)現(xiàn)在已經(jīng)人手一個(gè)了，安裝教程也已經(jīng)被簡(jiǎn)化很多次了，

就算是從零開(kāi)始也就老三樣，安裝nodejs，安裝claude code，接入豆包，

選好linux，mac還是wins安裝nodejs

nodejs.org/en/download

然后就是進(jìn)入到你想要編程的目錄，打開(kāi)命令行終端，按順序執(zhí)行，

claude

這個(gè)是mac的操作教程，我嘗試讓豆包直接幫我翻譯成其他操作的系統(tǒng)的命令，也是沒(méi)問(wèn)題的。

看到這里就安裝好了。

用Claude Code用的多了，還可以嘗試看看設(shè)置幾個(gè)用得多的快捷名

source ~/.zshrc

這樣在項(xiàng)目啟動(dòng)Claude Code的時(shí)候，就可以用cc正常啟動(dòng)，ccd就是YOLO模式，模型會(huì)自動(dòng)批準(zhǔn)自己提出的所有操作，ccp的權(quán)限更強(qiáng)，你直接可以不看命令行界面等著收代碼了。

今天火山引擎還發(fā)布了Coding Plan，我主打的一個(gè)就是第一個(gè)月的羊毛先薅薅

寫(xiě)到結(jié)尾，

仔細(xì)想想，我是什么時(shí)候開(kāi)始覺(jué)得豆包能用來(lái)編程的呢？

可能是豆包的AI瀏覽器，

也可能是前段時(shí)間豆包上的編程模式，

豆包的天然優(yōu)勢(shì)就是國(guó)民度真的很高，

我侄子都經(jīng)常拿著豆包對(duì)話(huà)聊天，

夸張點(diǎn)說(shuō)，

使用門(mén)檻約等于零，

如果這次Doubao-Seed-Code可以上架的話(huà)，

我想，身邊會(huì)有更多的人能體驗(yàn)上，

用上好用的AI編程模型，

去 do something，

do anything，

還蠻酷的。

@ 作者 / 卡爾

最后，感謝你看到這里如果喜歡這篇文章，不妨順手給我們點(diǎn)贊｜在看｜轉(zhuǎn)發(fā)｜評(píng)論

如果想要第一時(shí)間收到推送，不妨給我個(gè)星標(biāo)

更多的內(nèi)容正在不斷填坑中……