
本播客由釦子空間(coze.cn)一鍵生成
實話實說,最近對 AI 做網站這事兒有點兒上癮。最近一直在瘋狂測試各種 Agent 建網站,玩過的小夥伴們都知道,這玩意一旦玩起來,比玩遊戲有成就感多了。
今天要玩的是位元組的扣子空間(Coze Space),看看讓它來做網頁效果怎麼樣,關鍵是免費啊,兄弟們,可以肆無忌憚地撒開玩。
網址在此:
https://www.coze.cn/space-preview
這次簡單點,主要就是單純想測試一下釦子的前端設計能力,咱就想看看,完全根據咱們自己的想法,能不能讓釦子寫出一個既漂亮又有設計感的網頁。
搞個「大工程」
我尋思著,既然要搞,那就搞個大工程唄,小打小鬧算什麼意思,對吧?
比如說,最近最大的熱點就是國家官宣要搞雅魯藏布江下游水電工程,這個工程夠大吧,訊息一出來,一下子帶動了多少產業板塊。
熱鬧是夠熱鬧,可是這個工程到底是個什麼規模呢,我們普通人聊起這個又該知道點什麼,才能把這個當成社交談資不露怯呢?
文字都是枯燥無味的,咱直接做個視覺化網頁,一目瞭然。
於是,我就讓釦子開工了:

就這麼樸實無華的一句話,釦子就開始琢磨它該乾點啥了:



看起來有點慢,但實際上我挺喜歡這種多輪次的思考,畢竟磨刀不誤砍柴工嘛,思考得足夠全面,交付才會周全。

結果還真被我說中了,具體到寫程式碼的時候反而沒有花太多時間,不到一支菸的功夫,它就交付了一個網頁出來:

必須得說,它這個重點抓得挺準,對於我們來說,記住這首屏的 3 個關鍵數字就足夠了。
當然,如果需要進一步瞭解這個工程,那就展開慢慢看,我錄個動圖帶大家過一遍:

這個審美還是線上的,而且功能完善,導航欄響應正確,一次性成功搞定。
而做出來這麼一個網頁,我也僅僅只用了一句話,一句樸實無華的大白話,一個足夠可以拿去講課的課件就搞定了。
附上鍊接,大家感興趣的話可以開啟玩玩。
https://space.coze.cn/s/Wi23aZOO51w/
用截圖復刻網站
透過前面例子能看出來,只要你把需求表達清楚,釦子空間完全能理解並執行。但有的時候,咱嘴笨,或者面對一個複雜的設計,很難用語言準確描述出來。
這時候不如你直接丟一個網頁截圖給它,讓它抄!
於是,我去蘋果中國官網弄了個網頁長截圖,然後對它下達了新的指令:
模仿這個頁面風格,給小米公司做一個這樣的網頁

結果讓我相當驚喜。它並沒有簡單地把小米的文字和圖片生硬地套進去,而是精準地 get 到了蘋果官網的設計風格——大字型標題、產品居中展示、簡潔的留白、圓角按鈕。

它生成的「小米官網」頁面,雖然內容是小米的產品,但整體的佈局、字型風格、視覺感受,都非常有蘋果的味道。
這就很厲害了,說明它不只是在識別圖片裡的元素,更是在理解和學習一種設計語言。
蘋果版小米官網:
https://space.coze.cn/s/fWhdna6cTMY/
這個功能對於我們這種普通使用者來說,簡直是不要太簡單。
以後看到哪個網站設計得特別漂亮,不用再費勁心思去描述了,直接截個圖扔給它,說一句「照著這個做個 XX 網站」,一個風格高度相似的網站就出爐了。
這和第一個例子完全是兩種不同的玩法,一個考驗你的描述能力,一個則把門檻降到了最低。
one more thing
其實在跑上邊兩個 case 的時候,釦子在那吭哧吭哧寫程式碼,我乾等著也無聊,就同時給它開了個新任務,讓它捎帶手幫我做了一個我每天都可能會用到的工具,就是關於如何高效處理中英文排版問題。
老粉知道,好多年前,我介紹過一個幾乎沒人過的油猴指令碼,就是這篇文章《看到這個好用到爆的油猴指令碼沒人知道,我知道我的機會來了》

它幫我給微信公眾號後臺加了個功能,一鍵完成中英文排版自動加空格的功能,當時這個指令碼救了我的大命,不過早就不再維護了。
現在,讓我用釦子來解決這個問題,幫我做一箇中英文排版工具:

嚴謹起見,我還把一套排版規範都餵給了它。
這個任務就簡單過了,一支菸沒抽完,一個簡潔的線上排版工具網頁就生成了。
左邊是輸入文字框,右邊是排版預覽框,上面有轉換按鈕,旁邊還可以一鍵複製。

我把今天這篇排版混亂的初稿扔進去,右邊排版預覽框立馬有了轉換後的結果,看來這個轉換的按鈕可以省去了。
不過輸出的結果完全符合我給它的所有規範。

你看,如此簡單,解決了一個棘手問題。
這就意味著釦子不僅能做展示網頁,更能深入到實際應用中,成為一個真正的前端生產力工具 。
文字排版規範工具網址:
https://space.coze.cn/s/FubX2IgNh8o/
結語
玩了一天下來,釦子空間在網頁設計這塊的能力確實把我驚豔到了。
從傳統的「學習程式碼 -> 設計 -> 部署」這種耗時耗力的流程,直接壓縮成了「輸入想法 -> AI 生成 -> 對話調整」三步 。
出錯不要緊,關鍵是你讓它改,它真能改好,是真的聽話。
無論你是想做個人簡歷網站、產品營銷頁面,還是開發一個實用的小工具,它都能勝任 。
最關鍵的是,這一切都是零程式碼、零基礎、零花費。
特別是零花費,這個可太良心了,儘管去玩吧。然後把做的有意思的網站連結分享出來,正好去參與官方這個活動~

