Stop shipping AI-slop UI
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.
Why your AI UI looks generic (and how to fix it)
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.
How to use these — 3 ways to de-slop
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-skill
Then 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.
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.
Why this library is different
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 |
How this fits with the Superdesign skill
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.
Top prompts
Top-rated prompts
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).
Animations & effects
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.
Browse
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
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 vs other AI design tools
| 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 | ✅ | ✅ | ✅ | ✅ | ✅ | ⚠️ |
FAQ
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.
Contributing
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.
License
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.
