Professional design systems for your AI agent

70 production-grade design systems — Stripe, Linear, Vercel, Notion and more — as clean JSON. Give your agent one URL and it applies colors, typography, spacing, and component styles.

You build fast with AI. Now ship interfaces that don't look generic.

Browse designs → · Quick Start →

---

How It Works (Your 3-Step Plan)

graph LR
    A[Choose Design] -->|copy URL| B[Tell AI Agent]
    B -->|fetches JSON| C[Reads CSS Tokens]
    C --> D[Applies to :root]
    C --> E[Loads Fonts]
    C --> F[Styles Components]

Loading

Browse. Copy the prompt. Paste it once. The agent applies tokens, fonts, radius, and shadcn component styles for you. No design tools required.

---

Design Catalog

70 designs covering brand-faithful recreations and original systems:

Category	Designs
Dev tools	Vercel, Linear, Cursor, Raycast, Warp, Expo, Sentry, Supabase, PostHog
AI products	Claude, Cohere, Mistral, Ollama, Replicate, Minimax, ElevenLabs, Runway
SaaS	Stripe, Notion, Intercom, Resend, Webflow, Figma, Framer, Miro
Enterprise	IBM, BMW, Coinbase, Kraken, Revolut, Wise, Uber, HashiCorp, MongoDB
Original	Editorial Dark, Warm SaaS, Neo Brutalist, Swiss Clean, Deep Ocean, Glassmorphic

Designs are grouped into collections: web (the default, above), terminal (Pi, Ghostty, iTerm2, Warp) and coding (OpenCode, VS Code). Terminal and coding themes carry syntax tokenColors and per-app apply instructions, and the detail page's Agent Prompt panel lets you pick an app target so the copied prompt tells your agent exactly how to install the theme there. Every terminal and coding theme (and every mapped website theme in Theme pairing) also offers three universal targets: Claude Code (writes a ~/.claude/themes/ custom theme and selects it with /theme), Omarchy OS (writes ~/.config/omarchy/themes/<slug>/colors.toml and runs omarchy-theme-set), and a General AI tool placeholder.

Glassmorphic is an original design inspired by glassmorphism / frosted-glass directions from designdotmd.directory (adapted to Sleek UI's token schema and quality bar).

---

Quick Start

Pick a design from the catalog:

https://luongnv.com/sleek-ui/designs/{slug}.json

Tell your AI agent:

Fetch https://luongnv.com/sleek-ui/designs/stripe.json
and apply this design system to my project.

That's it. The agent reads the JSON and applies all tokens.

---

What Gets Applied

graph TD
    JSON[design.json] --> T[CSS Tokens]
    JSON --> F[Font Links]
    JSON --> C[Component Styles]
    JSON --> A[Agent Instructions]
    T --> R[":root / .dark custom properties"]
    F --> G[Google Fonts link tag]
    C --> S[Tailwind + shadcn/ui classes]
    A --> I[Step-by-step apply guide]

Loading

Before / After

/* Before: browser defaults */
button { }

/* After: applying stripe.json */
:root {
  --background: 0 0% 100%;
  --foreground: 215 25% 27%;
  --primary: 227 100% 59%;
  --radius: 0.375rem;
}
.dark {
  --background: 215 28% 17%;
  --foreground: 210 40% 98%;
}
button {
  background: hsl(var(--primary));
  border-radius: var(--radius);
}

---

Design Schema

Each JSON file follows design.v1.json:

classDiagram
    class Design {
        +string name
        +string slug
        +string version
        +Tokens tokens
        +Fonts fonts
        +Components components
        +AgentInstructions agentInstructions
        +Accessibility accessibility
    }
    class Tokens {
        +Colors colors
        +Typography typography
        +Radius radius
        +Spacing spacing
    }
    class Colors {
        +object light
        +object dark
    }
    Design --> Tokens
    Tokens --> Colors

Loading

Colors use shadcn/ui HSL format: "240 33% 14%" — no hsl() wrapper, matches the hsl(var(--token)) pattern.

---

Get Started

View all designs →

Browse brand showcase →

GitHub →

Apache 2.0 Licensed

---

Agent-specific usage (Claude Code, Cursor, Codex CLI)

Claude Code

Fetch https://luongnv.com/sleek-ui/designs/{slug}.json
and apply this design system to my project.

Cursor

Open Composer (Cmd+K), then paste:

Fetch https://luongnv.com/sleek-ui/designs/{slug}.json
and apply this design system to my project.

Codex CLI

Fetch https://luongnv.com/sleek-ui/designs/{slug}.json
and apply this design system to my project.

Development setup

Tech Stack

Layer	Technology
Frontend	React 19 + TypeScript
Build	Vite 8
Styling	Tailwind CSS 4 + shadcn/ui
Schema	JSON Schema (design.v1.json)
Deploy	GitHub Pages + GitHub Actions

Local Development

Install dependencies:

npm install

Start dev server:

npm run dev

Build for production:

npm run build

Validate design JSON files:

npm run validate:designs

Re-ingest design JSON files from the upstream source into public/designs/ and src/data/designs/ (run npm run validate:designs afterwards):

npm run ingest:designs

Pre-Commit Hooks

Secret scanning and whitespace lint run automatically on every commit via Husky (activated by the prepare script on npm install — no network or extra tooling required). The hooks live in .husky/pre-commit and call scripts/hooks/check-secrets.sh (blocks commits containing secret-bearing filenames or real API-key values) and scripts/hooks/check-whitespace.sh (blocks trailing whitespace / missing trailing newlines).

Content Security Policy

GitHub Pages cannot set custom HTTP headers, so index.html and public/404.html carry a restrictive meta CSP. Its style/font sources mirror the font-host whitelist in src/context/DesignContext.tsx (fonts.googleapis.com, fonts.gstatic.com); this invariant is enforced by tests/csp.test.js. style-src additionally allows 'unsafe-inline' because applying a design injects a <style> element at runtime (DesignContext.upsertStyle), and static hosting cannot provide per-request nonces. This relaxation is scoped to styles only — script-src stays exactly 'self' (also asserted by the tests).

Project Structure

public/
├── designs/       # JSON design files (70)
├── previews/      # Thumbnail images
├── schema/        # JSON Schema for validation
└── logo/          # Brand assets
src/               # React app source
.github/workflows/ # CI/CD (GitHub Pages deploy)

Adding a New Design

1. Create public/designs/{slug}.json following public/schema/design.v1.json
2. Run npm run validate:designs to confirm schema compliance
3. Submit a PR