6 個設計術語加實際數字，讓 Claude 做出像設計師做的網站

011. 層次（Hierarchy）

層次是讓讀者一眼知道什麼最重要。做法是字級差距要夠大，而且是一套固定的比例，不是隨手調。

一個大標題，副標小一半。字級 16／20／25／31／39px

16、20、25、31、39 是以 1.25 倍遞增的字級階層。內文 16px 是網頁最常見的起點，每往上一級乘 1.25，標題之間的差距就會剛好、不會太平。

022. 留白（Whitespace）

AI 做的網站常常「擠」，是因為間距沒有系統。用 8 的倍數，所有間距就會互相對得上。

間距用 8 的倍數，section 上下 96px，行高 1.6

8、16、24、32、48、64、96 這幾個數字就夠用。區塊之間 96px 看起來才有「呼吸」；行高 1.6 是中文內文最舒服的範圍。

033. 對齊（Alignment）

12 欄網格，文字靠左對齊同一條線，每行最多 40 個字

12 欄可以切成 2、3、4、6 等分，什麼版面都排得出來。每行 40 個中文字左右最好讀，超過 50 字眼睛會找不到下一行的開頭。

044. 字型配對（Type pairing）

最多兩種字型：標題 Noto Serif TC，內文 Noto Sans TC

一宋一黑是最安全的配對：宋體標題有質感，黑體內文好讀。Noto 系列免費可商用，而且繁體中文字數齊全，不會缺字。

• Noto Serif TC — 標題
• Noto Sans TC — 內文

055. 主色（Primary colour）

60／30／10 配色，強調色只用在按鈕和連結

60% 是底色（通常是白或米白），30% 是次要色（區塊背景、卡片），10% 是強調色。強調色只出現在要人點的地方，讀者的眼睛才知道該去哪。

066. 對比（Contrast）

文字對比至少 4.5:1，主要按鈕全頁最突出

4.5:1 是 WCAG 無障礙標準對一般內文的最低要求。灰色文字放在淺色底上很容易低於這個值，手機在太陽下就看不到。

07萬用 prompt：6 條一次貼

把 6 條規則和你的資料一起貼給 Claude，先要 3 個方向再做完整版，比直接做一版省時間。

幫我做[產業]網站，完全照以上 6 條。先給我 3 個方向選，再做完整版。資料：[貼上]

完整版貼法（6 條規則＋萬用句）：

設計規則：
1. 一個大標題，副標小一半。字級 16／20／25／31／39px
2. 間距用 8 的倍數，section 上下 96px，行高 1.6
3. 12 欄網格，文字靠左對齊同一條線，每行最多 40 個字
4. 最多兩種字型：標題 Noto Serif TC，內文 Noto Sans TC
5. 60／30／10 配色，強調色只用在按鈕和連結
6. 文字對比至少 4.5:1，主要按鈕全頁最突出

幫我做[產業]網站，完全照以上 6 條。先給我 3 個方向選，再做完整版。資料：[貼上]