🚀 21世纪魔法人工智能代理

Magic Component Platform (MCP) 是一款强大的AI驱动工具，可助力开发者通过自然语言描述，快速打造现代化且美观的UI组件。它能与流行的IDE无缝集成，为UI开发提供流畅的工作流程。

🚀 快速开始

Magic Component Platform (MCP) 是一个强大的AI驱动工具，帮助开发者通过自然语言描述快速创建现代化、美观的UI组件。它与流行IDE无缝集成，并提供流畅的工作流以支持UI开发。

✨ 主要特性

• AI驱动的UI生成：通过自然语言描述创建UI组件
• 多IDE支持：
  • Cursor IDE集成
  • Windsurf 支持
  • VSCode + Cline 集成（Beta版本）
• 现代组件库：访问庞大的预建可自定义组件库，灵感源自21st.dev
• 实时预览：即时查看你创建的组件
• TypeScript支持：全面支持TypeScript以实现类型安全开发
• SVGL集成：获取庞大专业的品牌资产和Logo库
• 组件增强：为现有组件添加高级功能和动画（即将推出）

🎯 工作流程

1. 告诉代理你的需求
   • 在AI代理的聊天中，输入/ui并描述你需要的组件。
   • 示例：输入“创建一个带有搜索栏和结果列表的网页”以生成相应代码。
2. 获取实时反馈：在IDE中直接收到关于代码结构和最佳实践的建议。
3. 简化开发流程：通过AI自动生成重复性代码，如表单验证、事件处理和状态管理。

📦 安装指南

先决条件

• Node.js（版本12及以上）
• npm或yarn
• 安装支持的IDE（如VSCode, IntelliJ IDEA）

安装方法

方法一：使用CLI工具

1. 通过npm安装Magic CLI：

npm install -g magic-cli

2. 在项目目录中初始化Magic项目：

magic init

3. 按照提示完成配置，选择所需的IDE和插件。

方法二：手动配置

1. 下载并解压压缩包。
2. 配置环境变量（可选）。
3. 手动安装所需依赖库。

🤑 常见问题解答

• Q：Magic Agent如何处理我的代码？ A：它通过分析项目结构和代码上下文，在IDE中提供实时反馈和建议，而不会直接修改你的文件。
• Q：我可以自定义生成的组件吗？ A：当然可以！生成的组件使用标准HTML、CSS和JavaScript，你可以根据需要进行任何修改。
• Q：是否有使用限制？ A：目前处于Beta阶段，所有功能都是免费使用的。我们将持续改进平台。

🛠️ 开发信息

项目结构

src/
├── components/    # 存放自定义组件
│   └── Button.vue
├── pages/        # 存放页面组件
│   └── Home.vue
└── App.vue       # 主应用文件

关键组件

• WelcomeOnboarding：新用户引导流程
• MagicExtension：核心功能扩展模块
• ComponentGenerator：生成组件的主逻辑

🤝 贡献指南

我们欢迎任何贡献！请加入我们的Discord社区，提供反馈并帮助改进Magic Agent。源代码托管在GitHub。

⚡ 社区与支持

• Discord社区 - 加入我们的活跃社区
• Twitter - 关注我们获取更新

⚠️ 重要提示

Magic Agent目前处于Beta阶段。在此期间所有功能免费使用。感谢你的反馈和理解，我们将持续优化平台。

📄 许可证

MIT许可证

🙏 致谢

• 感谢我们的Beta测试人员和社区成员。
• 特别鸣谢Cursor、Windsurf和Cline团队的合作。
• 与21st.dev合作获取组件灵感。
• SVGL提供品牌资产集成。

更多信息，请加入我们的Discord社区，或访问21st.dev/magic。