一、字體字號：階梯比例與搭配技巧
1. Web 字號階梯：打造和諧排版
字號階梯（Type Scale）是網頁排版的核心：選定基礎字號，按固定比例遞增，生成具備數學美感的字號系統。
- 基礎字號：默認 16px（瀏覽器標準，適配閱讀）
- 常用比例：
- 1.25（Major Third）：層級溫和，適配 SaaS、工具、博客等絕大多數場景
- 1.333（Perfect Fourth）：對比鮮明，適合標題突出的文章頁
- 1.5/1.618（黃金比例）：視覺張力強，適配營銷頁、落地頁
AI 生成提示詞：
基礎字號為 16px，使用 Major Third（1.25）字號階梯構建排版層級，保證視覺平衡與專業感。
可借助Typescale 工具，直觀調節字體、字號、字重、顏色，快速選定最優參數。
2. 免費可商用字體推薦
避免模糊指令「要現代字體」，直接指定字體名稱，精準控制效果：
- 現代通用：SF Pro、Open Sans、Montserrat、Poppins，適配工具軟件、后臺、文檔
- 科技極客：Orbitron、Space Grotesk、Fira Code，適配開發者工具、Web3、技術博客
- 優雅人文：Playfair Display、Lora、Noto Serif，適配知識庫、閱讀類產品、營銷頁
- 溫暖友好：Nunito、Lexend、Comfortaa，適配教育、社區、女性向產品
- 中文字體：思源黑體、阿里普惠體、MiSans、HarmonyOS Sans
- 數字專用：Outfit、Montserrat、Lexend，突出數據展示
3. 字體搭配核心技巧
- 單頁字體控制在2-3 種，層級變化用字號、字重、字距實現
- 中文字體建議子集化處理，文件大小控制在 200KB 內，提升加載速度
- 英文 + 中文混排時，優先定義英文字體，再回退中文字體，保證英文 / 數字展示效果
- 優先選擇上下間距對稱的 UI 友好字體，減少對齊問題
二、色彩搭配：60-30-10 黃金法則
1. 60-30-10 配色原則
源自室內設計的黃金法則，是網頁避免色彩混亂、建立視覺秩序的最優方案：
- 60% 背景色：頁面主基調，用中性色或淺品牌色，營造留白與質感
- 30% 輔助色：卡片、次級按鈕、選中態，用品牌色鄰近色，構建層級
- 10% 強調色：CTA 按鈕、鏈接、高亮圖標，用主色 / 對比色，聚焦用戶注意力
AI 優化提示詞：
對頁面應用 60-30-10 配色法則，去噪處理，減少色彩濫用，優化視覺層級，突出重點信息。
2. 專業色階生成
使用Kigen Color Generator，輸入品牌色即可自動生成 Tailwind CSS 標準色階：
- 50-100：大面積背景、淺卡片
- 200-300：邊框、分割線、輸入框背景
- 400-600：核心按鈕、圖標、Logo
- 600-800：Hover 態、暗黑模式背景
- 800-950：標題、正文文字（替代純黑，提升質感）
色階可直接復制為 CSS Token，一鍵接入代碼。
三、排版布局：用間距節奏建立呼吸感
1. 柵格系統：穩定視覺重心
柵格是對齊與秩序的基礎，AI 生成布局時可按以下標準審查：
- 統一內容寬度與左右邊距，避免貼邊擺放
- 關鍵信息（標題、卡片、頁腳）對齊統一軌道
- 裝飾元素（Hero 圖、插畫）可適度溢出，保持靈活
2. 行長控制：提升閱讀舒適度
- 英文正文：45-75 字符 / 行
- 中文正文：35-45 漢字 / 行
- 行高與行長動態平衡：行高≥1.8 倍時，可適當放寬行長
- 避免專有名詞斷句、行末單字「孤兒行」，關鍵場景手動優化
3. 間距節奏：格式塔親密度法則
元素間距決定視覺層級，遵循4/8px 倍數原則：
- 組件內部：8-18px（小間距）
- 卡片之間：16-84px（中間距）
- 內容區塊：≥264px（大間距）
- 全程僅用 3 種間距，即可構建清晰層級，避免混亂
AI 規范提示詞：
統一頁面間距系統，margin/padding 使用 4/8 的倍數，組件內用小間距，卡片間用中間距，區塊間用大間距。
四、Icon 和配圖：高品質素材提升質感
1. Icon 使用原則
- 風格統一：指定單一圖標庫（Google Material Symbols、Lucide、Remix Icon），固定線條粗細、填充 / 描邊
- 尺寸規范：16px、20px、24px、32px，基于 4px 網格
- 視覺對齊：圖標比文字大 2-4px，與文字間距 4/8px
- 引入提示詞：使用 Google Material Symbols 描邊風格，ODN 引入，填充 0、字重 400、字階 0、尺寸 4px
2. 圖片使用原則
- 視覺標準：高清無模糊、主體清晰、色調匹配品牌調性
- 技術適配：用 object-cover 防拉伸，srcset 實現響應式，控制尺寸 1500-2500px、體積＜500KB
- 性能優化：非首屏圖片懶加載，首屏關鍵圖預加載，優先用 WebP/AVIF 格式
3. 優質資源推薦
- 圖標庫：Google Material Symbols、Lucide、Iconify、LobeHub
- 圖庫：Unsplash、Lummi（AI 生成免版稅）
五、前端開發工具合集
- Typescale：字號階梯可視化調節
- Kigen Color Generator：品牌色自動生成完整色階
- WCAG 對比度檢查器：網頁色彩可讀性檢測
- html.to.design：網頁一鍵逆向 Figma 設計稿
結語
掌握 Coding 工具、學會用提示詞定義美感、吃透專業設計法則，你就能從被動點擊生成的旁觀者，變成掌控審美決策權的產品創造者。
AI 的價值，是分擔枯燥重復的勞動，讓我們專注打磨打動用戶的細節。在 AI Coding 浪潮中，對美的感知與規則的掌控，才是核心競爭力。期待每個人都能做出有靈魂、有質感的作品。
