![\"StyleKit\"](\"public/readme/logo-light.svg\"){kind=logo}
\n \n \n \n
\n StyleKit is an open-source visual style library for AI-generated web interfaces.
\n Browse 148 curated styles, then use design tokens, component recipes, Tailwind-ready constraints, and copy-ready prompts in React, Cursor, Claude Code, v0, or Windsurf. English & 中文.\n
\n ![\"Live](\"https://img.shields.io/badge/Live-www.stylekit.top-black?style=flat-square\"){kind=icon}
![\"Stars\"](\"https://img.shields.io/github/stars/AnxForever/stylekit?style=flat-square&color=f59e0b\")
![\"License\"](\"https://img.shields.io/badge/License-MIT-green?style=flat-square\"){kind=icon}
![\"Next.js](\"https://img.shields.io/badge/Next.js-16-black?style=flat-square&logo=next.js\"){kind=icon}
![\"TypeScript\"](\"https://img.shields.io/badge/TypeScript-5-3178C6?style=flat-square&logo=typescript\"){kind=icon}
\n English · 简体中文\n
\n\n\n \n ![\"StyleKit](\"public/readme/home-hero.png\")
\n \n
\n Styles ·\n Templates ·\n Animations ·\n Contributing\n
\n\n| \n\n### Design System\n\n- **148 visual and layout styles** with design tokens, color palettes, and typography\n- **Live showcases** — a full-page interactive demo for every catalog style\n- **Component recipes** — copy-paste code for buttons, cards, inputs, and more\n- **Export anywhere** — Tailwind preset, shadcn theme, CSS variables, Figma tokens\n\n | \n\n\n### AI-Native Workflow\n\n- **AI implementation guidance** — hard prompt, design spec, and creative brief\n- **IDE export** — `.cursorrules`, `claude-rules`, `windsurf-rules`\n- **shadcn theme install** — light and dark CSS variables for existing projects\n- **llms.txt** — AI-discoverable docs at [`/llms.txt`](https://stylekit.top/llms.txt)\n\n | \n
| \n\n### Creative Tools\n\n- **60 animations** with live preview and one-click copy\n- **36 page-template demos** — SaaS, dashboard, e-commerce, portfolio, blog\n- **Prompt libraries** — copyable UI, landing page, dashboard, Tailwind, and dark mode prompts\n- **Design resources** — gradients, shadows, backgrounds, typography, and component patterns\n\n | \n\n\n### Platform\n\n- **Bilingual** — full English and Chinese support\n- **Localized routing** — English and Chinese public pages\n- **LLM-readable docs** — `/llms.txt`, `/llms.md`, and `/llms-full.txt`\n- **Production runbooks** — deployment, release review, and style authoring docs\n\n | \n
\n Browse all styles →\n
\n\n## Quick Start\n\n```bash\ngit clone https://github.com/AnxForever/stylekit.git\ncd stylekit\npnpm install\npnpm dev\n```\n\nOpen [localhost:3000](http://localhost:3000). See [`.env.example`](.env.example) for optional Supabase and admin configuration.\n\n## Project Structure\n\nSee [`docs/PROJECT_STRUCTURE.md`](docs/PROJECT_STRUCTURE.md) for the repository map, runtime flow, source boundaries, and cleanup guidance.\nSee [`docs/STYLE_AUTHORING.md`](docs/STYLE_AUTHORING.md) before adding or changing catalog styles.\nDeployment is environment-specific: build locally, then serve the `.next` output with your process manager of choice (`ecosystem.config.cjs` holds a PM2 example).\n\n## API Surface\n\nThe stable JSON endpoints expose published style metadata, tokens, recipes, and rules.\n\n```http\nGET /api/styles # List all styles\nGET /api/styles/{slug} # Style record (tokens + recipes + rules)\nGET /api/styles/{slug}/tokens # Design tokens only\nGET /api/styles/{slug}/recipes # Component recipes only\nGET /api/styles/stats # Aggregate views, favorites, and ratings per style\n```\n\n## Use in your shadcn project\n\nEvery style is also published as a [shadcn registry](https://ui.shadcn.com/docs/registry) theme. Install any style's light + dark color theme into an existing shadcn project with one command:\n\n```bash\nnpx shadcn add https://stylekit.top/r/glassmorphism.json\n```\n\nSwap `glassmorphism` for any slug — browse the full list at [`/registry.json`](https://www.stylekit.top/registry.json) or in the [styles gallery](https://www.stylekit.top/en/styles). The CLI injects the style's `cssVars` (light + dark) into your `globals.css` and works with Tailwind v4.\n\n> Prerequisite: the target project must contain a `tsconfig.json`, or the shadcn CLI exits with `Couldn't find tsconfig.json`.\n\nSee [`docs/registry.md`](docs/registry.md) for the full guide.\n\n## Use as an Agent Skill\n\nGive Cursor, Claude Code, Windsurf, or any Agent-Skills-compatible coding agent\nbuilt-in knowledge of StyleKit — how to browse styles and install them — with\none command:\n\n```bash\nnpx skills add AnxForever/stylekit-skill\n```\n\nYour agent can then apply any of the 148 styles on request (\"make this look\nlike Stripe\", \"cyberpunk dashboard\") using the correct tokens and rules. The\nskill lives in its own repository ([`AnxForever/stylekit-skill`](https://github.com/AnxForever/stylekit-skill));\nsee [`docs/AGENT_SKILL_GUIDE.md`](docs/AGENT_SKILL_GUIDE.md) for how it's built and published.\n\n\n## Support This Project\n\nIf StyleKit happens to help you, that honestly means a lot.\n\nYou can support the project with any amount you like. It helps keep StyleKit going and offsets server, domain, and maintenance costs.\n\nFor Chinese readers:\n\n> 如果 StyleKit 恰好帮到了你，欢迎扫码支持我把它继续做下去。金额随意，每一份心意我都很感谢。\n\n- Tip via WeChat or Alipay on the website support page\n- GitHub repo funding entry: [`https://github.com/AnxForever/stylekit`](https://github.com/AnxForever/stylekit)\n- Website support page: [`https://stylekit.top/contact#support-maintenance`](https://stylekit.top/contact#support-maintenance)\n- Public sponsor follow-up: [`GitHub Discussions`](https://github.com/AnxForever/stylekit/discussions)\n\nCurrent QR assets (cropped to the code block itself plus a white quiet zone, so\nthe scannable area fills the frame):\n\n- Alipay: [`public/support/alipay-qr.png`](public/support/alipay-qr.png)\n- WeChat Tipping: [`public/support/wechat-qr.png`](public/support/wechat-qr.png)\n\nThe uncropped originals are kept at `public/alipay-qr.jpg` and\n`public/wechat-qr.png` for reference.\n\nThe website support section is driven from a single config file: [`lib/site/support.ts`](lib/site/support.ts).\n\n## Tech Stack\n\n| Layer | Technology |\n|-------|-----------|\n| Framework | Next.js 16 + Turbopack |\n| UI | React 19, Radix UI, Lucide Icons |\n| Styling | Tailwind CSS 4, CVA |\n| Auth & DB | Supabase (PostgreSQL + auth helpers) |\n| Validation | Zod 4 |\n| Testing | Vitest + Playwright |\n| Deployment | Alibaba Cloud ECS + Nginx + PM2 |\n\n## Production Deployment\n\nCurrent production for `www.stylekit.top` runs on an Alibaba Cloud ECS instance in Beijing.\n\n- Edge and TLS: Nginx on the ECS host\n- App process: PM2 app `stylekit`\n- App directory: `/www/stylekit` rsynced from a verified local checkout\n- Runtime command: PM2 runs `next start -p 13000` directly via `node_modules/next/dist/bin/next` (no npm wrapper)\n\n`vercel.json` is no longer part of the active production deployment path and should not be treated as the source of truth for where StyleKit is hosted.\n\nRun the verification gate above before shipping; `/api/health` reports service status once the app is running.\n\n## Contributing\n\nContributions welcome. Please read these before opening a PR:\n\n1. [`CONTRIBUTING.md`](docs/CONTRIBUTING.md)\n2. [`STYLE_ADDITION_CHECKLIST.md`](docs/STYLE_ADDITION_CHECKLIST.md) — required for new styles\n\n```bash\ngit checkout -b feat/your-feature\npnpm lint && pnpm test && pnpm build\ngit commit -m \"feat: add your feature\"\n```\n\n## Star History\n\n![\"Star](\"https://raw.githubusercontent.com/AnxForever/stylekit/main/public/readme/star-history.svg\")
\n\n## Contributors\n\n\n \n www.stylekit.top\n
\n Built by AnxForever\n