English Français العربية

StyleKit

Registre officiel Outils de développement

MCP server for StyleKit styles, tokens, recipes, lint and repair over stdio or HTTP.

Code source Site web Documentation

Installation

Ajoutez ceci à la configuration MCP de votre client (Claude Desktop : claude_desktop_config.json ; Cursor : .cursor/mcp.json ; VS Code et les autres utilisent la même forme « mcpServers »).

Remote (streamable-http)
Claude Code 
claude mcp add --transport http stylekit 'https://www.stylekit.top/mcp'
Configuration JSON (Claude Desktop, Cursor, VS Code) 
{
    "mcpServers": {
        "stylekit": {
            "type": "http",
            "url": "https://www.stylekit.top/mcp"
        }
    }
}
NPM package stylekit-mcp
Claude Code 
claude mcp add stylekit -- npx -y stylekit-mcp@0.5.0
Configuration JSON (Claude Desktop, Cursor, VS Code) 
{
    "mcpServers": {
        "stylekit": {
            "command": "npx",
            "args": [
                "-y",
                "stylekit-mcp@0.5.0"
            ]
        }
    }
}

Documentation

Tirée du README du projet sur GitHub, actualisée chaque semaine. Les liens ouvrent GitHub.

Sommaire
  1. StyleKit 是什么？
  2. 快速开始
  3. 三种使用方式
  4. 风格目录
  5. 仓库里还有什么
  6. 用 AI 构建前端的实战指南
  7. 参与贡献
  8. 支持这个项目
  9. Star 趋势
  10. 贡献者
  11. 许可证

面向 AI 生成网页的开源视觉风格库。

149 套精选风格，每套都包含设计令牌、组件配方、Tailwind 约束与可直接复制的提示词。

支持 MCP、Agent Skill 与 npm CLI。

简体中文 · 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@latest add AnxForever/stylekit-skill

之后 Claude Code、Cursor、Windsurf 以及任何兼容 Agent Skills 的工具，都能按需套用这 149 套风格 ——「做成 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。

风格目录

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

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

浏览全部 149 套 →

仓库里还有什么

  • 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 构建前端的实战指南

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

参与贡献

欢迎贡献。提交 PR 前请先阅读：

  1. docs/CONTRIBUTING.md
  2. docs/STYLE_ADDITION_CHECKLIST.md —— 新增风格必读
  3. 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。

www.stylekit.top

由 AnxForever 构建

Questions fréquentes

Qu'est-ce que StyleKit ?

MCP server for StyleKit styles, tokens, recipes, lint and repair over stdio or HTTP.

Comment installer StyleKit ?

Il fonctionne comme serveur distant. Dans Claude Code : claude mcp add --transport http stylekit 'https://www.stylekit.top/mcp'. Pour les autres clients, collez la configuration JSON de cette page dans leurs réglages MCP.

Faut-il une clé API pour StyleKit ?

Son entrée au registre n'indique aucune clé ni secret obligatoire. Certaines fonctions peuvent tout de même demander un compte auprès du service auquel il se connecte.

StyleKit est-il open source ?

Oui. Son code est sur GitHub sous licence MIT.

Qui maintient StyleKit ?

Il est publié par AnxForever. AI.tn le référence sans le maintenir ni le recommander.

Issu du registre MCP officiel. Être listé n'est pas une recommandation : vérifiez le code et les permissions d'un serveur avant de lui donner accès à vos données.