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

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

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

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

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

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

接下來，給大家介紹下我用「扣子空間」開發(fā)這個網(wǎng)站的過程。

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

第一步：選擇「網(wǎng)頁」模式

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

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

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

幫我開發(fā)一個可以進行圖像AI理解的網(wǎng)站，用戶上傳圖片后，返回關(guān)于這個圖片的所有信息。
圖片理解模型的調(diào)用方式如下：
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"
}
]
}'

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

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

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

試著上傳一張圖片測試，發(fā)現(xiàn)成功了。

第三步：網(wǎng)站優(yōu)化、測試&改造

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

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

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

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

但是沒關(guān)系，你依然可以讓AI去調(diào)整，我要求如下：

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

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

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

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

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

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

比如我這個「花叔穿搭銳評」網(wǎng)站，你就可以現(xiàn)在嘗試下...

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

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

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

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

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

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

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

而提示詞，我只是簡單發(fā)了個：請幫我生成一個和截圖一樣的網(wǎng)站

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

都看到這了，還不關(guān)注、點贊、轉(zhuǎn)發(fā)一波～