本播客由釦子空間（coze.cn）一鍵生成
一、
釦子（coze.cn[1]）大概是位元組旗下最不好定義的產品。
它的定位是智慧體（AI agent）平臺，可以開發/執行各種 AI 應用。這意味著，AI 可以乾的事情，它都能做。
但是，AI 一直在進化，所以釦子的形態也一直在變。
但是不久後，它又推出了“釦子空間[3]”，面向普通使用者，使用自然語言，呼叫它內建的各種智慧體。
可是沒有想到，昨天我發現，釦子空間加入了網頁設計[5]，又變成了 UI 工具，很像內建了一個 V0。
二、
V0[6] 是最早的、也是目前最有名的網頁設計/生成方面的 AI 工具。使用者描述想要什麼網站，它來實現。
這一次，釦子空間引入了這個功能，讓自己又多了一種產品形態——網頁設計工具。
現在，你完全可以在釦子裡面，進行網頁開發。而且，它是免費服務，並有安卓客戶端（已釋出）和 iOS 客戶端（待發布），可以在手機上操作。
這聽上去很吸引人。我試了一下，比如截圖還原和網站生成，尤其是 Figma 設計稿的還原，看看它到底行不行。
下面就是我的試用體會。
三、截圖還原
我首先測了截圖還原，上傳一張網頁截圖，讓它把頁面寫出來。
釦子的網頁設計功能，必須開啟釦子空間的“網頁”按鈕。
我上傳了 airbnb[7] 的首頁截圖（下圖），並輸入“把這個截圖還原成網頁”。
系統提示，需要3到5分鐘思考，程式碼在頁面右側滾動生成。
幾分鐘後，程式碼生成完畢，切換到預覽頁，下面就是它生成的頁面。
這是第一次生成的結果，沒有經過調整，我覺得還原度還可以，頁面結構和每個區域都正確復刻出來了。
我分享出來[8]了，這個頁面和整個 AI 對話，大家點選進去，可以看清晰效果。
值得一提的是，釦子生成的是 React + Tailwind 專案，可以整個下載到本地，用 npm 執行。這樣的話，後期的手工處理比較方便。
四、Figma 設計稿還原
釦子空間的真正殺招是從 Figma 設計稿生成網頁。
具體做法是先在提示框，點選下方的 Figma 按鈕。
網頁會提示你，輸入 Figma 連結。
這個連結怎麼得到呢？在 Figma 網站的工作區，選中一個頁面，開啟右鍵選單“複製貼上/複製選區連結”（下圖），就可以了。
我選了一個 Figma 官網的示例檔案[9]，把連結發到釦子空間。大家看看釦子的還原度[10]。
基本上，跟設計稿很接近，還原度非常高。所以，如果有設計稿原始檔案，透過 AI 工具，完全可以替代手工開發。
這屬於高階功能，國內其他 AI 工具，我好像沒見過，在 V0 也是需要付費的。
五、視覺化編輯
預覽生成後，釦子空間提供了視覺化編輯，修改起來相當方便。
先在預覽介面，開啟“編輯”按鈕。
然後，選中頁面元素，就會跳出 AI 對話方塊，你可以用自然語言編輯。
選中按鈕後，我要求 AI 將按鈕的背景色改成綠色（上圖），提交後就會重新生成程式碼（下圖）。
六、零基礎生成網站
下面我直接用自然語言，跟 AI 描述需求，讓它生成網站。
我讓它生成一個待辦事項（Todos）應用。
“生成一個藍色主題的待辦事項列表應用，並實現編輯功能，可以編輯列表任務。”
釦子空間就開始自動完成頁面設計、程式碼編寫、伺服器部署，最後給出了下面的效果[11]。
這個頁面還可以部署成可訪問的連結[12]，向外部使用者公開。
我覺得，效果相當不錯，各項操作（新增任務、編輯任務、刪除任務）都沒報錯，一次生成就能執行，該有的按鈕也都有。
這真的超出了我的預料，是不是釦子對常見任務做過特別訓練？
理論上，網站生成不需要專業知識，零基礎使用者就能生成全站。實際操作也確實是這樣，就算出現報錯，也可以交給 AI 處理。但前提是隻限於簡單互動的網站，如果需要 JS 指令碼處理複雜互動，就很可能出現 AI 解決不了的報錯。
七、總結
上面就是初步的使用感受。
我感到，釦子空間的網頁設計功能雖然剛上線，但是完成度很不錯。
它的三個重點功能——設計稿/截圖還原、視覺化編輯、網站生成——相當好用，生成質量完全可以接受，加上免費，我覺得很有競爭力。
它同樣也有一些使用限制。
（1）沒有命令列視窗。如果你不需要 UI，只讓它生成後端程式碼，它沒有提供命令列，無法測試。
（2）未整合 GitHub。它無法將程式碼直接跟 GitHub 同步，只能先下載到本地，再手動推送到 GitHub。
（3）不適合複雜的狀態管理。它的強項是 UI 生成，不適合複雜的狀態管理和互動邏輯。
總體上，這次更新讓釦子空間[13]變得更有用了，除了早先的聊天功能、辦公功能，現在又增加了網頁設計，實用性更強，常見的 UI 開發任務（生成網頁和元件、完成原型設計），完全可以考慮用它。
（完）
References
[1] coze.cn:https://www.coze.cn/[2]工作流模式:https://www.ruanyifeng.com/blog/2024/12/no-code-ai-tutorial.html[3]釦子空間:https://space.coze.cn/[4]測評:https://www.ruanyifeng.com/blog/2025/04/coze-space.html[5]網頁設計:https://space.coze.cn/[6]V0:https://v0.dev/[7]airbnb:https://zh.airbnb.com/[8]分享出來:https://space.coze.cn/share-coding-expert/7530149783378723107[9]示例檔案:https://www.figma.com/community/file/1071509847187590454[10]還原度:https://space.coze.cn/share-coding-expert/7530175236215456015[11]下面的效果:https://space.coze.cn/share-coding-expert/7530201401684214062[12]可訪問的連結:https://space.coze.cn/coding-expert-runtime/136000704258[13]釦子空間: https://space.coze.cn/