MCP Garendesign

🚀 GarenCode Design - AI驅動的智能組件設計平臺

GarenCode Design 是一個基於AI的組件設計平臺，藉助MCP協議，可實現從需求分析到代碼生成的全程智能化，幫助開發者輕鬆創建高質量前端組件。

🚀 快速開始

1️⃣ 環境準備

# 克隆項目
git clone https://github.com/lyw405/mcp-garendesign.git
cd mcp-garendesign

# 安裝依賴
npm install
# 或使用 pnpm
pnpm install

2️⃣ 配置設置

# 複製配置文件
cp data/config.example.json data/config.json
cp data/codegens.example.json data/codegens.json

# 編輯配置文件，填入您的API密鑰
vim data/config.json

3️⃣ 啟動服務

# 使用啟動腳本
chmod +x scripts/start-standalone.sh
./scripts/start-standalone.sh

# 或手動啟動
npm run build
npm run mcp:dev

4️⃣ 驗證安裝

# 驗證配置
node scripts/validate-config.js

# 測試模型推薦
node scripts/test-model-recommendation.js

✨ 主要特性

核心理念

GarenCode Design 是一個基於 MCP (Model Context Protocol) 的 AI 驅動組件設計平臺。我們致力於讓每個開發者都能輕鬆創建高質量的前端組件，從需求分析到代碼生成，全程智能化。

核心特性

技術優勢

• 🚀 開發效率提升 50%+ - 從需求到代碼的自動化流水線
• 🎯 設計一致性 - 統一的組件庫和設計規範
• 🔧 高度可維護 - 標準化的代碼結構和API設計
• ⚡ 多模型支持 - Claude、GPT、DeepSeek、Ollama 等主流AI模型

🎨 設計流程

核心工作流

graph LR
    A[🎤 用戶需求] --> B[🔍 需求分析]
    B --> C[🧩 組件分解]
    C --> D[🎨 設計策略]
    D --> E[⚡ 代碼生成]
    E --> F[🔗 模塊集成]
    F --> G[🚀 最終交付]

    style A fill:#ff6b6b,stroke:#333,stroke-width:3px
    style B fill:#4ecdc4,stroke:#333,stroke-width:3px
    style C fill:#45b7d1,stroke:#333,stroke-width:3px
    style D fill:#96ceb4,stroke:#333,stroke-width:3px
    style E fill:#feca57,stroke:#333,stroke-width:3px
    style F fill:#ff9ff3,stroke:#333,stroke-width:3px
    style G fill:#5f27cd,stroke:#333,stroke-width:3px

詳細流程說明

1️⃣ 需求分析階段 🔍

// AI 智能分析用戶需求
const analysis = await analyzeRequirement({
  userInput: '創建一個用戶管理頁面',
  context: '企業級後臺管理系統',
  constraints: ['Vue 3', 'TypeScript', '私有組件庫'],
});

2️⃣ 複雜度評估 📊

// 自動評估組件複雜度
const complexity = await assessComplexity({
  requirements: analysis.requirements,
  businessLogic: analysis.businessLogic,
  uiComplexity: analysis.uiComplexity,
});
// 輸出: { level: "complex", estimatedBlocks: 5, estimatedTokens: 8000 }

3️⃣ 智能分解 🧩

// 將複雜需求分解為可管理的設計塊
const blocks = await decomposeToBlocks({
  requirements: analysis.requirements,
  complexity: complexity,
  designStrategy: 'block-based',
});
// 輸出: [
//   { id: "user-list", type: "data-display", priority: "high" },
//   { id: "user-form", type: "form", priority: "medium" },
//   { id: "user-detail", type: "detail-view", priority: "low" }
// ]

4️⃣ 設計策略生成 🎨

// 生成詳細的設計策略
const strategy = await generateDesignStrategy({
  blocks: blocks,
  componentLibrary: 'private-components',
  designSystem: 'garen-design-system',
});

5️⃣ 分塊開發 ⚡

// 逐個設計塊進行開發
for (const block of blocks) {
  const design = await designBlock({
    block: block,
    strategy: strategy,
    aiModel: getRecommendedModel('DESIGN'),
  });

  const code = await generateCode({
    design: design,
    framework: 'vue3',
    typescript: true,
  });
}

6️⃣ 智能集成 🔗

// 將所有設計塊集成到完整頁面
const integration = await integrateDesign({
  blocks: completedBlocks,
  layout: 'responsive',
  dataFlow: 'centralized',
});

⚙️ 項目配置

配置文件結構

data/
├── config.json              # 🎯 AI模型配置（實際使用）
├── config.example.json      # 📝 AI配置示例（去除敏感信息）
├── codegens.json            # 🧩 私有組件庫配置（實際使用）
└── codegens.example.json    # 📚 組件庫配置示例

🔑 AI模型配置

1. 複製配置文件

# 複製示例配置文件
cp data/config.example.json data/config.json
cp data/codegens.example.json data/codegens.json

2. 配置AI提供商

編輯 data/config.json：

{
  "defaultModels": {
    "ANALYSIS": "claude-3-7-sonnet-latest",
    "DESIGN": "claude-3-5-sonnet-latest",
    "QUERY": "claude-3-5-sonnet-latest",
    "INTEGRATION": "claude-3-7-sonnet-latest"
  },
  "providers": [
    {
      "provider": "anthropic",
      "models": [
        {
          "model": "claude-3-5-sonnet-latest",
          "title": "Claude 3.5 Sonnet",
          "baseURL": "https://api.302.ai/v1",
          "features": ["reasoning", "creativity"],
          "apiKey": "sk-your-anthropic-api-key-here"
        }
      ]
    },
    {
      "provider": "openai",
      "models": [
        {
          "model": "gpt-4o",
          "title": "GPT-4o",
          "baseURL": "https://api.openai.com/v1",
          "features": ["vision", "reasoning", "creativity"],
          "apiKey": "sk-your-openai-api-key-here"
        }
      ]
    }
  ]
}

3. 支持的AI提供商

4. 驗證配置

# 驗證AI配置
node scripts/validate-config.js

# 測試模型連接
node scripts/test-model-recommendation.js

🧩 私有組件庫配置

data/codegens.json 包含了完整的私有組件庫配置：

[
  {
    "title": "Private Component Codegen",
    "description": "基於私有組件的代碼生成器",
    "fullStack": "Vue",
    "rules": [
      {
        "type": "private-components",
        "description": "私有組件使用規則",
        "docs": {
          "組件名稱": {
            "purpose": "使用目的",
            "usage": "項目中經常使用的場景描述",
            "props": {
              // props 參數相關
              "type": "",
              "size": ""
              ...
            }
          }
        }
      }
    ]
  }
]

🔧 IDE 集成

📝 MCP 配置文件

創建 mcp-config.json 文件：

{
  "mcpServers": {
    "garencode-design": {
      "command": "/bin/zsh",
      "args": ["-c", "cd /path/to/your/project && npm run mcp:dev"]
    }
  }
}

🎯 使用方式

1. 在 Cursor 中使用

// 在 Cursor 中調用 MCP 工具
const result = await mcp.callTool({
  name: 'design_component',
  arguments: {
    prompt: [
      {
        type: 'text',
        text: '創建一個用戶管理頁面，包含用戶列表、搜索、新增/編輯功能',
      },
    ],
  },
});

2. 在 VS Code 中使用

// settings.json
{
  "mcp.servers": {
    "garencode-design": {
      "command": "node",
      "args": ["dist/mcp-server.js"],
      "cwd": "/path/to/garencode-design"
    }
  }
}

💻 使用示例

基礎用法

import { MCPClient } from '@modelcontextprotocol/sdk/client';

const client = new MCPClient({
  name: 'GarenCode Design Client',
  version: '1.0.0',
});

// 連接服務
await client.connect({
  type: 'stdio',
  command: 'tsx',
  args: ['src/mcp-server.ts'],
});

// 設計組件
const result = await client.callTool({
  name: 'design_component',
  arguments: {
    prompt: [
      {
        type: 'text',
        text: '創建一個登錄表單組件，包含用戶名、密碼輸入框和登錄按鈕',
      },
    ],
  },
});

console.log('🎉 組件設計完成:', result);

高級用法

{
  "name": "design_component",
  "arguments": {
    "prompt": [
      {
        "type": "text",
        "text": "創建一個產品卡片組件，包含圖片、標題、價格和購買按鈕"
      }
    ]
  }
}

{
  "name": "design_block",
  "arguments": {
    "prompt": [
      {
        "type": "text",
        "text": "設計用戶列表管理塊，包含表格、搜索、分頁功能"
      }
    ]
  }
}

{
  "name": "query_component",
  "arguments": {
    "componentName": "das-button"
  }
}

🔮 未來計劃

當前能力

✅ 私有組件複用 - 完整的私有組件庫支持
✅ 智能設計流程 - AI驅動的組件設計
✅ 多模型支持 - Claude、GPT、DeepSeek、Ollama
✅ 類型安全 - 完整的 TypeScript 支持
✅ 配置管理 - 靈活的AI模型配置

即將推出

1️⃣ 私有狀態管理 🔄

// 未來功能：自動狀態管理
const stateConfig = {
  globalState: {
    user: 'UserState',
    theme: 'ThemeState',
    language: 'LanguageState',
  },
  localState: {
    form: 'FormState',
    modal: 'ModalState',
  },
};

// AI 自動生成狀態管理代碼
const stateCode = await generateStateManagement({
  components: designedComponents,
  stateConfig: stateConfig,
  framework: 'pinia', // 或 vuex, zustand
});

2️⃣ 全局屬性自動化 ⚙️

// 未來功能：全局屬性自動注入
const globalProps = {
  theme: 'light | dark',
  language: 'zh-CN | en-US',
  permissions: 'admin | user | guest',
  device: 'desktop | mobile | tablet',
};

// AI 自動為組件注入全局屬性
const enhancedComponents = await injectGlobalProps({
  components: designedComponents,
  globalProps: globalProps,
  injectionStrategy: 'automatic',
});

3️⃣ 智能代碼優化 🧠

// 未來功能：代碼性能優化
const optimization = await optimizeCode({
  components: generatedComponents,
  optimizationTargets: [
    'bundle-size',
    'runtime-performance',
    'memory-usage',
    'accessibility',
  ],
});

4️⃣ 設計系統集成 🎨

// 未來功能：設計系統自動同步
const designSystem = await syncDesignSystem({
  components: designedComponents,
  designTokens: {
    colors: 'design-tokens/colors.json',
    typography: 'design-tokens/typography.json',
    spacing: 'design-tokens/spacing.json',
  },
  syncStrategy: 'real-time',
});

開發路線圖

🏗️ 項目架構

目錄結構

mcp-garendesign/
├── 📁 src/
│   ├── 🚀 mcp-server.ts          # MCP 服務器入口
│   ├── 🛠️ tools/                 # MCP 工具實現
│   │   ├── design/
│   │   │   ├── component.ts      # 組件設計工具
│   │   │   └── block.ts          # 塊設計工具
│   │   └── query/
│   │       └── component.ts      # 組件查詢工具
│   ├── 🧠 core/                  # 核心業務邏輯
│   │   ├── design/               # 設計引擎
│   │   │   ├── complexity-analyzer.ts
│   │   │   ├── strategy/
│   │   │   ├── blocks/
│   │   │   └── integration/
│   │   └── query/                # 查詢引擎
│   ├── ⚙️ config/                # 配置管理
│   │   ├── ai-client-adapter.ts  # AI 客戶端適配器
│   │   ├── model-manager.ts      # 模型管理器
│   │   ├── config-validator.ts   # 配置驗證器
│   │   └── types.ts              # 配置類型定義
│   ├── 🎨 utils/                 # 工具函數
│   │   └── formatters/           # 格式化工具
│   ├── 📚 resources/             # MCP 資源
│   └── 🏷️ types/                 # 類型定義
├── 📁 data/                      # 配置文件
│   ├── config.json               # AI 模型配置
│   ├── config.example.json       # 配置示例
│   ├── codegens.json             # 私有組件庫配置
│   └── codegens.example.json     # 組件庫配置示例
├── 📁 scripts/                   # 腳本文件
├── 📁 docs/                      # 文檔
└── 📄 package.json

🔧 添加新工具

1. 創建工具文件

// src/tools/design/new-tool.ts
export async function newTool(args: NewToolArgs): Promise<ToolResult> {
  // 工具實現邏輯
  return {
    content: [
      {
        type: 'text',
        text: '工具執行結果',
      },
    ],
  };
}

2. 註冊工具

// src/mcp-server.ts
import { newTool } from './tools/design/new-tool.js';

// 在工具列表中註冊
tools: [
  // ... 其他工具
  {
    name: 'new_tool',
    description: '新工具描述',
    inputSchema: {
      type: 'object',
      properties: {
        // 輸入參數定義
      },
    },
  },
];

📚 添加新資源

1. 創建資源函數

// src/resources/index.ts
export function getNewResource() {
  return {
    contents: [
      {
        type: 'text',
        text: '資源內容',
      },
    ],
  };
}

2. 註冊資源

// src/mcp-server.ts
import { getNewResource } from './resources/index.js';

// 在資源列表中註冊
resources: [
  // ... 其他資源
  {
    uri: 'garencode://resources/new-resource',
    name: 'new_resource',
    description: '新資源描述',
    mimeType: 'text/plain',
  },
];

🧪 測試

# 運行測試
npm test

# 驗證配置
node scripts/validate-config.js

# 測試模型推薦
node scripts/test-model-recommendation.js

📄 許可證

本項目採用 MIT 許可證。