A
securityF
licenseA
qualityAn 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,918
3,657
The mcp-garendesign server is an AI-powered platform for intelligent frontend component design and generation using a block-based approach. It enables you to:
• Design Components: Create complete frontend components from user requirements using natural language or images, with automatic breakdown of complex needs into manageable blocks • Design Blocks: Build specific sub-components or blocks as part of a larger multi-stage design strategy • Integrate Designs: Combine completed design blocks with overall design strategies to produce cohesive, comprehensive design outputs • Query Components: Retrieve detailed information, documentation, API details, and example code for existing components • Multi-AI Support: Utilize various AI models (Claude, GPT, DeepSeek, Ollama) throughout the design process • Library Integration: Support integration and reuse of private component libraries for consistent development workflows
Supports Angular framework for AI-driven component design and code generation, enabling automated creation of Angular components from natural language requirements
Utilizes Mermaid diagrams for visualizing the core workflow and architecture of the component design process
Manages dependencies and package installation for the Node.js-based MCP server
Supports local AI model deployment through Ollama for component design and code generation tasks
Integrates with OpenAI's GPT models for AI-driven component analysis, design, and automated code generation
Alternative package manager option for installing and managing project dependencies
Supports React framework for AI-driven component design and code generation, enabling automated creation of React components from natural language requirements
Generates fully type-safe TypeScript code for components with complete type definitions and industry best practices
Supports Vue.js framework for AI-driven component design and code generation, enabling automated creation of Vue components from natural language requirements
🚀 GarenCode Design - AI驱动的智能组件设计平台
🎯 从需求到代码，AI驱动的智能设计流水线
⚡ 让每个开发者都能成为组件设计大师
📋 目录导航
🌟 项目介绍
🎯 核心理念
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"
}
}
}
🚀 快速开始
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
🔧 添加新工具
创建工具文件
// src/tools/design/new-tool.ts
export async function newTool(args: NewToolArgs): Promise<ToolResult> {
// 工具实现逻辑
return {
content: [
{
type: 'text',
text: '工具执行结果',
},
],
};
}
注册工具
// src/mcp-server.ts
import { newTool } from './tools/design/new-tool.js';
// 在工具列表中注册
tools: [
// ... 其他工具
{
name: 'new_tool',
description: '新工具描述',
inputSchema: {
type: 'object',
properties: {
// 输入参数定义
},
},
},
];
📚 添加新资源
创建资源函数
// src/resources/index.ts
export function getNewResource() {
return {
contents: [
{
type: 'text',
text: '资源内容',
},
],
};
}
注册资源
// 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。
🔧 提交代码
Fork 项目
创建功能分支 (
git checkout -b feature/amazing-feature)提交更改 (
git commit -m 'Add amazing feature')推送到分支 (
git push origin feature/amazing-feature)创建 Pull Request
📄 许可证
本项目采用 MIT 许可证。
⚔️ 以盖伦之名，铸就完美设计 ⚔️
🌟 GarenCode Design - 让每个组件都符合心意
Enables AI-driven frontend component design and code generation from natural language requirements. Supports Vue, React, and Angular with intelligent component decomposition, API design, and complete project generation.
Related MCP Servers
- AsecurityFlicenseAqualityAI-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 -32
- AsecurityFlicenseAqualityA powerful AI-driven tool that helps developers create beautiful, modern UI components instantly through natural language descriptions.Last updated -43,918
- AsecurityFlicenseAqualityAn 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 -62719