StyleKit

Documentation

StyleKit Documentation

Everything you need to know about using StyleKit to build beautiful AI-generated interfaces.

Getting Started

StyleKit is a curated collection of web design styles including AI Rules, component templates, and design tokens. Pick a style, export rules, and let your AI coding assistant generate consistent, beautiful code.

01

Browse & Select

Browse the style catalog to find a design that fits your project. Every style includes a design philosophy, color palette, and component previews.

02

Export AI Rules

Click the export button to copy AI Rules to clipboard. Paste them into your AI coding assistant's rules file (.cursorrules, .clinerules, CLAUDE.md, etc.).

03

Generate Code

Let your AI assistant build components or pages. It will automatically follow the style rules and generate consistent, visually cohesive code.

Style System

Styles are organized into three categories by purpose.

Visual Styles

Define look and feel: colors, fonts, shadows, borders, and effects. Examples: Glassmorphism, Neumorphism, Cyberpunk Neon.

Layout Patterns

Define structural arrangement: grid systems, navigation patterns, and content flow. Examples: Bento Grid, Holy Grail Layout, Split Layout.

Animation Styles

Define motion and interaction patterns: transitions, scroll effects, and micro-interactions. Examples: Parallax Scroll, Full-Page Scroll.

Combining Styles

Visual styles and layout patterns can be used together. Each layout style lists compatible visual styles. Mix layout patterns with visual styles to create unique designs.

Token System

Design tokens provide precise Tailwind CSS class mappings for AI consistency. Each style defines exact class names for borders, shadows, fonts, spacing, colors, and more.

Token Categories

  • Border: width, color, radius, style
  • Shadow: sm, md, lg, hover, focus, colored variants
  • Typography: heading, body, mono, size scale (hero to small)
  • Spacing: section, container, card, spacing scale
  • Colors: background, text, button (semantic)
  • Forbidden: class names AI must never use in this style
  • Required: class names AI must always include

Recipe System

Component recipes define how each UI element should be built in each style. They include skeleton markup, configurable parameters, visual variants, and slot definitions.

Each recipe provides:

  • Skeleton: base HTML elements and required CSS classes
  • Parameters: configurable options like size, padding, full-width
  • Variants: visual alternatives (primary, secondary, outline, etc.)
  • Slots: customizable content areas (text, icon, children)
  • States: hover, active, focus, and disabled styles

AI Integration

StyleKit works with any AI coding assistant that supports custom rules.

Cursor

Paste AI Rules into a .cursorrules file in your project root.

Claude Code

Add rules to your project's CLAUDE.md file.

v0 by Vercel

Include style rules in your prompt when generating components.

Other AI Tools

Any tool that supports system prompts or rules files can use StyleKit styles.