Frontend Design Styles
把四種主流設計語言忠實地落到前端程式碼裡。核心不是「看起來差不多」，而是用語意令牌 + 組件形態 + 動效曲線三層一致地還原，讓成品能被該平台用戶認出「這就是 iOS / 這就是 Material / 這就是 Windows」。
何時用 / 不用
用：用指定設計風格生成或改造介面；四種風格選型對比；產出設計令牌與主題檔案；按設計語言做視覺審查。
不用：用戶沒有風格傾向、只想快速要個「好看的頁面」 → 先問一句要不要指定風格，或走 references/style-router.md 的推薦邏輯；純後端/演算法任務與本技能無關。
四種風格指紋速查
這是最高辨識度的幾個特徵。做任何實現前先確認這張表，細節再查對應 reference。
| | MIUIX / HyperOS | Apple HIG | Material Design 3 | Fluent 2 |
|---|---|---|---|
| 主色 | #3482FF（亮）/ #277AF7（暗） | #007AFF / #0A84FF | 角色化，基線 #6750A4 | #0F6CBD |
| 字體 | MiSans | SF Pro（<20pt Text，≥20pt Display） | Roboto / Roboto Flex | Segoe UI Variable |
| 正文基準 | 16–17px | 17pt | 16sp（body-large） | 14px（body-1） |
| 圓角語言 | 16dp 統一圓角 + squircle（與 iOS 同源，按鈕非膠囊） | 連續曲率圓角（squircle），容器 10–20pt | 12dp 卡片 / 28dp FAB & 彈窗 / 全圓按鈕 | 小圓角，控件 4px、彈窗 8px，嵌套 −2px |
| 層次手法 | 色階分層（#FFFFFF / #F7F7F7 / #E8E8E8），幾乎不用重陰影 | 材質模糊（translucency）+ 分組列表 + 內容壓過 UI | 色調疊加（tonal overlay）優先，陰影次之 | 材質（Mica / Acrylic）+ 低調多層陰影 |
| 動效 | 輕快、帶彈性回彈，200–300ms | 彈簧物理，200–300ms，無 linear | 強調曲線 cubic-bezier(0.2,0,0,1)，按時長令牌分級 | 快而克制，150–250ms，easyEase |
| 觸控/點擊目標 | ≥ 48dp | ≥ 44×44pt | ≥ 48dp | 控件高 32px（緊湊/舒適模式） |
| 一句話氣質 | 圓潤、通透、藍色科技感 | 克制、留白、內容優先 | 色彩表達力強、層次靠色調 | 生產力、清晰、桌面原生 |
工作流
Step 1 · 定風格。 用戶已指定 → 直接用。未指定 → 讀 references/style-router.md，按產品型態/平台/密度給出 1 個推薦 + 1 個備選，讓用戶確認。
Step 2 · 讀令牌。 打開對應參考文件，把顏色、字階、間距、圓角、陰影、動效全部讀一遍再動手，不要憑印象寫：
- MIUIX / HyperOS →
references/miuix-hyperos.md - Apple HIG →
references/apple-hig.md - Material Design 3 →
references/material-design-3.md - Fluent 2 →
references/fluent-2.md
Step 3 · 落令牌。 直接複製 assets/tokens/<style>.css 作為語意令牌層（已含明/暗雙主題），不要把 hex 寫進組件樣式裡。深色模式透過 [data-theme="dark"] 或 prefers-color-scheme 切換。
Step 4 · 搭組件。 按 references/components-playbook.md 裡該風格的組件規格實現（按鈕變體、輸入框、卡片、導航、彈層、開關、列表）。每個互動態（hover / focus / pressed / selected / disabled）都要有，不能只做預設態。
Step 5 · 加動效 + 自檢。 按 references/motion-and-accessibility.md 補齊過渡，然後跑 python3 scripts/lint_tokens.py <產物> --style <風格>，再逐條過自檢清單（見下）。
鐵律
- 不混風格。 選了 Fluent 就別出現 iOS 的
#007AFF、Material 的 pill FAB 或 HyperOS 的大圓角卡片。混合是最常見的失敗模式。 - 令牌先行。 組件 CSS 裡只允許出現
var(--xxx)，不允許出現字面量顏色/字號/圓角值。 - 明暗雙主題一起做。 四套體系都有官方暗色值，直接查表，不要用
filter: invert或手動調暗糊弄。 - 平台約定不可改。 例如 iOS 的最小點擊區 44pt、Material 的 state layer 不透明度、Fluent 的控件 1px 底邊描邊、HyperOS 的深色背景
#242424（不是純黑 surface）。 - 無障礙是硬指標。 正文對比度 ≥ 4.5:1，UI 元素 ≥ 3:1，焦點環必須可見，尊重
prefers-reduced-motion。 - 中文排版要單獨處理。 Roboto / Segoe UI / SF Pro 都沒有完整中文字形，中文介面必須退回蘋方 / 思源黑體 / MiSans 等中文字體，並下調 letter-spacing（拉丁字距不適用於中文）。
交付規範
- 預設產出單檔案可執行的 HTML（內聯
<style>+<script>），令牌以:rootCSS 變數組織，方便用戶直接預覽和複製。 - 用戶指定框架時再切換，映射規則見
references/framework-mappings.md：Tailwind 用assets/mappings/tailwind.css；React/Vue 用令牌物件 + CSS 變數；Compose 優先使用官方庫（MIUIX 用MiuixTheme，M3 用MaterialTheme）。 - 組件展示頁可參考
assets/templates/showcase.html（同一套組件在四種風格下的並列呈現，可切換主題與明暗）。 - 產出後必跑驗證：
python3 scripts/lint_tokens.py <產物檔案> --style <風格>，三項檢查（硬編碼色值 / 對比度 / 核心令牌）不通過就修，再交付。 - 交付時說明：用了哪套體系、有哪些刻意偏離、暗色模式如何切換、字體回退棧是什麼。
自檢清單
做完逐條核對，不通過就修：
- 顏色全部來自令牌，無硬編碼 hex
- 字階層級不超過 4 檔，正文基準字號符合該體系
- 圓角體系自洽（含嵌套圓角 = 外層 − 內邊距）
- 陰影/材質用法符合該體系（Material 用色調疊加，Fluent 用 Mica/Acrylic，iOS 用模糊材質，HyperOS 用色階）
- 所有互動態齊備：hover / focus-visible / active / disabled / selected
- 明暗雙主題都驗證過
- 點擊目標尺寸達標
- 對比度達標，焦點環可見
-
prefers-reduced-motion下動效降級 - 中文字體回退正確、字距已調整
- 無其他體系串味
參考檔案
| 檔案 | 內容 |
|---|---|
references/style-router.md | 四風格選型決策樹、對比矩陣、混搭禁區 |
references/miuix-hyperos.md | MIUIX 令牌全表 + HyperOS 視覺特徵 + 組件規格 |
references/apple-hig.md | 系統色全表 + Dynamic Type 12 級 + 材質 + 組件規格 |
references/material-design-3.md | 29 個顏色角色明暗全表 + 15 級字階 + 形狀/海拔/狀態層 |
references/fluent-2.md | 中性色/品牌色階 + Type Ramp + 控件尺寸 + Mica/Acrylic + 陰影令牌 |
references/components-playbook.md | 按鈕/輸入/卡片/導航/彈層/開關/列表 的逐風格實現規格 |
references/motion-and-accessibility.md | 四體系動效曲線與時長、無障礙硬性要求、審查清單 |
references/framework-mappings.md | Tailwind / React / Vue / Compose / SwiftUI 的令牌映射規則 |
scripts/lint_tokens.py | 可執行驗證：硬編碼色值、對比度、核心令牌齊全性 |
assets/mappings/tailwind.css | Tailwind v4 @theme 令牌映射，四套體系可同頁共存 |