zz41354899/useful-design-system/design-system-generator

Name: design-system-generator
Author: zz41354899

Claude Code and agent skill by zz41354899/useful-design-system

Trust tier 3

community

By zz41354899
Design
zz41354899/useful-design-system
design-system-skills/skills/design-system-generator/SKILL.md
Updated 11 Oct 2026
Version 1.0.01 version recorded

Source check pending

Checking that the SKILL.md file is still in the repository.

根據對話生成或增強設計系統。自動偵測專案狀態，為新專案推薦範本，為現有專案提取並優化設計語彙。

Install

npx vskill@latest install zz41354899/useful-design-system/design-system-generator

SKILL.md

Design System Generator

觸發條件

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

觸發時機：

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

執行流程：

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

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

觸發時機：

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

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

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

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

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

智能推薦系統

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

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

使用方式

javascript

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 → 提取元件 → 找出缺失 → 提供補充建議 → 生成文件

參考資料

詳細範例請參考：

Security

Security scanPassed, 90 of 100Pattern checks on the skill's files.
Model reviewPassed

See the full security report

Quality evaluation

Task evaluationNot runNo evaluation yet. Run one in Skill Studio.

See evaluation results

Source

SKILL.md in the repositoryCheckingdesign-system-skills/skills/design-system-generator/SKILL.md

Popularity

7-day trend score: 0

Not refreshed yet.

Works with

Any agent vskill installs to: 56 targets in all. These 39 have a page on this site.

Claude Code
Cursor
GitHub Copilot
Windsurf
Codex
Gemini CLI
Cline
Amp
Roo Code
Goose
Continue
Kilo Code
Junie
Trae
OpenHands
Qwen Code
AI Agent
Tabnine Chat
Sourcegraph Cody
Amazon Q
Firebase Genkit
Sweep
Devin
Phind
Mentat
Claude Desktop
Aider
GPT Pilot
Plandex
bolt.new
v0
Replit Agent
Anse
TypingMind
BetterChatGPT
LibreChat
Warp AI
Pieces
Fig AI

Embed badge

[![vskill VERIFIED](https://verified-skill.com/api/v1/skills/zz41354899/useful-design-system/design-system-generator/badge)](https://verified-skill.com/skills/zz41354899/useful-design-system/design-system-generator)

Something wrong with this skill or its page? Tell us.