Open-source visual styles, tokens, and AI prompts for less generic AI-generated UI.
136 curated styles — install a shadcn theme or use its constraints in Cursor, Claude Code, v0, or Windsurf. English & 中文 style discovery.
Showcase · Templates · Animations · Contributing
StyleKit helps humans and AI start from a consistent visual direction. Pick a style to get structured design tokens, component recipes, prompt guidance, and implementation references; production integration and completeness still depend on the target project.
|
|
|
|
136 styles across multiple visual and layout categories. Every style includes design tokens, component code, AI rules, and a curated preview.
Modern / Tech — Glassmorphism, Liquid Glass, Neumorphism, Bento Grid, Fluent Design, Material Design, Linear Style ...
Clean, professional styles for SaaS products, dashboards, and developer tools. Emphasis on subtle depth, blur effects, and systematic spacing.
Brutalist — Neo-Brutalist, Neo-Brutalist Playful, Neo-Brutalist Soft, Brutalist Web, Anti-Design
Bold borders, raw typography, high contrast. Ranges from aggressive to playful depending on the variant.
Brand-Inspired — Apple Style, Stripe Style, Notion Style, GitHub Style, Shopify Clean, Linear Style
Reverse-engineered design languages from iconic products. Great starting points for product UI.
Retro / Vintage — Art Deco, Vaporwave, VHS Aesthetic, Y2K, Outrun, Synthwave, Retro Vintage, Frutiger Aero
Nostalgic aesthetics spanning decades. From 1920s Art Deco to 2000s Y2K and Frutiger Aero.
Artistic — Watercolor, Impressionist Oil, Pop Art, Risograph, Collage Art, Ink Wash, Generative Art
Fine art movements translated into UI design. Painterly textures, halftone patterns, and organic forms.
Japanese / Anime — Ghibli Style, Cyber Anime, Shoujo Manga, Ukiyo-e, Pixel Anime, Neon Samurai, Kawaii Minimal
Japanese visual culture from traditional woodblock prints to modern anime aesthetics.
Cyberpunk / Sci-Fi — Cyberpunk Neon, Neon Tokyo, Sci-Fi HUD, Mecha, Holographic, Arcade CRT
Neon-drenched, high-tech interfaces. Terminal greens, scan lines, and holographic effects.
Layout Patterns — Magazine Grid, Masonry Flow, Split Screen, Parallax, Dashboard Layout, Holy Grail, F-Pattern, Z-Pattern
Structural patterns that pair with any visual style. Responsive grids, scroll-based layouts, and classic page structures.
Cultural / Regional — Islamic Geometric, Indian Festive, African Textile, Korean Minimal, Cyber Chinese, Dark Academia
Design traditions from around the world, adapted for modern web interfaces.
Nature / Cozy — Cottagecore, Scandinavian, Wabi-Sabi, Natural Organic, Solarpunk, Zen Garden, Tropical Paradise
Warm, organic, and calming. Earthy palettes, soft textures, and generous whitespace.
git clone https://github.com/AnxForever/stylekit.git
cd stylekit
pnpm install
pnpm devOpen localhost:3000. See .env.example for optional Supabase and admin configuration.
See docs/PROJECT_STRUCTURE.md for the repository map, runtime flow, source boundaries, and cleanup guidance.
See docs/STYLE_AUTHORING.md before adding or changing catalog styles.
See docs/DEPLOYMENT.md and docs/RELEASE_REVIEW.md for production deployment and release review notes.
The stable JSON endpoints expose published style metadata, tokens, recipes, and rules.
GET /api/styles # List all styles
GET /api/styles/{slug} # Style record (tokens + recipes + rules)
GET /api/styles/{slug}/tokens # Design tokens only
GET /api/styles/{slug}/recipes # Component recipes only
Every style is also published as a shadcn registry theme. Install any style's light + dark color theme into an existing shadcn project with one command:
npx shadcn add https://stylekit.top/r/glassmorphism.jsonSwap glassmorphism for any slug — browse the full list at /registry.json or in the styles gallery. The CLI injects the style's cssVars (light + dark) into your globals.css and works with Tailwind v4.
Prerequisite: the target project must contain a
tsconfig.json, or the shadcn CLI exits withCouldn't find tsconfig.json.
See docs/registry.md for the full guide.
Give Cursor, Claude Code, Windsurf, or any Agent-Skills-compatible coding agent built-in knowledge of StyleKit — how to browse styles and install them — with one command:
npx skills add AnxForever/stylekitYour agent can then apply any of the 136 styles on request ("make this look
like Stripe", "cyberpunk dashboard") using the correct tokens and rules. The
skill lives in SKILL.md; see docs/AGENT_SKILL_GUIDE.md
for how it's built and published.
If StyleKit happens to help you, that honestly means a lot.
You can support the project with any amount you like. It helps keep StyleKit going and offsets server, domain, and maintenance costs.
For Chinese readers:
如果 StyleKit 恰好帮到了你，欢迎扫码支持我把它继续做下去。金额随意，每一份心意我都很感谢。
- Tip via WeChat or Alipay on the website support page
- GitHub repo funding entry:
https://github.com/AnxForever/stylekit - Website support page:
https://stylekit.top/contact#support-maintenance - Public sponsor follow-up:
GitHub Discussions
Current QR assets:
- Alipay:
public/alipay-qr.jpg - WeChat Tipping:
public/wechat-qr.png
The website support section is driven from a single config file: lib/site/support.ts.
| Layer | Technology |
|---|---|
| Framework | Next.js 16 + Turbopack |
| UI | React 19, Radix UI, Lucide Icons |
| Styling | Tailwind CSS 4, CVA |
| Auth & DB | Supabase (PostgreSQL + auth helpers) |
| Validation | Zod 4 |
| Testing | Vitest + Playwright |
| Deployment | Alibaba Cloud ECS + Nginx + PM2 |
Current production for www.stylekit.top runs on an Alibaba Cloud ECS instance in Beijing.
- Edge and TLS: Nginx on the ECS host
- App process: PM2 app
stylekit - App directory:
/www/stylekitrsynced from a verified local checkout - Runtime command:
pnpm start --hostname 0.0.0.0 --port 13000
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.
See docs/DEPLOYMENT.md for the deployment runbook, healthcheck watchdog setup, admin login checks, and rollback commands.
Contributions welcome. Please read these before opening a PR:
CONTRIBUTING.mdSTYLE_ADDITION_CHECKLIST.md— required for new styles
git checkout -b feat/your-feature
pnpm lint && pnpm test && pnpm build
git commit -m "feat: add your feature"
MIT — see LICENSE.
www.stylekit.top
Built by AnxForever