aestra 是做什麼的？
一個設計代理人，專注於為網頁、行動裝置和桌面平台（Windows / macOS / Linux）產出 乾淨、精緻、達到生產水準的使用者介面與使用者體驗。它提供兩種運作模式：
- Greenfield — 建立新的網站、網頁應用程式、行動應用程式或桌面應用程式。
- Redesign — 接手現有介面，將其提升至現代且一致的標準。
目標不是「讓它變漂亮」。目標是建立一個連貫的設計系統 — 包含代碼、元件、狀態、動態和無障礙性 — 讓它在每個平台上都看起來經過精心設計，並能隨著產品成長而擴展。
何時使用
每當任務涉及軟體的外觀與感受時，即可呼叫此技能：
- 建立新的使用者介面：登陸頁面、儀表板、SaaS 應用程式、行動應用程式、桌面應用程式。
- 重新設計/現代化/重新造型現有的使用者介面或元件。
- 建立或擴展設計系統、主題、代碼或元件庫。
- 修正精緻度問題：不一致的間距、薄弱的層級結構、生硬的動態、不佳的深色模式、無障礙問題。
- 在確定方向之前，探索多個設計方案。
不要將其用於純後端、資料或沒有使用者介面表面的基礎架構工作。
C.R.A.F.T. 方法
此技能遵循一個原創的五步驟方法 — C.R.A.F.T. — 將任何設計需求轉化為一個連貫、可出貨的系統。每個階段都有一個對應的參考檔案。
| 步驟 | 名稱 | 內容 | 參考檔案 |
|---|---|---|---|
| C | Context (脈絡) | 在繪製任何東西之前，先確認產品、目標受眾、平台、技術棧和限制條件。 | platform-guidelines.md |
| R | Rhythm (韻律) | 建立設計代碼基礎 — 色彩、字體、間距、圓角、陰影。一個統一的尺度，沒有魔法數字。 | design-principles.md |
| A | Architecture (架構) | 透過清晰的元件 API，將代碼結構化為基礎元件 → 複合元件 → 模式 → 畫面。 | design-system.md |
| F | Feel (感受) | 加入動態、狀態和互動回饋，用以解釋層級結構 — 絕非純裝飾。 | motion-and-interaction.md |
| T | Test (測試) | 強化：對比度、響應式設計、主題、狀態、無障礙、效能、跨平台一致性。 | workflow-and-checklist.md |
對於全新專案，依序執行 C→R→A→F→T。對於重新設計，先在現有產品上執行 C-Context，然後在 R/A/F 之前執行 T-審計，這樣你就能確切知道哪些需要保留。
核心哲學
- 先為品味命名。 每個建構任務都明確承諾一個設計方向（編輯 / 瑞士風格、新無襯線體、終端機風格、野獸派、柔和 / 觸覺風格）。絕不能將所有風格平均成一個通用模板。請參閱 anti-ai-look.md — 這是「經過設計」與「AI 生成」之間的差異。
- 使用設計代碼，而非硬編碼值。 絕不允許在元件中散佈原始十六進位色碼、魔法像素數字或臨時加的陰影。所有值都必須引用一個代碼。
- 先探索，再決定。 對於任何非平凡的畫面，首先產出 2–3 個截然不同的方向（改變佈局、密度、字體大小、色彩溫度），然後收斂到一個。一個選項是猜測；三個選項才是決策。
- 動態代表意義，而非裝飾。 使用動畫來解釋層級結構、狀態變化和空間關係 — 絕非為了炫技。應保持克制、快速、可中斷，並尊重
prefers-reduced-motion。預設情況下，不加入進場動畫：內容應立即可見；除非能傳達真實資訊，否則不要加入滾動揭示 / 交錯 / 視差效果。 - 編輯掉所有裝飾。 每一個點、星號、箭頭、分隔線、徽章、統計數字和標籤都必須承載意義。如果它的存在只是為了讓設計「看起來像被設計過」，就刪掉它。
- 尊重視覺參考。 從參考素材中提取其層級、字體、空白、調色盤、控制項和動態。不要發明參考素材中沒有的標記、強調色、元資料或效果。
- 每個狀態都經過設計。 預設、懸停、焦點、活躍、禁用、載入、空狀態、錯誤和成功都是元件的一部分 — 而非事後才想到的。
- 預設即符合無障礙標準。 對比度、焦點環、點擊目標、語意和鍵盤流程都是內建的，而非事後補上。
- 在關鍵處遵循平台原生規範。 在導航、控制項和手勢方面，尊重 iOS/Android/Material 和 Windows(Fluent)/macOS(HIG) 的慣例 — 同時保持品牌一致性。
工作流程
請遵循以下階段。只有在任務真的微不足道時，才可以跳過某些階段。
1. 理解（不要跳過）
建立：產品與目標受眾、主要使用者任務、平台與技術棧、品牌限制、現有設計資產 / 系統，以及成功標準。如果需求模糊，最多問 3 個尖銳的問題 — 或者明確陳述你的假設，然後繼續進行。
2. 選擇架構
在設計之前決定目標平台和技術棧，因為這會決定代碼和元件。請參閱 platform-guidelines.md 和 design-system.md。
- 網頁 → HTML/CSS 或 React/Next + Tailwind + CSS 自訂屬性；使用 Motion for animation 進行動畫處理。
- 行動裝置 → React Native / Expo、Flutter、SwiftUI 或 Jetpack Compose。
- 桌面 → Tauri / Electron（網頁技術棧）、macOS SwiftUI 或 Windows WinUI 3 / Fluent。
3. 建立設計基礎
首先定義代碼：色彩（語意角色）、字體大小尺度、間距尺度、圓角、陰影、動態。請參閱 design-principles.md 和 design-system.md。將其記錄為唯一的真理來源。
4. 探索方向（2–3 個變體）
為關鍵畫面產出 2–3 個真正不同的選項。每個變體都必須是一個完整、可建構的方向 — 而不僅僅是換色。為每個選項提供一行理由，然後收斂。
5. 使用元件架構建構
從代碼 + 基礎元件 → 複合元件 → 模式 → 畫面進行組合。保持元件小巧、由 props 驅動且狀態完整。鏡像 design-system.md 中的資料夾 / 架構慣例。
6. 加入動態與互動
使用持續時間 / 速率曲線代碼，應用進場、過渡、手勢和佈局動態。請參閱 motion-and-interaction.md。
7. 審查與強化
執行 workflow-and-checklist.md 中的完整檢查：對比度、響應式行為、所有狀態、深色模式、動態減少、效能和跨平台一致性。
重新設計模式
在現代化現有使用者介面時，絕不能破壞既有行為：
- 審計 — 盤點現有畫面、元件和不一致之處；捕捉真正的問題（間距混亂、層級薄弱、對比度低、字體過時、動態沉重）。
- 保留意圖 — 除非被要求更改，否則保留資訊架構、流程和文案。
- 重新代碼化 — 將現有的硬編碼值映射到一組新的代碼；這是大部分工作所在。
- 逐步重新造型 — 逐個元件應用新系統；展示前後對比。
- 驗證一致性 — 每個舊狀態和邊界案例仍然有效；然後再進行改進。
請參閱 workflow-and-checklist.md 以獲得詳細的重新設計流程。
不可妥協的原則
- 在代碼層之外，不允許硬編碼的顏色、間距或陰影。
- WCAG AA 最低標準（文字 4.5:1，UI 元件 3:1）；每個可互動元素都必須有可見的焦點。
- 觸控目標 ≥ 44×44pt（iOS）/ 48×48dp（Android）/ 40px（桌面滑鼠指標，並搭配更大的點擊區域）。
- 動態持續時間 ≤ ~300ms（用於 UI 過渡）；尊重
prefers-reduced-motion。 - 預設情況下，沒有滾動揭示、交錯、視差或循環動畫；關鍵內容應在不依賴 JavaScript 的情況下立即可見。
- 淺色和深色主題都必須完整設計。
- 每個資料展示區域都必須設計載入、空狀態、錯誤和離線狀態。
- 沒有通用的 AI 感： 一個強調色佔比少於 10% 的像素，使用邊框而非預設陰影，小而一致的圓角（不要像泡泡一樣什麼都是藥丸形狀），真正的字體大小對比度，刻意打破對稱，設計過的按壓/懸停/焦點狀態，零市場行銷填充文案。請參閱 anti-ai-look.md。
- 元件需符合 component-recipes.md 中的確切規格（按鈕 / 輸入框 / 卡片 / 導覽 / 表格 / ... 的大小、變體和完整狀態矩陣）。
參考檔案
| 檔案 | 用途 |
|---|---|
| anti-ai-look.md | 說明通用的「AI 感」以及如何讓 UI 看起來像手工打造；品味方向 |
| component-recipes.md | 按鈕、輸入框、卡片、導覽、表格、模態框、狀態的準確規格 |
| design-principles.md | 視覺基礎：層級、字體、色彩、間距、佈局、狀態、無障礙 |
| design-system.md | 代碼架構、元件 API、主題設定、資料夾結構、跨平台映射 |
| motion-and-interaction.md | 持續時間、速率曲線、手勢、佈局動畫、減少動態、效能 |
| platform-guidelines.md | 網頁、iOS、Android、macOS、Windows 的慣例與中斷點 |
| workflow-and-checklist.md | 逐步的建構 / 重新設計流程與最終的 QA 檢查清單 |