高階設計 — Kinetic Luxe
一個由目錄驅動的技能，用於建立高階、編輯風格、頂級介面。與一般的 design 技能不同：此技能對於字體排版、動態效果和克制有明確的主張。
設計哲學 — 五項規則
1. 字體排版是主角
標題顯示字型使用襯線字體或獨特的顯示無襯線字體。內文使用精緻的無襯線字體（Inter, Geist, Satoshi）。標題要 大 — 落在 text-[clamp(2.5rem,8vw,10rem)] 的範圍。顯示字型要緊縮字母間距（tracking-tight 或更緊）。顯示字型的行高要寬鬆（leading-[0.9] 或 leading-none），內文行高要更緊湊（leading-[1.45]）。
有效的字體搭配：
- Fraunces（顯示）+ Inter（內文）— 編輯雜誌風格
- Canela（顯示）+ Geist（內文）— 奢華現代感
- Migra（顯示）+ Manrope（內文）— 鋒利的編輯風格
- Reckless（顯示）+ Inter（內文）— 柔和的編輯溫暖感
透過 index.html 中的 <link> 或 CSS @import 載入字體。顯示字體絕不使用系統字型。
2. 動畫是有意圖的，絕非裝飾
不要用彈跳彈簧效果。不要用快速的 ease-out-200ms 淡出。高階動畫使用：
- 長持續時間：800–1800 ms 用於揭示效果
- 精煉的緩動曲線：
cubic-bezier(0.16, 1, 0.3, 1)（easeOutExpo）、cubic-bezier(0.22, 1, 0.36, 1)（easeOutQuint）或自訂曲線 - 滾動驅動而非頁面載入：使用 framer-motion 的
useScroll+useTransform，讓動畫與使用者動作連結 - 每個區段一個標誌性動畫：不要在英雄區塊堆疊 5 種動畫。選擇最能烘托內容的那一個。
如果動畫沒有服務內容，就刪除它。
3. 透過圖層而非陰影創造深度
高階深度是透過堆疊細微圖層來創造的：
- 底層：噪點紋理疊加（CSS 或 SVG）
- 內容下方：暖色/冷色漸層（非常細微，5-15% 不透明度）
- 中層：裝飾性元素（一個大型顯示字元、一張褪色照片、一個網格）
- 前景：內容
避免使用 shadow-lg / shadow-2xl — 它們看起來很普通。改用 shadow-[0_1px_0_rgba(255,255,255,0.05)] 或漸層邊框。
4. 色彩運用克制，構圖充滿信心
調色板通常是：
- 背景：一種暖色或冷色的米白/米黑（絕不是純
#000或#fff）。例如：#0A0908（暖黑色）、#F7F5F1（暖米白）、#0F1117（冷黑色）。 - 文字：與背景高對比，但色調柔和。例如：在
#0A0908背景上使用#F7F5F1文字，在#F7F5F1背景上使用#1A1A1A文字。 - 強調色：一種顏色，節制使用。例如：
#C8522C（陶土色）、#4C3F2F（濃縮咖啡色）、#B8A978（黃銅色）、#D9C2A4（香檳色）。
不要使用彩虹漸層。不要有青綠色/紫色這種科技新創公司的感覺。
5. 刻意打破網格來構圖
標準的三欄網格感覺很普通。高階佈局使用：
- 不對稱：兩欄佈局，其中一欄是另一欄的兩倍寬，或者使用七欄網格，內容跨 3+4 欄
- 有意的留白：一個區段有 60% 的留白，內容集中在一個角落
- 尺度對比：小標籤放在巨型標題旁邊
- 重疊：元素突破其容器邊界
當不確定時，移除一個欄位或增加更多留白。
此技能 不 適用於
如果使用者想要：
- 標準的 B2B SaaS 登陸頁面（對話氣泡、產品模型、功能網格）→ 使用
design - 管理後台 / 資料密集的 UI → 使用
design - 附帶手機模型的應用程式登陸頁面 → 使用
design - 帶有素材庫照片的企業網站 → 使用
design
此技能適用於：時尚品牌、奢華產品、設計公司、創意作品集、建築事務所、編輯刊物、定位為設計導向的高階 SaaS。
工作流程 — 步驟 0：閱讀目錄
在撰寫任何頁面之前，請閱讀：
references/design-tokens.md— 顏色、字體尺寸、間距references/motion-principles.md— 緩動曲線、時機、動畫哲學references/catalog/中的相符分類.md檔案 — 可用的變體
然後選擇一個變體並閱讀其位於 references/catalog/components/ 中的 .tsx 檔案。
頁面 → 目錄檔案對照表：
| 頁面類型 | 目錄檔案 |
|---|---|
| 登陸 / 首頁 | hero.md + features.md + testimonials.md + cta-sections.md + footers.md |
| 定價 | pricing.md |
| 關於 / 工作室 / 宣言 | about.md |
| 聯絡 | contact.md |
| 作品集 / 作品 | gallery.md |
| 常見問題 / 備註 | faq.md |
| 導航（所有頁面） | navigation.md |
目前的目錄庫存 — 11 個元件，皆為原創：
navigation.md— 1 個變體（編輯式主桅桿）hero.md— 1 個變體（動態遮罩英雄區塊）features.md— 1 個變體（編輯式索引）stats.md— 1 個變體（編輯式數字）logos.md— 1 個變體（編輯式客戶清單）gallery.md— 1 個變體（編輯式作品索引）about.md— 1 個變體（編輯式故事/宣言）testimonials.md— 1 個變體（編輯式引用）pricing.md— 1 個變體（編輯式不對稱）faq.md— 1 個變體（編輯式常見問題/備註）cta-sections.md— 1 個變體（Moment 行動呼籲）contact.md— 1 個變體（編輯式聯絡表單）footers.md— 1 個變體（編輯式宣言頁尾）
非協商清單
在回報完成之前：
- 基礎閱讀：在撰寫任何程式碼之前，務必先閱讀
design-tokens.md+motion-principles.md。 - 已查閱目錄：已從目錄中選擇一個特定變體。請註明其名稱。
- 已載入字體：透過
index.html中的<link>或 CSS@import載入所需的顯示字體 + 內文字體。系統字型會破壞高階感。 - 單一強調色：設計使用一種強調色（加上中性色）。沒有彩虹調色板。
- 動畫時機：至少有一個區段使用滾動驅動動畫（而不僅僅是頁面載入時的淡入）。緩動曲線為
easeOutExpo或類似曲線 — 不是預設的easeOut。 - 構圖突破：至少有一個區段使用不對稱佈局、有意的留白或尺度對比。並非所有欄位都是等寬網格。
- 行動裝置：已在 375px 寬度測試。顯示字型會縮小但保留其特色（比標準的行動裝置 H1 更大）。