Prompting for UI Design: Get Better Results

Prompting for UI Design

AI can create beautiful interfaces if you know how to describe what you want. Here's the vocabulary and techniques.

Design Vocabulary

Layout Terms

• Hero section: Large top section of a page
• Card: Contained content block with border/shadow
• Grid: Structured layout of items
• Sidebar: Vertical navigation panel
• Modal: Popup overlay
• Drawer: Slide-in panel

Spacing Terms

• Whitespace: Empty space between elements
• Padding: Space inside an element
• Margin: Space outside an element
• Dense: Compact, less spacing
• Airy/Spacious: Lots of whitespace

Style Terms

• Minimal: Simple, clean, few elements
• Modern: Current design trends
• Bold: Strong colors, large typography
• Soft: Rounded corners, gentle colors
• Professional: Corporate, trustworthy feel
• Playful: Fun, colorful, informal

Describing Visual Elements

Colors

Vague: "Blue theme" Better: "Primary color: #3B82F6 (bright blue), secondary: #10B981 (green), backgrounds: white and #F9FAFB"

Typography

Vague: "Nice fonts" Better: "Use Inter for body text, bold headings at 48px/32px/24px hierarchy"

Borders & Shadows

Vague: "With some depth" Better: "Cards with 1px border in #E5E7EB, subtle shadow (shadow-sm), 12px border-radius"

Imagery

Vague: "Some images" Better: "Hero image showing product in use, team photos in circular frames, icon illustrations in features section"

Design Direction Prompts

Minimal

"Clean, minimal design with lots of whitespace. Simple typography, monochrome with one accent color. Focus on content, not decoration."

Bold/Modern

"Bold, modern design with large typography, strong colors, and dynamic gradients. Emphasis on visual impact."

Professional/Corporate

"Professional, trustworthy design suitable for enterprise. Conservative colors (blues, grays), structured layout, clear hierarchy."

Playful/Creative

"Playful, creative design with fun illustrations, vibrant colors, and personality. Suitable for consumer app."

Dark Mode

"Dark theme design with #0A0A0A background, #FAFAFA text, and purple (#8B5CF6) accents. Subtle glow effects on interactive elements."

Component-Specific Prompts

Navigation

"Sticky navigation bar with logo on left, menu items centered, and CTA button on right. Dropdown menus for multi-level items. Mobile: hamburger menu with slide-out drawer."

Hero Section

"Full-width hero with gradient background, centered headline (large, bold), supporting text below, and two CTAs (primary filled, secondary outlined). Product screenshot floating on right side."

Feature Grid

"2x3 grid of feature cards. Each card has an icon, headline, and short description. Cards have hover effect (lift/shadow). Responsive: stacks to single column on mobile."

Testimonials

"Testimonial carousel with customer photo (circular), quote (italic), name, and company. Navigation dots below. Auto-rotates every 5 seconds."

Footer

"Multi-column footer with logo and tagline, navigation links grouped by category, social media icons, and copyright. Dark background contrasting with page."

Common Design Mistakes to Avoid

Too Many Colors

Fix: "Use a limited palette: one primary color, one accent, and neutrals."

Inconsistent Spacing

Fix: "Use consistent spacing scale: 8px, 16px, 24px, 32px, 48px, 64px."

Poor Contrast

Fix: "Ensure text has sufficient contrast. Dark text on light backgrounds, light text on dark."

Busy Layout

Fix: "Add more whitespace between sections. Let the content breathe."

Reference-Based Prompting

Using Examples

"Design similar to Stripe's homepage: clean, professional, with animated code blocks and gradient backgrounds."

"Layout like Notion's pricing page, with the comparison table and toggle for monthly/annual."

Combining References

"Navigation like Linear, color scheme like Vercel, card style like Raycast."

Key Takeaways

1. Use specific design vocabulary
2. Describe colors, typography, spacing explicitly
3. Reference existing sites for clarity
4. Start with overall direction, then specifics
5. Iterate on details after structure is right