最近我用 Claude 重建了整個網站。
因為要進行網頁設計，我找了蠻多風格參考。但後來實際做 AI 網頁設計 的時候發現，風格其實是次要的，它都能做到很好。真正會遇到問題的是結構面。
比如當我要它把東西放在左側的時候，它很容易會放得太靠近邊緣，導致畫面看起來很不舒適。但當你叫它往右的時候，它很容易又會偏到另一邊去，或者是沒有辦法精準地落在你想要的位置上。
所以這篇最想先講的一個 AI 網頁設計觀念是：在你開始做任何風格設置之前，先把結構設置好。下面照「結構 → 風格 → 收尾」的順序，把我實際的做法整理給你（運用以前學過一點的網頁設計）。
AI 網頁設計會遇到什麼問題？
AI 網頁設計最常出問題的不是風格，是結構。你會遇到的是：物件貼到畫面邊緣、叫它往右又偏過頭、整頁字級忽大忽小到看不清楚。解法是在調任何顏色和字體之前，先設定好兩件事——網頁邊界（用 Grid 或 Flexbox 分欄、加上間距與留白）和文字層級（先規定 H1 到 H5 與內文可以用的字級）。結構定下來，風格就不會跑版。
AI 網頁設計適合誰做
最適合的是不會寫程式、但需要一個網站的一人事業主：想自己做形象官網、想自己改銷售頁、想把品牌風格固定下來重複使用的人。你不需要懂 CSS 語法，只要講得出「這裡太靠邊」「這個字太小」，剩下的交給 AI 執行。
如果你要的是有複雜動畫、像素級自訂的網站，那還是找專業前端比較快；AI 網頁設計的強項是把 80 分的東西快速做出來，而不是做到 100 分。
AI 網頁設計第一步：設定網頁邊界，AI 才不會把東西擺到邊緣
方法一：讓 AI 給你座標
第一個是比較簡單的方式：叫它標座標給你，你再看著圖告訴它，你想要放在哪一個座標位置上。
方法二：用 Grid 或 Flexbox 決定分欄
第二個是跟它說：利用 Grid（網格）或 Flexbox（彈性）布局，來決定畫面要分成幾欄。
✦設計白話文
Grid（網格）：就像一個個棋盤格，每個人都要站在格子裡。Flexbox（彈性）：就像一條排隊的人龍，人多的時候會擠一擠，人少的時候中間會有空間。
| Grid（網格） | Flexbox（彈性） | |
|---|---|---|
| 排法 | 橫向直向一起排，像棋盤格 | 單一方向排成一排，像人龍 |
| 適合的版面 | 整頁分欄、卡片牆、圖文並列 | 導覽列、按鈕組、單排的圖示與文字 |
| 位置控制 | 可以指定放在第幾欄第幾列 | 依照順序排，用對齊方式微調 |
| 怎麼跟 AI 講 | 「這一區用 Grid 分成三欄」 | 「這排按鈕用 Flexbox 靠右對齊」 |
用 gap、margin、padding 調間距與留白
然後後續搭配 gap、margin 和 padding 去設置欄與欄之間的間距與留白。
這些分別對應不同位置的間距，但講起來有點複雜，可以直接口語跟 AI 說「上面太窄」就好；也可以直接說：「請幫我加上適當的 padding / gap / margin，不要讓物件貼邊。」
簡單來說，我們先限制了「網頁可以放東西的位置」，AI 就不會把東西放到邊疆。
AI 網頁設計第二步：設定文字層級，避免整頁字級忽大忽小
再來，我遇到的是文字層級的問題。
AI 有時候會加一些裝飾字或是一些小標籤來豐富畫面，但在它沒有先設定好文字層級的情況下，你的整個網頁可能會出現十幾種不同的字級大小。也就是說，你的網站文字會忽大忽小，有時候甚至會小到看不清楚，這種情況很常發生。
建議你可以先讓 AI 制定以下層級：
- H1~H5 標題（要到 H6 也可以）
- 一般文字大小（電腦 ≥16pt／手機 ≥14pt）
- 註記 / 標籤（小於一般文字）
| 層級 | 用在哪 | 建議設定 |
|---|---|---|
| H1 | 整頁只有一個的主標題 | 全頁最大，一頁只用一次 |
| H2 | 大段落的標題 | 明顯小於 H1，但要比內文大很多 |
| H3 到 H5 | 段落底下的小標 | 每往下一階就縮小一級，不要跳號 |
| 一般內文 | 主要閱讀的文字 | 電腦 ≥16pt、手機 ≥14pt |
| 註記與標籤 | 圖說、小標籤、補充說明 | 小於內文，但不要小到看不清楚 |
先強行規範它可以使用的字級大小，它之後就比較不會突然有時候用 13，有時候用 18。
AI 網頁設計的風格怎麼調：顏色、字體、區塊
基本上有前面做好的結構，就不太會跑版。在這個情況下，我們再去調整風格設計，呈現出來的網頁會比較接近成品。
整體設計
風格部分，你可以先提供一些 prompt，或者是直接告訴它你想要什麼樣的風格、什麼樣的色彩等等，然後再根據生成結果微調。比如：
- Apple 的極簡風格（夠知名不用描述）
- 像這個範例網站（貼上連結）
- 別人分享的 Prompt（貼上指示詞）
生完初稿後，再來進行細節微調。
顏色設計
我的品牌色是大地色系，但之前我一直覺得缺乏一個強調色，所以這次色系有針對這件事調整。討論後我挑選了一個暖色調橘色，當作強調色。這個顏色跟品牌的大地色系很接近，但又足夠亮、對比夠強，在一片咖啡色中能跳出來，並達到強調重點的效果。
會建議你在挑選色彩的時候，可以從這兩點出發：
- 你的品牌色
- 用色彩心理學挑選配色
在配色部分，我會建議：主色系 + 無彩色（黑灰白）+ 強調色。這樣其實就很夠用，不需要額外的顏色了（主色系比較明艷的顏色也可以直接拿來當強調色）。像我這個主色調就是大地色系，因為是同類型的顏色，即使深淺度不同，看起來還是很協調。
字體
字體主要簡單分類就是三種：無襯線、有襯線、手寫字。
- 無襯線：比較現代、有簡約感
- 有襯線：比較優雅、復古、傳統
- 手寫字：個性強烈，通常拿來做裝飾
這部分挑選你喜歡的字體就好，但是要注意一下字體的版權。建議大家去挑免費、可商用的字體，你可以在 Google Fonts 裡挑選，全部都是免費可用字體，而且也能雲端載入。
區塊物件統一
我自己習慣會把物件的風格做統一的處理，比如說列表、表格、一些 highlight，還有步驟類的這些常用樣式，我都會先一起設置。這樣可以確保你的風格統一，看起來像是同一個品牌。
至於具體可以設定什麼，其實還蠻細節的，包含：
- 區塊造型：要不要導圓角？要不要有線條？後面要不要壓陰影？要不要加圖示裝飾？（像我通常都會導圓角，因為喜歡比較柔和的感覺）
- 列點設計：列點要不要有背景框？前面的標記要不要換樣式？
- 文字強調：怎麼強調你的文字？在底下畫線？還是螢光筆效果？
可以設置的細節非常多，這些只是舉例，可以依照你個人偏好調整。
收尾：把風格存成品牌規範重複使用
基本上到這邊，你的網頁應該就已經有蠻清楚的樣式了。接下來就是調整一些文案，以及一些你不喜歡的細節，像是想不想要加上動態效果或者一些裝飾的元素。這樣基本上你就可以獲得一個不錯的網站。
調整完之後可以再進一步，讓它存成品牌規範，讓以後製作電子書、簡報，它都能使用相同風格。我平常也是把同一套規範接到其他工作流裡，像我在 Claude Cowork 初體驗 裡分享過的那些日常任務，都可以共用同一份品牌設定。
以後就能無痛產出大部分內容啦。
AI 網頁設計常見問題
不會寫程式可以做 AI 網頁設計嗎？
可以。你要做的是把需求講清楚——想分幾欄、字級怎麼分層、要什麼風格，AI 負責把它變成程式碼。看不懂的名詞直接問它，或者用口語描述「這裡太靠邊」「這個字太小」也一樣有效。
AI 網頁設計做出來的網頁為什麼一直跑版？
通常是因為一開始就直接談風格，沒有先定結構。AI 沒有邊界可依循的時候，物件就會貼邊或偏移。先用 Grid 或 Flexbox 決定分欄、加上 gap 與 padding，再設定文字層級，跑版的情況會少非常多。
要用哪一個 AI 做網頁設計比較好？
能直接操作你資料夾、建立與修改檔案的工具會順很多，例如 Claude Code、Claude Cowork 這類。只能在對話框回傳程式碼的版本也做得出來，只是每次修改都要自己複製、存檔、重新測試。
AI 網頁設計做出來的東西可以直接上線嗎？
初稿通常還需要收尾：檢查手機版、調文案、統一區塊樣式。建議先在自己電腦上完整看過每一頁、每一種裝置尺寸，再上線。
要怎麼讓 AI 照我的品牌風格做？
把品牌色、字體、區塊樣式（圓角、陰影、列點標記、文字強調方式）先一次講清楚，讓它存成一份品牌規範。之後做電子書、簡報、其他頁面都叫它沿用同一份，風格就會一致。
網頁用的字體有版權問題嗎？
有。商用一定要挑免費可商用的字體，Google Fonts 上的字體全部免費可用，而且能雲端載入，是最省事的選擇。
AI 網頁設計的手機版要注意什麼？
手機最常出問題的是字太小和物件擠在一起。內文至少 14pt，並且明確要求它做響應式；做完一定要自己用手機實際打開看過，不要只信電腦上的縮放預覽。
結語
AI 網頁設計最容易讓人放棄的通常不是風格不好看，而是東西一直跑到你不想要的位置。先把邊界和文字層級定下來，再談顏色和字體，做出來的網站就會穩定很多。
如果大家有興趣，也可以來我的網站看看：storyofdream.com。不想自己從頭設定這些結構的話，我也有提供品牌風格設計服務，直接幫你把整套視覺規範定下來。你在用 AI 做網頁的時候，最常遇到的問題是排版跑掉，還是風格抓不準？
