You don't lack taste.You lack the words.
AI can design better than most of us. The gap is not skill anymore. The gap is vocabulary, tooling and references. This page closes all three.
You know a screen looks good the moment you see it. But when you sit down to prompt, all you can type is "make it clean and modern". And the AI gives you the same template it gives everyone else.
Design GOD fixes that, whatever you are building: a landing page, a full website, a mobile app, a dashboard, a portfolio, a pitch deck page. It gives you the words (an interactive vocabulary that assembles your design prompt), the weapons (agent skills like Impeccable and Anthropic's frontend-design, with install steps for every major AI tool), and the references (25+ curated inspiration libraries like Mobbin, Landingfolio, Cosmos and Dribbble).
Share it with the PM who says "make it pop", the engineer who ships default Bootstrap, and the founder who knows exactly what they hate but not what they want.
"Good taste is not a gift. It is exposure plus vocabulary. Both are downloadable now."
Scroll the vocabulary. Every card shows the look, the real products that use it, and the exact words that produce it. The prompt builds itself at the bottom of your screen.
Install one or two design skills so your tool stops shipping Inter-on-purple-gradient. One command, works in Claude Code, Cursor, Codex and more.
Open an inspiration library, find a screen you love, screenshot it, and hand it to the AI along with your prompt. References beat adjectives.
Pick one style, one color mood, and one or two fonts. Ten picks fighting each other is how a design turns into khichdi.
What are you building?
Tell the AI what the thing is before you tell it how the thing should look. Pick one, and it becomes the opening line of your prompt.
Design styles
The style is the biggest decision you will make. Everything else, color, type, spacing, hangs off it. Pick one. If you want to mix two, make one dominant and the other a garnish.
Color
Most people pick colors. Good designers pick a mood and let the colors follow. Tell the AI the mood, and let it handle the hex codes.
Palette moods
Gradients
A gradient is the fastest way to make a flat screen feel alive. The trick is restraint: pick one, use it in the hero, and let the rest of the page stay calm.
Color vocabulary
These are the phrases that separate "add some blue" from a proper brief. Check any that fit.
Typography
Every font has a personality, and your interface speaks in it. The samples below are set in the real fonts. Read them like you would listen to a voice.
Type styling
Themes & mood
Light or dark is a context question, not a preference question. Reading-heavy products lean light. Media, finance and dev tools flex dark. Pick for your user's moment, not your mood.
Layout
Layout is where hierarchy lives. These wireframes are deliberately grey: squint and look at the shapes, not the content.
Details & components
This is the level most prompts never reach. Corners, shadows and borders are why two "minimal" designs feel completely different. Details are the design.
Buttons
Corners
Shadows
Cards & surfaces
Finishing touches
Motion & feel
Motion is seasoning. A little makes the interface feel alive. A lot makes it feel like a wedding invite website. When in doubt, less.
Density & spacing
Whitespace does one job: it tells the eye where to look. Airy costs scrolling. Compact costs calm. Pick by what your user is doing, reading or working.
Imagery & graphics
Illustration style dates a product faster than anything else on this page. Pick one visual language and stay loyal to it.
Voice & microcopy
Words are part of the design. "Oops! Something went wrong :(" and "Request failed. Retry." are two different products. Tell the AI which one you are.
Principles worth adding to any prompt
These lines raise the floor of whatever the AI produces. When unsure, check the first four.
Things to tell the AI to avoid
Half of taste is knowing what you don't want. These are the most common AI-design giveaways.
Ready-made recipes
Don't want to assemble from scratch? Start from a look you already trust and edit from there. Each recipe is a complete prompt. One click copies the whole thing.
The premium fintech
CRED energy. Quiet, expensive, earned.
Design this interface in a dark luxury direction. Near-black background (#0B0B0D), one champagne-gold accent, an elegant serif display font for headlines (Playfair or Fraunces) with a clean grotesque sans for body. Generous spacing, thin 1px gold dividers, soft glow on the primary CTA only. Cards are near-black with a subtle inner border highlight, 16px corners. Motion is minimal: 200ms fades, slight lift on hover. Imagery is dark and moody. No bright colors, no playful illustration, no clutter. The feel: quiet, premium, earned. Reference: CRED.
The modern dev tool
Linear and Vercel energy. Sharp, fast, keyboard-first.
Design this interface like a modern dev tool. Dark charcoal background (#0A0A0B), high-contrast white type, one electric accent (violet or blue). Grotesque sans like Inter for UI, monospace for code, numbers and labels. Sharp 6-8px corners, hairline borders, a subtle glow behind the hero only. Features shown in a bento grid. Fast 150ms transitions, no bounce. Keyboard-first cues: visible shortcuts, a command menu. No stock illustrations, no gradients outside the hero. Reference: Linear, Vercel.
The friendly consumer app
Duolingo's energy, Swiggy's warmth. Made to be loved.
Design this interface bright and playful. One saturated primary color with candy accents on a cream background. Rounded 20px+ corners everywhere, chunky pill buttons with a 3D press effect (hard bottom edge, moves down on click), bouncy spring animations. Rounded geometric sans like Poppins or Nunito. Flat colorful illustrations, cheerful encouraging microcopy, big touch targets. Celebrate user progress with streaks and confetti moments. Reference: Duolingo's energy, Swiggy's warmth.
The calm productivity tool
Notion energy. The interface disappears behind the work.
Design this interface calm and minimal. Off-white or warm paper background, dark ink text, almost no color: one muted accent at most. A neutral sans like Inter, body line height 1.6, content max-width around 720px. Hairline dividers instead of boxes, shadows either absent or very soft. Simple line icons from one set. Motion nearly invisible. The interface should disappear behind the content. Reference: Notion, iA Writer.
The loud startup landing
Gumroad energy. High volume, zero subtlety.
Design this landing page neo-brutalist. Flat loud background colors, thick 3px black borders, hard offset shadows (6px, zero blur), chunky bold type, one oversized headline. Buttons look pressable: black border, hard shadow, they move down on click. Add a marquee text strip and sticker-like badges. Grid stays strict even though the style is loud. High energy, zero subtlety. Reference: Gumroad, Figma's marketing pages.
The editorial story
Stripe Press and NYT features energy. Print, with hyperlinks.
Design this page editorial. Cream paper background, large serif headlines (Fraunces or Playfair Display), drop caps on opening paragraphs, pull quotes, generous margins, multi-column text on desktop. Muted palette with one deep accent like oxblood or forest green. Full-bleed images with proper captions, footnote styling, a strong masthead. It should feel like print that happens to be interactive. Reference: Stripe Press, NYT feature stories.
The polished mobile app
Airbnb and iOS energy. Native feel, thumb-first.
Design this as a polished native-feeling mobile app. Mobile-first at 390px width. Clean white surfaces, one confident accent color, SF-Pro-like grotesque sans. Bottom tab bar with 4-5 items, large page titles that collapse on scroll, cards with soft 16px corners and gentle layered shadows. Touch targets minimum 44px, generous list rows, pull-to-refresh affordance. Respect safe areas. Motion: quick 200ms slides and fades, native-feeling spring on sheets. Design the empty, loading and error states. Reference: Airbnb, iOS Human Interface Guidelines.
The data dashboard
Stripe Dashboard and Grafana energy. Dense, scannable, trustworthy.
Design this as a data dashboard. App shell with a slim left sidebar and top bar. Compact density: stat tiles in a row up top (big number, small label, trend indicator), charts below in a responsive grid. Monospace or tabular figures for all numbers so columns align. Restrained palette: neutral surfaces, one accent, semantic green/red reserved strictly for positive/negative deltas. Hairline borders instead of heavy shadows. Tables with sticky headers, row hover states, right-aligned numerals. No decoration that competes with the data. Reference: Stripe Dashboard, Linear Insights.
The unforgettable portfolio
Awwwards energy. Personality over convention.
Design this portfolio with strong art direction. Oversized display type (one characterful font used with conviction), asymmetric layout that breaks the grid deliberately, generous negative space. One signature element: an unusual hover interaction, a custom cursor, or an oversized marquee. Project cards with large imagery and minimal text; case studies open with a full-bleed hero. Restrained palette, one loud accent. Smooth scroll-triggered reveals, nothing longer than 400ms. It should feel like one person with a point of view, not a template. Reference: Awwwards-featured portfolios, godly.website picks.
The premium storefront
Aesop and Apple Store energy. The product is the hero.
Design this e-commerce store so the product photography does the selling. Warm off-white background, large uncluttered product imagery on a consistent backdrop, elegant serif for headlines with a quiet sans for UI. Product grid with generous gaps, minimal card chrome: image, name, price, nothing else. Product page: gallery left, details right, one prominent add-to-cart button, accordion for shipping and details. Sticky add-to-cart on mobile. Muted palette with one warm accent. No badges screaming SALE, no countdown timers, no clutter. Reference: Aesop, Apple Store, SSENSE.
How to talk to the model
A good design prompt has four parts. Miss the first one and even perfect vocabulary produces a pretty page that solves nothing.
What the product is, who uses it, and on which device. "A expense tracker for freelancers, mobile-first" changes every decision downstream.
The words you picked in this guide: one style, one color mood, one or two fonts, layout, details.
Name real products. "Like Linear" carries more information than three paragraphs of adjectives.
What to avoid. Models have habits, purple gradients being habit number one. Say no explicitly.
A full prompt with all four parts:
Build a landing page for an invoicing tool for Indian freelancers. Mobile-first. Design direction: clean minimalist style, warm cream background with dark ink text, one terracotta accent. Serif display headlines (Fraunces), Inter for body. Single-column layout, max-width 720px. Soft 16px corners, hairline dividers, no shadows. Subtle 200ms transitions only. Reference: Notion's calm, Stripe's typography discipline. Avoid: purple gradients, stock illustrations, more than two fonts, emoji in headings.
Four habits that compound
If you change the font, the palette and the layout in one go, you'll never know what fixed it or what broke it. Iterate like a scientist.
Before committing, ask the AI for three different takes on the same brief. Commit to one, then refine. Choosing beats guessing.
See a site you love? Screenshot it, give it to the AI, and ask "describe this design direction in words." Now you own that vocabulary forever.
Save every prompt that produced something you loved. Six months of this and you have a design system in plain English.
The skills armory
Prompts tell the AI what you want once. Skills teach it taste permanently. A skill is a folder of design expertise (a SKILL.md file plus references) that your AI coding tool loads automatically whenever it builds UI. Install one or two of these and your tool stops shipping Inter-on-a-purple-gradient forever.
frontend-design
Free · Officialby Anthropic · the single highest-leverage free install
Anthropic's own anti-slop skill. Before writing any front-end code it forces a design plan: a 4-6 hex palette, deliberate type roles (a characterful display face, a body face, a utility face), a layout concept, and one signature element the page will be remembered by. Explicitly bans generic fonts (Inter, Roboto, Arial, system stacks) and clichéd purple gradients.
npx skills add anthropics/skills --skill frontend-designClaude Code users can also install it from the official plugin marketplace via /plugin. Source: github.com/anthropics/skills
Impeccable
Free · Open sourceby Paul Bakaus (ex-Google, creator of jQuery UI)
A full design language for AI agents: one skill, 23 steering commands, and curated anti-patterns. Built on top of Anthropic's frontend-design with much deeper control:
- /impeccable init — setup interview that writes a PRODUCT.md so designs are grounded in your product, not generic patterns
- /polish, /critique, /audit — review and refine passes (a11y, performance, UX)
- /bolder, /quieter, /delight, /overdrive — turn the volume up or down
- /typeset, /arrange — fix fonts, hierarchy, spacing, rhythm
- Design hooks that catch bad UI edits as they happen (blocks them in Cursor)
npx impeccable installThen run /impeccable init inside your tool. Works with Claude Code, Cursor, Codex, Gemini CLI, Copilot and more. Docs: impeccable.style
ui-skills
Free · Open sourceby ibelick (Julien Thibeaut) · the cleanup crew
Opinionated constraints that remove AI-generated interface slop after the fact. Four sub-skills: baseline-ui (fix spacing, hierarchy, typography — bans purple gradients and glow-as-affordance by rule), fixing-accessibility (ARIA, keyboard nav, contrast), fixing-motion-performance (kills janky animation), and fixing-metadata (SEO, Open Graph, JSON-LD).
npx skills add ibelick/ui-skillsBest used as a polish pass: generate first, then run /baseline-ui. Docs: ui-skills.com
shadcn/ui skill
Free · Officialby shadcn · project-aware components
Makes your AI tool fluent in your project's actual component system. Reads your components.json, knows your framework, aliases, installed components and theme tokens, then composes correct shadcn/ui code on the first try instead of hand-rolling inconsistent buttons.
npx skills add shadcn/uiweb-artifacts-builder
Free · Officialby Anthropic · for claude.ai artifacts
Not a taste skill, a build pipeline. Spins up a React + TypeScript + Tailwind + shadcn/ui project (40+ components pre-installed) and bundles the whole thing into one self-contained HTML file you can ship as a Claude artifact. Pair it with frontend-design: one decides how it looks, the other packages it.
npx skills add anthropics/skills --skill web-artifacts-builderSource: github.com/anthropics/skills
Superdesign
Free tierby superdesign.dev · a design agent, not just a rulebook
Runs as a skill inside Claude Code or Cursor and behaves like a product designer: learns your codebase, writes a persistent design-system file, explores several polished directions in parallel on a canvas, then hands the chosen one back as real React + Tailwind. Solves the taste-drift problem where every new screen looks slightly different.
npx skills add superdesigndev/superdesign-skillThen run /superdesign with a plain-English request. Docs: superdesign.dev
Also in Anthropic's official skills repo
Same one-command install pattern: npx skills add anthropics/skills --skill <name>
Where skills live on each platform
The npx skills CLI (by Vercel Labs, skills.sh) auto-detects your tools and writes to the right folder. Add -g for global (all projects) or -a cursor to target one tool. If you ever need to do it by hand:
| Platform | Project-level path | Global path | Notes |
|---|---|---|---|
| Claude Code | .claude/skills/ | ~/.claude/skills/ | Also supports plugin marketplaces via /plugin |
| Cursor | .agents/skills/ or .cursor/skills/ | ~/.cursor/skills/ | Reads the open Agent Skills standard directory |
| Codex CLI | .agents/skills/ | ~/.codex/skills/ | Shares the open-standard folder with Cursor |
| Gemini CLI | .agents/skills/ | ~/.gemini/skills/ | Supported by the same CLI |
| claude.ai (web) | Upload the skill as a zip under Settings → Capabilities | Great for artifact building with web-artifacts-builder | |
| v0 / Lovable / Bolt | No skill system yet | Paste the skill's SKILL.md content (or your Design GOD prompt) into the project's custom instructions / knowledge | |
Platform playbooks
Same taste, different tools. Here is the exact sequence that gets great design out of each one. Every playbook assumes you have your Design GOD prompt copied from the bar below.
Claude Code
Best when design and code live in the same repo.
- Install the stack:
npx skills add anthropics/skills --skill frontend-design, thennpx impeccable installand/impeccable init. - Paste your Design GOD prompt with your feature request. The skills activate automatically on UI work.
- Refine with commands:
/impeccable polish,/impeccable critique, or/baseline-uifor a deslop pass. - Close the loop: Claude can't see its own UI. Screenshot the result, paste it back, ask "what's off?"
- Persist the taste: once a direction wins, save it as a design-system block in CLAUDE.md so it survives every session.
Cursor
Best for building real products screen by screen.
- Install skills once:
npx skills add anthropics/skills --skill frontend-design -a cursorandnpx impeccable install. Impeccable's hook blocks bad UI writes before they land. - Make taste a rule: put your Design GOD prompt in
.cursor/rules/design.mdcso every agent run inherits it, no re-pasting. - Reference real screens: drag a screenshot from Mobbin or Landingfolio into chat next to your request.
- Iterate one variable at a time: "same layout, swap the type pairing" beats "make it better".
v0 (Vercel)
Best for React + shadcn/ui interfaces, fast.
- Set project instructions: paste your Design GOD prompt into the project's settings so every generation follows it.
- Generate 3 directions: ask for three distinct takes on the same brief, then commit to one. Choosing beats guessing.
- Attach references: v0 accepts image attachments; a screenshot of the vibe you want is worth 500 words.
- Fork before big changes so you can always walk back.
Lovable
Best for full apps without touching code.
- Feed the Knowledge base: paste your Design GOD prompt into the project's Knowledge so it applies to every edit, not just the first.
- Start with structure, then style: get the pages and flows right first, then apply the design direction in a dedicated pass.
- Use select-and-edit for surgical fixes instead of re-prompting the whole page.
- Name real products in prompts ("pricing section like Linear's") — it dramatically outperforms adjectives.
Claude.ai / Artifacts
Best for prototypes, single-file tools and interactive demos.
- Upload skills: add frontend-design and web-artifacts-builder as zips under Settings → Capabilities.
- Prompt with all four parts: context, direction (your Design GOD prompt), references, constraints.
- Ask for a signature element — the one thing the screen will be remembered by. It's the difference between template and design.
- Publish the artifact and share the link; it's the fastest design portfolio there is.
Bolt / Replit / anything else
The universal fallback that works everywhere.
- Open with context: what the product is, who uses it, on which device.
- Paste your Design GOD prompt as the design direction block.
- Add "avoid" lines: purple gradients, stock illustrations, more than two fonts, emoji headings. Models have habits; say no explicitly.
- Keep a taste file: every prompt that produced something you loved goes into one doc. Six months of this and you have a design system in plain English.
The inspiration library
Taste is built by exposure, and these are the highest-quality exposure sources on the internet. The workflow: browse, screenshot what stops your scroll, hand the screenshot to your AI with the words you learned above. References beat adjectives, every single time.
Real product UI & flows
Actual shipped screens from real companies. Use these when designing apps, dashboards and product flows — not dribbble-fantasy, production truth.
Mobbin
The standardThe world's largest library of real mobile and web app screenshots, organized by app, flow and screen type. Onboarding, checkout, empty states — every pattern, searchable.
Use when: designing any app screen or user flow
Refero
Web appsReal web product screenshots filterable by company, page type and component. Mobbin's web-first sibling.
Use when: designing web app pages and components
Page Flows
Video flowsScreen recordings of complete user journeys: onboarding, upgrading, cancelling. Shows the motion and sequencing static screenshots can't.
Use when: designing multi-step flows and transitions
SaaSFrame
SaaS5,000+ real SaaS website pages, product interfaces and email sequences, with desktop and mobile versions side by side.
Use when: building anything B2B SaaS
SaaSpo
SaaS sitesCurated gallery of the best SaaS websites, tagged by industry and page type. Enterprise dashboards to pricing pages.
Use when: designing SaaS marketing sites and dashboards
Nicelydone
PatternsHandpicked SaaS screens and patterns from products with genuinely great UX, organized by page and component.
Use when: you need a proven pattern, not a pretty picture
Landing pages & websites
For when the job is conversion: heroes, pricing sections, testimonials, CTAs.
Landingfolio
Landing pagesThe biggest curated collection of landing page designs, browsable by industry, style and individual section — heroes, pricing, FAQs.
Use when: building any landing page, section by section
Godly
Astronomical"Astronomically good web design inspiration." A tight, ruthlessly curated gallery of the most impressive websites shipping today.
Use when: you want your site to feel expensive and current
Lapa Ninja
6,000+ pagesThousands of landing page examples with free books and design resources, filterable by category and color.
Use when: you need volume — many takes on your industry
Land-book
GalleryA well-maintained website design gallery spanning landing pages, portfolios and e-commerce, with color and style filters.
Use when: browsing broadly before committing to a direction
Bento Grids
One patternA collection dedicated entirely to bento grid layouts — the mixed-tile pattern Apple and Linear made the default for feature sections.
Use when: designing feature grids and visual summaries
One Page Love
Single pagesThe definitive gallery of one-page websites, running since 2008. Waitlists, launches, portfolios, event pages.
Use when: the whole product is one page
Award-level craft
The ceiling. Browse these to calibrate what "world class" actually looks like, then aim slightly below it and ship.
Awwwards
The awardsThe industry's award show: Site of the Day, juried scores for design, usability and creativity. Where interaction design pushes its limits.
Use when: you want motion and interaction ideas nobody else has
SiteInspire
CuratedA strictly curated showcase of clean, sophisticated web design, filterable by style, type and subject.
Use when: your direction is minimal and typographic
Httpster
No nonsense"Totally rocking websites made by people like you." Clean, modern, slightly rebellious picks updated constantly.
Use when: you want fresh without corporate polish
Minimal Gallery
MinimalismOne niche, done perfectly: beautiful minimal websites where every element earns its place.
Use when: less is the whole point
Curated Design
Fresh picksA designer-run collection of outstanding UI and web design, strong on new typefaces and layout trends.
Use when: hunting for what's next, not what's everywhere
CSS Design Awards
JuriedLong-running juried awards for craft in web design and development, with detailed scoring across UI, UX and innovation.
Use when: benchmarking technical execution
Moodboarding & visual culture
Before the interface, the feeling. This is where art direction comes from.
Cosmos
The new waveThe visual inspiration platform creatives moved to: ad-free, no likes, machine-curated for quality, with proper image credit. #1 design app on the App Store in 28 countries. Save "elements" into "clusters" and watch your aesthetic take shape.
Use when: building a moodboard before you build a screen
Savee
Designer picksA visual bookmarking tool with an unusually high-taste community. Graphic design, photography, type and interfaces in one feed.
Use when: collecting a visual direction across mediums
Are.na
Deep researchConnected knowledge-and-image boards beloved by design researchers. Slower, weirder, more intellectual than any feed.
Use when: the project deserves actual visual research
Still one of the best image search engines alive. Ignore the feed, use the search: "brutalist poster grid" returns gold.
Use when: you need many examples of one specific visual idea
Community & concepts
Concept work, not shipped products. Great for ambition, risky for UX truth — treat as art gallery, not documentation.
Dribbble
ConceptsThe classic design community. Full of gorgeous, sometimes un-shippable concepts — perfect for visual ambition, calibrate against Mobbin for reality.
Use when: you want a bolder visual ceiling than production allows
Behance
Case studiesFull project case studies: branding, illustration, 3D and complete design systems, presented start to finish.
Use when: you need branding and identity direction, not just UI
Layers
New communityA newer, higher-signal design community that many product designers moved to for sharing real work.
Use when: Dribbble feels too concept-y
Muzli
Daily feedA browser extension that turns every new tab into a curated design news and inspiration feed. Passive exposure, compounding daily.
Use when: you want taste to build itself in the background
Typography, color & building blocks
The raw materials. Pick fonts and palettes here, then name them in your prompt.
Typewolf
Type in the wildWhat fonts sites actually use, with expert pairing recommendations and "site of the day" typography breakdowns.
Use when: choosing and pairing typefaces
Fontshare
Free fontsProfessional-grade free fonts from the Indian Type Foundry — Satoshi, General Sans, Clash Display. The fastest way out of the Inter default.
Use when: you need a distinctive font that costs nothing
Fonts In The Wild
Real usageTypography spotted in real projects, so you see how a face behaves in context before committing.
Use when: validating a font choice
Realtime Colors
Palette testPreview any palette and font pairing on a realistic live website instead of abstract swatches. Then export the tokens.
Use when: stress-testing a color direction before prompting
Coolors
PalettesThe fastest palette generator: lock the colors you love, spacebar through the rest, export hex codes straight into your prompt.
Use when: you have one brand color and need four friends for it
21st.dev
ComponentsA community marketplace of ready React + Tailwind components built for design engineers — copy the code or hand it to your AI as a base.
Use when: you want a strong component starting point, not a blank file
Words that do heavy lifting
Twelve terms designers use daily. Drop any of them into a prompt and the AI knows exactly what you mean.
Good-taste, On Demand.
That's the whole promise.
You now have 300+ design words that work in any prompt, ten ready-made recipes, the best design skills on the internet with install commands for every tool, and 25+ places to steal references from.
To get great ideas, you need enough ideas. Same for design: to develop taste, see more, name more, try more.
Open your AI tool, install one skill, pick a recipe, and ship one screen today.
You have zero excuses to not build.
Your design prompt
Edit anything you like, then copy and paste it into your AI tool.
