MCP Stack For UI UX Designers

🚀 基于MCP的UI/UX设计自动化套件

本套件旨在打造无缝且由AI驱动的工作流，全方位支持UI/UX设计师从灵感收集到交付开发的全流程。借助大型语言模型与MCP服务器，构建出高效且一致的设计解决方案。

🚀 快速开始

此套件的每个组件都有详细的文档。请参考每个项目目录中的独立README文件以获取特定的设置和使用说明：

• inspire-mcp - 网页UI启发工具
• design-mcp - Figma集成服务器
• handoff-mcp - Figma转React转换器

✨ 主要特性

1. 设计启发（inspire-mcp）

• 下载并分析现有网站以获取UI/UX灵感
• 捕获完整的HTML内容及其内联CSS和资源
• 基于人工智能的设计模式与组件分析
• 详细文档

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组件
   • 生成响应式布局
   • 实现无障碍功能
   • 输出可用于开发的代码

🛠️ 先决条件

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

🔜 路线图

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

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

📝 备注

这是一个正在进行中的项目，我们正在不断改进和扩展其功能。目前每个组件分别维护，并各自拥有独立文档，但我们正致力于打造一个更加集成化的体验。

📄 许可证

ISC

用心打造，为热爱自动化的设计师而建