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 with AI Rules, component templates, and design tokens. Choose a style, export the rules, and let your AI coding assistant generate consistent, beautiful code.
01
Browse & Choose
Explore the style catalog to find a design that fits your project. Each style includes a philosophy, color palette, and component previews.
02
Export AI Rules
Click the export button to copy the AI Rules to your clipboard. Paste them into your AI coding assistant's rules file (.cursorrules, .clinerules, CLAUDE.md, etc.).
03
Generate Code
Ask your AI assistant to build components or pages. It will follow the style rules automatically, producing consistent and visually cohesive code.
Style System
Styles are organized into three categories based on their purpose.
Visual Styles
Define the look and feel: colors, typography, shadows, borders, and effects. Examples: Glassmorphism, Neo-Brutalist, Cyberpunk Neon.
Layout Patterns
Define structural arrangements: grid systems, navigation patterns, and content flow. Examples: Bento Grid, Holy Grail, Split Screen.
Animation Styles
Define motion and interaction patterns: transitions, scroll effects, and micro-interactions. Examples: Parallax Sections, Full Page Scroll.
Combining Styles
Visual styles and layout patterns are designed to work together. Each layout style lists compatible visual styles. Mix a layout pattern with a visual style to create unique designs.
Token System
Design tokens provide precise Tailwind CSS class mappings for AI consistency. Each style defines exact classes for borders, shadows, typography, 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, gap scale
- Colors: background, text, button (semantic)
- Forbidden: classes the AI must never use for this style
- Required: classes the AI must always include
Recipe System
Component recipes define how each UI element should be built for a given style. They include skeleton markup, configurable parameters, visual variants, and slot definitions.
Each recipe provides:
- Skeleton: base HTML element and required CSS classes
- Parameters: configurable options like size, padding, fullWidth
- Variants: visual alternatives (primary, secondary, outline, etc.)
- Slots: customizable content areas (label, 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 .cursorrules in your project root.
Claude Code
Add rules to your CLAUDE.md project file.
v0 by Vercel
Include style rules in your prompt when generating components.
Other AI Tools
Any tool with a system prompt or rules file can use StyleKit styles.
API & CLI
For programmatic access, StyleKit provides REST API endpoints and CLI tools.