StyleKit

Search 148 curated design styles and pull tokens, recipes, and shadcn commands into your AI IDE.

Quick Install

Automated & IDE Setup

Copy the AI prompt to install this server into Claude Code, Cursor, or another agent — or use 1-click editor setup below.

Add to Cursor Add to VS Code

Not yet automatically verified

We haven't yet run this listing's install command through our automated sandbox check. This isn't a red flag — we're steadily working through the catalog.

Manual Client & Custom JSON ConfigExpand JSON ▾

Client Config & Setup

Choose your client or environment

Target File:~/Library/Application Support/Claude/claude_desktop_config.json

claude_desktop_config.json

{
  "mcpServers": {
    "stylekit": {
      "command": "npx",
      "args": [
        "-y",
        "shadcn"
      ]
    }
  }
}

💡 Paste the JSON block into your client's configuration file under mcpServers, then restart the application.

Documentation Overview

StyleKit is an open-source visual style library for AI-generated web interfaces.
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 & 中文.

English · 简体中文

Styles · Templates · Animations · Contributing

What is StyleKit?

StyleKit helps developers and AI coding tools start from a consistent visual direction. Pick a named style to get structured design tokens, component recipes, prompt guidance, and implementation references for a website or dashboard; production integration and completeness still depend on the target project.

AI frontend resources

If you are using AI to design or build a frontend, these focused guides cover the practical workflow:

Fix an AI-generated website that looks bad — visual hierarchy, spacing, typography, and component consistency.
How to choose AI web design tools — compare prompt, design, and code-generation workflows.
AI UI generation — turn a page brief into a usable interface structure.
AI frontend workflow — move from idea to React, Tailwind, and implementation constraints.
Chinese guides: AI 网页设计工具 · AI 前端工作流

Design System

148 visual and layout styles with design tokens, color palettes, and typography
Live showcases — a full-page interactive demo for every catalog 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

AI implementation guidance — hard prompt, design spec, and creative brief
IDE export — .cursorrules, claude-rules, windsurf-rules
shadcn theme install — light and dark CSS variables for existing projects
llms.txt — AI-discoverable docs at /llms.txt

Creative Tools

60 animations with live preview and one-click copy
36 page-template demos — SaaS, dashboard, e-commerce, portfolio, blog
Prompt libraries — copyable UI, landing page, dashboard, Tailwind, and dark mode prompts
Design resources — gradients, shadows, backgrounds, typography, and component patterns

Platform

Bilingual — full English and Chinese support
Localized routing — English and Chinese public pages
LLM-readable docs — /llms.txt, /llms.md, and /llms-full.txt
Production runbooks — deployment, release review, and style authoring docs

Styles

148 visual and layout styles across multiple 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.

Browse all styles →

Quick Start

bash

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.

Project Structure

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. Deployment is environment-specific: build locally, then serve the .next output with your process manager of choice (ecosystem.config.cjs holds a PM2 example).

API Surface

The stable JSON endpoints expose published style metadata, tokens, recipes, and rules.

http

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
GET  /api/styles/stats                # Aggregate views, favorites, and ratings per style

Use in your shadcn project

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:

Terminal

npx shadcn add https://stylekit.top/r/glassmorphism.json

Swap 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 with Couldn't find tsconfig.json.

See docs/registry.md for the full guide.

Use as an Agent Skill

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:

Terminal

npx skills add AnxForever/stylekit-skill

Read the full README →View source on GitHub →

Related MCP Servers

View all in Developer Tools View all alternatives

Reviews

No reviews yet — be the first to share how this listing worked for you.

Frequently Asked Questions about StyleKit

Add the following block to your claude_desktop_config.json under mcpServers: "mcpServers": { "stylekit": { "command": "npx", "args": ["-y", "StyleKit"] } }

AllMCPs Directory Badge

Full Badge Customizer

Showcase your server listing on GitHub or your project documentation. Embed this dynamic SVG badge to highlight official listing status and live engagement.

Badge Style:

Live Dynamic SVG Preview

Markdown (GitHub README)

[![AllMCPs](https://allmcps.com/api/badge/stylekit?style=directory)](https://allmcps.com/mcp/stylekit)

HTML Embed

<a href="https://allmcps.com/mcp/stylekit"><img src="https://allmcps.com/api/badge/stylekit?style=directory" alt="StyleKit on AllMCPs" /></a>

Technical Specs & Signals

CategoryDeveloper Tools

43Quality signal: Fair · 43/100How this signal is calculated ▾

Server availabilityNot measured

Not scored for repo-hosted servers — we can't reach the running server, only its GitHub page. Hosted MCP endpoints are health-checked live.

Verified ownership10/20

Documentation & tools16/30

Adoption & activity6/15

Community engagement0/10

A guidance signal from public completeness & health data — not a user rating. New listings start lower and rise as they add docs, get verified, and grow adoption. Signals we can't observe for a listing are skipped, not counted against it.

Supply-chain signal

No high-severity advisories surfaced by our automated scan.

Critical 0High 0Medium 0Low 0

Scanned 2h ago via OSV.dev · shadcn (npm)

★ Featured

Moxie Docs MCP

MCP & Agent Skills for Automated Documentation, and codebase conventions + context

Explore Server →

Own this project?

This directory is pre-filled from public sources. Claim via GitHub README, site badge, or DNS TXT to unlock edit access and the Official badge — proof is checked automatically, then reviewed by our team.

Free dofollow backlink: add your website and place the AllMCPs badge on it — no claim needed. We detect it automatically and keep it verified as long as the badge stays live.

Claim & get free dofollow

Share & Embed

Add our SVG badge (dark/light directory styles) or embeddable widget to your site.

Explore more

More in 💻 Developer Tools →Best MCP servers for Developers →Alternatives to StyleKit →Install in Claude Desktop Install in Cursor Install in VS Code