magic
AI驱动UI组件生成，支持多IDE集成
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：magic。 它的用途是：AI驱动UI组件生成，支持多IDE集成 完整的 Skill 内容见：https://321skill.com/skills/magic/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
'帮我生成一个用户信息卡片组件，包含头像、姓名、简介和操作按钮，采用蓝色主题的现代卡片样式。' 它会自动生成对应的 React 组件代码，包含样式文件，并直接在 IDE 中展示预览，支持实时修改颜色和布局。
介绍
magic 是一款基于 MCP 协议的 AI 驱动 UI 组件生成工具，旨在帮助开发者快速创建前端组件。它能够理解自然语言描述，自动生成符合语义和视觉要求的组件代码，同时支持在多种主流 IDE（如 VS Code、JetBrains、Cursor 等）中无缝集成，提升开发效率。
使用 magic 时，开发者只需在 IDE 中通过对话或命令行输入需求描述，例如“生成一个带搜索框的导航栏”，工具便会自动生成对应的 React/Vue 组件代码，并附带样式和交互逻辑。生成的组件可直接拖拽使用或进一步手动调整，整个过程无需切换上下文。
magic 特别适合前端开发者和全栈开发者在日常开发中快速搭建原型、复用常见 UI 模式，或快速生成业务组件。它也能帮助设计团队快速验证设计稿的可行性，减少从设计到代码的转译成本。
建议在使用前明确组件需求，并确保 IDE 已安装 MCP 插件。magic 生成的是可编辑的代码，开发者应结合项目规范进行二次调整。注意复杂交互或依赖大量后端数据的组件可能需手动补充逻辑。
核心特点
与同类工具相比，magic 的核心优势在于原生支持 MCP 协议，能跨 IDE 统一使用，且生成的组件更注重代码可读性与可维护性，而非仅输出静态模板。
注意事项
不适合需要高度定制化动画或复杂状态管理的场景，生成组件仅覆盖常见 UI 模式，极端定制仍需手动编码。
常见问题
magic 支持哪些 IDE？
支持 VS Code、JetBrains 系列、Cursor 等主流 IDE，通过 MCP 插件集成。
magic 可以生成哪些框架的组件？
支持 React、Vue、Angular 等主流前端框架，也可生成原生 HTML+CSS 组件。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/magic/raw/index.md 读取 magic 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/magic/raw/index.md（查看排版版本）