进阶约 20 分钟 2026-10-10 01:28:06 · 6 阅读

StyleKit MCP 接入实战：148 套风格装进 AI 编程助手，还能 lint 检查产出

AI 做的落地页千篇一律，病根在“做得好看点”不是规格

让 AI 生成网页，功能能跑，长相却和所有 AI 生成页撞脸。StyleKit 官方 README 对病因的诊断一针见血：“问题不在模型——‘做得好看点’本来就不算一句规格。”它把一个视觉方向变成 Agent 真正能照着执行的东西：一个有名字的风格，配上真实的设计令牌、硬性约束和可先看的示例。148 套风格，每套含令牌、组件配方、Tailwind 约束和可直接复制的提示词，MIT 开源（GitHub 591 stars，截至 2026-10-10）。

本篇走 MCP 这条路：装上 stylekit-mcp（0.4.1），你的 Claude Code、Cursor、Windsurf 就能按名字检索风格、取设计令牌和组件配方，还能用 stylekit_lint_code 检查生成出来的 UI 代码有没有真的守住风格规则。步骤与配图依据官方 README 与 packages/mcp/README.md 整理，实测部分来自 stylekit-mcp@0.4.1 的 stdio MCP 会话。相关背景可参考 AI 编程总纲。

三条接入路径，按工作流选

StyleKit 的三种用法共享同一套数据，选哪条取决于你的项目形态：

路径	命令	适合谁
shadcn registry	`npx shadcn add https://stylekit.top/r/glassmorphism.json`	已有 shadcn 项目，只想要主题变量
Agent Skill	`npx skills@latest add AnxForever/stylekit-skill`	让 Claude Code / Cursor / Windsurf 按需套用全部 148 套风格
MCP 服务器	`npx -y --prefer-online stylekit-mcp@latest`	要在生成循环里检索风格、做 lint 校验的自动化工作流

第一条路有个官方文档写明的硬要求：目标项目必须包含 tsconfig.json，否则 shadcn CLI 会以 Couldn't find tsconfig.json 退出。主题以 shadcn registry 形式发布，一条命令把亮色与暗色 cssVars 注入你的 globals.css，兼容 Tailwind v4，把 URL 里的 glassmorphism 换成任意 slug 即可。

StyleKit 三条接入路径与九个 MCP 工具

三条接入路径与实测 tools/list 返回的全量九个工具

把 MCP 服务器接进客户端

stylekit-mcp 用官方 MCP SDK 在本地 stdio 运行，运行时依赖只有 MCP SDK 和 Zod，Node >=18。配置一段 JSON 加进客户端：

{
  "mcpServers": {
    "stylekit": {
      "command": "npx",
      "args": ["-y", "--prefer-online", "stylekit-mcp@latest"]
    }
  }
}

落点因客户端而异：Claude Desktop / Claude Code 是 claude_desktop_config.json 或项目里的 .mcp.json，Cursor 是 .cursor/mcp.json，Windsurf 用自己的 MCP 配置入口。嫌手抄麻烦，官网开发者页面（www.stylekit.top/zh/developers）有一次性复制的完整 JSON。

两个行为细节值得知道。客户端每次启动 MCP 进程时，npx --prefer-online 都会查 npm 最新版——但已在运行的进程不会自我替换，更新要重启客户端；追求可复现就把 @latest 换成精确版本号如 @0.4.1。在线公开素材按请求获取，新增风格无需重装 CLI 或 MCP。

StyleKit MCP 客户端配置速查

客户端配置落点、JSON 块与版本行为要点速查

九个工具全只读，lint 是重点

实测 tools/list 返回九个工具，官方明确全部只读：

工具	用途
`stylekit_search_styles`	按关键词/类目检索风格目录
`stylekit_get_style`	风格完整档案：理念、色板、do/don't 规则
`stylekit_get_style_tokens`	类型化设计令牌：边框、阴影、字体、间距、配色
`stylekit_get_component_recipe`	组件配方：渲染好的 className + JSX
`stylekit_get_shadcn_install`	该风格的一行 shadcn 安装命令
`stylekit_get_implementation_brief`	生成 UI 前先取的完整实现契约（0.3.0 起）
`stylekit_list_assets`	分页浏览公共模板与设计资产，带来源出处
`stylekit_get_asset`	取单个资产的详情与许可允许的源文件
`stylekit_lint_code`	检查 UI 代码是否守住风格规则，逐条给原因和修法

packages/mcp/README 里把 lint 称作“值得织进工作流的那一个”：Agent 写完 UI 代码后调它，让风格约束被验证而不是被假设。它能解析变体前缀（dark:、md:、hover:），也认得 JSX/HTML 的 class 属性、cn()/clsx() 调用和模板字符串。

典型的串联用法，官方给了一个可以直接抄的提示词：

Search StyleKit for a frosted glass style, then give me its button recipe and the shadcn install command.

Agent 会依次调 stylekit_search_styles → stylekit_get_component_recipe → stylekit_get_shadcn_install，把可直接使用的代码交回来。

实测：一次真实的检索与一次真实的翻车

在一台 Node v20.16.0 的机器上跑 npx -y --prefer-online stylekit-mcp@0.4.1（engines 要求 >=18，本机满足），握手正常：serverInfo 返回 {"name":"stylekit-mcp-server","version":"0.4.1"}。

先检索毛玻璃风格，stylekit_search_styles {"query":"glassmorphism"} 返回：

# StyleKit styles
Found 148 (showing 15).
Source: live catalogue.

- Neo-Brutalist (neo-brutalist) — expressive · high-contrast
- Editorial (editorial) — minimal
- Neumorphism (neumorphism) — modern
- Bento Grid (bento-grid) — modern · responsive
- Corporate Clean (corporate-clean) — minimal ...

再取 glassmorphism 的按钮配方，返回的 className 全文如下：

font-medium backdrop-blur-2xl backdrop-saturate-150 rounded-2xl border
border-white/40 ring-1 ring-inset ring-white/20 transition-all duration-300
ease-out bg-white/25 text-white shadow-lg shadow-black/5 px-5 py-2.5

然后是翻车环节。拿一段只有 backdrop-blur rounded-xl 的按钮 JSX 交给 stylekit_lint_code（strict 模式、要求检查 button），lint 报告：

# Lint report — glassmorphism
Status: fail
Rules origin: live · content provenance: static

1 violation(s) across 5 classes checked.

- backdrop-blur (line 1) — Glassmorphism requires high blur
  (backdrop-blur-[40px] or higher)

Missing required button classes: backdrop-blur-lg, border, border-white/20

这正是 lint 的价值所在：肉眼看着“有点毛玻璃意思”的代码，按风格自己的规则判定不合格——模糊度不够、边框缺失，每条都带原因。对照上面配方里的 backdrop-blur-2xl 和 border-white/40，差距一目了然。

stylekit-mcp 实测会话

stylekit-mcp@0.4.1 实测：检索 148 套风格、取按钮配方、lint 报告 fail

lint 结果的判定口径

lint 返回三态：pass、fail、inconclusive。官方文档的口径是 ok 只在“结论性的静态通过”时为 true；运行时表达式按 inconclusive 处理，除非已知字面量本身已含违规。缺失必需类的提示默认是 advisory（建议），传 strict: true 加 checkRequired: ["button"] 才会在静态代码片段上判 fail——上面那次翻车就是开了 strict。还有一句值得记住的边界声明：

These checks do not certify visual quality or accessibility.

lint 只验证类名是否符合风格规则，不认证视觉质量与可访问性。README 开头也有一句同方向的诚实声明：“它不保证产出可以直接上线的界面，集成与完整度仍然取决于你的项目。”工具兜底的是规格一致性，不是审美。

来源与延伸

本文步骤与图片依据 StyleKit 官方 README 与 packages/mcp/README.md（github.com/AnxForever/stylekit）整理，实测部分来自 stylekit-mcp@0.4.1 stdio MCP 会话，版权归原作者所有。风格目录见 www.stylekit.top/zh/styles。