Prompt Tips

Mastering the art of prompting helps you build better applications faster. These advanced tips will take your skills to the next level.

Structure Your Prompts

Well-structured prompts get better results:

  • Start with the goal - "I want to create..."
  • Add specifics - Layout, features, style preferences
  • Mention constraints - Must-haves and must-nots
  • Reference examples - Similar sites or designs

Be Specific, Not Vague

Compare these examples:

  • Vague: "Make it look better"
  • Specific: "Add more whitespace, use a larger font for headings, and add subtle shadows to cards"

The More Detail, The Better

Specific prompts produce more accurate results and require fewer iterations.

Build Iteratively

Don't try to build everything at once:

  1. Start with basic structure and layout
  2. Add content and components section by section
  3. Refine styling and details
  4. Add interactivity and polish

Reference Context

Use conversation context effectively:

  • "Like we did for the header"
  • "Apply the same style to this section"
  • "Undo that last change"
  • "Make it consistent with the rest of the page"

Describe Behavior

For interactive elements, describe what should happen:

  • "When hovering, scale up slightly and add a shadow"
  • "On click, open a modal with a form"
  • "Validate the email field before submission"

Ask Questions

The AI can help you decide:

  • "What layout would work best for this content?"
  • "Should I use a modal or a new page for this form?"
  • "What color would complement this design?"

Common Patterns

Adding Elements

"Add a [element] with [properties] to [location]"

Modifying Elements

"Change the [property] of [element] to [value]"

Removing Elements

"Remove the [element] from [location]"

Restructuring

"Move [element] from [location A] to [location B]"

When Results Aren't Right

  • Be more specific - Add details about what you want
  • Show examples - Upload screenshots or reference URLs
  • Break it down - Request smaller changes one at a time
  • Describe the problem - Explain what's wrong with current output

Next Steps

PreviousAI ChatNextModel Selection