🚀 基于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组件
- 自动化实现无障碍增强
- 详细文档
🔄 工作流程
-
启发阶段
- 收集来自现有网站的灵感
- 分析UI模式和组件
- 存储参考资料
-
设计阶段
- 在Figma中创建设计
- 利用AI辅助进行设计决策
- 管理组件和样式
-
开发交付阶段
- 将Figma设计转换为React组件
- 生成响应式布局
- 实现无障碍功能
- 输出可用于开发的代码
🛠️ 先决条件
- Node.js 18或更高版本
- Figma账户和API令牌
- 访问Claude或Cursor IDE以获取AI辅助
🔜 路线图
此项目正在积极开发中。即将推出的功能包括：
- 统一的配置管理
- 整体工作流自动化
- 增强的基于AI的设计建议
- 设计系统生成
- 自动化样式指南创建
- 组件库管理
- 设计版本控制集成
📝 备注
这是一个正在进行中的项目，我们正在不断改进和扩展其功能。目前每个组件分别维护，并各自拥有独立文档，但我们正致力于打造一个更加集成化的体验。
📄 许可证
ISC
用心打造，为热爱自动化的设计师而建