Writing prompts for web design is a disciplined art. Vague prompts like "make a nice website" produce generic layouts, while structured prompts built on design theory produce breathtaking, production-grade interfaces.
The C.L.A.S.S. Framework Breakdown
Specify Domain & Target Audience
Example: "Fintech mobile application for Gen-Z crypto investors"
Define Grid & Spatial Hierarchy
Example: "Split hero section, 3-column Bento grid feature breakdown, 4-tier pricing matrix"
Choose Visual Surface Language
Example: "Frosted glassmorphism, 16px backdrop blur, subtle inner borders, ambient background glow"
Exact Hex Codes or Palette Rules
Example: "Obsidian dark background (#090d16), electric violet (#8b5cf6), warm gold highlights (#f59e0b)"
Key Components & Micro-Copy
Example: "Pill badge '🚀 Powered by AI', primary CTA button 'Start Free Trial', trust logos carousel"
50+ Must-Know UI Vocabulary Keywords
| Category | High-Impact Prompting Keywords |
|---|---|
| Layout Grids | Bento Grid, Asymmetric Split, Sticky Sidebar, Masonry Cards, Hero-to-Feature Transition |
| Surface & Depth | Glassmorphism, Backdrop Blur, Neomorphism, Soft Drop-Shadow, Floating Layers, Inner Border Highlight |
| Typography | Display Serif Header, Geometric Sans-Serif Body, Monospace Code Snippet, All-Caps Subheading |
| Interactions & Badges | Pill Badge, Pulse Indicator Dot, Gradient Border Highlight, Micro-Hover Scale, Floating Card Overlay |
Weak Prompt vs. Master Prompt Comparison
"Make a nice dark website for a subscription app with pricing."
Result: Generic dark page with poor contrast, basic rectangular boxes, and standard browser typography.
"Build a high-converting landing page for a SaaS plant subscription service. Style: Dark obsidian background (#0a0a0c) with vibrant emerald green (#10b981) accents and frosted glass cards. Layout: Centered hero with title 'Bring Nature Home', pill badge '🌱 100% Organic Nursery', search bar with category dropdown and image attachment button. Section 2: 3-card pricing grid featuring 'Starter', 'Popular Growth', and 'Enterprise Jungle'."
Result: Stunning, modern layout with clear visual hierarchy, accessible contrast, and premium glassmorphic UI cards.
12 Copy-Paste AI Prompts for UI Design
Every prompt below follows the C.L.A.S.S. structure and is written to be pasted as-is. Change the nouns — the product, the name, the colour — and leave the shape of the sentence alone, because the shape is what is doing the work.
1. SaaS landing page
Landing page for an invoicing tool aimed at freelance designers. Calm and editorial. Off-white background, one deep-green accent, generous whitespace. Hero headline "Get paid without the awkward email", subhead, single CTA "Start free". Then a logo row, a 3-card benefit grid, and a 3-tier pricing table.
Swap the product and the adjective; keep the section order. Try it
2. Mobile dashboard screen
iOS home screen for a personal finance app at 390 × 844. Large balance card at the top, horizontal chip row for accounts, then a transaction list with merchant icons. Bottom tab bar with five items. Light mode, SF Pro type scale, one blue accent.
Name the platform or you get Android chrome on an iOS screen. Try it
3. Dark analytics dashboard
Desktop SaaS analytics dashboard in dark mode. Three-column layout, card-based metrics for daily active users, revenue and server status, one large line chart spanning the width beneath. Minimal Swiss typography, high-contrast accessible text, single violet accent on near-black.
The classic. Say "accessible contrast" or dark dashboards come back unreadable.
4. Pricing page
Pricing section with three tiers — Starter, Growth, Enterprise — the middle one raised and badged "Most popular". Feature list with check marks, annual/monthly toggle above. Light background, one accent colour, no gradients.
Ask for the toggle explicitly; it is almost never generated unprompted.
5. YouTube thumbnail
YouTube thumbnail, 1280 × 720. Shocked face on the right two-thirds, neon purple rim lighting, bold yellow outlined text "I BEAT IT" on the left. High contrast against a dark feed, nothing in the bottom-right corner.
Reserving the bottom-right keeps the duration badge off your headline. Try it
6. Logo identity board
Identity board for a specialty coffee roaster called "NORTH ROAST". Line-art coffee cherry mark, warm neutral palette. Show the primary lockup, a monogram, the mark reversed on dark, and an app-icon crop, with hex values underneath.
Asking for the variants up front is what makes it usable. Try it
7. Instagram carousel slide
Instagram carousel slide at 1080 × 1350. Large statistic "73%" as the hero element, one supporting line beneath, small brand mark bottom-left. Cream background, single navy accent, generous margins. Room for a slide counter top-right.
Generate slide one, then ask for the rest "same layout, new figure". Try it
8. Event poster
A2 gig poster, Swiss international style. Hard grid, Helvetica-like discipline, two-colour palette of black and signal red. Band name "LOW CEILING" set very large, venue and date in a small block at the foot. Nothing decorative.
Naming a design tradition decides grid, palette and type at once. Try it
9. Book cover
Thriller book cover at 1600 × 2560. Cold blue-grey palette, high contrast, a single ominous silhouette against fog. Title "THE QUIET HOUR" in condensed sans set large, author "R. MAYFIELD" small beneath. Must still read at thumbnail size.
Lead with the genre — it does more than any styling word. Try it
10. Restaurant menu
A4 dinner menu for a neighbourhood Italian restaurant. Four sections — Antipasti, Primi, Secondi, Dolci — dish names in a medium serif, descriptions smaller and quieter, prices right-aligned with leader lines. Warm cream stock, one olive accent, 10 pt body minimum.
The 10 pt minimum is what makes it readable in a dim room. Try it
11. Ad creative variant set
Square 1080 × 1080 paid social ad for a running shoe. Product on a plain warm background, hook "Lighter than your excuses" in heavy sans across the top third, small CTA button "Shop now" bottom-centre. Leave the outer tenth clear.
Then change one thing per variant — hook, image, or colour temperature. Try it
12. Refinement prompt
Same design, but make the headline about 30% larger, push the background a step darker for contrast, and move the button below the subhead instead of beside it. Keep the palette and the photograph.
Refinements edit the existing design. Change two or three things at once, not ten.
Five Mistakes That Waste a Generation
- Stacking adjectives. "Modern, clean, minimal, premium, sleek" cancel each other out. One adjective is a direction; five are noise.
- Leaving the text to the model. Anything you do not write in quotes gets invented, and invented copy is where AI layouts look generic.
- Skipping the size. A design generated at the wrong ratio has to be recomposed, not cropped. Name the placement first.
- Describing the mood but not the layout. "Feels premium" gives the model nothing to build. "Split hero, three-card grid, footer CTA" does.
- Rerolling instead of refining. Starting over throws away the parts that worked. Refining edits the design you already have — and costs nothing.
Frequently Asked Questions
What makes a good AI prompt for UI design?
Five things, in this order: what it is and who it is for, the layout in structural terms, the visual style named precisely, the exact palette, and the literal text you want rendered — in quotes. That is the C.L.A.S.S. framework above, and it is the difference between a mockup you use and one you regenerate.
How long should a UI design prompt be?
Two to four sentences covers almost everything. Shorter than that and the model fills the gaps itself; much longer and instructions start competing with each other. If a prompt runs past five sentences, it is usually describing two designs rather than one.
Why does the text in my generated design look wrong?
Because it was never specified. Words you put in quotation marks are set as typed; everything else is the model's invention and often approximate. Quote every headline, button label and price you actually care about, then proofread the result before you publish or print it.
Do these prompts work in other AI design tools?
Yes. The C.L.A.S.S. structure is about supplying the information any image or UI model needs, not about one product's syntax, so the same prompts work in most generators. Tools differ in whether they hold the output at a fixed size and whether you can refine an existing design rather than reroll it.