L

Prompt Engineering for AI Websites

Learn how to write effective prompts to get the best results from your AI website builder. Master the art of AI prompting.

The quality of your prompts directly affects the quality of your AI-generated website. This guide teaches you how to write prompts that get great results.

Fundamentals

Be Specific

Vague prompts get vague results. The more detail you provide, the better the output.

❌ Vague:

"Make a website"

✅ Specific:

"Create a landing page for a productivity app called 'FocusFlow'. Include a hero with headline and CTA, a 3-column features section, pricing with two tiers, and a footer with social links. Use a clean, modern design with blue as primary color."

Describe the Purpose

Tell the AI what the website is for:

"This is a portfolio for a UX designer who wants to showcase case studies and attract freelance clients."

Context helps the AI make better design decisions.

Specify the Audience

Who will use this website?

"The target audience is enterprise CTOs looking for security solutions."

vs.

"The target audience is creative freelancers looking for project management tools."

Different audiences call for different tones and styles.

Structure Prompts

Section-by-Section

Break down complex pages into sections:

"Create a landing page with:

  1. Hero: Headline, subheadline, CTA button, product screenshot
  2. Features: 4 cards with icons, each highlighting a key benefit
  3. How It Works: 3 numbered steps with illustrations
  4. Testimonials: 3 customer quotes with photos
  5. CTA: Final call-to-action with email signup
  6. Footer: Logo, links, social icons"
Reference Inspiration

Describe sites you admire:

"Style it like Linear.app—minimal, lots of whitespace, subtle animations, dark mode option"

"Similar vibe to Notion's landing page—playful illustrations, clean typography, soft colors"

Style Prompts

Visual Description

Describe the look you want:

AspectExample
Colors"Use a dark theme with purple (#8B5CF6) as accent"
Typography"Bold headlines, clean sans-serif body text"
Layout"Lots of whitespace, centered content, max-width 1200px"
Mood"Professional but approachable, not too corporate"
Animation & Interaction

Specify dynamic elements:

"Add subtle hover effects on buttons" "Fade in sections as user scrolls" "Smooth parallax effect on hero image" "Animated gradient background"

Iteration Prompts

Making Changes

After initial generation, refine with targeted prompts:

Layout:

"Swap the features and testimonials sections" "Make the hero section full-height"

Styling:

"Increase contrast on the headings" "Make buttons more rounded"

Content:

"Change the headline to 'Ship Products Faster'" "Add a fourth pricing tier called Enterprise"

Fixing Issues

If something doesn't look right:

"The mobile layout is broken on the pricing section—fix the grid" "The text is hard to read on the hero—increase contrast" "The animation is too slow—speed it up"

Common Patterns

Landing Pages
 
Create a SaaS landing page for [product].
- Hero: [headline], [subheadline], [CTA]
- Problem: Why users need this
- Features: [3-4 key benefits]
- How it works: [3 steps]
- Social proof: [testimonials/logos]
- Pricing: [tiers]
- FAQ
- Footer
Style: [description]
Portfolios
 
Create a portfolio for a [profession].
- Hero: Name, title, brief intro
- Projects: Grid of [N] projects with images
- About: Photo, bio, skills
- Contact: Form or email link
Style: [description]

Pro Tips

Start Simple, Then Iterate

Don't try to describe everything in one prompt. Start with structure, then refine:

  1. First prompt: Overall structure and content
  2. Second prompt: Styling and colors
  3. Third prompt: Animations and polish
  4. Fourth prompt: Mobile responsiveness
Use Natural Language

You don't need technical jargon. Just describe what you want like you'd tell a friend:

"Make it look more premium" "The buttons feel too small"
"Add some life to it with animations"

Next Steps