用 Codex 做品牌網站：不要先寫 code，先做參考圖

我最近在重做 Level UP 官網。原本以為最難的是叫 Codex 寫出前端頁面，實際跑完才發現你能不能先讓 AI 看懂「你的網站應該長什麼樣」。

以前我也會直接跟 AI 說「幫我做一個品牌網站」「幫我把首頁做得有質感一點」。這種講法 AI 不是做不出東西，而是做出來會很像模板——乾淨、完整、沒有明顯錯誤，但就是沒有你的味道。

這次我換了順序：先讓 Codex 整理網站內容，再用 taste skill 生參考圖，接著拆素材，最後才用 Frontend App Builder 復刻成網頁。跑完最好的一件事是——用 AI 做品牌網站，不要一開始就衝去寫 code，你要先做出一張「你和 AI 都看得懂」的參考圖。

一句話結論

如果只記得一件事：用 Codex 做品牌網站，重要的不是一次寫出神級 prompt，是先把你的品牌方向變成一張可以對齊的參考圖。

參考圖不是裝飾品，它比較像你和 AI 之間的設計合約——你看得到，AI 也看得到。後面要拆素材、改版面、調手機版、復刻前端時，才不會一直停在「感覺不太對」這種很難溝通的狀態。

這篇適合誰？

• 想做個人品牌網站，但不是設計師的人
• 已經有品牌內容，想把網站質感拉起來的人
• 用 Codex 做網站，常常覺得結果很模板的人

如果你的品牌還是空的，沒有定位、沒有內容、沒有風格——這套還是能跑，但效果有限。因為 AI 不是憑空生出你的品牌味道，它是讀你的資料、再從裡面整理出方向。你餵給它的 background 越清楚，它越有機會做出像你的東西。

為什麼不要一開始就叫 AI 寫 code？

我以前做網站常犯一個錯：一開始就叫 AI 寫首頁。

請幫我做一個個人品牌網站首頁，要有質感、專業、溫暖，適合 AI 工具教學品牌。

這種 prompt 看起來有講方向，其實不夠。「有質感」是什麼？「溫暖」是什麼？「品牌感」是什麼？沒有更具體的資料，AI 只能用它最安全的理解去做，結果通常會變成：很像 SaaS landing page、很像普通個人網站模板、顏色合理但沒記憶點、區塊都有但每一區都很通用——整體不像你的品牌，只像一個完成度還可以的網站。

這不是 AI 不會寫 code，是它沒有清楚的視覺目標。所以這次我改成先整理背景設計、生參考圖，等參考圖確定了再拆素材、做前端。這樣整個流程好很多，因為你不是叫 AI 猜一個網站，是先讓它做出一張可以對照的設計稿。

先認識用到的工具與 skill

這套流程會用到幾個東西，先搞清楚它們各自的角色：

• Codex：AI 寫程式的 agent。整理內容、拆素材、復刻前端都靠它。能跑這套流程，工具換了流程不變。
• taste skill（imagegen-frontend-web）：這套流程的核心。直接讀你的設計稿與品牌背景、幫你配版面、再畫成有設計感的網頁參考圖。開源，GitHub 在 Leonxlnx/taste-skill。
• ImageGen（codex 內建圖片生成）：用來單獨生素材（頭像、icon、裝飾），跟參考圖細節保持一致。
• Frontend App Builder skill：來自 Codex 插件「Build Web Apps」（在 Codex 左上角插件搜尋就能找到）。把參考圖當設計稿，高保真還原成 HTML/CSS 網頁。它不是設計師，是把你定好的視覺轉成 code 的前端工程師。

一句話記：Codex 是廚房，taste skill 生食譜（參考圖），Frontend App Builder 把食譜變成菜。

我的 4 步流程

1. 整理網站內容文檔
2. 用 taste skill 生成網頁參考圖
3. 拆解參考圖，單獨生成關鍵素材
4. 用 Frontend App Builder 復刻成真實網頁

看起來只是多繞了一圈，但這一圈很重要。因為 AI 做網站最大的問題，通常不是「它不會做」，而是它一開始不知道你真正要的是什麼。

第一步：整理網站內容文檔

第一步我不會直接叫 Codex 做設計，會先讓它整理一份網站內容文檔——比較像給 AI 的網站 briefing。內容大概包含：這個品牌是誰、網站要給誰看、首頁每個區塊的目的、整體視覺要給人什麼感覺、哪些風格不要碰、哪些元素是品牌固定語言。

以 Level UP 來說，我不希望網站變成很冷的科技 SaaS 風格。我們比較像：溫暖、紙感、學習筆記、AI workflow、帶一點復古電腦感——不是那種黑底霓虹、玻璃擬態、超企業感的 AI 官網。這些東西如果沒先寫清楚，AI 很容易自己腦補，而它腦補出來的通常會偏向市場上最常見的模板。

我會用這段 prompt：

請你先不要開始設計網站，也不要寫 code。

我想要重做我的品牌網站，請你先根據我提供的個人資訊、品牌資料、內容定位與目前網站狀況，整理成一份「網站內容與設計」。

請包含以下內容：

1. 品牌定位
- 這個網站要讓誰看
- 使用者進站後應該理解什麼
- 品牌給人的第一印象

2. 頁面結構
- 首頁需要哪些區塊
- 每個區塊的目的
- 區塊之間的閱讀順序

3. 內容重點
- 依前面決定的頁面結構，每個主要區塊要傳達什麼
- 第一眼要讓使用者看到什麼
- 希望使用者最後採取什麼行動（CTA）

4. 視覺方向
- 整體氛圍
- 色彩方向
- 字體層級
- 版面節奏
- 可以參考的設計語言

5. 不適合的方向
- 哪些風格不要使用
- 哪些內容不要過度強調
- 哪些設計會讓品牌感跑掉

最後請輸出成一份可以交給 imagegen-frontend-web skill 使用的網站設計 briefing。

這一步的重點不是產出漂亮的文字，而是把你腦中的品牌方向，整理成 AI 後面可以讀的結構。這一步太空，後面就很容易歪。

第二步：用 taste skill 生成網頁參考圖

這步是整套流程最關鍵的地方。我用的是 taste skill 裡的 imagegen-frontend-web skill，它的用途不是只生一張漂亮圖片，而是根據前面的設計內容，幫你生成比較有設計感的網頁參考圖。

最有價值的地方在於：它會先幫你把內容轉成版面。例如首頁主視覺要怎麼呈現、品牌介紹要怎麼排、最新文章區要怎麼放、CTA 要用什麼情緒收尾。這跟直接叫 AI 寫 code 差很多，直接寫 code 的時候，AI 很容易從 landing page 的慣性出發：上面大標、下面三張卡、最後 CTA。不是不能用，但很容易沒有記憶點。

參考圖的好處是，它先把「網站應該長什麼樣」具體化，你可以直接看：這個畫面像不像我的品牌？這個區塊是不是太滿？這個配色有沒有跑掉？這個風格手機版能不能用？

我會用這段 prompt：

$imagegen-frontend-web

請根據我提供的網站內容與網站設計簡報，生成一組高品質的網頁參考圖。

目標不是做一般 SaaS 模板，而是做出有品牌感、可讀性高、可以被前端實作的網站視覺方向。

請遵守以下要求：

1. 每個首頁主要區塊單獨生成一張參考圖
- 區塊依前面的頁面結構 briefing 決定，不要自己假設

2. 每張圖都要保持同一套品牌語言
- 顏色一致
- 字體層級一致
- 不要每一區都像不同網站

3. 參考圖要有設計感，但不能只是藝術圖
- 文字區域要留乾淨
- 版面要能被 HTML/CSS 實作
- 不要把重要文字直接寫死在圖片裡
- 不要做太多難以維護的複雜裝飾

4. 每張圖請同時輸出
- 視覺描述
- 主要區塊結構
- 哪些部分建議用 code 做
- 哪些部分可能需要獨立素材

一個心得：不要一次叫它生整個長首頁，最好每個區塊單獨生成。因為首頁每一區的目的不一樣，Hero 要吸引人、品牌介紹要建立理解、內容分類要讓人知道你在寫什麼、文章區要能持續更新、底部 CTA 要收束情緒。全部塞在一張超長圖裡，很容易每一區都不夠細；分區生成比較好調整。

第三步：拆解參考圖，單獨生成關鍵素材

參考圖出來後，不是直接丟給 Codex 說「照這張做」——這樣通常會卡。因為參考圖裡有很多東西其實不能直接變成網頁：有些應該用 code 做、有些應該單獨生圖、有些應該用 SVG、有些文字絕對不能寫死在圖片裡。

這一步我一開始也低估了，後來才發現素材拆解是整個流程能不能真正落地的關鍵。例如 Hero 背景可以是一張 WebP，文字要用 HTML，CTA 按鈕要用 CSS，導覽列要用 code，工作流節點線條可以用 SVG，裝飾紙片可以用透明 PNG，文章卡片一定要是可更新的資料結構，手機版背景最好另外做、不要直接裁桌機版。

我會用這段 prompt：

這是我目前生成好的網站參考圖。

請你先不要開始寫 code。

請逐張分析這些參考圖，幫我拆解成可實作的網站素材規劃。

請輸出以下內容：

1. 每張參考圖的區塊目的
2. 哪些元素應該用 HTML/CSS 實作
3. 哪些元素需要單獨生成圖片素材
4. 哪些文字一定要保留為 HTML，不要放進圖片
5. 哪些背景可以做成整張 WebP
6. 哪些裝飾應該拆成透明 PNG 或 SVG
7. 建議檔名與放置路徑
8. 實作優先順序

請特別注意：
- 不要把整張參考圖直接當網頁背景
- 文字、按鈕、導覽列、卡片、CTA 都應該用 HTML/CSS
- 素材要方便 RWD 和後續修改
- 手機版不要直接裁切桌機版背景，要另外規劃手機版裁切

這段真的很重要。很多人用 AI 做網站會犯一個錯：把整張設計圖當背景圖。短期看起來很快，但後面會出現很多問題——文字不能改、SEO 讀不到、手機版不好切、CTA 不能互動、文章不能動態更新。所以我後來會把網站拆成兩層：一層是可維護的 HTML/CSS，另一層是負責品牌氛圍的圖片素材。兩層分開，後面才好改。

哪些東西該用 code，哪些東西該生圖？

這是我這次做完後比較有感的判斷表：

我自己的原則是：只要是「讀者要讀、要點、要互動、要更新」的東西，就不要做成圖片；只要是「負責氛圍、品牌感、裝飾、質感」的東西，才比較適合做成素材。這樣網站才不會變成一張不能維護的漂亮海報。

第四步：用 Frontend App Builder 復刻成真實網頁

前面三步完成後，才進到寫 code。這裡我用的是 Build Web Apps 裡的 Frontend App Builder skill。

這一步的重點不是叫它自由設計，而是請它根據參考圖和素材高保真復刻。它不是設計師，比較像把設計稿轉成網頁的前端工程師。所以 prompt 裡一定要講清楚：不要自由發揮、不要改品牌方向、不要把文字寫死在圖片裡、不要亂重構無關檔案、要對照參考圖逐區檢查、沒做到就繼續迭代。

我會用這段：

$Frontend App Builder，根據我提供的參考圖與素材，重做目前網站首頁。

目標是高保真復刻，不是重新自由發揮。

請按照以下流程執行：

1. 先閱讀目前專案結構
2. 找出首頁相關檔案與 CSS
3. 對照參考圖，整理需要調整的區塊
4. 先列出實作計畫，不要直接大改
5. 開始實作時，請優先保持現有內容與 SEO 結構
6. 文字、CTA、導覽列、卡片請用 HTML/CSS，不要做成圖片
7. 背景與裝飾素材請使用我提供的檔案
8. 完成後請逐區比對參考圖，列出：
   - 已還原的地方
   - 還有差異的地方
   - 可能需要我人工判斷的地方
9. 如果和參考圖差距明顯，請繼續迭代，不要直接宣稱完成。

請避免：
- 自己改掉品牌色
- 自己換版面方向
- 過度重構無關檔案
- 把文字寫死在圖片裡
- 為了好看犧牲手機版可讀性

這裡我覺得最重要的是最後一句：不要直接說完成。AI 很常做出一版看起來差不多的東西就說完成，但實際對照參考圖，常常會發現間距不對、背景不對、素材太大、手機版跑版、按鈕沒有品牌感、文章區看起來像另一個網站。所以我現在會要求它每次改完都要回報差異，而不是只說完成。

我實際卡住的地方

這套流程聽起來很順，但我實際做 Level UP 官網時，花時間的是來回修正，尤其是圖片和素材。

第一，參考圖很漂亮，但不一定能實作。有些圖看起來像完整網頁，但裡面背景、卡片、文字、裝飾全部混在一起。整張拿去當背景，網站會很難維護；全部用 code 做，又很難做出那個質感。這時候要重新判斷：哪些留給 code？哪些拆成素材？哪些乾脆換一種做法？

第二，AI 對「品牌感」的理解需要校正。像 Level UP 的風格，我要的是溫暖紙感、學習筆記、AI workflow、可愛但不幼稚。但 AI 有時候會做得太寫實、有時候太童趣、有時候又變成冷冰冰的科技風。所以我後來不會只說「再有品牌感一點」，而是改成更具體的描述：不要玻璃擬態改成紙感卡片、不要 neon tech 改成溫暖奶油色、不要像企業 SaaS 保留學習筆記感、裝飾要低調中心要留給 HTML 文字。這種具體修正，比單純說「不夠像」有效很多。

這套流程適合什麼情境？

所以這套流程不是魔法，它比較像一個把 AI 產出變穩定的方法。你還是要提供資料、判斷方向、修正細節，只是以前你可能卡在「不知道怎麼把腦中的感覺講清楚」，現在可以先用參考圖把它變成看得見的東西。

常見錯誤（快速檢查清單）

這幾點前面都講過，這裡濃縮成一張檢查表，做完對照一次：

• 一開始就叫 AI 寫完整首頁 → 最快也最容易模板化。先設計、再做參考圖、最後才 code。
• 把整張參考圖當背景 → 文字不能改、SEO 讀不到、手機版難切。背景用圖、文字用 HTML/CSS。
• 圖片素材沒拆開 → 紙片、icon、背景、線條要分開處理，後面才好調位置和做 RWD。
• 手機版直接裁桌機版 → 閱讀順序完全不同，重要物件會被切掉。手機版背景另外生。
• AI 說完成就當完成 → 對照參考圖逐區檢查（對齊、色彩、字體層級、手機版可讀、CTA 清楚、SEO 結構）。不要讓 AI 的「完成」取代你的驗收。

這次我最大的收穫

這次重做官網，我最大的收穫除了學會這些 skill，還有就是體會到 AI 做網站的關鍵，不是讓它一次猜中你要什麼，而是建立一個可以逐步對齊的流程。

以前我會覺得 prompt 要寫得很棒，AI 才能做出好東西。現在我比較不這樣想。更重要的是：你有沒有把任務拆成 AI 比較容易完成的中間產物。網站設計簡報是一個中間產物、參考圖是一個中間產物、素材拆解表是一個中間產物、前端復刻檢查清單也是。這些東西加起來，才會讓最後的網頁更好，不是靠一句 prompt 解決全部問題。

這篇用到的 4 段提示詞，都放在上面各步驟裡，可以直接複製使用。

總結

用 Codex 重做 Level UP 官網，我最大的體會是：AI 做網站不是一句 prompt 就結束，真正好的方式，是把模糊的感覺拆成一個一個可對齊的中間產物。先有網站設計架構、再有參考圖、再有素材拆解、最後才進入前端復刻。

這樣做看起來比較慢，但實際上會少很多來回猜測。因為你不是一直跟 AI 說「再有感覺一點」「再像我的品牌一點」「再高級一點」，可以直接對著參考圖說：這裡要保留、這裡太滿、這裡改成 SVG、這裡不要寫死在圖片裡、這裡手機版要另外做。

最重要是你能不能先把自己的品牌 background 準備好，再一步一步把它變成 AI 看得懂、也做得出來的東西。

如果你也想用 Codex 做自己的網站，我建議不要一開始就叫它直接做。先問自己：我的品牌 background，準備好了嗎？