看圖寫代碼，3毛錢開發(fā)一個網(wǎng)頁！字節(jié)AI Coding新模型真卷麻了

聞樂 2025-11-11 16:50:49 來源：量子位

聞樂 發(fā)自 凹非寺

量子位 | 公眾號 QbitAI

編程模型最新卷王來了。

就在今天，火山引擎推出了面向Agentic編程任務(wù)深度優(yōu)化的全新代碼模型Doubao-Seed-Code。

三個不同的維度，卷出了新高度。

第一，性能SOTA，與TRAE開發(fā)環(huán)境深度結(jié)合后，能更快、更準(zhǔn)地解決問題，登頂了SWE-Bench Verified榜單。

第二，價格，調(diào)用價格國內(nèi)最低，火山引擎還配套推出9塊9套餐，一杯咖啡錢，就能搞定各種摸魚小游戲——比如辦公室躲老板（doge）。

最后，遷移成本——Doubao-Seed-Code原生兼容Anthropic API，在Claude Code環(huán)境中進(jìn)行遷移，都不用做復(fù)雜的配置，幾乎就是零成本切換。

不過說歸說鬧歸鬧，最后還得看實測效果。

咱實測一波看看……

實測Doubao-Seed-Code

老樣子，Coding測試，咱先設(shè)置幾個進(jìn)階任務(wù)，看看能力究竟幾斤幾兩。

首先是基礎(chǔ)功能，然后交互優(yōu)化，接著工程化重構(gòu)，最后完整網(wǎng)站設(shè)計……

邏輯上層層遞進(jìn)，難度上從單一視覺實現(xiàn)到復(fù)雜問題解決，逐步考驗Doubao-Seed-Code的綜合能力。

第一階段聚焦簡單任務(wù)，看看它的基礎(chǔ)視覺效果實現(xiàn)能力。

請幫我創(chuàng)建一個銀河系粒子效果動畫。要求：

1）使用Canvas繪制粒子系統(tǒng)；2）粒子隨機(jī)分布在畫布上，模擬星空效果；3）粒子有不同的大小和亮度，模擬遠(yuǎn)近不同的星星；4）添加鼠標(biāo)交互，鼠標(biāo)移動時粒子會有輕微的響應(yīng)；5）背景使用深色漸變，營造宇宙深邃感。請使用HTML5 Canvas和JavaScript實現(xiàn)。

這個任務(wù)的核心需求單一，沒有復(fù)雜的交互，模型耗時1分多鐘輸出完整的HTML5 Canvas+JS代碼，運(yùn)行后粒子隨機(jī)分布，大小與亮度差異也確實能體現(xiàn)遠(yuǎn)近感，和鼠標(biāo)交互的輕微響應(yīng)也能get。

結(jié)果很不錯，能快速完成簡單視覺任務(wù)，技術(shù)棧使用準(zhǔn)確且基礎(chǔ)功能無偏差。

緊接著，驗證一下模型對“視覺風(fēng)格+復(fù)雜交互邏輯”的理解與優(yōu)化能力。

這次在Claude Code里進(jìn)行API調(diào)用，不得不夸一句，“無縫銜接”真絲滑，就這個API原生兼容爽！

實際上也不止Claude Code，Doubao-Seed-Code在Cursor、Cline、Codex CLI等主流智能編程環(huán)境里，都能與開發(fā)者們?nèi)粘Ｊ褂玫墓ぞ邿o縫銜接。

完整html，Minecraft風(fēng)格，展示拉鏈形狀，當(dāng)我上下移動鼠標(biāo)時，拉鏈會像真實的拉鏈一樣打開和關(guān)閉。拉鏈閉合拉開的速度慢點。要求：禁止使用任何改變應(yīng)用結(jié)構(gòu)或組件化范式的JavaScript 框架/庫（例如：React，Vue，Angular）。可以cdn引用第三方庫以滿足題目要求，如Three.js，p5js。最終產(chǎn)物必須是純粹的HTML、CSS和JS文件。如果需要創(chuàng)建多個文件（HTML/CSS/JS），請確保所有文件引用均使用相對路徑。

任務(wù)是開發(fā)Minecraft風(fēng)格拉鏈交互效果，相比第一階段增加了“鼠標(biāo)上下移動控制拉鏈開合（速度慢）” 的交互要求。

模型第一次做完項目倒是非常貼心地幫忙檢查了運(yùn)行效果，也給了一些速度修改建議。

Minecraft風(fēng)格是有了、拉鏈形狀也有了，但這個交互方式，怎么看也不像拉鏈啊……

是不是提示的問題，那咱再進(jìn)一步改造一下：

這個交互模式不像現(xiàn)實生活中的拉鏈

很快就找到了問題所在，定位到交互邏輯與現(xiàn)實場景脫節(jié)的核心問題。

一次改造后的效果如下：

雖然第一次沒完成，但調(diào)整起來效率尚可，在多輪交互時響應(yīng)也還算絲滑。

下面，咱來看看Doubao-Seed-Code解決工程化問題的能力，給它給一份舊代碼，讓它找bug并且進(jìn)行項目重構(gòu)。

測試素材是一份有多個問題的記事本項目。

（提供文件）定位這份代碼的bug，并進(jìn)行結(jié)構(gòu)化重構(gòu)

Doubao-Seed-Code拿到任務(wù)后先是明確了舊代碼的問題，將Bug定位到了具體的代碼行。

隨后輸出重構(gòu)代碼，還列出了優(yōu)化清單。

對比兩份代碼，從菜單創(chuàng)建模塊可以看出，左邊舊代碼結(jié)構(gòu)混亂，并且沒有分離設(shè)計，重構(gòu)后的代碼拆分了菜單與文件操作模塊，并且綁定了快捷鍵。

具體到某個函數(shù)，比如打開文件夾模塊，左邊舊代碼中文內(nèi)容亂碼，沒有進(jìn)行文件不存在的異常處理，新代碼都進(jìn)行了改善。

可以看出模型面對“多Bug+結(jié)構(gòu)混亂”的復(fù)雜工程問題時，具備系統(tǒng)性診斷與專業(yè)重構(gòu)的能力。

最后進(jìn)行完整項目開發(fā)，測試模型對多需求整合與落地的能力。

幫我開發(fā)一個故宮博物院的導(dǎo)覽網(wǎng)站。需要包含幾個主要宮殿的介紹，配上高清的館藏文物圖片。最重要的是，每個宮殿的介紹頁面，都要有一個語音導(dǎo)覽按鈕，點擊后能播放由AI生成的專業(yè)語音解說。

由于沒有提前提供素材，模型在交付的代碼中主動補(bǔ)充了圖片替換教程，詳細(xì)說明如何按需搜索素材并替換占位圖，解決了素材缺失的問題。

從最終效果來看，網(wǎng)站結(jié)構(gòu)完整，涵蓋了核心功能模塊，語音導(dǎo)覽按鈕的邏輯也已預(yù)留，并且實現(xiàn)了完整功能。

同時還考慮到了實際使用中的素材問題，不得不說，全面～

等一下，好像還有更有意思的事情，Doubao-Seed-Code居然能看圖寫代碼！

現(xiàn)階段，只有Claude系列、GPT-4V等一些國外模型能夠參考UI設(shè)計稿或截圖生成代碼。

Doubao-Seed-Code要是能做到，那真是國產(chǎn)編程模型獨一份了。

馬上來試試！先提供一個“移動端咖啡點單頁面”的UI設(shè)計稿：

（提供UI設(shè)計稿）請參考給出的UI設(shè)計稿圖片，生成一個“移動端咖啡點單頁面”，生成滿足所有要求的前端代碼，確保頁面主題明確。

點餐頁面就這么水靈靈的做出來了，相似度99%！

那另外的1%去哪了？

原來是為了避免素材依賴，Doubao-Seed-Code給畫了個和原圖不太一樣的咖啡杯（hhh

這只能說，「圖片在手，UI我有」了。

整體測完后，Doubao-Seed-Code的實測效果，確實符合官方強(qiáng)調(diào)的優(yōu)勢特點——

• 國內(nèi)首個支持視覺理解能力的編程模型，能夠參照UI設(shè)計稿、界面截圖或手繪草圖直接生成對應(yīng)代碼；同時，還能對已生成的頁面進(jìn)行視覺比對，主動識別樣式偏差與功能Bug，并自主完成修復(fù)優(yōu)化，顯著提升了前端開發(fā)效率；
• 原生兼容Anthropic API。對于廣大使用Claude Code的開發(fā)者，幾乎零成本即可將API切換到Doubao-Seed-Code。多平臺適配，還對Claude Code、Trae等主流IDE進(jìn)行了特別優(yōu)化；
• 原生256K長上下文，在處理長代碼文件、多模塊依賴等復(fù)雜場景能力提升，實現(xiàn)端到端自主編程，全棧開發(fā)友好，前端能力突出；

當(dāng)然，性能上的優(yōu)勢之外，火山引擎在AI大模型浪潮中給人的最大印象，還得是穩(wěn)定又便宜。

模型夠強(qiáng)，保障夠硬，價格夠低

AI Coding愈發(fā)競爭激烈，各廠商紛紛發(fā)力卷性能卷價格卷使用保障，火山引擎也不遑多讓。

最最最受關(guān)切的成本問題，也被火山引擎打到了“一杯咖啡價”。

綜合使用成本在業(yè)界平均水平上砍了62.7%，在調(diào)用價格上，不僅比國際主流模型低得多，還卷到了國內(nèi)最低價：

• 0-32k輸入?yún)^(qū)間：輸入1.20元/百萬Token，輸出8.00元/百萬Token
• 32-128k輸入?yún)^(qū)間：輸入1.40元/百萬Token，輸出12.00元/百萬Token
• 128-256k輸入?yún)^(qū)間：輸入2.80元/百萬Token，輸出16.00元/百萬Token

打個比方，要創(chuàng)建一個美觀的交互式英語學(xué)習(xí)網(wǎng)站，在0-32k區(qū)間的相同tokens量下，Claude Sonnet 4.5的成本約4.05元，GLM-4.6約0.77元，而Doubao-Seed-Code僅約0.34元。

這不剛好雙11，火山引擎還給個人開發(fā)者安排了省錢大禮包，推出了支持最新模型的Coding Plan，最低套餐首月僅需9.9元。

火山引擎自投身編程模型研發(fā)以來，從早期版本的逐步迭代，到推出如豆包大模型系列，在編程能力上可以說是持續(xù)進(jìn)化。

開源了命令行AI Agent——veCLI，通過自然語言交互，實現(xiàn)從指令到代碼的自動化構(gòu)建與運(yùn)行。

還基于編程相關(guān)模型打造了IDE產(chǎn)品TRAE 。如今，在字節(jié)內(nèi)部，超過80%的工程師都在使用TRAE輔助開發(fā)，其整體月活用戶已超100萬。

現(xiàn)下，Doubao-Seed-Code和TRAE的組合拳更是有亮眼表現(xiàn)，在SWE-Bench-Verified基準(zhǔn)上“卷”到了SOTA。

Doubao-Seed-Code在Terminal Bench、SWE-Bench-Verified-Openhands、Multi-SWE-Bench-Flash-Openhands等主流測評也表現(xiàn)出色，在國內(nèi)同賽道模型中表現(xiàn)突出。

表現(xiàn)如此，離不開背后的技術(shù)支撐優(yōu)化。

這次，火山引擎為Doubao-Seed-Code構(gòu)建了覆蓋10萬容器鏡像的龐大訓(xùn)練庫，支持端到端沙盒環(huán)境評測；依托千卡GPU集群，實現(xiàn)了萬級并發(fā)沙盒session能力。

采用端到端強(qiáng)化學(xué)習(xí)，直接從任務(wù)沙盒反饋中學(xué)習(xí)，不用依賴復(fù)雜的蒸餾過程，優(yōu)化路徑也更高效。

另外，火山引擎還在算力和安全保障上，做了進(jìn)一步加碼。

背靠火山引擎的超大資源池，即便遇到多用戶并行調(diào)用、復(fù)雜項目開發(fā)等高頻場景，也能保持穩(wěn)定響應(yīng)。

同時，模型由火山方舟提供推理接口服務(wù)，代碼數(shù)據(jù)傳輸和調(diào)用過程全程加密，不用擔(dān)心核心開發(fā)信息泄露。

可以說把企業(yè)級AI開發(fā)，痛點都琢磨得透透的了。

不愧是宇宙廠自己先用先檢驗的產(chǎn)品和技術(shù)。

AI coding正進(jìn)入了“一杯咖啡”時代，而且還是一杯國產(chǎn)咖啡價格的時代。

想要薅這個羊毛，復(fù)制下方鏈接即可傳送～

Coding Plan訂閱：
https://www.volcengine.com/activity/codingplan?utm_campaign=202511&utm_content=codingplan&utm_medium=waibumeiti_jigou&utm_source=VolcanoArk&utm_term=liangziwei

— 完 —