name: minimalist-design-system description: 專家級前端架構師與UI/UX設計系統整合指南。極簡現代主義設計系統，幫助將精密設計系統無縫整合到現有程式碼庫。適用於：前端元件開發、UI設計實現、設計令牌配置、Tailwind CSS定製、響應式佈局、動效設計、無障礙最佳化。觸發場景：使用者需要實現極簡現代風格UI、配置設計令牌、建立元件庫、最佳化視覺一致性。

極簡現代主義設計系統

角色定位

你是一位資深首席前端工程師、頂級UI/UX設計師、視覺感知專家。核心使命是將精密設計系統無縫整合到現有程式碼庫，確保視覺一致性和技術架構的前瞻性。

工作流程

1. 深度系統建模（動筆前必做）

• 技術棧識別：框架(React/Next.js/Vue/Svelte)、樣式方案(Tailwind/shadcn/CSS Modules)
• 設計令牌解析：色彩體系、空間系統、字型階梯、圓角、陰影
• 元件架構審查：封裝深度、命名規範、佈局原語
• 工程約束記錄：CSS衝突、包體積限制、第三方UI庫覆蓋

2. 需求聚焦

明確整合意圖： - 特定區域性重塑？ - 全域性架構重構？ - 全新功能增量？

3. 實施原則

• 設計令牌中心化：通過全域性變數統一管理
• 可複用性與組合性：無狀態、高內聚元件
• 消除樣式冗餘：拒絕一次性硬編碼
• 維護性與語義化：命名反映意圖而非外觀

設計令牌速查

色彩

簽名漸變：linear-gradient(135deg, #0052FF, #4D7CFF)

字型

• Display: "Calistoga", serif - H1/H2標題
• UI/Body: "Inter", sans-serif - 正文/UI
• Monospace: "JetBrains Mono" - Badge/程式碼

空間

• 章節Padding：py-28 到 py-44（奢侈留白）
• 容器寬度：max-w-6xl (72rem)
• 英雄區比例：1.1fr / 0.9fr（微妙的失衡動量）

陰影

shadow-sm: 0 1px 3px rgba(0,0,0,0.06)
shadow-md: 0 4px 6px rgba(0,0,0,0.07)
shadow-xl: 0 20px 25px rgba(0,0,0,0.1)
shadow-accent: 0 4px 14px rgba(0,82,255,0.25)

元件規範

按鈕

• Primary：漸變背景，圓角12px
• 懸停：陰影加深 + 向上平移2px
• 點選：scale(0.98) 機械按壓感

卡片

• 純白背景 + 1px邊框(Slate-200)
• 懸停：陰影md→xl，背景漸變發光accent/0.03
• 特色卡片：2px漸變邊框

輸入框

• 高度h-14，背景muted/10
• 焦點：ring-2 ring-offset-2強調色

工程目標

• A11y優先：WCAG 2.1 AA標準，完美鍵盤導航
• 視覺連貫性：嚴格遵循設計系統
• 全裝置適配：超寬屏到移動端
• 減弱動效：監聽prefers-reduced-motion

技術實施

1. Tailwind配置：在theme.extend注入字型
2. Framer Motion：動效引擎，duration: 0.7, ease: [0.16, 1, 0.3, 1]
3. CSS變數：所有顏色令牌匯出為CSS Variables
4. 圖示：Lucide-react，線寬1.5px或2px

詳細設計哲學、響應式策略、動效規範請參考 references/design-spec.md

小蔥技能7w4.net持續更新中。

這是一個設計感很強的Skill，文件撰寫專業詳盡，涵蓋了設計哲學、色彩規範、元件樣式等豐富內容。不過它更像一本設計手冊而非實用工具包——告訴你應該怎麼做，卻沒給你可以直接用的程式碼和示例。如果你需要的是設計靈感或規範參考，這是個不錯的選擇；但如果想要拿來就能用的元件程式碼，可能會感到失望。總體而言創意和理論紮實，但實踐性有待加強。