Skip to main content

AI Prompting Best Practices

Get better results from INSTROC's AI by following these proven prompting techniques.

Core Principles​

1. Be Specific​

The more detail you provide, the more accurate the result.

Vague:

Make a landing page

Better:

Create a landing page for a SaaS project management tool with:
- Hero section with headline, subheadline, and CTA button
- Features section with 4 cards showing key benefits
- Pricing section with 3 tiers (Basic, Pro, Enterprise)
- Testimonials section with 3 customer quotes
- Footer with links and social icons
- Dark theme with purple accent color

2. Describe the End Result​

Focus on what you want to see, not how to build it.

Process-focused (less effective):

Use flexbox to center items and add padding

Result-focused (more effective):

Center the content and add breathing room around the text

3. Provide Context​

Help the AI understand your project:

This is a fitness tracking app targeting health-conscious
millennials. The brand is energetic and motivating.

Create a dashboard page showing daily workout stats.

4. Use Natural Language​

Write as if you're explaining to a designer or developer:

I want the hero section to feel more spacious and premium.
Add more whitespace around the text, make the headline larger,
and give the CTA button a subtle hover animation.

Structuring Prompts​

The WHAT + WHERE + HOW Format​

What: Describe the element or feature Where: Specify the location How: Define the style or behavior

Add a testimonials section (WHAT) below the features section
(WHERE) with a carousel of 5 customer quotes, modern card
design, and auto-play every 5 seconds (HOW).

Break Complex Requests​

Instead of one massive prompt, use a series:

  1. First: Create the overall structure
Create a dashboard with sidebar navigation, header with
user menu, and main content area
  1. Then: Add specific sections
Add a stats section at the top of the dashboard with 4 KPI
cards showing Revenue, Users, Orders, and Conversion Rate
  1. Finally: Refine details
Make the KPI cards show percentage change from last month
with green/red indicators

Effective Techniques​

Reference Familiar Designs​

Style the pricing section similar to Stripe's pricing page,
with the middle tier highlighted
Make the navigation feel like Notion's sidebar - clean,
minimal, with collapsible sections

Specify Constraints​

Create a product grid that:
- Shows 3 items per row on desktop
- Shows 2 items per row on tablet
- Shows 1 item per row on mobile
- Has lazy-loaded images
- Maintains square aspect ratio for images

Describe Interactions​

When the user hovers over a team member card:
- Smoothly scale the image up slightly
- Show a colored overlay
- Reveal social media icons from the bottom

Use Comparisons​

The current hero section feels too corporate and bland.
Make it feel more playful and startup-y, like early
Mailchimp or Stripe.

Common Patterns​

Adding Sections​

Add a [section type] section with:
- [List of elements]
- [Style preferences]
- [Any specific requirements]

Modifying Existing Elements​

In the [specific section/element]:
- Change [specific property] to [new value]
- Add [new feature]
- Remove [unwanted element]

Fixing Issues​

The [element] has a problem: [describe issue].
It should [describe expected behavior].

Styling​

Make the [element] more [adjective]:
- [Specific change 1]
- [Specific change 2]

What to Avoid​

Too Vague​

❌ "Make it look better" ✅ "Increase the contrast between text and background, add more whitespace, and use a more professional font"

Too Technical​

❌ "Use CSS grid with fr units and gap property" ✅ "Create a responsive grid of cards with equal spacing"

Ambiguous References​

❌ "Change that button" ✅ "Change the primary CTA button in the hero section"

Conflicting Instructions​

❌ "Make it minimal but with lots of decoration" ✅ "Make it clean and modern with subtle accent details"

Iterating on Results​

When Results Aren't Perfect​

  1. Identify what's wrong: Be specific about the issue
  2. Keep what works: Reference the good parts
  3. Request targeted changes: Ask for specific modifications
I like the overall layout, but the header needs work.
Make it sticky with a blur background effect, and reduce
the logo size by about 30%.

Building Incrementally​

Start simple, then add complexity:

  1. Basic structure
  2. Content and text
  3. Styling and colors
  4. Interactions and animations
  5. Responsive adjustments
  6. Final polish

Tips by Use Case​

Landing Pages​

  • Start with the full page structure
  • Iterate on each section individually
  • Pay attention to mobile responsiveness
  • End with animations and polish

Dashboards​

  • Define the layout grid first
  • Add navigation and header
  • Build data components individually
  • Connect to real data last

E-commerce​

  • Start with product display components
  • Add filtering and search
  • Build cart functionality
  • Implement checkout flow

Forms​

  • Describe all fields needed
  • Specify validation rules
  • Define success/error states
  • Add loading states