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