tasteskill: 反「AI 味」前端技能
登陸頁面、作品集和重新設計。不是儀表板、不是資料表格、不是多步驟產品 UI。 以下每一條規則都是視情況而定的。沒有一條會自動觸發。先閱讀需求摘要，然後只提取適用的部分。
0. 需求推斷（在開始任何事情之前，先觀察環境）
在碰觸程式碼或調整設定之前，推斷使用者真正想要的是什麼。大多數 LLM 設計輸出之所以糟糕，是因為模型跳轉到預設的美學，而不是觀察環境。
0.A 首先讀取以下訊號
- 頁面類型 - 登陸頁面（SaaS / 消費者 / 代理商 / 活動）、作品集（開發者 / 設計師 / 創意工作室）、重新設計（保留 vs. 全面翻新）、編輯 / 部落格。
- 使用者使用的氛圍詞 - "極簡主義"、"平靜"、"Linear 風格"、"Awwwards"、"野獸派"、"高級消費品"、"蘋果風格"、"俏皮"、"嚴肅 B2B"、"編輯風格"、"代理商風格"、"玻璃質感"、"黑暗科技風"。
- 參考訊號 - 他們連結的 URL、貼上的螢幕截圖、提到的產品、競爭的品牌。
- 目標受眾 - B2B 採購小組 vs. 注重設計的消費者 vs. 瀏覽作品集的招聘人員。受眾決定美學，而不是你的品味。
- 已存在的品牌資產 - 標誌、色彩、字體、攝影作品。對於重新設計，這些是起點材料，不是可選輸入（參見第 11 節）。
- 隱性限制 - 無障礙優先的受眾、公共部門、受監管行業、信任優先的商業、兒童產品。這些限制凌駕於美學偏好之上。
0.B 在生成之前，輸出一行「設計解讀」
在任何程式碼之前，用一句話陳述：「我將其解讀為：<頁面類型>，目標受眾為<受眾>，帶有<氛圍>語言，方向偏向<設計系統或美學家族>。」
範例解讀：
- 「我將其解讀為：面向技術採購者的 B2B SaaS 登陸頁面，帶有 Linear 風格的極簡語言，方向偏向 Tailwind 工具類 + Geist + 克制動畫。」
- 「我將其解讀為：面向招聘經理的作品集，帶有編輯 / 動態文字語言，方向偏向原生 CSS + 滾動驅動動畫 + 客製字體排印。」
- 「我將其解讀為：公共服務網站的重新設計，帶有信任優先語言，方向偏向 GOV.UK Frontend 或 USWDS。」
0.C 如果需求不明確，問一個問題，不要猜測
只問一個澄清問題——絕不要傾倒多個問題——並且僅在設計解讀真正出現分歧時。範例：「你希望它感覺更接近 Linear 的簡潔，還是 Awwwards 的實驗性？」
如果你能從上下文自信地推斷，就不要問。直接宣告設計解讀並繼續進行。
0.D 反預設紀律
不要預設使用：AI 紫色漸層、位於深色網格上的居中主視覺、三個等寬功能卡片、到處都是通用玻璃擬態效果、無處不在的無限循環微動畫、Inter + slate-900。這些是 LLM 的預設值。根據設計解讀，有目的地超越它們。
1. 三個旋鈕（核心配置）
在設計解讀之後，設定三個旋鈕。以下所有的佈局、動畫和密度決策都由這些旋鈕決定。
DESIGN_VARIANCE: 8- 1 = 完美對稱，10 = 藝術混沌MOTION_INTENSITY: 6- 1 = 靜態，10 = 電影級 / 物理模擬VISUAL_DENSITY: 4- 1 = 藝術畫廊 / 通透，10 = 駕駛艙 / 資料密集
基線： 8 / 6 / 4。除非設計解讀覆寫它們，否則使用這些值。不要要求使用者編輯此檔案——覆寫透過對話進行。
1.A 旋鈕推斷（設計解讀 → 旋鈕數值）
| 訊號 | VARIANCE | MOTION | DENSITY |
|---|---|---|---|
| "極簡 / 乾淨 / 平靜 / 編輯風格 / Linear 風格" | 5-6 | 3-4 | 2-3 |
| "高級消費品 / 蘋果風格 / 奢華 / 品牌" | 7-8 | 5-7 | 3-4 |
| "俏皮 / 狂野 / Dribbble / Awwwards / 實驗性 / 代理商風格" | 9-10 | 8-10 | 3-4 |
| "登陸頁 / 作品集 / 行銷網站（預設）" | 7-9 | 6-8 | 3-5 |
| "信任優先 / 公共部門 / 受監管 / 無障礙關鍵" | 3-4 | 2-3 | 4-5 |
| "重新設計 - 保留" | 比對現有 | +1 | 比對現有 |
| "重新設計 - 全面翻新" | +2 | +2 | 比對現有 |
1.B 使用案例預設
| 使用案例 | VARIANCE | MOTION | DENSITY |
|---|---|---|---|
| 登陸頁（SaaS，主流） | 7 | 6 | 4 |
| 登陸頁（代理商 / 創意） | 9 | 8 | 3 |
| 登陸頁（高級消費者） | 7 | 6 | 3 |
| 作品集（設計師 / 工作室） | 8 | 7 | 3 |
| 作品集（開發者） | 6 | 5 | 4 |
| 編輯 / 部落格 | 6 | 4 | 3 |
| 公共服務網站 | 3 | 2 | 5 |
| 重新設計 - 保留 | 比對現有 | 比對現有+1 | 比對現有 |
| 重新設計 - 全面翻新 | +2 | +2 | 比對現有 |
1.C 旋鈕如何驅動輸出
將這些（或使用者覆寫的值）用作全域變數。本文檔中的交叉引用均指向這些確切的變數名稱——絕不要創造像 LAYOUT_VARIANCE 或 ANIM_LEVEL 這樣的別名。
2. 需求 → 設計系統對應
一旦你有了設計解讀（第 0 節）和旋鈕（第 1 節），選擇正確的基礎。不要為那些有官方套件的東西發明 CSS。不要假裝一個美學趨勢就是一個官方系統。
2.A 何時使用真實的設計系統（使用官方套件）
| 需求解讀為… | 使用 | 原因 |
|---|---|---|
| Microsoft / 企業 SaaS / 儀表板 | @fluentui/react-components 或 @fluentui/web-components | 官方 Fluent UI，Microsoft 標記，內建無障礙 |
| 類似 Google 的 UI，Material 風格的產品 | @material/web + Material 3 標記 | 官方，可透過 Material Theming 設定主題 |
| IBM 風格 B2B / 企業分析 | @carbon/react + @carbon/styles | 官方 Carbon，成熟的資料密度模式 |
| Shopify 應用表面 | polaris.js web 元件 / Polaris React | Shopify 管理 UI 所需 |
| Atlassian / Jira 風格產品 | @atlaskit/* + @atlaskit/tokens | 官方 Atlassian DS |
| GitHub 風格的開發工具 / 社群頁面 | @primer/css 或 @primer/react-brand | 官方 Primer；行銷用 Brand 變體 |
| 英國公共服務 | govuk-frontend | 法律 / 法規上預期 |
| 美國公共部門 / 信任優先 | uswds | 同上 |
| 快速本地商業 / 代理商 MVP | Bootstrap 5.3 | 樸實、快速、有效 |
| 現代無障礙 React 基礎 | @radix-ui/themes | 原語 + 精緻主題 |
| 現代 SaaS，你擁有元件 | shadcn/ui (npx shadcn@latest add ...) | 你擁有程式碼，易於自訂；絕不交付預設狀態 |
| 基於 Tailwind 的現代 SaaS / AI 行銷 | Tailwind v4 工具類 + dark: 變體 | 獨立開發者和小團隊建構的預設值 |
誠實規則： 如果需求解讀與上述系統之一相符，請安裝並使用官方套件。不要手動重建其 CSS。不要導入系統的標記然後覆寫掉 90%。
每個專案一個系統。 不要在同一棵樹中混合使用 Fluent React 和 Carbon。不要將 shadcn/ui 組件導入 Material 3 應用程式。
2.B 當需求是一種美學，而不是一個系統時
對於這些方向，沒有單一的官方套件。使用原生 CSS + Tailwind + 一個維護良好的元件庫來建構。在程式碼註解中誠實標明哪些是借用靈感，哪些是官方素材。
| 美學 | 誠實實作 |
|---|---|
| 玻璃擬態 / "磨砂玻璃" | backdrop-filter，分層邊框，高光疊加層。為 prefers-reduced-transparency 提供實色填充後備方案。 |
| Bento（蘋果風格的瓷磚格線） | 使用混合單元格大小的 CSS Grid。沒有單一函式庫擁有此實作。 |
| 野獸派 | 原生 CSS、等寬字體、原始邊框。沒有函式庫。 |
| 編輯 / 雜誌風格 | 襯線字體、不對稱格線、大量留白。沒有函式庫。 |
| 黑暗科技 / 駭客風格 | 等寬 + 重點色霓虹燈、終端機風格。沒有函式庫。 |
| 極光 / 網格漸層 | SVG 或分層徑向漸層。沒有函式庫。 |
| 動態文字 | 原生 CSS 動畫、滾動驅動動畫、用於進階操控的 GSAP。沒有函式庫。 |
| Apple Liquid Glass | Apple 僅為 Apple 平台記錄此效果。沒有官方的 liquid-glass.css。 網頁實現是使用 backdrop-filter + 分層邊框 + 高光的近似值。清楚標明為近似值。 |
3. 預設架構與慣例
除非設計解讀選擇了真實的設計系統（第 2.A 節），否則以下是預設值：
3.A 技術棧
- 框架： React 或 Next.js。預設使用伺服器元件 (RSC)。
- RSC 安全： 全域狀態僅在客戶端元件中運作。在 Next.js 中，將 Provider 包裹在一個
"use client"元件中。 - 互動隔離： 任何使用 Motion、滾動監聽器或指針物理效果的元件，必須是一個孤立的葉節點，並在頂部加上
'use client'。伺服器元件只渲染靜態佈局。
- RSC 安全： 全域狀態僅在客戶端元件中運作。在 Next.js 中，將 Provider 包裹在一個
- 樣式： Tailwind v4（預設）。只有當現有專案要求時才使用 Tailwind v3。
- 對於 v4：不要在
postcss.config.js中使用tailwindcss插件。使用@tailwindcss/postcss或 Vite 插件。
- 對於 v4：不要在
- 動畫： Motion（前身為 Framer Motion 的函式庫）。從
motion/react導入（import { motion } from "motion/react"）。framer-motion套件仍然可以作為舊版別名使用——在新程式碼中偏好使用motion/react。 - 字體： 始終使用
next/font（Next.js）或使用@font-face+font-display: swap自行託管。永遠不要在生產環境中透過<link>連結 Google Fonts。
3.B 狀態管理
- 使用局部
useState/useReducer處理隔離的 UI。 - 僅在需要避免深層 props 傳遞時使用全域狀態 —— 使用 Zustand、Jotai 或 React context。
- 絕對不要使用
useState來追蹤由使用者輸入驅動的連續值（滑鼠位置、滾動進度、指針物理效果、磁性懸停）。請使用 Motion 的useMotionValue/useTransform/useScroll。useState會使 React 樹在每次變化時重新渲染，並在行動裝置上崩潰。
3.C 圖示
- 允許的函式庫（優先級順序）：
@phosphor-icons/react、hugeicons-react、@radix-ui/react-icons、@tabler/icons-react。 - 不鼓勵使用：
lucide-react。僅在使用者明確要求或專案已依賴它時才可接受。 - 絕對不要手繪 SVG 圖示。 如果缺少某個字形，安裝第二個函式庫或從原語組合而成——不要從頭開始繪製圖示路徑。
- 每個專案一個圖示家族。 不要在同一組件樹中混合使用 Phosphor 和 Lucide。
- 全域標準化
strokeWidth（例如1.5或2.0）。
3.D Emoji 政策
預設情況下，不鼓勵在程式碼、標記和可見文字中使用。用圖示庫的字形取代符號。例外： 僅在使用者明確要求俏皮 / 聊天風格 / 社交原生氛圍時才允許使用 emoji——即使如此，也要有目的地、節制地使用。
3.E 響應式設計與佈局機制
- 標準化斷點（
sm 640、md 768、lg 1024、xl 1280、2xl 1536）。 - 頁面佈局使用
max-w-[1400px] mx-auto或max-w-7xl來約束。 - 視口穩定性： 絕對不要對全高主視覺區塊使用
h-screen。始終使用min-h-[100dvh]以防止在行動裝置上（iOS Safari 網址列）出現佈局跳躍。 - 格線優先於 Flex 數學： 絕對不要使用複雜的 flexbox 百分比數學（
w-[calc(33%-1rem)]）。始終使用 CSS Grid（grid grid-cols-1 md:grid-cols-3 gap-6）。
3.F 依賴項驗證（強制）
在導入任何第三方函式庫之前，檢查 package.json。如果缺少套件，先輸出安裝指令。絕不要假設一個函式庫存在。
4. 設計工程指令（偏差修正）
LLM 預設使用陳詞濫調。主動覆寫這些預設。每個規則都有一個考慮上下文的覆寫路徑。
4.1 字體排印
-
標題 / 大標題： 預設
text-4xl md:text-6xl tracking-tighter leading-none。 -
內文 / 段落： 預設
text-base text-gray-600 leading-relaxed max-w-[65ch]。 -
無襯線字體選擇：
- 不鼓勵作為預設：
Inter。優先選擇Geist、Outfit、Cabinet Grotesk、Satoshi，或品牌適用的襯線字體。 - 例外： 當使用者明確要求中性 / 標準 / Linear 風格感覺時，或者當需求是針對公共部門 / 無障礙優先的網站時，Inter 是可接受的。
- 不鼓勵作為預設：
-
需要知道的字體搭配：
Geist+Geist Mono、Satoshi+JetBrains Mono、Cabinet Grotesk+Inter Tight、GT America+IBM Plex Mono。 -
襯線字體紀律（非常不鼓勵作為預設）：
- 非常不鼓勵將襯線字體作為任何專案的預設字體。"感覺有創意 / 高級 / 編輯風格"並不是使用襯線字體的理由。代理程式預設的"創意需求 = 襯線字體"思維模式是產品測試中單一最常見的 AI 特徵。
- 僅在以下條件之一明確成立時，才可接受使用襯線字體：
- 品牌需求中明確提到了某個襯線字體名稱，或者
- 美學家族確實是編輯 / 奢華 / 出版 / 手稿 / 傳統 / 復古風格，並且你能闡述為什麼這個特定的襯線字體適合這個特定的品牌
- 對於所有其他情況（創意代理商、設計工作室、現代品牌、高級消費品、作品集、生活方式），預設使用無襯線標題字體（Geist Display、ABC Diatype、Söhne Breit、Cabinet Grotesk Display、Migra Sans、GT Walsheim、Inter Display、PP Neue Montreal）。無襯線標題字體不是"無聊"的——它們是預設，就像黑色是時尚界的預設一樣。
- 重點強調規則（相關）： 當你想在標題中強調一個詞彙時（例如"動感與
空間設計"這種動態文字技巧），請使用同一字體的斜體或粗體。不要僅僅為了增加視覺趣味，就在無襯線標題中插入一個隨機的襯線詞彙（反之亦然）。混合家族的重點強調是業餘的做法。在同一家族中使用斜體/粗體強調才是正確的做法。 - 特別禁止作為預設的字體：
Fraunces和Instrument_Serif（兩個 LLM 最喜歡的標題襯線字體）。 - 如果需要使用襯線字體（根據上述，這很少見），請從這個池子裡輪換選擇，不要在連續的專案中重複使用同一個襯線字體：PP Editorial New、GT Sectra Display、Cardinal Grotesque、Reckless Neue、Tiempos Headline、Recoleta、Cormorant Garamond、Playfair Display、EB Garamond、IvyPresto、Migra、Editorial Old、Saol Display、Söhne Breit Kursiv、Domaine Display、Canela、Schnyder、Tobias、NB Architekt、Instrument Serif（僅在非常特定的、針對性的場景下使用，永遠不作為預設）、Gelatio、Bianco、Fluxisch Else。