https://github.com/luongnv89/sleek-ui
The Unsplash of design systems for AI agents — re-skin your app with one URL
https://github.com/luongnv89/sleek-ui
ai automatically tool ui
Last synced: 20 days ago
JSON representation
The Unsplash of design systems for AI agents — re-skin your app with one URL
- Host: GitHub
- URL: https://github.com/luongnv89/sleek-ui
- Owner: luongnv89
- License: other
- Created: 2026-03-26T14:29:14.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2026-04-11T07:27:18.000Z (2 months ago)
- Last Synced: 2026-04-11T08:25:35.397Z (2 months ago)
- Topics: ai, automatically, tool, ui
- Language: TypeScript
- Homepage: http://luongnv.com/sleek-ui/
- Size: 5.37 MB
- Stars: 104
- Watchers: 0
- Forks: 8
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[](https://github.com/luongnv89/sleek-ui/stargazers)
[](https://luongnv.com/sleek-ui)
[](LICENSE)
[](https://luongnv.com/sleek-ui)
# 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 →**](https://luongnv.com/sleek-ui) · [**Quick Start →**](#quick-start)
---
## How It Works
```mermaid
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]
```
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
```mermaid
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]
```
### Before / After
```css
/* 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`:
```mermaid
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
```
Colors use shadcn/ui HSL format: `"240 33% 14%"` — no `hsl()` wrapper, matches the `hsl(var(--token))` pattern.
---
## Get Started
[**View all designs →**](https://luongnv.com/sleek-ui)
[**Browse brand showcase →**](https://luongnv.com/sleek-ui/logo/brand-showcase.html)
[**GitHub →**](https://github.com/luongnv89/sleek-ui)
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:
```bash
npm install
```
Start dev server:
```bash
npm run dev
```
Build for production:
```bash
npm run build
```
Validate design JSON files:
```bash
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