AI 可以來幫我們寫文章、寫程式、產生圖片、產生影片……當然也可以幫忙設計網頁，所以這篇我要和大家分享如何用 Google Gemini 來幫我們設計、寫出漂亮的網頁。（以後開發前端靠 AI 就好了）🤣
雖然很多架站器也號稱他們有 AI 架站功能，但是那些大部分都是要月租費用的（可能還有主機費用），免費的帳號那些進階的功能幾乎不讓你用，而且如果你只是要先做一個前端或是 Demo 頁面、電子報 html page……只是準備要和業主簡報，還沒有確定能賺到錢，就要先花錢買那些不確定的服務？
之前我分享了幾篇 AI 使用的論述文章，但其實我更喜歡實作，所以這篇就讓我從不務正業的回到原來的領域，用實作來作為文章的主軸，分享我如何用非 IDE 的環境，只用交流的方式和 AI 協作完成 Coding 任務。在完全不開啟任何 IDE 或編輯器的狀態下...真的能完成一個可商用的網頁嗎？
這篇不是探討而是實作，只要掌握足夠的技巧，你也可以成為輕鬆的完成前端設計。
你在電子郵件信箱中應該收過那種排版精美，圖文並茂的行銷電子報郵件吧？那些郵件的格式都是 html，和網頁表現是完全一樣的東西。所以如果我們想要製作一則圖文並茂的 EDM 郵件，你就得做出真的像網頁、一頁式網站那樣頁面，甚至我希望它還能在手機和電腦上閱讀時有不同的體驗，那這樣要如何開始呢？
直接開始？
假設，我有一個推廣 AI 線上課程的 EDM 要製作……
如果你沒有想清楚就急著提問，例如：
我的提詞：
幫我產生一個 EDM 網頁
Gemini 回覆：
製作 EDM (Email Direct Marketing, 電子郵件行銷) 的 HTML 網頁與一般網頁非常不同。為了確保在各種收信軟體（如 Outlook, Gmail, Apple Mail）都能正常顯示，我們必須遵守一些「古老」的規則，例如使用 Table (表格) 排版 以及 Inline CSS (行內樣式)。這裡為您提供一個 RWD (響應式)、現代簡約風格的 EDM 模板。您可以直接複製並根據需求修改。
然後還會提醒我們一些該注意的事項：
如何使用與修改：
1. 圖片替換：找到 <img src="..."> 標籤。EDM 的圖片必須使用絕對路徑（例如：https://www.yourwebsite.com/images/banner.jpg），不能用相對路徑（如 /images/banner.jpg），否則收件者會看不到圖片。建議將圖片上傳到您的官網伺服器或圖床。
2. 文字修改：直接修改標籤內的文字，例如 <h1> 或 <p> 內的內容。
3. 連結設定：找到 <a href="#">，將 # 替換成您希望使用者點擊後跳轉的網址。EDM 製作的重要注意事項避免踩雷：1. 寬度限制： 業界標準寬度通常設為 600px - 650px，這在電腦版 Outlook 和手機上閱讀體驗最好。
避免使用現代網頁技術：
- 不要使用 JavaScript (會被阻擋)。
- 不要使用 <iframe> 或 <video>（尤其是 <iframe> 是 Email 絕對不支援的語法，因為很容易被注入攻擊請用圖片加連結代替）。
- 盡量少用 margin，改用 padding 或空白的表格儲存格來調整間距。
- 不要使用 <div> 來排版，請堅持使用 <table>。
- Inline CSS 比寫在 head 或是用 link 的好。
然後它跑出來的結果就像這樣：
我不確定這是不是所有人都能接受的結果，你可以在下面這個位置點開看到它實際的網頁，當然這個模板真的要用也是可以，但它離我想像的 EDM 有一段距離。
http://demo.ebookredo.com/demo-edm-page/test.html
第一步：你要想像你要做的東西
通常像這麼籠統的提詞，有些 AI 會設計成導引式對話，但很多時候也會在對話迭代中歪掉，結果也通常不會是我們心中想要的設計，這是為什麼呢？
因為我們根本沒有清楚的描述我們的需求……
不知道你有沒有注意到我上面說的那句話「它離我想像的 EDM 有一段距離」，但是我到底想像了什麼呢？如果我不講，你不知道、他不知道，當然 AI 也不會知道。
和 AI 對話，你必須要清楚的描述要作什麼；人會猜測對話者的需求，但現在的 AI 還沒辦法作這件事（未來很難說）。所以我們必須把要做的事情先分析好。對於不擅長分析的人來說可能也是一件困難的事情。幸運的是現在的 AI 也能夠讀取圖片並分析。所以如果你能上傳一張圖片，再加上說明，那肯定會事半功倍。
找一張現成的設計圖來當基礎
圖片製作確實不難，如果對於繪圖不熟的人，那就很難說了。所以這邊我會建議你去網路上搜尋，直接找一張你覺得版面編排不錯的圖片，用它來讓 AI 幫助我們來生成網頁。
看到這裡請別擔心，我們不是要剽竊別人的作品，我們只是模仿別人版面的編排架構……
通常你可以在搜尋引擎中尋找「web page design」或是「edm html design」，然後用圖片的模式直接檢視別人設計的作品即可。
這種 web page 的風格設計在「pinterest」網站上有很多，假設我在找到了這張覺得很不錯的設計。
https://www.pinterest.com/pin/357191814196006821/
但是這張圖的原圖是下方左側的樣子，而且圖片中實際設計內容只有中間的部分，我需要把多餘的部分裁切掉，這樣可以避免 AI 誤判的把外面無關的區塊也變成網頁裡的一部分。
這時候我會把圖片先下載到電腦桌面上，然後將左圖用螢幕截取（或是在影像工具中利用遮罩功能），把它裁切之後就會得到右側的結果。而右側的這張圖就是我們要拿去餵給 AI 的原型圖片。
接下來就要請 Gemini 直接幫我們分析這張網頁設計的「架構」和「風格」。
第二步：你得講清楚你要做什麼
有時候你要 AI 做的一些事情（尤其是寫程式、網頁），最好要把整件事情來龍去脈講清楚，為什麼呢？因為你不見得能用「精準」的方式描述出來，我看過太多歪掉的例子。
所以在把圖貼給 AI 開始協作之前，你可能要先想一下你的提詞有沒有覆蓋到你要它做的所有事情，如果沒有或是你沒辦法去一次寫出來，那你就要用「分次迭代」的方式來進行。事實上我覺得「分次迭代」來做往往會比一次想要把所有的事情做完更容易達成目的。而且在每次對話歪掉的時候你就可以即時修正。
先請他分析這張圖片裡（網頁的架構）
這一步很重要喔，假如它跑出來的架構不正常，你後面再怎麼修改，都會讓你改到懷疑人生的，所以第一步就是：
我的提詞：
幫我分析這網頁設計圖，用 html+css 幫我產生網頁架構和風格，請依照圖片來作出有區塊架構的 RWD 網頁，有圖片的部分幫我留下區塊，希望在不同的設備上（例如：手機、平板）尺寸上還能用響應式（RWD）來自動重新編排
Gemini 回覆：
這是一份完整的 RWD 網頁程式碼，我根據您提供的圖片進行了結構分析與還原。
這份設計採用了 「深色商務風格」（Dark Corporate Theme），重點色是磚紅色。針對您的需求，我特別設定了 Mobile First（行動優先） 的寫法：預設情況下所有區塊都是單欄垂直排列（堆疊），只有在螢幕寬度大於 768px（平板/桌機）時，才會變成圖片中的多欄並排佈局。
您可以將以下程式碼存成一個 .html 檔案（例如 index.html）並直接用瀏覽器打開查看效果。
然後他就給了我一大段的原始碼，這邊直接給大家看效果，下圖是同一個原始碼在不同瀏覽器寬度下呈現的結果。Google Gemini 果然產生了還不錯的區塊架構（連色彩風格它都一併掌握了），不過我們還是需要透過瀏覽器去檢視它產出的結果。
這三張圖我分別用了電腦、平板、手機的三種模式，分別擷取讀取畫面。這樣我們可以檢視它是否真的有良好的支援了 RWD 的效果。
RWD 網頁和圖片最大的不同是，RWD 網頁會在不同的螢幕解析度下，自適化的重新為那個閱讀螢幕編排。所以這時候你要先檢視一些重要的資訊是否正確，以下我只列出幾個我這次會特別需要檢視的項目：
- 每個區塊在版面上有沒有跑版、錯位？
- 在不同的解析度下面，區塊的順序是不是和你想的一樣？
- 你的 max-width（最大寬度），mini-width（最小寬度）是否需要設定？
- 需不需要修改切換版面尺寸的解析度？（現在是大於 768px 才會讓部分區塊並排）
實際會發現和原圖相比，在「Portrait」和「Quick Solutions」應該要在 768px 以上顯示並排的時候要對齊，但是 Gemini 給我們的結果並不如預期。
Gemini 生成的結果大致相同，但有小部分會需要再次調整，這部分我們稍後修正。
於是我們會需要在接下來的步驟中去調整這個部分。
先為後面的對話定義架構
從 Gemini 給的原始碼中，我們會發現它比起原圖更有架構性，由於我們完全不想動網頁原始碼，所以不想自己動手，你就要結構話你的工作。以在這個階段性的結果中，你需要為每一個已經產出的物件、區塊去定義一個 ID 會是一件很重要的事情。
有了 ID 你等於幫版面上的每一個物件都取了名字，這不僅是邏輯技術，更是「溝通策略」。
於是，把 Gemini 給的結果先截取成圖片，你可以在你熟悉的環境 ppt、小畫家、photoshop、keynote 或是 macOS 的「無邊記」……任何一款可以塗鴉的工具上，把這張圖依照上面的區塊和物件來進行標示 ID。
用你習慣的工具為每一個網頁上的物件標示 ID，這是一件很重要事。（如果你有把握用對話的方式就能標示的清楚，你也可以用僅靠文字對話的方式來標示 ID）
我的提詞：
看起來不錯，但是架構可能會有點問題，所以我在你產生的網頁結構上，我把它截取成圖片，然後把它標示每個區塊的 ID 和邏輯。你看一下我的編號邏輯，並到時候幫我把每個物件依照我的編號來幫它加上 ID，這樣方便我後續跟你繼續協作時，我們用 ID 就可以溝通……
Gemini 回覆：
沒問題！您的標示邏輯非常清晰（A、B、C、D、E 分區，配合 t1/t2 文字與 bg 背景），這對於開發溝通是非常棒的習慣。
我已經完全依照您圖片中的 ID 編號邏輯 重寫了 HTML 結構。這樣一來，未來我們溝通時，您只要說「把 C2-b 改成圓角」，我就能精確知道您指的是中間區塊的按鈕。
修正與優化說明
ID 對應：我將所有 HTML 標籤都加上了您指定的 id="..."。
RWD 結構維持：為了讓手機版顯示正確（圖片與下方的文字說明要連在一起），我在 D1、D2、D3 每一組外層包了一個 div class="col-block"，這樣手機版滑動時，圖片跟文字才不會分家。
這時候你得到的原始碼已經是為每一個物件標上 ID 了，你可以看到有底圖的區塊上面也都被標上了
第三步：套用假文案來貼近體驗
有時候這是要做給客戶看的假樣，所以文案貼近真實的需求，會讓客戶在檢視 Demo 的時候產生共情（這很重要）。而我在一開始就提到了，這個 EDM 的目的是為了「推廣 AI 線上課程」，於是我們就請 Gemini 幫我們先上假文案。
我的提詞：
這是一篇 AI 教學的課程邀請函，請幫我先將裡面所有的文案套用成和這個 AI 課程相關的文案，要有吸引力的，我會在後面把它改成我自己的版本
然後 Gemini 就會幫我們改完 Code 之後，順邊將我們前面標示的那些 ID 和對應的文案列出。
Gemini 回覆：
沒問題！這是一個非常棒的策略。先把「假文案」換成「有意義的 AI 課程文案」，您在預覽時會更有感覺，修改起來也更快。我已經幫您將文案全部改寫為「2026 AI 實戰特訓班」的主題。文案風格走「急迫感 + 賦能（Empowerment）」路線，強調 AI 不是取代人，而是增強人的能力。
ID 編號 原始用途 新 AI 文案內容
A-t1 頂部小標 2026 AI Practical Bootcamp（課程名稱）
A-t2 主要大標 讓 AI 成為你的超級大腦 工作效率提升 10 倍（強調效益）
A-b 行動按鈕 立即搶佔席位（Call to Action）
B-t1 介紹標題 不只是學習工具，而是掌握未來
B-t2 介紹內文 強調 AI 時代來臨，消除焦慮，掌握 ChatGPT/Midjourney 等工具C2-t1 特色標題 實戰演練：從觀念到落地
C2-t2 特色內文 強調「非紙上談兵」，適合行銷、設計、PM 等職位
D1 課程模組1 Prompting（提示詞工程）：學會與 AI 溝通的邏輯
D2 課程模組2 Creation（多媒體生成）：圖片、影音生成，一人抵團隊
D3 課程模組3 Automation（自動化）：打造私人助理，節省時間
E1-t1 頁尾標題 別讓 AI 取代你，讓 AI 成為你的翅膀（感性訴求）
你可以看到假文案已經直接上去版面上了，這種事情一定要接給 AI 來做，不用自己親力親為。
雖然它的圖片部分沒有列出，但我覺得也很好，我們稍後會針對圖片的展現進行再次加工。
第四步：補足素材圖片（以假亂真）
還記得我們在各個區塊 ID 裡面留下的圖片嗎？請在你的 html 檔案的同一層目錄新增一個叫「images」的資料夾。然後去找可以補入的素材圖片把它依照我們前面設定圖片的 ID 來重新命名，假設我這邊以 jpg，我們需要：A-bg.jpg、C1-bg.jpg、D1-img.jpg、D2-img.jpg、D3-img.jpg、E2-bg.jpg，一共是 6 張圖片。
圖片的部份請使用免費版權的圖片來遞補，假設你不知道那裡可以下載，可以到「https://pixabay.com」，這邊有很多免費的素材可以下載。
準備好圖片並重新命名完成後，就可以請 AI 直接動手了。
我的提詞：
現在幫我把圖片套上，我的圖片放在 index.html 同一層一個叫「images」的資料夾內，每一個區塊用的圖片都是和它所使用的 ID 完全一樣，目前我所有的圖檔都是使用 jpg 為副檔名，例如：C1-bg 對應的圖就是 C1-bg.jpg，請幫我把六張圖全部套上
我已經依照您的指示，將所有圖片路徑統一指向 images/ 資料夾，並將檔名對應 ID 加上 .jpg 副檔名。請將以下程式碼存檔，並確保您的資料夾結構如下，圖片就能順利顯示。
您的專案資料夾/
index.html <-- 貼上這份程式碼
images/ <-- 建立這個資料夾
A-bg.jpg（頂部大圖）
C1-bg.jpg（中間左圖）
D1-img.jpg（左欄小圖）
D2-img.jpg（中欄小圖）
D3-img.jpg（右欄小圖）
E2-bg.jpg（頁尾人物圖）
然後再用 Chrome 開啟網頁的結果就是：
你就會得到一個設計完整，表現出眾的網頁。
之後如果你要繼續修正
由於每個區域都有自己的編號，像我上面一開始提到它有區域對不齊的問題，其實就告訴它：E2 區塊在並排的時候應該要對齊 D3 的寬度。
然後 Gemini 就會知道你在說哪個地方，你連圖都不用再給一次。
後面如果你要修改按鈕、社群的超連結，同樣只要透過對話的方式，你就能夠瞬間把網頁改好。如果你要讓客戶直接看線上的 Demo（例如把 Code 直接丟到 Github 上面把頁面專案分享出來），或是像我有自架 NAS 主機直接丟到 Web host 客戶就能直接觀看 Demo 頁面。
實際做出來的網頁
雖然這是一個實驗性質的案例，但是完全不碰 Code 的情況下多次編修，並且以對話的方式來要求 Gemini 完稿，事實證明這真的是可行的。
而在這個分享的 Case 中，你會發現其實知識體系是存在的，所以如果你現在還不理解知識體系的話，請務必抽空看這篇「Vibe Coding，知識體系有多重要？」，它對你在學習 Vibe Coding 的過程中一定有所幫助。
這個 Vibe Coding 的實際案例產出的網頁，我將它放在網路上面，如果你有興趣可以點開來看。
http://demo.ebookredo.com/demo-edm-page/
哪一個 AI 比較好？
雖然很多人都說「xxx AI 比 xxx AI 在某方面更強大」，但其實以通用型的 AI 來說，我認為差異不大。會覺得差異大的人那是因為主控權在 AI 手上，所以你在不同的「通用型 AI」會遇到強弱的差異。假如 Vibe Coding 的主控權在你的手上，那麼你問的方式得到的結果可能會有 70-80%的相似度，那代表你也能和網站開發工程師溝通，不會因為遇到不同的工程師，就會產生差異化的結果。
這篇雖然是在分享一個實戰例子，但是到頭來，好像又說了一堆概念。😂
