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