Vibe Coding 固定网页样式
通常 Vibe Codeing 时，一开始通常会因为 AI 快速产出功能而感到“惊艳”，但随着开发流程的进展，就会开始发现各种的“不可控”，例如样式错误、每次改了 A 结果 B 也跟着改...等，进而也逐渐出现各种“灰心”和“无力”的感受，这篇教学会利用一个简单的“世界时钟”页面，运用一些开发流程的方法，让各种 AI 都可以乖乖听话，产生类似且接近的成果。
更多参考：Vibe Coding 全方位开发导读
快速导览：
教学影片
搭配教学影片一起阅读，效果会更好！欢迎大家订阅 STEAM 教育学习网的 Youtube 频道。
第一步、确认功能需求
很多人在尝试 Vibe Coding 时，都会经历一段“从天堂掉到地狱”的过程！一开始 AI 几秒钟产出功能会让人感到无比惊艳，但随着开发进入细节，就会发现样式开始失控，改了左边结果右边就坏掉，或是明明想要极简风，AI 却越改越凌乱，因此必须要先确认功能和需求，搭配流程图和 Wireframe 等前置作业，就能精准控制 Vibe Coding 的产出结果。
“撰写功能需求”是开发网页或应用程序最关键的起手式，有了功能需求，接着才能根据需求进行开发，许多没有接触软件开发但又想要 Vibe Coding 的程序新手，往往会忽略掉“需求”的重要，而全盘交由 AI 处理，如此一来整个页面会出现许多“不可控”的例外状况，因此列出功能需求是最重要的第一步！
举例来说，如果要制作一个简单的“世界时钟”的网页，可能要具备下列功能需求：
- 画面上有六个不同的城市：台湾、东京、首尔、纽约、洛杉矶、巴黎。
- 六个城市分别显示对应台湾的时间。
- 可以透过“设定功能”，指定台湾时间，或还原目前的时间。
- RWD 网页，可以在手机上查看。
接着就可以根据这个需求，绘制和规划简单的流程图和 wireframe 线框图 ( 参考 Vibe Coding 重要的准备工作：架构流程图 )，完成后就可以继续下一步。
第二步、产生示意图 ( 静态图片 )
根据刚刚的功能需求和 wireframe 线框图，尝试撰写提示词，如果手边的 AI 工具支援“上传参考图”，也可以将 wireframe 提供给 AI 参考，让 AI 产生静态的示意图 ( 类似静态的 prototype )，这个步骤可能会执行多次修改提示词或风格 ( 如同会请设计师反复修改成自己想要的样式 )，除了直接透过 AI 产图，也可以运用图像处理软件修改图片，直到产生自己想要的示意图为止，下方是这个范例产生的示意图。
注意，示意图不等于最后产出的画面，只是让最后产出画面有“参考依据”，可以产生更为接近的样式。
請幫我產生一張世界時鐘的網頁示意圖，版面配置參考附圖
- 畫面標題：世界時鐘
- 畫面上有六個區塊，分別呈現六個地點的目前時間：台灣、東京、首爾、紐約、洛杉磯、巴黎。
- 六個區塊裡都要有該國家的國旗、與台灣時差。
- 有一個設定按鈕。
- 風格：扁平化設計、現代化、可愛
第三步、分析示意图产生提示词 ( 分析静态图片 )
如果 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 文件，并部署到自己的网页空间里。
网页部署方式 ( 推荐使用 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 实战：免写程序！把 Google 试算表变成超精美点餐系统
- Vibe Coding 实战：用 Google Drive 轻松打造“文件＆作业上传系统”
- Vibe Coding 实战：用 Google 试算表轻松搞定“线上点名系统”
- Vibe Coding 实战：打造自己的英文单字卡！
微信扫码关注
抖音扫码关注