Apply a professional design system in one AI agent prompt

55+ brand-quality UI design systems — Stripe, Linear, Vercel, Notion, and more — packaged as JSON. Point any AI coding agent at a URL and your app gets the design.

Browse designs → · Quick Start →

---

How It Works

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

One prompt. The agent handles the rest — CSS custom properties, Google Fonts, Tailwind + shadcn/ui component styles.

---

Design Catalog

55+ 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

---

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 18.3 + TypeScript
Build	Vite 5.4
Styling	Tailwind CSS 3.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

Project Structure

public/
├── designs/       # JSON design files (55+)
├── 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