用自然语言造 UI，这个 MCP 让前端开发快 10 倍！

用自然语言造 UI，这个 MCP 让前端开发快 10 倍！

做过前端的同学都知道，最烦的不是写逻辑，而是从零搭一个好看的登录页、导航栏、按钮组——每次都要调半天样式，结果出来还是丑。

21st.dev 出品的 Magic MCP 就是来解决这个痛的。

你只需要在 Claude Code 聊天框里敲一句：

/ui create a modern navigation bar with responsive design and dark mode

Claude 直接给你生成一个带完整样式、可直接 copy 用的 React 组件——不是截图，不是设计稿，是真正能跑起来的代码。

它是怎么做到的？

Magic MCP 背后接入了 21st.dev 的组件库，所有组件都来自真实上线产品，风格统一、现代感强。你用自然语言描述，AI 理解你的意图，去库里挑最匹配的组件组合出来，代码质量直接对标 Vercel/Linear 的水准。

支持哪些 IDE？

官方支持四款主流开发工具：
– Cursor（最推荐）
– Windsurf
– VSCode + Cline
– Claude Desktop

安装也超简单，一条命令搞定：

npx mdskills install 21st-dev/magic-mcp claude

或者手动配到 mcp_config.json 里，支持 MCP 的工具都能用。

什么场景最适合？

• 快速搭 landing page 和管理后台的初版界面
• 写 demo 给客户看，不用设计师介入
• 产品迭代时快速出 UI 方案
• 团队没有专职前端，自己搞定基本界面

跟 v0.dev 什么关系？

你可能听说过 v0（Vercel 的 AI UI 工具），Magic MCP 就像是「能把 v0 的能力接进你本地 IDE」的那个插件——不用跳转到网页，直接在代码编辑器里完成，组件直接落进你的项目，不用复制粘贴。

一点提醒

免费额度够个人日常使用，但如果高频调用（比如做完整页面级别的生成），建议去 21st.dev 官网申请 API key。另外组件偏 React 技术栈，如果你们项目用 Vue 或其他框架，部分组件需要手动迁移。

总体来说，这是一个把「说一句话，出来一个漂亮 UI」这件事真正落地成生产力的工具。前端同学可以用来提效，非前端同学也可以用它自己搞定界面原型——光这一点就值了。

GitHub：https://github.com/21st-dev/magic-mcp

GitHub: https://github.com/21st-dev/magic-mcp