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@latest add AnxForever/stylekit-skill
之后 Claude Code、Cursor、Windsurf 以及任何兼容 Agent Skills 的工具，都能按需套用这 148 套风格 ——「做成 Stripe 的样子」「赛博朋克仪表盘」—— 并使用正确的令牌与规则。技能本体在 AnxForever/stylekit-skill。
兼容的 Agent 会在执行 Skill 说明时检查 GitHub 新版本，最多每 24 小时一次；这不是后台更新服务。旧版安装先运行一次 npx skills@latest update stylekit 完成迁移；如果改过旧版 Skill，迁移前先备份。之后由 Agent 在使用时检查，不需要反复安装；更新前会校验文件，检测到本地改动就跳过，更新失败则恢复旧文件。
3. 通过 MCP 调用
npx -y --prefer-online stylekit-mcp@latest
提供风格检索、设计令牌、组件配方，以及一个 stylekit_lint_code 工具，用来检查生成的 UI 代码是否真的守住了该风格的规则。见 packages/mcp/README.md。
接入 MCP 客户端时，把一次性 JSON 配置复制到开发者页面。客户端每次启动 MCP 进程时都会检查 npm 最新版本；已运行的进程需要重启后才会载入更新。在线公开素材会按请求获取，新增内容无需重装 CLI 或 MCP。
风格目录
148 套风格，分属十大类 —— 现代与科技、粗野主义、品牌启发（Apple、Stripe、Notion、GitHub）、复古与怀旧、艺术、日式与动漫、赛博朋克与科幻、布局模式、文化与地域、自然与温馨。
每套风格都自带设计令牌、组件代码、AI 规则和整页实时演示。
仓库里还有什么
- 60 个动效 —— 实时预览，一键复制
- 37 个页面模板 —— 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 构建前端的实战指南
站点上的实操文章 —— 当问题出在工作流而不是风格本身时看这些：
- AI 生成的网站不好看怎么修
- 怎么选 AI 网页设计工具
- AI 生成 UI 界面 —— 把一句话需求变成可用的界面结构
- AI 前端工作流
- English: Fix an AI-generated website · AI frontend workflow
参与贡献
欢迎贡献。提交 PR 前请先阅读：
docs/CONTRIBUTING.mddocs/STYLE_ADDITION_CHECKLIST.md—— 新增风格必读docs/STYLE_AUTHORING.md—— 风格是怎么写的，动手前先看
git checkout -b feat/your-feature
pnpm lint && pnpm test && pnpm build
git commit -m "feat: add your feature"
在改代码？先看上面的贡献文档，再看仓库根目录的 AGENTS.md 了解代码规则。
支持这个项目
如果 StyleKit 恰好帮到了你，点个 star 就已经很够了。想再往前一步的话，网站上有专门的支持页面，写明了服务器与域名成本 —— stylekit.top/contact#support-maintenance。
也欢迎扫码支持我把它继续做下去，金额随意，每一份心意我都很感谢。
Star 趋势
贡献者
许可证
MIT —— 详见 LICENSE。