Skip to main content
Glama

mcp-garendesign

by lyw405

🚀 GarenCode Design - AI驱动的智能组件设计平台

🎯 从需求到代码,AI驱动的智能设计流水线
⚡ 让每个开发者都能成为组件设计大师


📋 目录导航


🌟 项目介绍

🎯 核心理念

GarenCode Design 是一个基于 MCP (Model Context Protocol) 的 AI 驱动组件设计平台。我们致力于让每个开发者都能轻松创建高质量的前端组件,从需求分析到代码生成,全程智能化。

✨ 核心特性

🏆 技术优势

  • 🚀 开发效率提升 50%+ - 从需求到代码的自动化流水线
  • 🎯 设计一致性 - 统一的组件库和设计规范
  • 🔧 高度可维护 - 标准化的代码结构和API设计
  • ⚡ 多模型支持 - Claude、GPT、DeepSeek、Ollama 等主流AI模型

🎨 设计流程

🔄 核心工作流

📝 详细流程说明

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" } } }

🚀 快速开始

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

📚 使用指南

🎨 组件设计工具

design_component

设计前端组件:

{ "name": "design_component", "arguments": { "prompt": [ { "type": "text", "text": "创建一个产品卡片组件,包含图片、标题、价格和购买按钮" } ] } }
design_block

设计复杂页面的单个块:

{ "name": "design_block", "arguments": { "prompt": [ { "type": "text", "text": "设计用户列表管理块,包含表格、搜索、分页功能" } ] } }
query_component

查询组件详细信息:

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

🔄 完整工作流示例

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);

🔮 未来计划

🎯 当前能力

私有组件复用 - 完整的私有组件库支持
智能设计流程 - 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: '工具执行结果', }, ], }; }
  1. 注册工具
// 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: '资源内容', }, ], }; }
  1. 注册资源
// 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

🤝 贡献指南

我们欢迎所有形式的贡献!

🐛 报告问题

如果您发现了问题,请 创建 Issue

💡 提交功能请求

如果您有新功能想法,请 创建 Feature Request

🔧 提交代码

  1. Fork 项目
  2. 创建功能分支 (git checkout -b feature/amazing-feature)
  3. 提交更改 (git commit -m 'Add amazing feature')
  4. 推送到分支 (git push origin feature/amazing-feature)
  5. 创建 Pull Request

📄 许可证

本项目采用 MIT 许可证


⚔️ 以盖伦之名,铸就完美设计 ⚔️

🌟 GarenCode Design - 让每个组件都符合心意

Related MCP Servers

  • A
    security
    F
    license
    A
    quality
    An AI-powered tool that generates modern UI components from natural language descriptions, integrating with popular IDEs to streamline UI development workflow.
    Last updated -
    4
    3,398
    3,445
    • Linux
    • Apple
  • A
    security
    F
    license
    A
    quality
    AI-driven tool that helps developers create beautiful UI components instantly through natural language descriptions, integrating with popular IDEs like Cursor, Windsurf, and VSCode.
    Last updated -
    3
    2
  • A
    security
    F
    license
    A
    quality
    A powerful AI-driven tool that helps developers create beautiful, modern UI components instantly through natural language descriptions.
    Last updated -
    4
    3,398
  • A
    security
    F
    license
    A
    quality
    An AI-powered Tailwind builder that helps developers create, inspire, and refactor UI components directly within their IDE, supporting popular frameworks like React, Next.js, Vue, and Svelte.
    Last updated -
    6
    26
    16

View all related MCP servers

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/lyw405/mcp-garendesign'

If you have feedback or need assistance with the MCP directory API, please join our Discord server