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.