設計系統鍛造爐
📖 技能介紹
name: design-system-forge slug: design-system-forge version: 1.0.0 displayName: "設計系統鍛造爐" description: "從零構建完整的設計系統：Design Token（顏色/字型/間距/圓角/陰影）、元件庫規範（按鈕/表單/卡片/導航/表格/模態框）、佈局柵格系統、響應式斷點、暗色模式、設計審查清單。輸出可直接用於開發的規範化設計資產。" tags: ["design-system", "ui-design", "design-tokens", "component-library", "css", "frontend"] category: "design" author: leilei homepage: ""
設計系統鍛造爐
觸發詞
設計系統、設計規範、UI規範、元件庫、Design Token、設計token、顏色體系、元件規範、佈局系統、響應式設計、暗色模式、設計審查、樣式指南
能力概述
不只是生成一份設計指南文件，而是鍛造一套完整可用的設計系統資產，包含 token、元件、佈局、互動規範的完整定義。
可交付物
- Design Token 完整定義
- 顏色 token（主色/中性色/語義色/漸變）— 含色值、用途、無障礙對比度
- 字型 token（字號/字重/行高/字間距）— 含排版層級
- 間距 token（基礎單位/衍生間距）— 8px 柵格體系
- 圓角 token（從小到大四級）
-
陰影 token（ elevation 分層）
-
元件規範庫
- 基礎元件：Button / Input / Select / Checkbox / Radio / Switch / Toggle
- 資料展示：Table / Card / List / Badge / Avatar / Tooltip
- 導航：Nav / Breadcrumb / Tabs / Pagination / Sidebar
- 反饋：Modal / Toast / Alert / Progress / Skeleton
-
佈局：Container / Grid / Stack / Divider
-
佈局系統
- 柵格定義（12列/24列可選）
- 斷點體系（手機/平板/桌面/大屏）
-
容器規範（max-width / padding / 居中方式）
-
互動規範
- 動效時長/緩動曲線
小蔥技能7w4.net持續更新中。
- Hover/Focus/Active/Disabled 四態
-
載入狀態/空狀態/錯誤狀態
-
暗色模式對映
- 每個 token 的亮/暗色值對應
-
自動轉換規則
-
設計審查清單
- 新元件/頁面是否符合設計系統的逐項檢查
使用流程
模式A：從零建立
輸入：品牌色/行業/目標平臺/技術棧
輸出：完整設計系統文件（Token + 元件 + 佈局 + 互動）
- 收集品牌要素（Logo色/輔助色/字型偏好）
- 推導完整 Token 體系
- 基於Token定義所有元件樣式
- 生成佈局和響應式規則
- 輸出審查清單
模式B：審查現有設計
輸入：設計稿截圖或程式碼
輸出：符合性報告 + 改進建議
- 對照設計系統規範逐項檢查
- 列出不符合項（具體到屬性級別）
- 給出修復建議和優先順序
模式C：擴充套件現有系統
輸入：現有設計系統 + 新需求
輸出：增量更新（新token/新元件/新規則）
Design Token 輸出格式
每個 Token 以標準 JSON 格式輸出，可直接用於 CSS 變數 / Tailwind Config / Style Dictionary：
{
"color": {
"primary": { "value": "#3B82F6", "comment": "主色調-藍" },
"primary-hover": { "value": "#2563EB", "comment": "主色懸停" },
"success": { "value": "#10B981", "comment": "成功-綠" },
"warning": { "value": "#F59E0B", "comment": "警告-橙" },
"error": { "value": "#EF4444", "comment": "錯誤-紅" }
},
"spacing": {
"base": { "value": "4px", "comment": "基礎單位" },
"xs": { "value": "4px", "comment": "超小" },
"sm": { "value": "8px", "comment": "小" },
"md": { "value": "16px", "comment": "中" },
"lg": { "value": "24px", "comment": "大" },
"xl": { "value": "32px", "comment": "超大" }
}
}
元件規範模板
每個元件輸出包含：
### Button 按鈕
- **Variants**: primary / secondary / ghost / danger / link
- **Sizes**: sm / md / lg
- **States**: default / hover / focus / active / disabled / loading
- **With Icon**: left-icon / right-icon / icon-only
- **Spacing**: padding horizontal 16-24px, vertical 8-12px
- **Border Radius**: radius-md (from token)
- **Accessibility**: minimum touch target 44x44px, contrast ratio ≥ 4.5:1
佈局硬性標準（不可刪減）
- 列寬合理不截斷：每列設最小寬度，內容禁止截斷為"..."；放不下加橫向捲軸
- 模組間距有呼吸感：區域/卡片之間必須有分割線與 8-12px 間距；行高 ≥40px
- 按鈕清晰可點：操作按鈕獨立、間距 ≥8px、有足夠點按面積
- 多解析度自適應：至少在 1920×1080 / 1600×900 / 1366×768 / 1280×720 四檔自查
- 交付前必須自查：載入 20+ 條資料模擬訊號，四檔解析度檢查無截斷/不擁擠/佈局不亂再提交
驗收結語：「再出現"堆疊/顯示不全/沒審美"這類低階佈局問題，直接打回重做。」
個人創作者計費通道上線後直接升級計費
🤖 AI 評測
這是一個功能定位明確、內容較完整的設計系統構建工具。它能幫助使用者從零開始生成完整的設計規範文件，包括顏色、字型、元件、佈局等各個方面。觸發詞設定合理，輸出格式規範直接可用。不過目前只有說明文件，缺少實際示例展示效果，對於想了解具體能生成什麼樣的設計系統的使用者來說直觀性不足。
