DESIGN/设计资源·UI-KIT

magic-mcp

21st-dev/magic-mcp

It's like v0, but in your Cursor / Claude Code / Windsurf: search 10,000+ React/Tailwind components, generate new UI with AI, and publish your own — right from your editor. Magic MCP is now the 21st MCP; this package keeps old configs working. Setup: 21st.dev/mcp

打开仓库Open repository 官网Homepage 上升中Rising

怎么装：Install: npx @21st-dev/cli@latest init --client cursor # or: claude | vscode | windsurf | codex

02 / 现在的位置02 / Why now

它现在处在什么位置Where it stands right now

首次发现FIRST SEEN

03 OCT 202603 OCT 2026

增长GROWTH

+0.1%+0.1%

6.0k → 6.0k stars · 2 个快照6.0k → 6.0k stars · 2 snapshots

状态STATUS

持续活跃Active

03 / 它能帮你做什么03 / What it helps you do

它能帮你做成什么What it helps you do

04 / 安装04 / Install

怎么装How to install

NPX

$

README 里给出的安装方式。The installation method given in the README.

MCP CONFIG

$

MCP 客户端配置，粘贴到对应的配置文件里即可。An MCP client config — paste it into the relevant config file.

两种装法选一个即可 —— 上面那条给命令行用户，下面那条给写代码的用户。Pick one of the two — the first is for command-line users, the second for people writing code.

05 / 限制与风险05 / Limits and risk

限制与风险Limits and risk

风险不是警告，是可信度的一部分。以下结论只基于文档静态扫描，我们不会执行项目里的任何代码。Risk here is evidence, not an alarm. These findings come from static scanning of the docs; we never execute a project’s code.

限制LIMITS

未知Unknown

01需要 API KeyREQUIRES API KEY: 是Yes
02需要本地环境NEEDS LOCAL RUNTIME: 未在文档中发现Not found in the docs
03需要 DockerNEEDS DOCKER: 未在文档中发现Not found in the docs
04难度DIFFICULTY: 需要 API KeyNeeds an API key

PROVENANCE · 这些结论的依据是什么Where these conclusions come from

来源 URLSource URL: https://github.com/21st-dev/magic-mcp
原始数据哈希Raw data hash: 0dac7d0d4880fb3c80264db4ffec8c66
解析时间Parsed at: 2026-10-04T23:16:12.767Z
最后一次验证Last verified: 2026-10-04T08:53:33.891Z
增长测量时间Growth measured: 2026-10-04T23:17:28.032Z
发现查询Discovery queries: focus:design:repo:tailwind-ui, focus:design:repo:ui-components, focus:web:repo:topic-tailwindcss
分类来源Category source: rules
焦点Focus

完整解析证据 JSONFull parse evidence JSON

{
  "agents": [
    {
      "agent": "claude-code",
      "evidence": "tree: .claude-plugin/"
    },
    {
      "agent": "codex",
      "evidence": "readme: …lugin install 21st --trust # Codex CLI codex plugin marketplace add…"
    },
    {
      "agent": "windsurf",
      "evidence": "readme: …sor # or: claude | vscode | windsurf | codex ``` Or add it manual…"
    },
    {
      "agent": "vscode",
      "evidence": "readme: …lient cursor # or: claude | vscode | windsurf | codex ``` Or ad…"
    }
  ],
  "apiKey": "\"headers\": { \"x-api-key\": \"YOUR_21ST_API_KEY\" } } } } ``` Get an API key at [",
  "docker": null,
  "taxonomy": {
    "scores": {
      "design": 3,
      "ai-tools": 1,
      "dev-tools": 1,
      "indie-web": 0,
      "skill-agent": 4,
      "productivity": 0
    },
    "primary": "design",
    "secondary": "ui-kit"
  },
  "localRuntime": null,
  "skillMdTotal": 1,
  "skillMdErrors": [],
  "treeTruncated": false,
  "categoryScores": {
    "data": 0,
    "agent": 0,
    "media": 0,
    "design": 8,
    "browser": 0,
    "devtool": 1,
    "security": 0,
    "marketing": 0,
    "productivity": 0
  },
  "classification": [
    {
      "signal": "1 SKILL.md with name + description",
      "weight": 0.95
    },
    {
      "signal": "server.json (MCP registry manifest)",
      "weight": 0.85
    },
    {
      "signal": "skills/ directory with 1 markdown files",
      "weight": 0.75
    },
    {
      "signal": "Claude Code plugin manifest",
      "weight": 0.7
    },
    {
      "signal": "README ships an mcpServers config for this server",
      "weight": 0.7
    },
    {
      "signal": "MCP topic + README",
      "weight": 0.6
    },
    {
      "signal": ".mcp.json (configures servers it uses)",
      "weight": 0.3
    },
    {
      "signal": "description mentions AI",
      "weight": 0.2
    }
  ],
  "scannedSources": [
    "readme",
    "skills/21st-ui/SKILL.md"
  ],
  "skillMdFetched": 1
}