tasteskill：反模板前端技能
適用於著陸頁、作品集和重新設計。不適用於儀表板、資料表格或多步驟產品介面。 以下每一條規則都是根據上下文而定的。沒有一條規則會自動觸發。先閱讀需求摘要，然後只提取符合的規則。
0. 需求推斷（在動手之前，先讀懂語境）
在接觸程式碼或調整參數之前，先推斷使用者真正想要的是什麼。大多數大型語言模型的設計輸出之所以糟糕，是因為模型跳到了預設的美感，而不是先讀懂語境。
0.A 優先讀取這些訊號
- 頁面類型 - 著陸頁（SaaS / 消費型 / 代理商 / 活動）、作品集（開發者 / 設計師 / 創意工作室）、重新設計（保留 vs. 全面翻新）、編輯部 / 部落格。
- 使用者使用的氛圍詞 - "極簡主義"、"平靜"、"Linear 風格"、"Awwwards"、"粗獷主義"、"高級消費品"、"Apple 風格"、"活潑"、"嚴肅 B2B"、"編輯器風格"、"代理商風格"、"玻璃態"、"暗黑科技"。
- 參考訊號 - 他們連結的網址、貼上的螢幕截圖、提到的產品、競爭的品牌。
- 受眾 - B2B 採購小組 vs. 重視設計的消費者 vs. 正在瀏覽作品集的招募人員。受眾決定美感，而不是你的個人品味。
- 已存在的品牌資產 - Logo、顏色、字體、攝影作品。對於重新設計，這些是起點材料，而不是可選輸入（請參閱第 11 節）。
- 隱性限制 - 以無障礙為主的受眾、公共部門、受監管行業、信任優先的商業、兒童產品。這些限制會覆蓋美學偏好。
0.B 在生成任何程式碼前，輸出一行「設計解讀」
在任何程式碼之前，用一行話陳述：「將其解讀為：<頁面類型>，目標受眾為 <受眾>，帶有 <氛圍> 的語言，傾向於 <設計系統或美感家族>。」
範例解讀：
- 「將其解讀為：B2B SaaS 著陸頁，目標為技術買家，帶有 Linear 風格的極簡主義語言，傾向於使用 Tailwind 實用程式 + Geist 字體 + 克制動畫。」
- 「將其解讀為：個人設計師作品集，目標為招募經理，帶有編輯器 / 動態排版語言，傾向於使用原生 CSS + 滾動驅動動畫 + 自訂字體。」
- 「將其解讀為：公共服務網站的重新設計，帶有信任優先的語言，傾向於使用 GOV.UK Frontend 或 USWDS。」
0.C 如果需求不明確，問一個問題，不要猜測
只問一個釐清問題——絕對不要一次丟出一堆問題——而且只有在設計解讀確實出現分歧時才問。範例：「這應該更接近 Linear 風格的乾淨，還是 Awwwards 風格的實驗性？」
如果你能根據上下文自信地推斷出來，就不要問。直接宣告設計解讀並繼續。
0.D 反預設規範
不要預設使用：AI 紫色漸層、置中英雄區塊配上深色網格、三個等分的功能卡片、在所有東西上使用泛用的玻璃態效果、無所不在的無限循環微動畫、Inter 字體加上 slate-900。這些是大型語言模型的預設值。根據設計解讀，刻意地超越它們。
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 |
| "高級消費品 / Apple 風格 / 奢華 / 品牌" | 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 何時使用真正的設計系統（使用官方套件）
| 需求解讀為... | 選擇 | 原因 |
|---|---|---|
| 微軟 / 企業 SaaS / 儀表板 | @fluentui/react-components 或 @fluentui/web-components | 官方 Fluent UI，微軟標記，無障礙完善 |
| Google 風格介面，Material 風格產品 | @material/web + Material 3 tokens | 官方，可透過 Material Theming 設定主題 |
| IBM 風格 B2B / 企業分析 | @carbon/react + @carbon/styles | 官方 Carbon，成熟的資料密度模式 |
| Shopify 應用程式表面 | polaris.js web components / Polaris React | Shopify 管理員介面所需 |
| Atlassian / Jira 風格產品 | @atlaskit/* + @atlaskit/tokens | 官方 Atlassian 設計系統 |
| 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 utilities + dark: variant | 獨立開發者和小團隊構建的預設選項 |
誠實原則： 如果需求解讀為上述系統之一，請安裝並使用官方套件。不要手動重新建立其 CSS。不要導入一個系統的標記，然後又覆蓋掉其中的 90%。
每個專案只使用一個系統。 不要在同一個樹狀結構中混用 Fluent React 和 Carbon。不要將 shadcn/ui 元件導入到 Material 3 應用程式中。
2.B 當需求是一種美感，而不是一個系統時
對於這些方向，沒有單一的官方套件。使用原生 CSS + Tailwind + 一個有維護的元件庫來建構。在程式碼註解中誠實地說明哪些是借鑒的靈感，哪些是官方素材。
| 美感 | 誠實的實作方式 |
|---|---|
| 玻璃態 / "磨砂玻璃" | backdrop-filter、分層邊框、高光疊層。為 prefers-reduced-transparency 提供純色填充備援方案。 |
| Bento（Apple 風格的網格） | 使用混合單元格大小的 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 安全性： 全域狀態僅能在用戶端元件中運作。在 Next.js 中，將 providers 包裹在一個設有
"use client"的元件中。 - 互動隔離： 任何使用 Motion、滾動監聽器或指針物理效果的元件，都必須是隔離的葉節點，並在頂部加上
'use client'。伺服器元件僅渲染靜態佈局。
- RSC 安全性： 全域狀態僅能在用戶端元件中運作。在 Next.js 中，將 providers 包裹在一個設有
- 樣式： 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 政策
預設不鼓勵在程式碼、標記和可見文字中使用表情符號。用圖示庫中的圖案取代符號。覆蓋： 僅在使用者明確要求活潑 / 聊天風格 / 社群原生氛圍時才允許使用表情符號——即使如此，也要有目的地節制使用。
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 網址列）出現佈局跳動。 - 使用 Grid 而非 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）。無襯線展示字體並不「無聊」——它們是預設選項，就如同黑色是時尚界的預設顏色。
- 強調規則（相關）： 當你想在標題中強調一個詞（例如動態的「and
spatialdesign」技巧），請使用相同字體的斜體或粗體。不要為了增加視覺趣味，而在無襯線標題中插入一個隨機的襯線字詞（反之亦然）。混合字體家族的強調是業餘的。相同字體家族的斜體/粗體強調才是正確的做法。 - 特別禁止作為預設：
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, I