design-system-generator

name	design-system-generator
description	根據對話生成或增強設計系統。自動偵測專案狀態，為新專案推薦範本，為現有專案提取並優化設計語彙。
license	MIT
category	design-token
metadata	{"author":"useful-design-system","version":"2.0.0","last-updated":"2026-03-25"}
allowed-tools	Read Write Execute

Design System Generator

觸發條件

場景 A：新專案（從零開始）

觸發時機：

• 使用者說「建立設計系統」、「生成設計系統」
• 使用者描述新產品需求但沒有現有專案
• 使用者要求推薦設計風格

執行流程：

1. 收集資訊（專案名稱、類型、行業）
2. 智能推薦範本
3. 生成完整設計系統（包含 tokens.yaml 和 designsystem.md）

場景 B：現有專案（分析與增強）

觸發時機：

• 使用者說「分析專案」、「檢查設計系統」、「優化設計」
• 使用者在對話中提到「我的專案」、「現有專案」
• 使用者提供專案路徑或在專案目錄中工作

判斷方式： 如果使用者提到現有專案或要求分析，先檢查目錄中是否有 package.json。

• 有 → 使用場景 B（分析模式）
• 無 → 詢問使用者是否要建立新專案（場景 A）

執行方式： 掃描專案 → 提取現有 tokens → 分析缺失 → 對話建議補充 → 生成文件

重要：不要從頭生成新設計系統，而是基於現有內容進行增強和補充。

智能推薦系統

根據對話關鍵字自動匹配範本：

關鍵字	推薦範本	風格
醫療、診所、健康	Medicana	清新醫療
室內、裝修、建築	Habitate	溫暖工藝
SaaS、科技、平台	Vectura	現代科技
課程、教育	Course	線上課程
教練、大師班	Zono	高轉換
設計師、作品集	Artemis	創意展示
品牌、創意	Nebura Dark	暗色玻璃
工具、應用	Minimal Light	簡約亮色
金融、投資	FinTech Pro	專業金融

使用方式

const { DesignSystemGenerator } = require('../../scripts/generate-design-system.js');
const generator = new DesignSystemGenerator();

await generator.generate({
  projectName: '從對話提取',
  projectType: '從對話提取',
  industry: '從對話提取'
});

對話流程

新專案流程

使用者：「幫我建立一個寵物診所的設計系統」

AI 回應：

根據「寵物診所」關鍵字，推薦 Medicana（清新醫療風格）：
🎨 清新青綠色系
🏥 適合醫療產業
📦 包含 12 個專業元件

現在為您生成...
✅ 已生成：
   - tokens.yaml（設計語彙定義）
   - designsystem.md（完整設計文件）

現有專案流程

AI 偵測到專案：

偵測到您的專案使用：
- Tailwind CSS v4
- shadcn/ui (11 個元件)
- React

正在分析設計語彙...

📊 分析結果：
✅ 元件庫：完整
⚠️ 色彩系統：未偵測到完整變數
⚠️ 字體系統：缺少定義

� 建議：
1. 在 src/index.css 中補充色彩變數
2. 定義字體家族

已生成 token/docs/designsystem.md 供參考
需要我幫您補充嗎？

核心原則

新專案：從對話提取需求 → 智能推薦範本 → 生成完整設計系統 現有專案：提取package.json → 提取元件 → 找出缺失 → 提供補充建議 → 生成文件

參考資料

詳細範例請參考：

• 對話範例
• 範本細節