Claude Code + Magic UI MCP:让 AI 自己长出「审美」

title: Claude Code + Magic UI MCP:让 AI 自己长出「审美」 slug: magic-ui-mcp publishedAt: 2026-05-08 excerpt: MCP 工具链如何把组件库变成 LLM 可用的能力,以及如何在审美与一致性之间做权衡。 tags: [mcp, ui, claude-code] readingMin: 9 wordCount: 1380 draft: false

"审美"是 AI 写 UI 时最尴尬的部分

让 AI 写表单、写后端逻辑、写脚本,这些都不太需要审美 —— 对就是对,错就是错。但只要让它"写一个看起来不土的卡片",事情立刻不一样。

模型默认产出的样式很容易陷入两个极端:

极端 A:Tailwind utility class 堆成俄罗斯方块,bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 这种 2018 年的 dribbble 风
极端 B:全 border border-gray-200 rounded p-4,无聊到像 boostrap default

两种结果都没法直接交付。要么让人觉得审美廉价,要么让人觉得 AI 在偷懒。一个常见但低效的修法是让设计师手写一份 design spec 喂给 AI,但这反过来违背了"让 AI 自己产出 UI"的初衷。

Magic UI MCP 给的是另一种思路:把"有审美的组件库"变成 LLM 可以调用的能力,而不是"喂"的能力。

MCP 是什么,简短点说

MCP(Model Context Protocol)是 Anthropic 推的一个模型与工具的标准接口。从 Claude Code 的视角看,它就是一组在配置里声明、运行时可调的工具:

// .mcp.json(项目根)
{
  "mcpServers": {
    "shadcn-ui-mcp": {
      "command": "npx",
      "args": ["-y", "@shadcn/mcp"]
    },
    "magic-ui": {
      "command": "npx",
      "args": ["-y", "@magicui/mcp"]
    }
  }
}

Claude Code 启动时加载 .mcp.json,把每个 server 暴露出来的工具(如 magic-ui/list_components、magic-ui/get_component_source)注册到自己的工具集。Agent 写 UI 时,与其凭印象抄 Tailwind class,不如调一次工具拿到组件的真实源码 + props 描述,再决定怎么组合。

三个具体能力

shadcn 与 Magic UI 的 MCP server 共同提供了大致这三类工具:

list_components:列出可用组件,每个带一句话用途描述
get_component_source:给 slug 返回组件 TSX 源码 + 默认样式
install_component:把组件文件落到本地(对应 pnpm dlx shadcn@latest add <name>)

对 LLM 来说,这意味着写"卡片"时,可以先看 5 个候选 card / magic-card / hover-card,再选一个 install,再在它基础上改,而不是从零拼 utility class。

装上之后怎么用 —— 一个 ProjectCard 的全过程

我们的 /works 列表每张卡需要做几件事:

标题 + 简介(轻量层级)
tag chips(lowercase + font-mono,统一风格)
一个轻量光晕,鼠标 hover 时显现,给"卡片可以点"一种暗示
可选封面图

如果不调 MCP,Claude 第一稿大概率给一个 border rounded-xl p-6 hover:shadow-lg 这种平庸但能用的版本。但调一次 magic-ui/get_component_source 看到现成的 magic-card 用 conic gradient 做 hover 边光,审美起点立刻不一样。

我们最终的实现没直接抄 magic-card,而是简化到 color-mix(in oklab, var(--brand) 35%, transparent) 的单色光晕 —— 这种"看过参考再做权衡"的过程才是 MCP 的真实价值。Claude 在 apps/web/components/project-card.tsx 里大致是这样的:

<article
  className={cn(
    "group relative overflow-hidden rounded-xl border border-border bg-card/60 p-5",
    "transition-all hover:-translate-y-0.5 hover:border-brand/30",
  )}
  style={{
    backgroundImage:
      "radial-gradient(120% 80% at 50% 0%, color-mix(in oklab, var(--brand) 18%, transparent) 0%, transparent 60%)",
  }}
>
  {/* ... */}
</article>

审美的"参考点"被锚住了

这才是 MCP 起作用的地方。Claude 在写 ProjectCard 的时候有了审美锚点:它知道"市面上类似的卡片大致用 conic gradient 做光晕,响应式上保持卡片在小屏占满宽度",然后基于这个锚点做项目级的简化和适配。

没有 MCP 的话,模型经常会"幻想"出一些根本不存在的 Tailwind utility(比如 border-gradient)。有了 MCP,它从'凭印象'切换到'查阅+裁剪',正确率显著提升。

与一致性的张力

MCP 解锁了 AI 写好 UI 的能力,但同时引入一个新问题:审美能不能被组件库主导?

如果每个组件都去抄一遍 Magic UI 的"花活"版本,站点会变得视觉过载。每个按钮都 shimmer、每个卡片都有 glow、每个 hero 都有 grid background —— 整个站会失去层级。

我们最终对 Claude1 的指引是:

复杂动效只用在 hero 区或 highlight 卡片上;列表 / 表单 / 详情正文一律保持低饱和,让 hero 区的动效有"放大"效果。

具体到 /works 页面:

Hero 区有一个 vcs-glow radial gradient 光晕
列表卡片有轻度 hover 光晕 (brand 35%)
详情页右栏的 tech-stack chips 完全没有动效,只用 token 颜色区分

审美的最大风险不是"丑",而是"花活过多压住内容"。MCP 让"调出花活"变得容易,反而让"克制"成了 PM 的新职责。

# This is NOT the Next.js you know

This version has breaking changes — APIs, conventions, and file structure may all differ from your training data.
Read the relevant guide in node_modules/next/dist/docs/ before writing any code.

把这种"先看资料再动手"的规则写到代码仓库里,而不是只放在 prompt 里 —— prompt 会被 /compact 压掉,仓库里的 AGENTS.md 不会。

结语

MCP 不会让 AI 真的"有审美" —— 它仍然不知道什么叫"克制"、什么叫"层级"。但它让 AI 在写 UI 时离参考更近一步,把"凭印象编"的概率压下来。

剩下的"克制"和"层级",仍然要 PM 在审核时持续校准。审美最终是一个状态机问题,而不是一个 prompt 问题。