Magic (21st.dev UI Generator) MCP
用自然语言描述，快速生成UI组件代码的IDE工具。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：Magic (21st.dev UI Generator) MCP。 它的用途是：用自然语言描述，快速生成UI组件代码的IDE工具。 完整的 Skill 内容见：https://321skill.com/skills/magic-21st-dev-ui-generator-mcp/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“在登录页面上创建一个居中的卡片，包含邮箱和密码输入框、一个记住我复选框和一个提交按钮，使用柔和的阴影和圆角。”，它会理解你的描述，并生成对应的JSX/TSX组件代码，你可以直接复制到项目中使用。
介绍
Magic (21st.dev UI Generator) MCP 解决了开发者在构建用户界面时，需要手动编写大量重复性组件代码的痛点。它允许你直接使用自然语言描述想要的UI效果，即可自动生成对应的前端代码，显著提升界面开发效率。
使用时，你只需在集成了该工具的IDE中，用简单的语言描述组件功能、样式或布局，例如“创建一个带悬停效果的蓝色按钮”，Magic便会理解你的意图并生成相应的React、Vue或其他框架的组件代码，支持在多种主流IDE中直接使用。
它非常适合前端开发、全栈开发以及UI设计师，尤其是那些希望快速搭建产品原型、验证设计想法或加速日常开发流程的从业者。对于不擅长编写前端代码的产品经理，也能用它快速将想法可视化。
建议在使用时尽量清晰地描述组件细节，如颜色、尺寸、交互状态等，以获得更精准的代码。由于它主要生成UI层代码，复杂的业务逻辑仍需开发者手动补充。初次使用可先从简单的组件开始，熟悉其生成风格和模式。
核心特点
核心区别在于其深度集成MCP协议，能够作为底层服务被多种IDE和AI助手（如Claude Desktop）直接调用，实现跨开发环境的无缝UI生成，而非绑定于单一编辑器或在线平台。
注意事项
不适合生成包含复杂业务逻辑、状态管理或需要深度定制交互行为的完整前端应用。
常见问题
支持哪些前端框架？
主要支持React，未来计划扩展Vue等主流框架。
需要联网使用吗？
通常需要，因为它依赖云端模型理解指令并生成代码。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/magic-21st-dev-ui-generator-mcp/raw/index.md 读取 Magic (21st.dev UI Generator) MCP 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/magic-21st-dev-ui-generator-mcp/raw/index.md（查看排版版本）