位元組更新的程式設計模型Doubao-Seed-Code可以在Claude Code上支援映像模式。直接讓它來復刻figma上的模版,且不給它任何可以用的圖片素材👇 這次也是把所有提示語公開出來了,原網站長這樣, (1/9)
我用的複刻提示語長這樣, Create me a Clone of [Image # 1],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 debed that Chrome.make full interesting and highly detail , shows details that Chrome.make full as full one full , shows block. (2/9)
可以確定的是豆包這次程式升級後是真會畫SVG,硬生生造了一座山。 整體的架子是有復刻下來的,頂部導覽列(左側Logo、中間連結、右側按鈕)、主標題(Browse everything.)和下方的主視覺區域,這三個模組豆包都復現了。 雖然沒有圖像素材,但豆包還是盡可能理解了這個頭圖,甚至還模仿了原圖中的數據點,在它的SVG山峰上加了點星星。挑毛病的話就是字體,原版用的是襯線體,豆包用的是非襯線體,主題色綠色一個是嫩綠一個是橄欖綠。 (3/9)
如果在執行的目錄上加上對應的圖片素材,還用上Claude Code的plan mode的話(在claude code按shift+tab切換),深思熟慮後的豆包會不會有更高的性能呢? 肉眼可見就是復刻頭圖的SVG更加精細了,文字,折線,時間軸都復刻下來了。 做出來的嵌套層級頁更準確,剛剛還是用的白框當邊界,現在已經可以理解圖片是放在類似ipad的框再疊加在綠色背景上的,而且頂部的菜單和按鈕現在和原版有90%像了,沒有漏字錯字。 雖然沒有用上我發的圖片素材,但質感真的又提升了不少,就是用plan mode的話運行時間會超級加倍。 (4/9)
也測了一下豆包在3D和遊戲類的表現, 提示語主體, 編寫一個經典的掃雷遊戲要求:禁止使用任何改變應用結構或元件化範式的JavaScript 框架/函式庫(例如:React, Vue, Angular)。可cdn引用第三方函式庫以滿足題目要求,如Three.js,p5js。最終產物必須是純粹的HTML、CSS 和JS 檔案。如果需要建立多個文件(HTML/CSS/JS),請確保所有文件引用均使用相對路徑。所有檔案需要保存在目前目錄下 (5/9)
提示語主體, Build a complex Snake game in JavaScript with power-ups, multiple levels, and score tracking UI. (6/9)
輪到3D部分, 提示語主體, 3D模擬,一個由彈力球組成的立方體漂浮在半空中,從立方體最下一層慢慢塌方,注意是,一層一層塌方,小球落在桌子上彈起來,直到靜止,模擬整個塌方過程,整個過程符合物理規律,效果要要酷炫,整個環境要盡量逼近真實,在單個HTML中實現 這個case裡面豆包還原了層數,正方體和光照陰影,但是沒有塌房效果。 (7/9)
提示語主體, 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 text texts, and soth deliver. (8/9)
實話實說,豆包在3D模擬上的實力差點,可以做出來建模,但是互動做的不好,需要我切換成Plan Mode後跑四到五次,平均一次對話5-10輪左右跑出來的效果。 但跟其他模型對比,低價的圖片模式還是有點香的。配置環境變數長這樣 export ANTHROPIC_BASE_URL=ark.cn-beijing.volces.com/api/compatible export ANTHROPIC_AUTH_TOKEN= export ANTHROPIC_MODEL=doubao-seed-code-preview-lates (9/9)


