Tips & Tricks

Instead of multiple small prompts, combine related changes:

❌ Slow:

"Change the button color to blue" "Make the button larger" "Add a hover effect"

✅ Fast:

"Update the buttons: make them blue, larger, and add a subtle hover effect with shadow"

Reference existing elements by name:

"Make the hero section match the pricing section style" "Use the same card style as the features for testimonials"

The AI understands your existing design system.

Tell the AI exactly where to make changes:

"Only in the header, change..." "On the about page only..." "In the mobile view..."

This prevents unintended changes elsewhere.

Ask the AI to create a design system first:

"Create a design system with:

• Primary color: #1985FF
• Secondary: #10B981
• Font: Inter
• Border radius: 8px for cards, 4px for buttons

Then apply it to the whole site."

Mention mobile early:

"Create a responsive hero section that works great on mobile first, then desktop"

Mobile-first often produces cleaner designs.

For smooth animations:

"Add subtle animations—nothing flashy:

• Fade in sections on scroll
• Gentle hover states
• 200ms transitions Keep it professional."

Short on content? Ask for help:

"Write compelling copy for a SaaS landing page about [product]. Focus on [benefit]."

Then refine:

"Make the headline punchier" "Add more urgency to the CTA"

For faster prototyping:

"Use placeholder content for now—lorem ipsum for text, placeholder.com for images"

Replace later when you have real content.

If the AI breaks something:

1. Use version control: Rollback to the last working version
2. Be specific: Describe exactly what's broken
3. Ask for diagnosis: "Why is the mobile nav broken?"

If the site feels slow:

"Optimize the page performance:

• Lazy load images
• Reduce bundle size
• Remove unused CSS"

Ask for reusable components:

"Create a reusable Card component I can use for features, testimonials, and team members"

Then:

"Use the Card component for the pricing tiers too"

For dynamic sections:

"Only show the 'Pro' badge on the pricing card if the tier is Pro or higher"

The AI can add logic to your components.