Writing Effective Prompts

The quality of your prompts determines the quality of the output. This guide covers prompting techniques that work.

Prompt Structure

Good prompts have four parts:

1. Context — What exists now
2. Goal — What you want to achieve
3. Details — Specific requirements
4. Constraints — What to avoid

Example: Initial Site Generation

Create a marketing website for FocusFlow, a time-blocking app
for remote teams.

Include:
- Homepage with hero, features grid, testimonials, and CTA
- Pricing page with 3 tiers
- About page with team bios

Design:
- Modern, clean, professional
- Primary color: indigo-600
- Gradient hero background

Do not:
- Use placeholder images for team photos
- Include a blog section

Example: Modification

In the pricing section on the homepage:

- Change the layout from vertical cards to a horizontal
  comparison table
- Add a monthly/annual toggle with 20% annual discount
- Highlight the "Pro" plan as recommended
- Add a "Contact Sales" link under Enterprise

Keep the current pricing amounts and feature lists.

Be Specific

Vague prompts get vague results.

❌ Vague

Make the hero better.

✅ Specific

Update the hero section:
- Increase headline font size to 64px on desktop
- Change headline to "Ship Faster, Focus More"
- Add a secondary CTA button "Watch Demo" next to the primary
- Add a subtle gradient overlay on the background image

Use Reference Points

Reference existing elements when possible.

❌ Abstract

Add a section similar to other SaaS websites.

✅ Concrete

Below the features section, add a "How It Works" section:
- 3 numbered steps horizontally on desktop
- Each step: icon, title (3-4 words), description (1 sentence)
- Style similar to the features grid above but with step numbers

One Task at a Time

Break complex changes into steps.

❌ Everything at Once

Redesign the entire pricing page, add a new FAQ section,
update all the copy, change the colors, and make it more
conversion-focused.

✅ Sequential Steps

Step 1:

Add an FAQ section below the pricing tiers with 6 questions
about pricing, refunds, and plan changes.

Step 2:

Update the pricing page copy:
- Headline: "Simple pricing, no surprises"
- Subhead: "Start free, upgrade when you need more"

Step 3:

Add a monthly/annual toggle above the pricing tiers.
Annual pricing should show a "Save 20%" badge.

Provide Examples

When describing design, give examples.

❌ Subjective

Make it look more modern.

✅ With Examples

Update the card design:
- Remove borders
- Add subtle shadow (shadow-lg)
- Rounded corners (rounded-xl)
- Increase padding to p-8
- White background

Or reference external sites:

Style the testimonials section similar to Linear.app's
testimonials - clean cards on a dark background with
customer photos and company logos.

Include Constraints

Tell the AI what NOT to do.

Add a contact form to the contact page:
- Fields: Name, Email, Message
- Submit button: "Send Message"

Do not:
- Add a phone number field
- Include a CAPTCHA
- Change the page layout
- Modify the header or footer

Prompt Templates

New Page

Create a [page type] page at /[url]:

Purpose: [what this page does]
Audience: [who visits this page]

Sections:
1. [Section 1 description]
2. [Section 2 description]
3. [Section 3 description]

Design: [style description]
Match the existing site header, footer, and color scheme.

Section Modification

In the [section name] on [page]:

Change:
- [Specific change 1]
- [Specific change 2]

Add:
- [New element]

Remove:
- [Element to remove]

Keep:
- [Element to preserve]

Style Change

Update the styling of [element]:

- Background: [color or gradient]
- Text color: [color]
- Font size: [size]
- Padding: [spacing]
- Border: [style]
- Shadow: [shadow]

Apply to all instances across the site.

Content Update

Update the text in [section/page]:

Current: "[existing text]"
New: "[new text]"

Also update:
- [Other text to change]
- [Another text to change]

Common Patterns

Adding a Feature

Add [feature type] to [location]:

Functionality:
- [What it does]
- [User interaction]
- [Expected behavior]

Design:
- [Visual description]
- Match existing [element] style

Responsive Adjustments

Adjust [section] for mobile:

Mobile (< 768px):
- [Change 1]
- [Change 2]

Tablet (768px-1024px):
- [Change 1]

Keep desktop layout unchanged.

Animation/Interaction

Add animation to [element]:

Trigger: [on load / on scroll / on hover]
Animation:
- [What moves/changes]
- Duration: [time]ms
- Easing: [ease type]

Keep it subtle and performant.

Tips

Start Broad, Then Narrow

Generate the full structure first, then refine sections.

Check Before Continuing

Review each change before the next prompt. It's easier to fix immediately.

Save Good Prompts

Keep a file of prompts that worked well. Reuse for similar tasks.

Use Technical Terms

"Add shadow-lg" is clearer than "add a medium shadow."

Be Patient with Complexity

Complex changes might need multiple attempts. Adjust and retry.

Related Docs

• AI Command Reference — All commands
• Troubleshooting — When things go wrong
• Use Cases — Full prompt examples