21st MCP (原 Magic MCP)

关于 21st MCP (原 Magic MCP)

21st MCP 由组件社区 21st.dev 官方出品, 前身是 2025 年发布的 Magic MCP (@21st-dev/magic), 仓库以 ISC 许可开源, 2026 年统一更名为 21st MCP 并改由 21st CLI 安装。它面向界面创作: 用自然语言描述导航栏、卡片、表单, 模型会检索 21st.dev 的组件目录并生成可直接落盘的 React/Tailwind 代码。

与纯代码生成不同, 它把「检索真实社区组件再按项目风格改写」作为主路径: search 与 get_component 在组件、主题、模板目录里查找, generate 在账号开通 AI 能力时可一次产出多套变体, 还能调用品牌图标资源。旧工具名做了兼容映射, 历史配置无需大改。

技能规格

怎么安装

npx @21st-dev/cli@latest init --client claude (也支持 cursor/vscode/windsurf/codex); 或手动写入 mcpServers: {"21st":{"url":"https://21st.dev/api/mcp","headers":{"x-api-key":"YOUR_KEY"}}}。API Key 在 https://21st.dev/mcp 免费申请; 旧的 npx -y @21st-dev/magic@latest API_KEY="..." 仍可作为兼容代理使用。

适用场景

• 页面搭建: 把一段描述变成响应式导航、Hero、定价表等区块, 直接注入现有 React 项目。
• 组件调研: 按关键字检索社区实现, 比对不同交互方案后再改写。
• 品牌一致性: 生成时带上品牌 Logo 与配色, 快速铺一版营销页初稿。

相关链接

同维度的其他技能

以下是「设计创作」维度下的其他技能,可作备选。 想一次看完,见 设计创作类 Agent Skills。