Vibe Coding 固定網頁樣式：解決樣式不一致的惱人問題

通常 Vibe Codeing 時，一開始通常會因為 AI 快速產出功能而感到「驚艷」，但隨著開發流程的進展，就會開始發現各種的「不可控」，例如樣式錯誤、每次改了 A 結果 B 也跟著改...等，進而也逐漸出現各種「灰心」和「無力」的感受，這篇教學會利用一個簡單的「世界時鐘」頁面，運用一些開發流程的方法，讓各種 AI 都可以乖乖聽話，產生類似且接近的成果。

更多參考：Vibe Coding 全方位開發導讀

快速導覽：

• 第一步、確認功能需求
• 第二步、產生示意圖 ( 靜態圖片 )
• 第三步、分析示意圖產生提示詞 ( 分析靜態圖片 )
• 第四步、產生基本功能 ( 開始產生網頁 )
• 第五步、調整與改善功能 ( 調整網頁版面 )
• 第六步、套用示意圖樣式 ( 套用視覺設計 )
• 第七步、細節修改和調整
• 第八步、下載程式碼並部署網頁

第一步、確認功能需求

很多人在嘗試 Vibe Coding 時，都會經歷一段「從天堂掉到地獄」的過程！一開始 AI 幾秒鐘產出功能會讓人感到無比驚艷，但隨著開發進入細節，就會發現樣式開始失控，改了左邊結果右邊就壞掉，或是明明想要極簡風，AI 卻越改越凌亂，因此可以透過下列的流程，讓整體風格樣式一致。

了解流程之後，接下來就要進行所有的網頁或應用程式而言最關鍵的起手式：「撰寫功能需求」，有了功能需求，接著才能根據需求進行開發，許多沒有接觸軟體開發但又想要 Vibe Coding 的程式新手，往往會忽略掉「需求」的重要，而全盤交由 AI 處理，如此一來整個頁面會出現許多「不可控」的例外狀況，因此列出功能需求是最重要的第一步！

舉例來說，如果要製作一個簡單的「世界時鐘」的網頁，可能要具備下列功能需求：

• 畫面上有六個不同的城市：台灣、東京、首爾、紐約、洛杉磯、巴黎。
• 六個城市分別顯示對應台灣的時間。
• 可以透過「設定功能」，指定台灣時間，或還原目前的時間。
• RWD 網頁，可以在手機上查看。

第二步、產生示意圖 ( 靜態圖片 )

了解功能需求後，就會進入第二步「討論流程和 Wireframe ( 線框圖 )」的階段，因為這個世界時鐘網頁的流程很簡單，所以可以直接先請 AI 產生 Wireframe 線框圖，不過因為 AI 可以直接產生完整的畫面，所以可以讓 AI 產生最後的示意圖。

特別注意：

• 如果功能複雜，建議還是要先繪製流程圖確認功能。
• 此處的是示意圖是完全沒有任何互動功能的「靜態圖片」，單純查看風格和配色 ( 類似先請設計師繪製示意圖，老闆覺得沒有問題了再繼續開始做 )。

根據剛剛的功能需求，在腦中稍微思考畫面，接著根據腦中需求撰寫提示詞 ( 範例使用 Gemini 生成圖片 )，這個步驟可能會執行多次修改提示詞或風格 ( 如同會請設計師反覆修改成自己想要的樣式 )，除了直接透過 AI 產圖，也可以運用影像處理軟體修改圖片，直到產生自己想要的示意圖為止，下方是這個範例產生的示意圖。

注意，示意圖不等於最後產出的畫面，只是讓最後產出畫面有「參考依據」，可以產生更為接近的樣式。

請幫我產生一張世界時鐘的網頁示意圖
- 畫面標題：世界時鐘
- 畫面上有六個區塊，分別呈現六個地點的目前時間：台灣、東京、首爾、紐約、洛杉磯、巴黎。
- 六個區塊裡都要有該國家的國旗、與台灣時差。
- 有一個設定按鈕。
- 風格：扁平化設計、現代化、可愛  

第三步、分析示意圖產生提示詞 ( 分析靜態圖片 )

如果 AI 可以讀取示意圖圖檔，就可以直接讓 AI 參考，但因為某些 AI 工具無法觀察示意圖或讀取示意圖產生幻覺，建議可以先透過 AI 分析示意圖，產生對應的提示詞，例如版面配置、色碼、字體大小...等，屆時直接提供提示詞，就可以避免 AI 幻覺，並產生類似的畫面。

開啟一個新的 AI 對話視窗，上傳剛剛的圖片，搭配下列的提示詞，就可以讓 AI 分析並產生要生成這個頁面的提示詞：

附圖是我再來要產生的網頁參考圖，請你幫我分析這個畫面和色碼，並產生各個功能樣式的提示詞，讓 AI 可以根據提示詞設定網頁樣式
- 頁面配置
- 設定按鈕
- 主要區塊樣式

分析之後會產生類似下方的提示詞，產生之後也可以再根據需求自行修改 ( 下方提示詞是針對剛剛的範例圖片 )。

1.頁面配置 ( Page Layout )
提示詞：「極簡風格的網頁介面佈局，背景為清爽的淡藍色線性漸層。標題「World Clock」居中對齊，採用粗體無襯線字體。整體採用響應式兩欄網格系統 ( Two-column grid layout )，元件之間保有寬敞的留白感 ( Whitespace ) ，呈現出通透且有條理的視覺結構。」

2.設定按鈕 ( Settings Button )
提示詞：「位於頁面右上角的懸浮功能按鈕，圓形外觀，色彩選用鮮豔的活力橘色 ( F3814D )。中心嵌入簡潔的白色齒輪圖標，帶有細微的擴散陰影 ( Soft Drop Shadow ) 以增加立體懸浮感，在淺色背景中成為醒目的視覺焦點。」

3.主要區塊樣式 ( Main Card Style )
提示詞：「玻璃擬態 ( Glassmorphism ) 風格的時鐘卡片，些微半透明的純白色背景搭配大圓角設計。卡片頂部水平排列國旗圖示與城市名稱；中心為超大字體的數位時間，黑色字體且筆畫俐落；底部則是淺灰色的時區資訊文字 ( 如 GMT+8 )。卡片四周帶有非常柔和的環境陰影，營造出輕盈的層次感。」

第四步、產生基本功能 ( 開始產生網頁 )

如果產生示意圖以及描述示意圖是「設計師」的工作，接下來就要讓「工程師」先產生「沒有畫面的基本功能」，這個步驟對於 Vibe Coding 非常重要，因為不同的 AI 工具會套用不同的「框架」或「預設喜好」，往往也因為這些框架讓程式很難修改且無法共通 ( 就像不同的工程師喜歡套用不同的框架或套件 )，所以先產生最基本的功能，可以確保不論哪種 AI 都可以共通。

開啟新的 AI 對話視窗，修改提示詞，請 AI 開啟 Canvas ( 畫布功能 ) 產生網頁，特別注意，接下來的提示詞裡都有加上版本的名稱，如此一來如果有問題，可以隨時返回特定版本。

我要做一個「世界時鐘」的網頁，我會按照開發流程慢慢開發，請你開啟畫布，按照下列指令跟我一起協作網頁：
- 版本：第一版，測試功能
- 不要套用任何框架和 CSS 樣式，只使用純 HTML 和 JS。
- 畫面上有六個區塊，分別呈現六個地點的目前時間：台灣、東京、首爾、紐約、洛杉磯、巴黎。
- 六個區塊裡都要有該國家的國旗、與台灣的時差。
- 六個地區的時間以台灣時間為主做轉換。
- 提供一個修改區塊，裡面有一個修改時間欄位和按鈕，功能：修改台灣目前時間、還原目前時間。

下圖呈現 Gemini ( free 快捷 )、Gemini ( pro 思考 )、ChatGPT ( free ) 和 Canva AI ( free ) 產生的頁面，可以看出除了 HTML 套用的標籤不同 ( 套用 h1 標籤的標題字體會比較大 )，因為沒有套用樣式，所以基本上大同小異。

在這個步驟因為只有基本功能，所以可以很清楚知道哪邊需要修改，修改時比較不容易出現幻覺或錯誤。

第五步、調整與改善功能 ( 調整網頁版面 )

從上述的基本功能可以觀察到，不論哪種 AI 都可以產生類似的畫面，接下來就要加上一些基本的排版 ( 還沒有進入最後排版 )，輸入下列提示詞，將設定時間按鈕隱藏，並讓地點區塊變成水平排列。

特別注意，一直到這個步驟為止，都還沒有進入最後真正的視覺設計排版，都還只是在功能與基本版面測試階段。

- 版本：第二版，進階功能
- 不要套用任何框架和 CSS 樣式，只使用純 HTML、JS 和功能必需的 CSS 樣式。
- 畫面上的六個區塊改成水平排列，一列最多三個，若視窗寬度變小就會換行。
- 隱藏時間修改區塊
- 增加一個設定按鈕，點擊之後用「彈出視窗」顯示時間修改功能。

下圖呈現 Gemini ( free 快捷 )、Gemini ( pro 思考 )、ChatGPT ( free ) 和 Canva AI ( free ) 產生的頁面，可以看出不同的 AI 在設計頁面時，開始會嘗試加入一些簡單的樣式，但整體來說仍然沒有差異太大。

第六步、套用示意圖樣式 ( 套用視覺設計 )

「畫面」和「功能」都有了之後，接著就要進行「整合」，這也是 Vibe Coding「最難掌控」的地方，常常為了改一個小功能，整個畫面又改變了，不過因為在之前的步驟中，已經將畫面和功能區隔，所以就可以較為精準的掌握這個步驟，但為了避免「牽一髮動全身」，將剛剛的畫面提示詞拆分成細部功能，一個一個逐一實現較為保險，首先使用和「頁面設計」有關的提示詞 ( 如果 AI 支援上傳圖片參考也可以提供圖片 )：

- 版本：第三版，頁面設計
- 頁面配置 ( Page Layout )：極簡風格的網頁介面佈局，背景為清爽的淡藍色線性漸層。標題「World Clock」居中對齊，採用粗體無襯線字體。整體採用響應式兩欄網格系統 ( Two-column grid layout )，元件之間保有寬敞的留白感 ( Whitespace ) ，呈現出通透且有條理的視覺結構。」
-  主要區塊樣式 (Main Card Style)：玻璃擬態 ( Glassmorphism ) 風格的時鐘卡片，稍微透明的純白色背景搭配大圓角設計。卡片頂部水平排列國旗圖示與城市名稱；中心為超大字體的數位時間，黑色字體且筆畫俐落；底部則是淺灰色的時區資訊文字 ( 如 GMT+8 )。卡片四周帶有非常柔和的環境陰影，營造出輕盈的層次感。

下圖呈現 Gemini ( free 快捷 )、Gemini ( pro 思考 )、ChatGPT ( free ) 和 Canva AI ( free ) 產生的頁面，可以看出原本的版面已經套用特定樣式，因為功能和樣式分離，不論哪種 AI 都可以產生類似的畫面 ( 但仍然會有一些細節不同 )。

通常基本上版面配置應該不會有問題，但一些細節可能需要自行透過提示詞調整，例如字體大小、間距、圖示大小...等。

如果主要的畫面已經沒有問題，就可以繼續修改「設定按鈕」樣式，使用下列提示詞修改設定按鈕 ( 如果希望齒輪的圖案一致，也可以提供 AI 齒輪的 SVG 程式碼 )：

- 版本：第四版，設計設定按鈕
- 設定按鈕 (Settings Button)：位於頁面右上角的懸浮功能按鈕，圓形外觀，色彩選用鮮豔的活力橘色 ( F3814D )。中心嵌入簡潔的白色齒輪圖標，帶有細微的擴散陰影 ( Soft Drop Shadow ) 以增加立體懸浮感，在淺色背景中成為醒目的視覺焦點。
- 齒輪的 SVG 程式碼：「<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<path d="M29.181 19.070c-1.679-2.908-0.669-6.634 2.255-8.328l-3.145-5.447c-0.898 0.527-1.943 0.829-3.058 0.829-3.361 0-6.085-2.742-6.085-6.125h-6.289c0.008 1.044-0.252 2.103-0.811 3.070-1.679 2.908-5.411 3.897-8.339 2.211l-3.144 5.447c0.905 0.515 1.689 1.268 2.246 2.234 1.676 2.903 0.672 6.623-2.241 8.319l3.145 5.447c0.895-0.522 1.935-0.82 3.044-0.82 3.35 0 6.067 2.725 6.084 6.092h6.289c-0.003-1.034 0.259-2.080 0.811-3.038 1.676-2.903 5.399-3.894 8.325-2.219l3.145-5.447c-0.899-0.515-1.678-1.266-2.232-2.226zM16 22.479c-3.578 0-6.479-2.901-6.479-6.479s2.901-6.479 6.479-6.479c3.578 0 6.479 2.901 6.479 6.479s-2.901 6.479-6.479 6.479z"></path>
</svg>」

完成之後應該不論哪個 AI，都可以產生完全相同的設定按鈕 ( 注意右上角的橘色設定按鈕 )。

最後使用下列提示詞修改提示詞視窗：

- 版本：第五版，彈出視窗設計
- 標題: 「設定時間」，字體粗體，深色。
- 副標題: 「調整台灣基準時間，所有城市將同步連動。」，字體較小，灰色。
- 輸入框: 一個寬大的圓角輸入框，內含日期與時間佔位符，右側有一個日曆圖標。
- 按鈕群: 三個垂直排列的圓角按鈕。
  > 第一個：橙色背景，白色文字「更新時間」。
  > 第二個：極淺灰色背景，深色文字「還原目前時間」。
  > 第三個：極淺灰色背景，紅色文字「關閉視窗」。

完成之後應該不論哪個 AI，所產生的彈出視窗都會長得大同小異。

第七步、細節修改和調整

基本上進行到這個步驟，表示整體畫面和功能已經完成了七八成，最後就是可以開始進行細節修正，由於各個 AI 的架構會有點不同，下方列出可能的修改動作：

• 看得懂 HTML 程式碼 + 提示詞

  切換到「程式碼」頁籤，或透過右鍵「檢查網頁」觀看元素標籤，複製該元素的程式碼，直接讓 AI 修改，下方是簡單範例

  請將 <div class="time-display">14:54:45</div> 這個 class 的字體變小一點
  

  

• 看不懂 HTML 程式碼 + 提示詞

  使用清晰好懂的提示詞，讓 AI 明白你要改動哪些細節，並可以強調不要更動其他部分，避免整體都一起調整。

  請把區塊裡「顯示時間」的文字改成粗體的字型，請勿更動其他部分
  

• 看不懂 HTML 程式碼 + 使用 Gemini 特殊功能

  Gemini 在產生頁面之後，有提供一個特殊的功能，可以選取頁面中指定區域，讓 AI 修改指定區域。

  

使用下方的提示詞進行最後修改，根據自己的情境做調整 ( 建議分次提供，一次提供往往無法一次到位 )，最終就能讓所有的 AI 產生一致的網頁了！

幫我做最後修改：
- 區塊時間和時區的左側對齊地點名稱左側
- 背景色使用左上 c6e7fa 到右下 579ec7 漸層
- 放大國旗圖示
- 題與時鐘群組的整體顯示範圍限制在最大 960px
- 橘色設計按鈕右側與整體區塊右側對齊，並浮動在最上方
- 主標題置中
- 三段式響應佈局：
1. 寬度 > 960px：自動切換為三欄顯示。
2. 寬度 > 640px：切換為兩欄顯示。
3. 寬度 < 640px：切換為單欄顯示。

第八步、下載程式碼並部署網頁

如果已經全部完成，就可以參考下方兩種部署網頁的方式，將網頁程式下載為 html 檔案，並部署到自己的網頁空間裡。

• 下載網頁：下載 Vibe Coding 網頁程式碼，掌握程式碼的主導權

• 網頁部署方式 ( 推薦使用 Github )：

  • 利用 Google Apps Script 打造免費網頁部署基地
  • 使用 GitHub 部署你的網頁作品

下圖是使用 Github 部署範例網頁。

點擊網址就可以看到「世界時鐘」的網頁作品。

前往 Vibe Coding 範例：世界時鐘

小結

如果只是要用 Vibe Coding 體驗一些效果其實很簡單，但如果要掌握 Vibe Coding 的每個細節，仍然需要具備一些軟體開發流程的基本知識，甚至要按照軟體流程開發的步驟，按部就班的進行，如此一來才可以經準掌握 Vibe Coding 的產出狀況，進而真的實現心中理想的網頁面貌。

延伸閱讀

Vibe Coding 的重點都不在於「寫程式」，而是為了配合程式的各種「準備工作」，下方列出 Vibe Coding 相關的教學，透過一系列的教學，就更能掌握正確且順暢的開發流程:

• 認識 Vibe Coding：程式不再是拼邏輯，而是拼「感覺」
• Vibe Coding 新手入門：從藍圖規劃到 AI 開發的思維轉型
• Vibe Coding 重要的準備工作：架構流程圖
• Vibe Coding 網頁必備知識：開發者的「溝通工具箱」
• Vibe Coding Python 必備知識：AI 與 Colab 開啟程式直覺
• Vibe Coding 固定網頁樣式：解決樣式不一致的惱人問題
• Vibe Coding 圖片處理心法：從雲端空間到 Base64 的完美配置
• Vibe Coding 玩家必備的 SVG 進階操作指南
• Vibe Coding 字體指南：用文字風格定義網頁靈魂
• 下載 Vibe Coding 網頁程式碼，掌握程式碼的主導權
• Vibe Coding 實戰：利用 Google Apps Script 打造免費網頁部署基地
• Vibe Coding 實戰：使用 GitHub 部署你的網頁作品
• AI 時代的輕量級後端：當 Vibe Coding 遇上 Google Sheets
• 從靈感到即時同步：Vibe Coding 遇上 Firebase Realtime Database
• 數位靈魂的存放處：Vibe Coding 串接 Firebase Firestore
• 拒絕資料裸奔！Vibe Coding 必備 Firebase App Check 安全防護指南
• Vibe Coding + Firebase Authentication 打造順暢的註冊登入體驗
• Vibe Coding 將 Google Drive 變身最強檔案後端
• 靈感即程式：用 Gemini API 開啟你的 Vibe Coding 新時代
• Vibe Coding 極速打造 LINE Bot 智慧機器人
• Vibe Coding 範例 - 英文單字卡

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～