UI/UX Design Automation Suite with MCP

使用 MCP 实现 UI/UX 设计自动化套件

一套端到端的模型上下文协议（MCP）解决方案，可简化整个 UI/UX 设计工作流——从收集灵感到交付开发。本套件集成了多个专用 MCP 服务，通过 AI 助手实现设计流程的自动化与优化。

🎯 愿景

我们的目标是打造无缝、由 AI 驱动的工作流，支持 UI/UX 设计师完成从初步获取灵感到最终交付开发人员的整个设计流程。借助 MCP 服务中大语言模型的强大能力，我们正在构建一套全面的解决方案，让设计工作更高效、更一致。

🌟 功能

1. 设计灵感（inspire-mcp）

• 下载并分析现有网站，获取 UI/UX 灵感
• 捕获完整的 HTML 内容，包括内联 CSS 和资源
• 通过 AI 分析设计模式和组件
• 详细文档

2. Figma 设计集成（design-mcp）

• 通过 API 直接与 Figma 设计交互
• 从 Figma 文件中提取设计信息
• 通过 Figma 插件创建和更新设计
• 支持只读模式和写入模式
• 详细文档

3. 开发交付（handoff-mcp）

• 将 Figma 设计转换为 React 组件
• 生成使用 Tailwind CSS 的 TypeScript 代码
• 提取并转换 Figma 组件
• 自动增强无障碍功能
• 详细文档

🔄 工作流

1. 灵感阶段

   • 从现有网站获取灵感
   • 分析 UI 模式和组件
   • 保存参考资料

2. 设计阶段

   • 在 Figma 中创建设计
   • 借助 AI 辅助设计决策
   • 管理组件和样式

3. 开发交付

   • 将 Figma 设计转换为 React 组件
   • 生成响应式布局
   • 实现无障碍功能
   • 创建可用于开发的代码

🚀 开始使用

本套件的每个组件都有各自的详细文档。有关具体的设置和使用说明，请参阅各项目目录中的 README 文件：

• inspire-mcp - Web UI 灵感工具
• design-mcp - Figma 集成服务
• handoff-mcp - Figma 到 React 转换器

🛠️ 前置条件

• Node.js 18 或更高版本
• Figma 账户和 API 令牌
• 可使用 Claude 或 Cursor IDE 获取 AI 辅助

🔜 路线图

本项目正在积极开发中。即将推出的功能包括：

• 统一配置管理
• 集成工作流自动化
• 增强 AI 驱动的设计建议
• 设计系统生成
• 自动创建样式指南
• 组件库管理
• 设计版本控制集成

📝 说明

本项目仍在开发中，我们会持续改进并扩展本套件的功能。目前，每个组件均单独维护并配有各自的文档；我们正在努力打造更加集成化的体验。

📄 许可证

ISC

---

为热爱自动化的设计师倾心打造 ❤️