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

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

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

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

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

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

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

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

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

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

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

幫我開發(fā)一個(gè)可以進(jìn)行圖像AI理解的網(wǎng)站，用戶上傳圖片后，返回關(guān)于這個(gè)圖片的所有信息。
圖片理解模型的調(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這個(gè)視覺理解模型（后來我發(fā)現(xiàn)豆包1.6模型其實(shí)也有圖像理解能力），你可以通過字節(jié)的火山方舟平臺(tái)獲取這個(gè)API調(diào)用方式的信息：https://console.volcengine.com/ark/region:ark+cn-beijing/model/detail?Id=doubao-1-5-thinking-vision-pro

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

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

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

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

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

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

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

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

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

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

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

去掉超時(shí)取消機(jī)制，盡可能多等待。

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

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

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

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

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

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

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

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

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

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

比如我截了個(gè)圖片比較多，很考驗(yàn)AI能力的YouTube首頁來給AI上點(diǎn)強(qiáng)度。

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

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

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

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

說實(shí)話，這個(gè)能力可太重要了。

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

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

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

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

最后再給大家提供個(gè)小彩蛋

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

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

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

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

所以，如果你最近腦子里也冒出一個(gè)“想做個(gè)小網(wǎng)站玩玩”的想法，但又因?yàn)椴粫?huì)寫代碼而打住，不如先試試這個(gè)AI搭子。

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

別擔(dān)心寫不來代碼，別焦慮從哪開始。

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

接下來我還打算用「扣子空間」做點(diǎn)別的實(shí)驗(yàn)：

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

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

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