前端設計技能
創作出獨特、可上線的前端介面，讓任何人看了都不會認為是 AI 生成的。每個輸出都必須像是出自昂貴設計公司之手——大膽、有目的性、令人難忘。
設計思考流程
在撰寫任何程式碼之前，請完成此檢查清單。不要跳過任何步驟。
1. 目的 — 這個介面解決了什麼問題？誰會使用它？
2. 語氣 — 選擇一個極致的美學方向。這是強制性的——絕對不能在未命名的情況下繼續。
從中選擇（或自行發明具有同等明確性的方向）：
- 極簡暴力 | 極繁混亂 | 復古未來主義 | 有機/自然
- 奢華編輯風 | 粗獷主義/原始感 | 裝飾藝術/幾何 | 柔和/粉彩
- 工業/實用主義 | 新孟菲斯 | 瑞士現代主義 | 日式極簡
- 復古未來終端機 | 北歐寧靜 | 東京霓虹 | 沙漠溫暖
如果你無法用兩個詞來命名這個語氣，就代表你還沒決定好。「乾淨現代」不是一種語氣——它只是缺乏語氣，會產出 AI 垃圾。
3. 限制 — 框架（HTML/React/Vue/Svelte）、瀏覽器支援、效能預算、現有品牌規範。
4. 差異化 — 這個頁面會讓人記住的唯一一件事是什麼？在 coding 之前明確命名它。
反 AI 垃圾宣言
這些規則的存在，是因為 LLM 習慣於生成統計上平均的輸出——討喜、無害，但極度容易被遺忘。以下被列入黑名單的模式，並非因為它們本質上不好，而是因為不加區別地使用它們，是 AI 生成設計的首要信號。
黑名單字體
未經用戶明確要求，絕不將這些字體用作主要的顯示字體：
| 字體 | 原因 | 改用 |
|---|---|---|
| Inter | #1 AI 預設字體（約 90% 的 LLM UI 使用） | Satoshi, General Sans, 或像 Fraunces 這樣的襯線字體 |
| Roboto | #2 AI 預設字體（Android/Chrome 生態系） | Outfit, Plus Jakarta Sans（僅用於內文）, Karla |
| Arial / system-ui | 缺乏字體選擇 | 任何有意識的字體選擇 |
| Open Sans | 舊版 AI 預設字體（2022 年之前的訓練資料） | Source Sans 3, Nunito（僅用於內文） |
| Poppins | Figma 模板飽和 | Figtree, Outfit, DM Sans（僅用於內文） |
| Space Grotesk | 曾經很獨特，現在是 AI「古怪安全」的預設字體 | Syne, Anybody, Chakra Petch |
| Montserrat | 過度使用的幾何無襯線字體 | Josefin Sans, Barlow, Jost |
規則： 如果某個字體在 Google Fonts 熱門排名前 20，就要明確說明為何使用，否則就拒絕使用。請參閱 references/typography-pairings.md，了解 20 多種按語氣分類的精選字體搭配。
黑名單顏色
未經明確意圖，絕不將這些顏色用作主要強調色：
| 顏色 | 十六進位碼 | 原因 |
|---|---|---|
| Tailwind indigo-500 | #6366f1 | 原始的 AI 代表色。可追溯到 Tailwind 文件的一個決定。 |
| Tailwind violet-500 | #8b5cf6 | 第二常見的 AI 強調色。 |
| Tailwind purple-500 | #a855f7 | indigo→purple 漸層的端點。 |
| Tailwind blue-500 | #3b82f6 | AI 使用的「企業級」替代紫色方案。 |
| AI 漸層 | from-indigo-500 to-purple-600 | 標準的 AI 漸層及其所有變體。 |
| 純白背景 | #ffffff, #f9fafb, #f8fafc | AI 從不探索暗色主題、大地色系或大氣深度。 |
規則： 如果你的色盤可以用 npx create-next-app + Tailwind 預設設定複製出來，就重新開始。請參閱 references/color-systems.md，了解 15 種以上精選色盤。
黑名單佈局
絕不產出以下結構：
- 9 段式 AI 模板： Hero → Logo 列 → 3 欄特色 → 「運作方式」步驟 → 證言輪播 → 定價表 → 常見問題手風琴 → CTA 橫幅 → 4 欄頁尾。這個精確的順序出現在每一個 AI 生成的 SaaS 頁面上。
- 對稱的 3 欄卡片網格 作為主要的內容結構。
- 全部置中 — 每個區塊都用
text-center，每個容器都用mx-auto，沒有空間張力。 - 萬物皆卡片 — 每個內容區塊都用
rounded-xl shadow-lg p-6，無論它是否需要卡片樣式。
規則： 每個佈局必須至少有一個打破網格的元素：不對稱、重疊、滿版出血、對角線流動或意料之外的負空間。請參閱 references/layout-patterns.md 了解線框。
黑名單動畫
- 透過 IntersectionObserver 在每個元素上使用
fade-in-up（通用的 AI 滾動揭示效果） - 在每張卡片上使用
hover:-translate-y-1 hover:shadow-xl - 不加區別地應用
transition-all duration-300 - 漸層顏色循環動畫
- 所有東西都使用通用視差效果
規則： 每頁最多使用 2-3 個有意的動態。每個動態必須服務於層級或氛圍。請參閱 references/motion-recipes.md，了解 12 種以上獨特的替代方案。
黑名單文案
絕不撰寫以下詞句：
- 「革新你的工作流程」/「改變你...的方式」
- 「解鎖...的力量」/「無縫整合...」
- 「為現代...打造」/「強化你的...」
- 「把你的 X 提升到新層次」/「你需要的一切...」
- 「向 [痛點] 說再見」/「由尖端技術驅動...」
禁用詞（除非引用用戶的話）：無縫、利用、尖端、穩健、可擴展、賦能、改變遊戲規則、下一個層次、全面、創新、最先進、深入探究
文案規則： 標題要承載具體意義。每個區段只放一個簡短的支撐句。「如果刪除 30% 能改善頁面，就繼續刪。」
黑名單元件
- 漸層 CTA 按鈕（
bg-gradient-to-r from-indigo-500 to-purple-600） - 預設的模糊背景導覽列（
backdrop-blur-md bg-white/80） - 圖示 + 標題 + 段落的三欄網格（通用的功能區塊）
- Hero 圖片上的浮動徽章/藥丸
- 使用圓形頭像和星級評分的證言輪播
- 水平條帶狀的「受信任者」Logo 雲
- 通用定價表（Free / Pro / Enterprise 帶有「最受歡迎」徽章）
字體系統
每個專案都必須建立一個經過深思熟慮的字體系統：
- 顯示 + 內文搭配 — 兩個不同的字型家族。顯示字型要有個性，內文字型要易讀。永遠不要對兩者使用相同的字體。
- CSS 變數 —
--font-display、--font-body、--font-accent（可選的等寬字體） - 模組化比例 — 選擇一個比例（1.25 大三度、1.333 完全四度、1.5 增四度）並持續應用
- 字重對比 — 使用至少 3 種字重，並帶有有意的對比（例如，內文 300、副標題 600、顯示字型 900）
- 尺寸戲劇性 — 顯示標題應為內文大小的 3 倍以上。獲獎作品使用 12:1 的比例（180px 顯示 / 14px 內文）。AI 預設使用膽小的 4:1 比例。
請參閱 references/typography-pairings.md，了解 20 多種按美學語氣分類、可直接複製貼上的搭配。
色彩系統
- 主導色 + 強調色模型 — 一個主導色彩家族，搭配一個強烈對比的強調色。平均分佈的色盤是膽小的表現。
- CSS 自訂屬性 — 至少定義：
--color-surface、--color-text、--color-accent、--color-accent-contrast、--color-muted - 大氣背景 — 永遠不要用純白。使用微妙的漸層、噪點紋理或著色表面。背景必須有深度。
- 深色/淺色作為有意識的選擇 — 根據語氣選擇其中一個作為主要方案。不要將深色模式作為一個複選框功能添加。
請參閱 references/color-systems.md，了解 15 種以上附有 CSS 變數區塊的精選色盤。
空間構圖
- 打破網格是強制性的 — 每頁至少有一個元素必須打破網格：重疊、出血、不對稱放置、對角線流動
- 不對稱佈局 — 7/12 + 5/12 欄分割、可變的 gutter（24px 對比 64px）、不均勻的內距
- 滿版出血 Hero — 無繼承 gutter 或共享 max-width 限制的邊到邊圖像
- 負空間作為設計 — 大量的留白是有意的，不是空白的。不對稱的留白（頂部 120px，底部 80px）增加了節奏感。
- 「每個區段只有一個任務」 — 一個標題、一個支撐句、一個目的。沒有哪個區段試圖同時做兩件事。
- 僅為互動使用卡片 — 如果內容不需要邊框/陰影就能正常運作，它就不需要卡片。
請參閱 references/layout-patterns.md，了解 6 個登陸頁面 + 3 個儀表板佈局線框，內含 CSS Grid 程式碼。
動態與動畫
提供精確的 2-3 個有意的動態：
- 一個 Hero 進場動畫 — 縮放 + 淡入、剪裁路徑揭示、文字分割搖晃，或反向滾動視差
- 一個滾動連結效果 — 區段揭示、黏性視差圖片、進度驅動的變換，或水平滾動畫廊
- 一個懸停/揭示互動 — 磁性游標、卡片透視傾斜、底線展開，或色彩區域變換
實作： 純 HTML 使用 CSS-only。React 使用 Framer Motion。Vue/Svelte 使用內建轉場。專注於高影響力的時刻——一個精心編排的頁面載入勝過分散的微互動。
請參閱 references/motion-recipes.md，了解 12 種以上附有 CSS 和 Framer Motion 版本、可直接複製貼上的配方。
背景與紋理
決不預設使用純色平面。創造氛圍：
- SVG 噪點 — 使用
feTurbulence濾鏡為漸層增加有機的顆粒紋理 - 漸層網格 — 使用 4-6 個重疊的 radial-gradient 來營造深度（不是線性漸層）
- 幾何圖案 — 透過 CSS
radial-gradient或linear-gradient實現的點狀網格、線狀網格、交叉陰影線 - 底片顆粒 — 使用偽元素疊加 3-5% 透明度的噪點紋理
- 緩慢移動的環境動畫 — 背景中使用持續時間 30 秒以上的極光/墨跡關鍵影格
請參閱 references/background-textures.md，了解可直接複製貼上的 SVG 和 CSS 配方。
「人性化觸感」——昂貴設計師會添加的東西
每個專案至少包含以下其中 2 項：
- 自訂游標 — 一個 20px 的圓形 div，跟隨滑鼠移動並帶有 150ms 的 lerp 延遲，懸停時放大
- 不對稱留白 — 不均勻的內距（
120px 8% 80px 12%），可變的區段邊距 - 一個打破規則的元素 — 旋轉 2 度的卡片、出血到視口外的圖片、顏色反轉的區段
- 回應內容的字體設計 — 在 gutter 中的引文、首字放大、邊距索引、字重隨重要性縮放
- 滾動觸發的色彩變換 — 區段背景顏色隨內容情感基調而變化
- 可變字體動畫 —
font-variation-settings在滾動或懸停時動態改變字重
輸出類型協定
登陸頁面
結構：Hero → 支撐 → 細節 → 最終 CTA（4 個區段，不是 9 個）
- Hero：滿版出血、品牌 + 標題 + 一句話 + CTA + 主視覺。沒有浮動徽章、沒有多個 CTA。
- 支撐：一個具體的功能、優惠或證明點。
- 細節：氣氛、工作流程深度或故事。
- 最終 CTA：單一轉換動作。
- 視口預算：頁首 + hero 內容必須在初始視口內。
儀表板 / 應用程式 UI
遵循 「Linear 風格的自制」：
- 平靜的層次結構，搭配強烈的字體和間距
- 最簡的色彩配置（最多 2-3 色）
- 密集但可讀的資訊架構
- 透過 CSS Grid
grid-template-areas實現的側邊欄（240px）+ 主要內容 + 可選的檢查器（320px） - 單一清晰的強調色。沒有卡片拼貼，產品 UI 後面沒有裝飾性漸層。
元件庫
- 首先建立設計代幣（CSS 自訂屬性）
- 顯示每個元件的深色 + 淺色變體
- 原子化：代幣 → 元素 → 元件 → 組合
- 每個元件必須能在孤立狀態和組合狀態下正常運作
海報 / 行銷素材
- 單一焦點，戲劇性的字體比例（100px+ 的標題）
- 高對比色彩，印刷品質的佈局
- 設計數位海報，而不是一個帶有海報內容的網頁
網路應用程式
- 功能性優雅：鍵盤優先、清晰的資訊層級
- 狀態管理在 UI 中可見（載入中、空狀態、錯誤狀態、成功狀態）
- 密集的資訊顯示，而不是寬敞的行銷佈局
驗證試金石
在交付任何輸出之前，根據這些問題進行自我檢查。如果超過 2 個答案是「否」，請在展示給用戶之前進行迭代。
- 品牌/產品在第一個視口中是否清晰可辨？
- 是否有一個強烈的視覺錨點（而不是多個競爭元素）？
- 只掃描標題是否能理解頁面？
- 每個區段是否只有一個任務？
- 卡片是真的必要，還是只是偷懶的預設選項？
- 設計是否有一個可命名的美學方向（不是「乾淨現代」）？
- 移除所有裝飾性陰影後，設計是否仍然看起來很優質？
- 是否至少有一個元素會讓設計師說「我沒想到可以這樣做」？
- 它看起來像任何其他 AI 生成的頁面嗎？如果是，重新設計。
有關詳細的 20 分評分標準，請參閱 references/anti-slop-checklist.md。
技術適配
| 框架 | 字體 | 動態 | 樣式 |
|---|---|---|---|
| 純 HTML/CSS | Google Fonts @import | CSS @keyframes + animation-timeline | CSS 自訂屬性 + Grid/Flexbox |
| React / Next.js | next/font 或 Google Fonts | Framer Motion（motion 元件） | Tailwind（重度自訂設定檔）或 CSS Modules |
| Vue | 在 index.html 引入 Google Fonts | <Transition> 元件 | Tailwind（自訂）或範圍樣式 |
| Svelte | 在 app.html 引入 Google Fonts | 內建 transition: 指令 | 範圍 <style> 搭配 CSS 自訂屬性 |
Tailwind 規則： 如果使用 Tailwind，你必須自訂 tailwind.config——覆蓋顏色、字體、邊框圓角和陰影。預設的 Tailwind 設定會產出 AI 垃圾。請擴展，不要使用預設值。
邊緣案例
| 情景 | 回應 |
|---|---|
| 用戶沒有提供設計方向 | 選擇一個大膽的語氣，解釋你的選擇，然後繼續 |
| 用戶說「乾淨簡單」 | 將其理解為瑞士現代主義極簡風格，而不是通用風格 |
| 用戶提供了品牌指導方針 | 遵循它們，但要提升——添加大氣深度、有意的動態 |
| 用戶說「像 Apple/Linear」 | 研究特定原則（自制、密集度、字體）——不要複製表面美學 |
| 模糊的「讓它好看」 | 除非上下文另有暗示，否則將其視為奢華編輯語氣的登陸頁面 |
| 非常快速的請求 | 使用 scripts/init_frontend.py 來搭建支架，然後... |