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模型
🎨 设计流程
🔄 核心工作流
📝 详细流程说明
1️⃣ 需求分析阶段 🔍
2️⃣ 复杂度评估 📊
3️⃣ 智能分解 🧩
4️⃣ 设计策略生成 🎨
5️⃣ 分块开发 ⚡
6️⃣ 智能集成 🔗
⚙️ 项目配置
📁 配置文件结构
🔑 AI模型配置
1. 复制配置文件
2. 配置AI提供商
编辑 data/config.json
:
3. 支持的AI提供商
4. 验证配置
🧩 私有组件库配置
data/codegens.json
包含了完整的私有组件库配置:
🔧 IDE 集成
📝 MCP 配置文件
创建 mcp-config.json
文件:
🎯 使用方式
1. 在 Cursor 中使用
2. 在 VS Code 中使用
🚀 快速开始
1️⃣ 环境准备
2️⃣ 配置设置
3️⃣ 启动服务
4️⃣ 验证安装
📚 使用指南
🎨 组件设计工具
design_component
设计前端组件:
design_block
设计复杂页面的单个块:
query_component
查询组件详细信息:
🔄 完整工作流示例
🔮 未来计划
🎯 当前能力
✅ 私有组件复用 - 完整的私有组件库支持
✅ 智能设计流程 - AI驱动的组件设计
✅ 多模型支持 - Claude、GPT、DeepSeek、Ollama
✅ 类型安全 - 完整的 TypeScript 支持
✅ 配置管理 - 灵活的AI模型配置
🚀 即将推出
1️⃣ 私有状态管理 🔄
2️⃣ 全局属性自动化 ⚙️
3️⃣ 智能代码优化 🧠
4️⃣ 设计系统集成 🎨
📅 开发路线图
🏗️ 项目架构
📁 目录结构
🔧 添加新工具
- 创建工具文件
- 注册工具
📚 添加新资源
- 创建资源函数
- 注册资源
🧪 测试
🤝 贡献指南
我们欢迎所有形式的贡献!
🐛 报告问题
如果您发现了问题,请 创建 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
- AsecurityFlicenseAqualityAn AI-powered tool that generates modern UI components from natural language descriptions, integrating with popular IDEs to streamline UI development workflow.Last updated -43,3983,445
- 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,398
- 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 -62616