我用「扣子空間」做了個AI穿搭毒舌網站，快被自己罵哭了～

這是我把文章丟給扣子空間后，一鍵生成的短播客，你可以試聽感受下

沒寫一行代碼，我用「扣子空間」搭了個用AI進行穿搭銳評的網站。下面這效果，快把我罵哭了

一邊是為網站效果還不錯高興，另外也是覺得我對自己夠狠的。

而這個AI網站的生成過程，我其實就發了幾句提示詞而已，沒有寫任何的代碼，也不需要我自己經歷繁瑣的項目打包、部署、買域名之類的操作。我覺得很適合不會寫代碼的同學開始嘗試實現自己腦中的想法，去試試創造一個小產品一個小網站的快樂。

效率奇高，過程還毫無障礙。

接下來，給大家介紹下我用「扣子空間」開發這個網站的過程。

如果你還沒用過「扣子空間」的話，他們的官網地址在這：https://space.coze.cn/?from=landingpage&skill=website

第一步：選擇「網頁」模式

目前扣子空間提供通用agent的能力，你完全可以不做選擇直接布置一個任務。但是除了通用能力外，我覺得扣子空間比較有特點的是他們在「寫作」「PPT」「播客」「網頁」這四個場景下做了專項優化。所以，當你的需求很明確，就是要開發一個小網站的時候，可以先選擇「網頁」，再表述需求，會獲得更專業化的體驗。

第二步：表述想法/初步測試

因為我想做的是AI網站，涉及到AI能力的調用，現在很多agent產品所使用的網頁開發技術框架是html/css/js，不容易實現API的調用，所以我想先試試扣子空間調用API的能力，所以，我先輸入了一個簡單的需求做測試：

幫我開發一個可以進行圖像AI理解的網站，用戶上傳圖片后，返回關于這個圖片的所有信息。
圖片理解模型的調用方式如下：
curl https://ark.cn-beijing.volces.com/api/v3/chat/completions \
-H "Content-Type: application/json" \
-H "Authorization: Bearer 你自己的API-KEY" \
-d $'{
"model": "doubao-1-5-thinking-vision-pro-250428",
"messages": [
{
"content": [
{
"text": "圖片主要講了什么?",
"type": "text"
},
{
"image_url": {
"url": "https://ark-project.tos-cn-beijing.ivolces.com/images/view.jpeg"
},
"type": "image_url"
}
],
"role": "user"
}
]
}'

這里我要調用的AI模型是Doubao-1.5-thinking-vision-pro這個視覺理解模型（后來我發現豆包1.6模型其實也有圖像理解能力），你可以通過字節的火山方舟平臺獲取這個API調用方式的信息：https://console.volcengine.com/ark/region:ark+cn-beijing/model/detail?Id=doubao-1-5-thinking-vision-pro

點擊「立即體驗」，然后按著指引，獲取到以下這段API調用代碼并復制使用即可（你自己的API KEY注意做好保密）。

接下來，通過這段提示詞，我一次性就獲得了下面這個可以進行圖像理解的網站

試著上傳一張圖片測試，發現成功了。

第三步：網站優化、測試&改造

想實現的核心能力沒問題后，我開始嘗試要求扣子空間對網站進行改造，這一步我的提示詞是：

非常棒，接下來我想調整這個網站的定位，請保留現在的圖像理解API的調用邏輯，為我開發一個名為「花叔穿搭銳評」的網站，用戶上傳自己的穿搭照片后，系統將調用圖像理解模型返回Roast店鋪。
## 功能結構：
1. 網站首頁：
- 展示標題標語：“上傳穿搭照，讓AI告訴你有多離譜”。
- 提供上傳按鈕，支持拖拽或點擊上傳，照片上傳限制為每日最多3張。
- 顯示上傳縮略圖，并在后臺自動啟動AI分析流程。
- 使用Apple Inc風格的設計，并包含完整的header和footer信息
2. 銳評結果展示頁：
- 顯示用戶上傳照片。
- 使用分區式排版清晰呈現評分、排名、點評內容。
- 提供“再來一張”按鈕，提示剩余上傳次數。
- 提供結果截圖下載或一鍵生成分享圖。
3. 上傳頻率控制：
- 限制每位用戶每天上傳照片不超過3張。
- 若超額上傳，應彈出提示“今日毒舌額度已滿，請明天再來受虐”。
4. 交互體驗與頁面風格：
- 網站整體風格現代、俏皮、有趣，融合漫畫吐槽感與輕量化審美風。
- 上傳后進入等待狀態時顯示文案提示：“AI正在分析你的穿搭，這一身真不容易處理?！?- 所有界面支持移動端訪問，操作直觀清晰。

扣子空間幫我完成了網站風格的改造，除了核心調用AI的邏輯沒變之外，可以說完全不是一個網站了。接下來下一步就是嘗試繼續體驗，測試。

比如我發現AI生成的銳評很長，雖然評價效果還不錯，但返回的內容是markdown格式的，這么多#和*不太符合我的預期。

但是沒關系，你依然可以讓AI去調整，我要求如下：

AI返回的評價是markdown格式的，請支持和優化markdown文本的展示效果

以及，我發現扣子空間為AI調用做了個超時取消的機制，導致有時候上傳圖片等待一段時間后，會出現沒有結果就取消了任務的情況。但其實這種情況你也可以簡單的用自然語言做如下要求：

去掉超時取消機制，盡可能多等待。

以及，其實除了用自然語言的方式要求AI去修復bug或者更改設計之外，如果你要改的內容就在界面元素上，你也完全可以點擊右上角的「編輯」功能，然后選擇任何你想要調整的元素進行修改。這種方式下你對細節調整的掌控度會高不少。

如你所見，這么個AI網站就這么水靈靈的在幾句自然語言的要求之下完成了。

而且，完成之后，它不止你自己可用，也是可以通過右上角的分享按鈕，直接在瀏覽器中打開這個已經完成部署上線，公網可以訪問的鏈接

比如我這個「花叔穿搭銳評」網站，你就可以現在嘗試下...

https://space.coze.cn/coding-expert-runtime/136000180482

簡單總結下我這個過程的體驗，如果你是個新手的話，我確實不建議你想通過一段「魔法」提示詞就一次性生成一個超絕的網站。你也不需要這么做，你只需要一步步清晰闡述你的想法，先讓「扣子空間」跑一跑代碼，等你看到了它為你提供的雛形之后，你再在雛形基礎上完善自己的想法， 進一步提要求即可。

我自己做了幾次測試后，發現「扣子空間」這個編程搭子的特點是很克制和嚴謹，它會盡量實現，同時僅實現你表述的需求，可控性很強。但同時這也是要求你要對自己想要實現的網站功能、結構、界面風格等有比較清晰的想法和表達能力。對于設計師和產品經理來說，有扣子空間的幫助去實現自己的設計初稿或產品原型會是如虎添翼的。

不過，如果你不太擅長表達自己對網站界面的要求怎么辦？

這又要來說一個「扣子空間」我覺得很絕的功能，就是截圖復刻。

在網站開發模式下，你完全可以找一個你想模仿搭建或者學習的網站界面，然后截圖讓「扣子空間」幫你復刻即可。

比如我截了個圖片比較多，很考驗AI能力的YouTube首頁來給AI上點強度。

而提示詞，我只是簡單發了個：請幫我生成一個和截圖一樣的網站

然后，「扣子空間」就幫我把YouTube首頁給復刻出來了，實現程度大概80%吧。

讓我覺得比較驚訝的是，「扣子空間」甚至把我提供的截圖里的視頻封面的截圖再次給截取下來，作為模仿網站的素材了，真就有點6...

而且，我發現這個上傳圖片的功能不止可以用來讓AI模仿，你也可以把它作為提供素材的方式，比如我給扣子空間傳了張我的照片作為頭圖，它就這么給放上去了

說實話，這個能力可太重要了。

比如，你需要做一個自己的簡歷頁面，或者你要幫公司做一個企業品牌官方、活動官網等等，你總不能讓AI隨意生圖，或者從開源網站找跟你完全無關的照片吧？

通過這種方式，你完全可以控制你要生成的網站上的圖片素材資源了，而且，還真就是所見即所得，如此的簡單，不需要碰一點代碼，純自然語言實現。

以及，順便提一嘴，除了使用圖片外，設計師完全可以導入Figma設計稿，讓扣子空間一次性復刻你的設計。

通過上面兩個任務，你大概對「扣子空間」的0代碼開發網站的能力有了初步理解，你可以通過自然語言表達你的需求，也可以通過截圖，自己畫圖等方式表達你對網站設計的要求和想法。扣子空間相比很多別的AI編程工具來說，它幫你省了很多工具學習和代碼學習的過程，很適合新手上路。

最后再給大家提供個小彩蛋

前幾天寫的文章里我提到也演示過我自己開發的「打字練習」的網站，但，我確實是有點懶，一直都今天都沒把這個本地html網頁部署上線。

我覺得讓「扣子空間」幫我，從頭開始做一個，省去我部署的麻煩，提示詞如下：

請為我開發一個支持打字練習與游戲化功能的現代網頁應用，網站主題為「打字闖關王」。用戶可以通過輸入英文句子進行打字練習，并在闖關中逐步提升難度、獲得分數、升級角色，提升打字速度與準確率。
---
 網站目標：
通過互動練習和游戲化激勵機制，幫助用戶提升英文打字的速度與準確率。適合學生、職場人士、程序員等使用，具有成就感與沉浸式體驗。
---
 核心功能模塊：
1. 打字訓練主界面：
- 頁面中間顯示一句待打的英文句子，支持從內置句庫中隨機抽取。
- 下方是打字輸入框，用戶邊輸入邊實時檢測是否正確。
- 支持高亮當前輸入字符、已正確輸入字符、錯誤字符。
2. 分數與計時機制：
- 每局開始后自動計時（默認時間限制為60秒，或打完即止）。
- 每句打完后立即計算得分：速度 + 準確率；
- 顯示：打字速度（WPM）、正確率（%）、當前分數。
3. 游戲化闖關機制：
- 設定多個“關卡”，每關詞句難度逐漸提升（例如單詞長度、標點復雜度、編程術語等）。
- 每成功完成一關，將解鎖下一關，并顯示等級晉升動畫（如“Lv.3 打字浪人”）。
- 可設置 Boss 關：長句或代碼片段挑戰，獎勵倍增。
4. 用戶排行榜（可選）：
- 本地或在線排行榜，記錄用戶的最高 WPM、通關等級、總得分；
- 排行榜可按“日榜 / 周榜 / 總榜”顯示前10名。
5. 設置與自定義：
- 用戶可選擇訓練模式：
- 練習模式（無限時間，計分但無闖關）
- 挑戰模式（60秒內盡量打更多）
- 闖關模式（逐關解鎖，得分晉級）
- 可切換不同句庫類型：
- 常用英語
- 詩歌/文學名句
- 編程術語
- 自定義文本
6. 音效與視覺反饋：
- 正確打字播放輕微鍵音或提示音；
- 錯誤字符以紅色閃爍提示；
- 每通關有簡單升級動畫（如火焰、金幣、徽章浮現）。
---
 UI設計風格建議：
- 現代極簡風格，整體以深色背景（如夜藍或碳黑）+ 亮色文字為主；
- 字體使用等寬字體（如 JetBrains Mono / Fira Code）增強打字感；
- 頁面應使用響應式設計，適配桌面和大屏平板；
- 提供輕量暗黑模式 + 成就系統圖標（如小皇冠、閃電等）。
---
 成就系統（可擴展）：
- 設定多個“打字成就”：
- 「打完100句」成就
- 「WPM超過80」成就
- 「0錯誤通關」成就
- 成就系統帶圖標與文案，鼓勵用戶持續訓練。
---
請為我完成這個打字練習游戲化網站的完整頁面結構設計、核心邏輯與打字交互實現。優先考慮用戶體驗與反饋節奏。

你可以通過這個鏈接去試試：https://space.coze.cn/coding-expert-runtime/63682560514

所以，如果你最近腦子里也冒出一個“想做個小網站玩玩”的想法，但又因為不會寫代碼而打住，不如先試試這個AI搭子。

你可以從一個很輕很簡單的想法開始，也可以像我一樣，搞點離譜的創意先試試它的極限。

別擔心寫不來代碼，別焦慮從哪開始。

現在是想法落地最容易的時代之一，你要做的，就是開個口，讓AI來幫你把那扇門推開

接下來我還打算用「扣子空間」做點別的實驗：

比如用它搭一個工具類網站，再比如試試看它能不能搞點更復雜的AI交互流程……等我玩明白了再來更新進度。

如果你也試出來什么好玩的，評論區見～

都看到這了，還不關注、點贊、轉發一波～