Developer Tools

CLI, MCP & API

StyleKit offers three integration methods: local CLI, MCP Server, and HTTP API. The current product workflow focuses on two paths: website replication and frontend generation.

Path A

Reference URL → Extract → Generate

Use /api/style-extract to parse style evidence from real websites, import/apply in Create Style, then generate code in /generate.

/api/style-extract/create-style/generate

Path B

Preset Style → Template → Generate

Choose a built-in style from /styles, select template and output format in /generate, edit content, then download ZIP.

/styles/generate

HTTP API

Full REST API reference with 36+ endpoints, examples, and interactive testing

Quick Start

Use CLI commands to browse styles, lint code, and get recommendations in your local workflow.

# Show all commands
npx stylekit help

# List available styles
npx stylekit styles

# Show lint rules for one style
npx stylekit rules neo-brutalist

Lint Command

Check existing code against a target style and get actionable replacement suggestions.

# Lint a button file against Neo-Brutalist rules
npx stylekit lint ./src/Button.tsx --style neo-brutalist

# Lint a card file against Glassmorphism rules
npx stylekit lint ./components/Card.tsx --style glassmorphism

Output example:

Linting: ./src/Button.tsx
Style: neo-brutalist

[FAIL] 2 forbidden classes found
[WARN] 4 required classes missing

Issues:
  [x] "rounded-lg" - Neo-Brutalist uses sharp corners only
  [x] "shadow-md" - Use hard offset shadows

Suggested Fixes:
  - Replace "rounded-lg" with "rounded-none"
  - Replace "shadow-md" with "shadow-[4px_4px_0_#000]"

Smart Recommend

Generate recommendations based on audience, brand tone, and accessibility priority.

# Basic recommendation
npx stylekit recommend "SaaS dashboard"

# Context-aware recommendation
npx stylekit smart "e-commerce store" --audience consumer --mood playful

# Enterprise + accessibility context
npx stylekit smart "B2B SaaS" --audience enterprise --mood professional --a11y

# Compare two styles for one product
npx stylekit compare neo-brutalist glassmorphism "creative portfolio"

All Commands

stylekit help

Show help and usage examples.

stylekit styles

List all available styles.

stylekit rules <style>

Show lint rules for a given style.

stylekit lint <file> --style <style>

Check code files against style rules.

stylekit recommend <query>

Get quick style recommendations.

stylekit smart <query> [options]

Get context-aware recommendations with scores.

stylekit compare <s1> <s2> <query>

Compare two styles for the same product scenario.

stylekit search <query>

Search the style knowledge base.