Coding agents write great code and generic interfaces: default shadcn, same fonts, no taste. This is a library of design prompts — each a full design spec with a live preview and real usage data — that give your agent design direction so the UI it ships actually looks designed. Powered by Superdesign.
Browse all and run any live at superdesign.dev/library.
AI-generated UI all looks the same because the agent has no taste to anchor to — so it reaches for the same fonts, the same card grid, the same indigo-500. Most prompts here are a full design spec (exact colors, type, spacing, motion, layout); a handful are drop-in interactions and effects. Each shows its real usage (copies + tries) so you can see what builders actually reach for. Hand one to your agent and it builds to a real spec instead of a default.
1. Copy → paste into your agent (zero setup, works everywhere) Find a look below, open it, copy the prompt, then tell Claude Code / Cursor:
"Redesign my dashboard using this design spec: [paste]"
Tip: some specs name specific fonts (e.g. Sora, Satoshi, Space Grotesk). Install them, or tell your agent to substitute the closest Google/system font so it doesn't silently fall back to Arial.
2. Install the skill (best — your agent picks and applies it for you)
npx skills add superdesigndev/superdesign-skillThen just ask: "/superdesign make my pricing page not look like AI slop". The agent searches this library, pulls the right prompt, and applies it to your code. Skill repo.
▸ What that actually does
Behind that one request, the skill:
- Reads your current UI for context (your components, your stack)
- Searches this library for a fitting look —
superdesign search-prompts --tags "pricing" --json - Pulls the design spec —
superdesign get-prompts --slugs "<best match>" --json - Applies it to your code — real tokens (exact colors, type, spacing, motion), not "make it nicer"
Before: default shadcn, Inter, indigo-500, a flat card grid — generic.
After: the page rebuilt to a real spec — a proper palette, type scale, spacing, and shadow system, applied to your components.
The difference from copy-paste: it picks the right prompt for your context and applies it across your whole app, not one page at a time.
3. Try it live (see it first, then take the code) Hit ▶ Try live on any prompt to generate and iterate it on the Superdesign canvas, then copy the result into your project.
New to this? Start with how to make Claude Code UI look good.
Not another static list of design prompts. The difference is what's behind each one:
| Most prompt lists / DESIGN.md repos | This one | |
|---|---|---|
| Ranking | Curated by opinion | Vision-scored for design quality (0–10 on the rendered preview) + real usage shown |
| Format | Static text / markdown, no preview | Live preview + one-click run on every entry |
| Freshness | Manual, goes stale | Auto-synced from a live product |
| Coverage | A few looks | Every page type and style, browsable |
This repo is the registry; the Superdesign skill is the runtime — like an npm registry and the npm CLI. They stack, they don't compete:
| This library (registry) | Superdesign skill (runtime) | |
|---|---|---|
| Role | Prompts, previews, usage rankings, metadata | Reads the registry, applies a prompt to your code |
| You | Browse, discover, copy, cite | Install once, then invoke |
| Analogy | npm registry / Homebrew formulae | npm / brew (the client) |
| Optimized for | Discovery + credibility | In-agent generating & iterating |
superdesign get-prompts pulls straight from this library's data. Browse here, run it there.
 Acid-Yellow Neo-Brutalist Mega Footer 2,401 runs |
 High Contrast Landing Page 2,400 runs |
 Foundry: Your SaaS Site, Designed Before You Write a Line 2,390 runs |
 Loam — Warm Earthy Organic Agency Website 2,390 runs |
 AI System Configuration Console 2,306 runs |
 Superdesign Editorial Waitlist 2,262 runs |
 Verdance — Agency Website Design Studio (Dark Emerald) 1,997 runs |
 Gen-Z Social App 1,664 runs |
 Brutalist Style Ecommerce Page 1,568 runs |
 Brutalist E-commerce Page 1,531 runs |
 Glassmorphism Dashboard: Frosted Sunrise Analytics UI 0 runs |
 Calendar UI: Warm Editorial Week Planner 0 runs |
| # | Prompt | Category | Design | Runs | |
|---|---|---|---|---|---|
| 1 | Acid-Yellow Neo-Brutalist Mega Footer | Forms & Contact | 9/10 | 2,401 | ▶ Try live |
| 2 | High Contrast Landing Page | Landing Pages | 9/10 | 2,400 | ▶ Try live |
| 3 | Foundry: Your SaaS Site, Designed Before You Write a Line | Landing Pages | 9/10 | 2,390 | ▶ Try live |
| 4 | Loam — Warm Earthy Organic Agency Website | Portfolios | 9/10 | 2,390 | ▶ Try live |
| 5 | AI System Configuration Console | Dashboards | 9/10 | 2,306 | ▶ Try live |
| 6 | Superdesign Editorial Waitlist | Waitlist & Coming Soon | 9/10 | 2,262 | ▶ Try live |
| 7 | Verdance — Agency Website Design Studio (Dark Emerald) | Portfolios | 9/10 | 1,997 | ▶ Try live |
| 8 | Gen-Z Social App | Waitlist & Coming Soon | 9/10 | 1,664 | ▶ Try live |
| 9 | Brutalist Style Ecommerce Page | E-commerce | 9/10 | 1,568 | ▶ Try live |
| 10 | Brutalist E-commerce Page | E-commerce | 9/10 | 1,531 | ▶ Try live |
Design = visual-quality score (0–10) from a vision review of the actual rendered preview — how premium it looks, not just how the spec reads. Runs = times generated on the canvas. Ranked by design quality (runs are near-uniform across the top, so they don't discriminate).
A static screenshot can't show these. They're motion prompts, backgrounds, cursors, and transitions you drop into a UI to make it feel alive. Previews loop below; hit Try live for the real thing.
 Hyperspeed Background · 8/10 [▶ Try live] |
 Lightning Background · 8/10 [▶ Try live] |
 "Exploded View" Assembly · 8/10 [▶ Try live] |
 Gooey Gradient Background · 7/10 [▶ Try live] |
 Light Rays Background · 7/10 [▶ Try live] |
 The "Stacking Cards" Effect · 5/10 [▶ Try live] |
By page type (the structure): Landing Pages · Pricing Pages · Auth & Login · Dashboards · Onboarding · Waitlist & Coming Soon · Forms & Contact · Blog & Editorial · E-commerce · Portfolios · Mobile Apps · Components
By style (the look): Glassmorphism · Brutalist · Editorial · Cinematic · Neumorphism · Luxury · Minimalist · Dark / Neon · Kinetic / Bold · Organic / Nature. Every prompt is a full style spec with a live preview — or browse all in prompts/.
Everything: prompts/ (every prompt) · machine-readable prompts.json · prompts.csv · PROMPTS.md
Experimental: recombine any style × any page
Each prompt is being factored into a style (systems/) and a structure (page-types/) so they recombine — one style renders many pages. This is experimental: the factored systems/ are auto-scaffolded DESIGN.md summaries, so the prompt READMEs remain the source of truth for exact tokens. See examples/recombine-demo.md.
| Superdesign | v0 | Lovable | Bolt | Google Stitch | Uizard | |
|---|---|---|---|---|---|---|
| Runs inside your coding agent (Claude Code/Cursor) | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ |
| Infinite design canvas | ✅ | ❌ | ❌ | ❌ | ❌ | ✅ |
| Usage-ranked prompt library | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ |
| Designs into your existing design system | ✅ | ❌ | ❌ | |||
| Outputs real code | ✅ | ✅ | ✅ | ✅ | ✅ |
Why does my AI-generated UI look generic / like AI slop? Because the agent has no design direction, so it defaults to the same fonts, card grids, and colors every time. Give it a full design spec (like the prompts here) and it builds to that spec instead. See how to make Claude Code UI look good.
How do I use these prompts? Three ways: copy a prompt and paste it into Claude Code / Cursor; install the Superdesign skill and let your agent search + apply them; or click Try it live to generate on the Superdesign canvas. (See "How to use" above.)
Do these work with Claude Code and Cursor? Yes. Install the Superdesign skill and your agent can search, pull, and apply any prompt here to your codebase.
What is Superdesign? An AI product design agent that turns prompts into UI mockups, components, and full designs on an infinite canvas. See superdesign.dev.
Are the prompts free to use? Yes — the prompt content is dedicated to the public domain under CC0 1.0 (LICENSE-DATA). Use it freely, even commercially, no attribution required.
This is a read-only mirror of the live Superdesign prompt library, auto-synced, with real usage shown per prompt. Add prompts by creating them in the app — top prompts sync here automatically. For fixes to this repo (typos, links, categorization), open a PR. See CONTRIBUTING.md.
Dual-licensed: the repo code and structure are MIT (LICENSE); the prompt content is dedicated to the public domain under CC0 1.0 (LICENSE-DATA) — use it freely, even commercially, no attribution required.
Also available in 简体中文. The README's gallery, leaderboard, stats, and synced date are auto-generated by scripts/gen_readme.py — edit the prose freely, but leave the <!-- … --> markers in place.