23. Pro Tips

Essential principles for writing effective design prompts. Split into beginner-friendly basics and advanced power-user techniques to get the most from AI tools.

Visual Preview

💡

Pro Tips

Write better prompts, get better designs

1Be specific about spacing

✗"lots of padding"

✓"py-24 between sections, gap-16 in grids"

Exact values give AI a clear target instead of guessing.

2Name your fonts

✗"modern sans-serif"

✓"Inter font for headings, system sans-serif for body"

Named fonts produce consistent, recognizable typography.

3Specify animations

✗"animated buttons"

✓"scale-105 on hover with 200ms ease-out transition"

Describing the motion helps AI pick the right technique.

4Define responsive behavior

✗"make it responsive"

✓"3 columns on desktop, 2 on tablet, 1 on mobile"

Breakpoint instructions prevent layout guesswork.

5Request states

✗(not mentioned)

✓"Include hover, loading, error, and empty states"

State coverage makes the UI feel production-ready.

6Mention accessibility

✗(not mentioned)

✓"with proper contrast ratios and focus indicators"

Explicit a11y cues unlock WCAG-compliant output.

7Be opinionated

✗"colorful"

✓"bold, saturated orange as primary accent"

Strong opinions let AI commit instead of hedging.

Pro tip: The more specific and opinionated your prompt, the better the output.

Hire an Expert

When to Use

When you want to improve the quality and specificity of your design prompts for better AI outputs.

Key Vocabulary

SpecificityFontsAnimationsResponsiveStatesAccessibilityOpinion

Beginner Prompt

Build a landing page for a fitness app with:
- Use Inter font for headings, system sans-serif for body
- Add py-24 spacing between sections
- Include hover states on all buttons (scale-105 transition)
- Make it responsive: 3 columns on desktop, 1 on mobile
- Use bold, saturated orange as the primary accent color

Advanced Prompt

Design a premium fitness platform landing page with:
- Inter Display at -0.04em tracking for h1, weight 800, clamp(2.5rem, 5vw, 4rem)
- Skeleton loading states for hero image and testimonial cards
- Error boundaries with friendly illustrations and retry buttons
- Empty states for search results with suggested alternatives
- WCAG AA contrast ratios, focus-visible rings, aria-labels on icon buttons
- GPU-accelerated animations: translateZ(0) on scroll-triggered reveals
- Intersection Observer for lazy-loading below-fold sections
- Prefers-reduced-motion media query fallbacks for all animations

Pro Tip

"The more specific and opinionated your prompt, the better the output. "Bold, saturated colors" works better than "colorful.""

Share this article

Power Combinations Ready-to-Use Prompt Template