【AI 工具地圖】ChatGPT、Claude 也能這樣玩！10 種 Vibe Coding 網站設計靈感

最近 Vibe Coding 越來越受到關注，透過 ChatGPT、Claude 等 AI 工具，即使不熟悉程式語言，也能用自然語言描述需求，讓 AI 協助製作網站。

但當你真的打開 AI，準備開始做點什麼時，可能又會遇到另一個問題：除了常見的作品集、Landing Page 或待辦清單，還能做出什麼有趣的網站？

其實 Vibe Coding 的玩法可以很有創意。像是復古自拍亭、會隨游標產生熱感應效果的畫面、跟著音樂跳動的聲紋，甚至是一個可以探索的像素房間，都能成為互動網站的主題。

這次整理了 10 種 Vibe Coding 創意網站玩法，每個案例都包含設計特色、製作思路，以及可以直接複製調整的 Prompt。

你可以使用 ChatGPT、Claude 搭配適合的程式開發工具，從喜歡的案例開始嘗試，再依照自己的想法修改配色、動畫及互動效果。不需要一開始就做出完整網站，先完成一個有趣的互動體驗，也是很好的練習方式。

01 復古自拍亭

銀色機身、深紅布簾、黑白格地板，復古自拍亭自帶懷舊濾鏡。把它做成網站，讓訪客真的「走進去」拍一組四格黑白底片，視覺元素明確，互動流程也很好描述。

怎麼開始

先收集幾張喜歡的自拍亭照片，列出共同特徵，例如銀色拉絲鋼機身、PHOTOS 招牌、紅色布簾、黑白格地板，這份清單就是 prompt 的素材。接著把使用流程寫成一句話：進入首頁、拉開布簾、倒數、閃光、出現底片。第一版出來後，一次只改一件事，先調顏色，再調動畫，最後才加音效和鏡頭功能。

可直接使用的 prompt

請用單一 HTML 檔做復古自拍亭首頁，背景用 booth-closed.jpg 和 booth-open.jpg，置中、保持比例、使用 object-fit: cover。按「Step inside」時淡入淡出切換成開簾圖；按「Take photos」倒數 3 秒、白色閃光，用 getUserMedia 連拍四張，轉成黑白高對比，在右側排成底片，加輕微顆粒。手機也要能用，並在拒絕鏡頭權限時顯示提示。

小提醒

鏡頭功能（getUserMedia）只能在 localhost 或 HTTPS 下運作，直接雙擊 HTML 檔通常沒反應，可以用 npx serve 開本機伺服器測試。兩張背景照如果機身略有差異，用淡入淡出轉場就能蓋掉跳動感。

02 熱感應

深藍到近黑的冷背景、亮到發白的熱點、彩虹般的溫度色階，熱像畫面本身就很有未來感。把它做成網站，讓訪客的游標變成熱源：蝴蝶飛過會留下熱殘影，準星會自動鎖定目標。畫面一直在動，截圖或錄影都很好看。

怎麼開始

先收集幾張喜歡的熱像圖，列出共同特徵，例如冷色背景、發白的熱點、邊緣柔和的光暈、準星、溫度刻度、閃爍的 REC，這份清單就是 prompt 的素材。主角挑一兩個就好，例如一隻貓、一隻蝴蝶，最好是去背的 PNG。接著把畫面寫成一句話：進入首頁、蝴蝶飛過留下熱殘影、準星鎖定目標、游標一動就加熱、切換色盤。第一版出來後，一次只改一件事：先調熱場，再讓主角動起來，最後才加 HUD 和色盤切換。

可直接使用的 prompt

請用單一 HTML 檔做熱像儀風格的全螢幕首頁，素材用 cat.png 和 butterfly.png（去背的熱像圖）。先把圖片顏色反推成 0 到 1 的熱度值，再用 Canvas 低解析網格做熱擴散和冷卻，放大成柔和的熱像畫面。蝴蝶沿曲線飛行、拍動翅膀，飛過的地方留下慢慢冷卻的熱殘影；貓坐著呼吸、擺尾巴、眨眼。游標移動就加熱，點擊投下一團熱。畫面疊上 HUD：四角對焦框、掃描線、閃爍 REC、右側 16 到 38°C 的溫度刻度，以及跟著主角移動的鎖定框和即時溫度。左下放大標題「02 熱成像相機模擬」，右下可以切換鐵虹、彩虹、白熱等色盤。手機也要能用，主角和標題不能互相重疊。

小提醒

直接雙擊 HTML 開啟時，瀏覽器會把本機圖片當成跨來源，Canvas 讀不到像素，畫面可能一片黑。用 npx serve 開本機伺服器，或把圖片轉成 base64 寫進檔案就能解決。熱場要在低解析網格上算，大約 200 到 300 欄再放大，逐像素計算在手機上會卡。如果主角完全不動，先檢查裝置有沒有開「減少動態效果」。

03 音檔可視化

黑底、白色短點堆成的柱子、以中線上下對稱的聲紋，音檔可視化的畫面像示波器的磷光殘影，自帶未來科技感。把它做成網站，訪客按下播放或打開麥克風，點陣就會隨聲音即時跳動。

怎麼開始
先收集幾張喜歡的音檔可視化畫面，可以搜尋 audio visualizer dot matrix、oscilloscope、spectrogram，然後列出共同特徵，例如純黑背景、白色短點堆成垂直柱、以水平中線上下對稱、越舊越暗的殘影、畫面四角的細線框角、底部一行很小的等寬字讀數，這份清單就是 prompt 的素材。接著把使用流程寫成一句話：進入首頁、按下播放、點陣跟著聲音跳動、切換顯示模式、看底部讀數變化。第一版出來後，一次只改一件事：先調點的疏密和亮度，因為它最決定像不像，再調跳動的反應速度，接著補讀數，最後才加模式切換、上傳音檔和麥克風。

可直接使用的 prompt

請用單一 HTML 檔做一個音檔可視化網站，用 Canvas 2D 繪圖、Web Audio API 的 AnalyserNode（fftSize 2048）分析聲音。整體只用黑白兩色：近黑背景和冷白的點，靠透明度做層次。主畫面是由右往左捲動的聲紋，每秒 60 欄，每欄從中線往上、往下堆出白色短點，上半高度偏向中高頻、下半偏向低頻，越舊的欄越暗，柱頂外散落幾顆雜點。音源有三種：用 Web Audio 即時合成的 118 BPM 示範音軌、上傳或拖放的音檔、麥克風。底部用小號等寬字顯示 RMS（dBFS）、峰值頻率和 BPM 估計值。開頁時先跑一段模擬訊號，畫面不能是空的，並清楚標示為模擬。手機也要能用，麥克風被拒絕時顯示提示。

04 白板便利貼

點點格線的白板、奶油黃和櫻花粉的便利貼、頂端撕一段灰色紙膠帶、手寫字再配一顆珠光星星貼紙，這種手帳感白板一眼就認得出來。把它做成網站，讓訪客真的貼上一張便利貼、拿起畫筆塗鴉，互動元素就出來了。

怎麼開始

先收集幾張喜歡的參考圖，例如 FigJam、Miro 的白板截圖、手帳拼貼和實體白板照片，再列出共同特徵：點點格線、粉彩便利貼、頂部紙膠帶、微微歪斜的角度、手寫字體、標籤機打字提示。這份清單就是 prompt 的素材。接著把使用流程寫成一句話：進入首頁、雙擊空白處貼上便利貼、輸入文字、拖曳紙膠帶移動、切換畫筆塗鴉、蓋上貼紙。第一版出來後，一次只改一件事：先調便利貼的顏色和陰影，再調拖曳和畫筆的手感，最後才加復原、清空和自動儲存。

可直接使用的 prompt

請用單一 HTML 檔做白板便利貼首頁，整頁固定在一個螢幕內不能捲動，背景是淡灰牆面加一塊有點點格線的白板。左側浮動工具列有移動、便利貼、畫筆、螢光筆、橡皮擦、貼紙六個工具。雙擊空白處貼上便利貼並直接輸入文字。便利貼有五種粉彩色，頂部貼一段半透明紙膠帶當拖曳把手，隨機微微傾斜，拖曳時轉正並加深陰影。畫筆用 canvas 畫出平滑線條；螢光筆半透明，用 mix-blend-mode: multiply 疊在便利貼上；橡皮擦一次擦掉整筆。支援復原和重做，清空前要在頁面內確認，內容存在 localStorage。手機上工具列移到底部，全部用 Pointer Events，讓觸控也能用。

05賽博監控

監視器畫面有一套很好認的語言：角落閃爍的紅點 REC、跳動的時間戳、螢光綠的追蹤框和「ID 07 · 0.98」這類標籤，再加上掃描線和顆粒雜訊。把它做成網站，訪客一進來就變成被鏡頭鎖定的目標，滑鼠移到哪，追蹤框就跟到哪。

怎麼開始
先收集幾張喜歡的監視器畫面或 CCTV 風格的時裝照，列出共同特徵，例如四角取景框、REC 紅點、時間戳、ISO 數值、綠色和紅色的偵測框、框左上角的實心標籤、局部放大的特寫小窗、掃描線和雜訊。這份清單就是 prompt 的素材。接著把使用流程寫成一句話：進入首頁、追蹤框跟著滑鼠、點擊鎖定並放大特寫、開啟鏡頭偵測移動。第一版出來後，一次只改一件事：先調框線粗細和顏色，再調雜訊和動畫，最後才加鏡頭功能。

可直接使用的 prompt

請用單一 HTML 檔做賽博監控風格的首頁。背景用 cam-01.jpg，置中、保持比例，使用 object-fit: cover。畫面四角加 CCTV 取景框，左上角放閃爍紅點「● REC · CAM-01」，右下角放每秒更新的時間戳，全畫面覆蓋掃描線和輕微顆粒雜訊（pointer-events: none）。滑鼠移動時，一個綠色追蹤框會稍微延遲地跟著游標；框是 1px 細線、四角加粗，左上角標籤寫「TARGET · 0.97」。點擊時框變成紅色並顯示「LOCKED」，右上角出現放大 2.5 倍的特寫小窗。按「Live」時用 getUserMedia 開啟鏡頭，比對前後兩格畫面找出有移動的區域，用綠框標出來。手機也要能用，拒絕鏡頭權限時要顯示提示。

06 萬花筒

萬花筒風格很適合用來打造具有實驗感的品牌首頁。它不只是將圖案放射排列，而是透過鏡像切片、重複結構、材質折射與動態視差，創造持續變化的視覺焦點。設計時可先設定主色，例如玻璃藍、莓果紅與金色，再搭配花朵、晶體或建築影像作為紋理。為避免畫面過於混亂，標題與導覽應維持簡潔，並在文字後方保留足夠的明暗對比。

怎麼開始

先選擇一至兩張具有明確紋理的參考圖片，要求 AI 將圖片切割成 12 至 24 個鏡像區塊，再加入緩慢旋轉、滑鼠視差與切片數量切換。首頁首屏應立即呈現萬花筒主視覺，後續區塊則逐漸降低動態強度，讓內容仍然容易閱讀。行動版可減少粒子與模糊效果，以維持順暢效能。

可直接使用的 prompt

請製作一個具有強烈萬花筒效果的沉浸式首頁。使用 24 面鏡像切片，融合花朵、玻璃建築與晶體紋理，配色以深黑、玻璃藍、莓果紅及金色為主。主視覺需隨滑鼠產生折射與旋轉，並提供 12、16、24 面切換功能。標題保持簡潔、高對比且具精品感，同時完成響應式設計與行動版效能優化。

07 電子郵票

電子郵票是一種結合復古印刷美學與網頁互動的視覺形式。它保留傳統郵票的齒孔、面額、郵戳與油墨顆粒，同時加入動畫、內容切換與即時文字生成，讓郵票不只是裝飾，而是整個首頁的核心體驗。這類風格適合個人作品集、品牌活動頁或概念型網站，能用單一物件建立鮮明又容易記住的視覺主題。

怎麼開始

先設定郵票背後的故事，例如「把一句話寄給未來的自己」。接著限制色彩與版面，使用米白、郵務藍和郵戳紅，並將品牌介紹、郵票主視覺及互動工具安排在單一畫面。最後加入切換圖案、蓋郵戳和輸入訊息等簡單互動，讓訪客不需捲動也能理解網站。

可直接使用的 prompt

請製作一個名為「POST//FUTURE」的單頁響應式首頁，概念是一間把訊息寄往未來的數位郵局。畫面固定在 100vh，不能出現捲動。桌面版採三欄配置，包含品牌介紹、大型電子郵票與迷你郵票產生器。使用米白、深藍與郵戳紅，加入紙張顆粒、齒孔、網點和油墨偏移。訪客可以切換郵票插圖、點擊郵戳，並輸入訊息與目的地產生個人郵票。

08 動態文字

動態文字是把文字從資訊載體轉化為視覺與互動元素的設計方式。透過位移、縮放、重複、錯位或粒子效果，文字能回應滑鼠、捲動及使用者輸入，讓首頁更具節奏與記憶點。這類效果特別適合創意工作室、作品集及活動網站，但設計時仍要以可讀性為優先，避免動畫干擾內容理解。

怎麼開始

先確定文字要傳達的情緒，例如科技感、混亂感或未來感，再完成靜態排版與資訊層級。接著加入一種主要互動，如游標靠近時推開文字，最後才補上進場與捲動動畫。手機版應降低粒子數量，並支援減少動態模式。

可直接使用的 prompt

請製作一個以動態文字為核心的實驗型首頁。使用黑色背景、米白文字與單一螢光色，讓大量微型文字組成 Hero 圖形。文字從四周聚合，游標靠近時產生排斥效果，停止操作後回到原位。加入大型標題、品牌宣言、專案列表，以及可輸入文字並切換 SWARM、GLITCH、GRAVITY 模式的互動區。確保版面響應式、文字清楚可讀，並支援 prefers-reduced-motion。

09 像素房間

像素房間把首頁變成一個可以探索的微型世界。比起常見的橫幅與卡片排版，它利用房間、家具和角色建立敘事，讓作品介紹、個人資訊與聯絡方式自然藏在場景中。這類設計特別適合作品集、個人品牌或創意專案，能在短時間內建立鮮明記憶點。

怎麼開始

先挑選一張能代表氣氛的參考圖，拆解它的色彩、視角、家具與光線，再決定每個物件負責什麼功能。例如電腦開啟作品集、日記本介紹創作者、電話顯示聯絡方式。撰寫指令時，不只描述視覺風格，也要交代互動、探索順序與手機版操作。

可直接使用的 prompt

請設計一個名為「VIBE HOUSE」的互動式首頁。畫面是一棟深夜像素公寓，每個房間分別代表 About、Projects、Notes 與 Contact。使用者可點擊電腦、日記、冰箱便利貼和電話，以復古遊戲對話框查看內容；探索三個房間後解鎖秘密屋頂。使用午夜藍、灰紫、奶油黃與螢光青，加入城市夜景、即時時鐘、環境動畫與探索進度，並支援桌機、手機及鍵盤操作。

10 重力感應

重力感應能讓網站從靜態版面變成具有重量與慣性的互動空間。使用者移動滑鼠、拖曳物件或傾斜手機時，畫面中的粒子、文字與圖片會受到引力影響，產生墜落、漂浮、碰撞及回彈效果。

怎麼開始

先選定一個核心互動，例如「游標成為引力來源」，再將頁面素材分成輕、中、重三個層級。開發時可使用 Matter.js 處理碰撞與重力，搭配 Canvas 製作粒子場。手機版則可讀取裝置方向，但應提供一般觸控操作，以及 prefers-reduced-motion 的低動態模式。

可直接使用的 prompt

請製作一個具有重力感應效果的響應式首頁。使用米白、黑色與螢光綠配色，加入數字粒子球體、可拖曳文字及實驗卡片。滑鼠作為引力來源，物件依不同重量產生漂浮、墜落、碰撞與回彈。手機版支援傾斜感應，並提供減少動態效果模式。整體風格為復古科學儀器結合未來數位藝術，確保標題與主要按鈕保持清楚易讀。

Vibe Coding，從一個有趣的想法開始

Vibe Coding 很適合拿來嘗試以前覺得製作門檻很高的互動效果。透過 AI 協助產生程式碼，我們可以把更多時間放在構思畫面、設計體驗，以及反覆調整細節上。

不過，AI 並不是每次都能一次做對。比起只說「幫我做一個很酷的網站」，試著把視覺風格、操作流程、動畫效果和素材需求描述清楚，通常更容易得到接近預期的成果。

如果你也想開始玩 Vibe Coding，可以先從這 10 種案例挑一個喜歡的，複製 Prompt、換上自己的素材，再慢慢調整成自己的版本。

有時候，一個有趣的小實驗，就是下一個作品的開始。