使用Magic MCP生成UI组件的完整流程可分为以下步骤：
- Início de projetos：确保已有前端项目（如使用Create React App创建的项目）
- requisito de entrada：在IDE聊天窗口输入
/ui后跟自然语言描述，例如：- 基础示例：
/ui 一个蓝色按钮 - 复杂需求：
/ui 带搜索功能和用户头像的导航栏
- 基础示例：
- Exibir resultados：系统会返回完整的React组件代码，包含Tailwind CSS样式和TypeScript类型
- Visualização em tempo real：生成的组件会显示预览窗口，代码修改后会即时更新
- 插入代码：点击”插入代码”按钮将组件添加到项目文件中
- Otimização：根据需要修改生成的代码，完善样式或逻辑
- execução de teste：保存后运行项目（如
npm start）验证效果
为了提高生成质量，建议：
- 提供尽可能详细的描述
- 复杂的UI可以拆分成多个简单组件生成
- 充分利用SVGL图标库（使用
/logo命令）
Essa resposta foi extraída do artigoMagic MCP: serviço MCP para gerar componentes modernos de UIO
Não pode ser reproduzido sem permissão:Ferramentas de produtividade de IA " 使用Magic MCP生成UI组件的具体操作流程是什么？
Português do Brasil 
简体中文 
English 
日本語 
Deutsch