上週不是一直在玩釦子空間嘛，當時做了不少網頁，一個最大的體會就是它是真聽話，出錯是難免的，都會出錯，但是隻要是你指出它錯誤，它是真的會改。
所以，還是挺喜歡用釦子來玩各種主題網頁，上次沒玩過癮，這兩天又跑了一個案例出來，從這個案例中，你能看到黑哥是多愛整活。（釦子是有多聽話）
其實也沒啥，我尋思著，玩嘛，就得上點才藝，直接給兄弟們整個大家都愛看的——一個黑哥嚴選美女圖冊網站。
本來吧，你說學點新東西，就別整太枯燥的，弄點大家愛看的，做起來不是也有動力嘛，對吧？
我就跟它說：幫我做一個模仿 Pixabay 風格的圖冊網頁，名字叫 beautyleg，導航欄的標籤要用中文，這是 29 張圖片的連結地址……
這裡我沒讓它 AI 生成圖，一是費時，二是看膩了，三是我要手動選，不然怎麼叫黑哥嚴選。
釦子接了活就開始吭哧吭哧地幹，當然它也不是蠻幹，一邊幹一邊思考。
也就等了幾分鐘，右邊一個基礎版的網頁就出來了 。
有導航欄、有標題區，圖片都給我排成了響應式的網格佈局，而且標籤也都按我的要求換成了中文，像「探索」、「最新上傳」這些，像模像樣。
不過，這只是個毛坯房，離精裝修還差得遠。你看，有些圖載入不出來吧？
不過，後來我看了下，是因為我找的圖太大，載入過慢，小問題，先不急，主要是這個頁面不太好看啊，先把頁面改舒服了，再說圖的事。
我接著跟它提需求：
我找了個女團的圖，讓它把頂部導航欄的背景換成這個圖，網站主題用暗黑色。
釦子的反應很快，馬上就開始調整，而且在調整前還再三和我確認修改位置和色彩。
然後導航欄背景被成功替換，它還很智慧地調整了文字顏色以保證清晰度。同時，整個網頁的全域性背景變成了深灰色，圖片卡片也用了稍淺一點的深灰底色，整體質感一下就上來了。
不過和我想的不太一樣，怎麼中間的區域沒換成圖片背景呢？
我查了一下才知道，原來是我指令給錯了，我是要求它更換標題欄的背景圖，我以為那個地方叫導航欄。。。
這是我的鍋，繼續讓它改：
頂部導航欄和主標題區都用那張背景圖，網站名字 beautyleg 改成大寫。圖片不要顯示檢視次數和名字，排版改成瀑布流。
這一步稍微複雜了點，但釦子還是理解了。它把導航欄和主標題區合併成一個容器，只調用一次背景圖，節省了資源。網站名也規規矩矩地改成了大寫的BEAUTYLEG 。
最關鍵的是，圖片排版真的變成了根據圖片原始尺寸排列的瀑布流，那些雜七雜八的資訊也都隱藏了，頁面瞬間乾淨了不少。
這一下子檔次就上來了吧？
到這裡，我覺得還不夠，一個現代化的網站怎麼能沒有互動呢？於是我提了個更過分的要求：
當我切換「全部」、「最新上傳」這些標籤時，不僅要顯示對應分類的圖片，主背景圖也得跟著換。我又找了幾張女團的圖，讓它對應替換上背景圖連結……
這個需求已經涉及到 JS 動態互動了。
AI 把這麼多張圖隨機分配到了 5 個分類裡，當我點選不同的標籤時，不僅圖片內容會切換，整個網頁的大背景圖也會跟著變成我指定的那張，甚至還帶了點過渡動畫效果。
但是，還沒完，看到每個分類下那些橫線了嗎，那還是最開始的部分圖片不能載入的問題，現在開始修復這個問題：
好傢伙，到這一步，這個網站已經完全超出了我的預期。
雖然說需要除錯和溝通，但釦子是真的聽話，說一次就能改好，這個懂行的人可太知道里面的含金量了。
最後，為了完美呈現瀑布流的圖片效果，我又扔給它一堆新的圖片連結，讓它隨機分配到各個分類裡。
釦子把圖片合理地分到了 5 個分類中，每個分類都有一兩屏的圖片，瀑布流佈局和深色主題都保持得很好。
順帶著，給它改個名字，打上我的大名：黑哥嚴選。
至此，一個功能完整、設計感十足、帶互動效果的美女圖冊網站就這麼誕生了。
整個過程，我沒寫一行程式碼，全靠打字跟 AI 聊天，它就像一個聽話且能力超群的前端實習生，我提需求，它來改，一步步把網頁從無到有地搭建完善。
首頁：
檢視大圖：
切換標籤：
黑哥嚴選網址：
https://space.coze.cn/s/_MLvMB1-Irw/
說實話，這個過程最累的不是和 AI battle，而是手動選圖，我把 Wallheave 翻了幾百張圖，才選出來的。
經常是我這邊圖還沒選完，釦子那邊就已經幹完活了，催我，趕緊給我圖。
就感覺，我給它打工一樣。。。
你看，是不是整個過程還是相當聽話，指哪打哪。
還是那句話，沒別的意思，也不是說我有多愛看這些圖，主要還是為了測試 AI 能力邊界。
如果「黑哥嚴選」站還合你的口味，別忘了給這篇文章點個贊。
