StyleKit MCP server

面向 AI 生成网页的开源视觉风格库。 148 套精选风格，每套都包含设计令牌、组件配方、Tailwind 约束与可直接复制的提示词。

简体中文 · English

风格展示 · 页面模板 · 动效 · 参与贡献

StyleKit 是什么？

让 AI 帮你做个落地页，出来的东西能跑，但和所有 AI 做的落地页长得一样。问题不在模型 —— 而是「做得好看点」本来就不算一句规格。

StyleKit 把一个视觉方向变成代理真正能照着做的东西：一个有名字的风格，配上真实的令牌、硬性约束，以及可以先看的示例。选定一个，产出就不再漂移。

它不保证产出可以直接上线的界面。集成与完整度仍然取决于你的项目。

快速开始

git clone https://github.com/AnxForever/stylekit.git
cd stylekit
pnpm install
pnpm dev

打开 localhost:3000。Supabase 与管理员相关的可选配置见 .env.example。

三种使用方式

1. 把风格装进现有的 shadcn 项目

每套风格都以 shadcn registry 主题的形式发布。一条命令即可把它的亮色与暗色 cssVars 加进你的 globals.css：

npx shadcn add https://stylekit.top/r/glassmorphism.json

把 glassmorphism 换成任意 slug，兼容 Tailwind v4。

目标项目必须包含 tsconfig.json，否则 shadcn CLI 会以 Couldn't find tsconfig.json 退出。完整指南见 docs/registry.md。

2. 把整个库交给你的编码代理

npx skills add AnxForever/stylekit-skill

之后 Claude Code、Cursor、Windsurf 以及任何兼容 Agent Skills 的工具，都能按需套用这 148 套风格 ——「做成 Stripe 的样子」「赛博朋克仪表盘」—— 并使用正确的令牌与规则。技能本体在 AnxForever/stylekit-skill。

3. 通过 MCP 调用

npx -y stylekit-mcp

提供风格检索、设计令牌、组件配方，以及一个 stylekitlintcode 工具，用来检查生成的 UI 代码是否真的守住了该风格的规则。见 packages/mcp/README.md。

风格目录

148 套风格，分属十大类 —— 现代与科技、粗野主义、品牌启发（Apple、Stripe、Notion、GitHub）、复古与怀旧、艺术、日式与动漫、赛博朋克与科幻、布局模式、文化与地域、自然与温馨。

每套风格都自带设计令牌、组件代码、AI 规则和整页实时演示。

浏览全部 148 套 →

仓库里还有什么

• 60 个动效 —— 实时预览，一键复制
• 36 个页面模板 —— SaaS、仪表盘、电商、作品集、博客
• 随处导出 —— Tailwind preset、shadcn 主题、CSS 变量、Figma tokens
• IDE 规则 —— .cursorrules、claude-rules、windsurf-rules
• 双语 —— 完整的中英文内容与本地化路由
• 面向机器可读 —— /llms.txt、/llms.md、/llms-full.txt，以及有文档的 HTTP API（docs/API.md）

用 AI 构建前端的实战指南

站点上的实操文章 —— 当问题出在工作流而不是风格本身时看这些：

Shortened. The full README is on GitHub.