用 Codex 做出有設計感網站：情緒板、首屏切片與設計系統的實作方法

本文定位：先把設計決定做清楚，才讓工具開始生成

這段影片的核心，不是教人用一句「做個很高級的網站」換到成品，而是把 AI 建站前的設計工作拆成三個步驟：情緒板、首屏主視覺切片、設計規範。影片說明明確列出這三點；本機語音轉錄亦可辨識到「不要一上來生成完整網站」、「先出一個首屏大圖主視覺」及「設計規範」等內容。

查核限制：原片沒有公開字幕。本機以 whisper.cpp tiny 模型產生約 2 分 25 秒的時間軸轉錄，但中文辨識有明顯錯字，因此本文只以影片說明與可辨識轉錄互相印證的方向作事實描述；其餘內容是基於這三個方向整理的實作建議，不假裝是逐字稿，也不把片名中的「Awwwards 獲獎」視為對指定作品的獨立查證。

為何許多 AI 網站一眼像模板？

問題通常不在工具不會寫版面，而在輸入只留下模糊形容詞：高級、科技感、帶動畫、好看。沒有明確邊界時，產出很容易回到平均值：紫藍漸層、三欄卡片、漂浮圖示、過多圓角與每一區都想搶注意力。元素很多，但沒有主角；效果很多，但沒有閱讀節奏。

避免模板感的做法不是堆更多特效，而是預先固定三類決定：

1. 視覺證據：你真正喜歡的畫面比例、字體情緒、留白、光線與材質。
2. 首屏訊息：訪客三秒內應感到甚麼、明白甚麼、可以做甚麼。
3. 系統規則：之後所有頁面都遵守同一套色彩、字級、按鈕、空間與動效原則。

技巧一：情緒板的作用，是把「喜歡」翻譯成限制

情緒板不是收集很多漂亮截圖，而是為設計提供可觀察的規則。不要只寫「想要精品感」，應該能回答：背景偏暖白還是近黑？主視覺佔半個畫面還是只是點綴？大標是有工藝感的襯線字，還是精準的無襯線字？強調色是一種還是兩種？互動的主角究竟是圖片、文字，還是資料路徑？

一份可交給開發或 AI 工具的情緒板，至少要註明以下五項：

• 構圖：文字、主圖、CTA 的位置，以及是否需要一張完整的視覺舞台。
• 色彩比例：例如 70% 暖白、20% 淺藍、8% 深藍、2% 金色；避免只有「藍色系」。
• 材質：玻璃、紙張、網格、顆粒、金屬、霧光之中只保留一至兩種主材質。
• 字體性格：品牌大標的情緒，與段落閱讀的可讀性分開處理。
• 動效界線：只指定一個值得動的主角；其餘內容安靜，讓資訊有呼吸空間。

把這些規則寫成硬條件會更有效，例如：「首屏只保留一個主視覺；不可用卡片網格取代首屏敘事；只有一個高對比主行動；裝飾不可壓過主標；手機優先保留標題與預約入口。」這比「請做得不像 AI」可執行得多。

技巧二：先把首頁首屏做成一張能被評審的切片

影片提倡不要一開始要求生成整個網站，而是先做一個完整的首屏主視覺。這是很實際的工作方式：首屏同時決定品牌第一印象、資訊層級、文字密度、色彩比例與後續動效的上限。如果它未能成立，擴寫出十個區塊只會把問題放大。

一個服務型網站首屏應依序回答三件事：

• 你是誰：用品牌名稱、語氣和視覺材質建立身份。
• 你解決甚麼：用一句不能被同業直接替換的主標說清楚客戶結果。
• 下一步是甚麼：讓主要行動按鈕不用思考也能找到、按下。

實作時，先只完成桌面與手機兩個靜態畫面，再檢查眼睛會否按「品牌提示 → 主標 → 價值說明 → 主行動 → 主視覺」的次序移動。若這五層尚未清楚，不應急著加入粒子、影片背景或大量捲動動畫。

動效應在靜態版通過後才加入

高質感動效的目的，是引導注意力，而不是證明網站很會動。比較可靠的做法是只選一個高價值動作：主視覺隨滑鼠產生 4–10px 的細微視差；區塊進入視窗時以短暫、低位移方式顯示；或為目前導覽、問題排解 展開列與主要按鈕提供清楚狀態。

避免每張卡片不斷漂浮、每個標題都跳入，或把延遲載入誤認成電影感。所有動效都應照顧 prefers-reduced-motion，並在手機與低效能裝置維持可讀、可按、可捲動。

技巧三：把品牌人設與設計規範變成專案的長期記憶

一個漂亮首屏不會自動令全站一致。每次修訂、加新頁或換人協作時，若沒有一份可參考的規範，版面很容易重新滑回預設卡片和通用漸層。影片建議使用專案文件固定這些決定；可命名為 DESIGN.md、設計簡報或團隊規則，形式不重要，內容可被重用才重要。

品牌人設並非虛構故事，而是界定文字與畫面的態度。面向小型企業的服務網站，應把可靠、透明報價與清楚聯絡方式排在炫技前面；創作作品集可更實驗；健康或金融內容則需要更克制的動態與更高閱讀對比。規範的價值，是讓每一次生成都有相同邊界，避免風格漂移。

可重複使用的七步工作流程

1. 選 5–10 張參考畫面：每張只標出一兩個值得借用的決定，不複製商標、插圖或文案。
2. 寫一頁視覺簡報：列出受眾、首屏訊息、色彩比例、材質、字體性格與禁止項目。
3. 只做首屏：同時看桌面與手機，未通過前不要急著填滿服務、問題排解 和頁尾。
4. 以真實內容壓力測試：換上真實中文標題、服務名稱、價格和聯絡方法，避免只在假文案時漂亮。
5. 加入一個主動效：確認它有助理解或引導，而不是搶走行動按鈕。
6. 把成功決定寫回規範：新頁、卡片與 CTA 從規範延伸，不再重新猜測。
7. 最後才擴展全站：服務、流程、案例、問題排解 和預約入口沿用同一個層級與間距系統。

四個常見誤區

• 完整複製參考站：既有授權風險，也會失去自己的品牌與使用情境。借的是決策邏輯，不是資產。
• 桌面漂亮、手機失控：長標題、主視覺與雙 CTA 都必須在窄螢幕實測。
• 動效凌駕轉換：服務網站的查詢、預約、價格前提和信任資訊，必須比動畫更快被找到。
• 只靠單次提示詞：沒有規範的生成會在每次修改後回到平均模板；設計系統才是可長期使用的輸入。

結語：高級感是一連串有意識的取捨

網站有沒有設計感，通常在寫第一行 CSS 前已決定一半：是否清楚知道想讓誰感到甚麼、首屏應保留哪一件事、哪些元素不應出現。情緒板提供邊界，首屏切片提供可評審的焦點，設計規範把好結果變成可重複的系統。當這三件事先確定，Codex 或任何開發工具才真正是在加速，而不是把網站帶回一眼可辨的模板感。

來源與限制

• Bilibili 原片：Codex建站教程｜3个技巧做出Awwwards获奖网站
• 影片公開說明列出三個方向：情緒板、主視覺切片、品牌人設與設計規範。
• 本機音訊轉錄使用 whisper.cpp tiny 模型；轉錄保留於文章工作資料夾，因中文辨識誤差明顯，未作逐字引用。