120+ Styles. 49 Animations. 34 Templates. One Toolkit for AI-Driven UI.

Showcase · Templates · Animations · API Docs · Contributing

---

What is StyleKit?

StyleKit helps humans and AI generate consistent, high-quality UI code. Pick a style, get structured design tokens, component recipes, and prompt templates — everything needed to go from "glassmorphism SaaS dashboard" to production-ready code.

Design System 120+ visual styles with design tokens, color palettes, and typography 128 live showcases — full-page interactive demos for every style Component recipes — copy-paste code for buttons, cards, inputs, and more Export anywhere — Tailwind preset, shadcn theme, CSS variables, Figma tokens	AI-Native Workflow Prompt builder — Surface + Context + Constraints methodology IDE export — .cursorrules, claude-rules, windsurf-rules Style linter — validate code against any style spec llms.txt — AI-discoverable docs at /llms.txt
Creative Tools 49 CSS animations with live preview and one-click copy 34 page templates — SaaS, dashboard, e-commerce, portfolio, blog Style blender — mix two styles into a new hybrid Side-by-side comparison — evaluate styles head-to-head	Platform Bilingual — full English and Chinese support Community — ratings, comments, and style submissions OAuth — GitHub and Google sign-in PWA — installable, works offline, dark/light mode

Styles

120+ styles across 10+ categories. Every style includes design tokens, component code, AI rules, and a live showcase.

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.

Browse all styles →

Quick Start

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

Open localhost:3000. See .env.example for optional Supabase and admin configuration.

API

RESTful API for programmatic access. All endpoints return JSON.

GET  /api/styles                      # List all styles
GET  /api/styles/{slug}               # Full style pack (tokens + recipes + rules)
GET  /api/styles/{slug}/tokens        # Design tokens only
GET  /api/styles/{slug}/recipes       # Component recipes only
POST /api/lint                        # Lint code against a style
POST /api/analyze-style               # Analyze existing code
POST /api/match-style                 # Match code to closest style

Full API docs →

Tech Stack

Layer	Technology
Framework	Next.js 16 + Turbopack
UI	React 19, Radix UI, Lucide Icons
Styling	Tailwind CSS 4, CVA
Auth & DB	Supabase (OAuth, PostgreSQL)
Validation	Zod 4
Testing	Vitest + Playwright
Deployment	Alibaba Cloud ECS + Nginx + systemd

Production Deployment

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: stylekit.service via systemd
• App directory: /www/stylekit
• 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.

Contributing

Contributions welcome. Please read these before opening a PR:

1. CONTRIBUTING.md
2. STYLE_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"

Star History

Contributors

License

MIT — see LICENSE.

---

www.stylekit.top
Built by AnxForever