Skip to main content

Tips & Best Practices

Get the most out of Website2AI with these tips and best practices.

Writing Effective Prompts​

Be Specific​

The more details you provide, the better the results.

Less effective:

Make me a website

More effective:

Create a modern portfolio website for a UX designer. Include:
- A hero section with my name and tagline
- A projects gallery with 6 cards showing project thumbnails
- An about section with my photo and bio
- A skills section showing my expertise
- A contact form
Use a minimalist design with a dark theme and purple accents.

Describe the Structure​

Explicitly mention the sections and layout you want:

Create a landing page with these sections in order:
1. Hero with headline, subheadline, and CTA button
2. Features section with 3 cards
3. How it works - 3 step process
4. Testimonials carousel
5. Pricing table with 3 tiers
6. FAQ accordion
7. Footer with links and newsletter signup

Specify Visual Style​

Include design preferences for better results:

Style preferences:
- Clean, modern aesthetic
- Lots of white space
- Rounded corners on cards and buttons
- Subtle shadows for depth
- Sans-serif fonts
- Primary color: #3B82F6 (blue)
- Secondary color: #10B981 (green)

Provide Examples​

Reference existing websites or styles:

Create a pricing page similar to Stripe's pricing page - clean,
professional, with a comparison table and FAQ section below.

Iterative Refinement​

Start Simple, Then Add​

Begin with the basic structure, then add features:

  1. First prompt: Basic layout and sections
  2. Second prompt: Add specific content and styling
  3. Third prompt: Refine interactions and details

Make Focused Requests​

Instead of requesting many changes at once:

Less effective:

Change the colors, add animations, fix the mobile layout,
add a new section, and update the fonts

More effective:

Change the primary color from blue to purple (#8B5CF6)

Then follow up with additional requests.

Use Incremental Changes​

Make small, focused changes for better results:

  1. Make a change
  2. Preview the result
  3. If you don't like it, request a different approach
Coming Soon

Version history with restore functionality is in development. Soon you'll be able to browse and restore any previous version.

Content Guidelines​

Provide Real Content​

Use actual content when possible instead of placeholders:

About section content:
"Hi, I'm Sarah Chen, a product designer with 8 years of experience
creating intuitive digital experiences. I've worked with startups
and Fortune 500 companies to bring their visions to life."

Specify Image Requirements​

Be clear about image needs:

Hero image: A professional photo of a modern office space,
bright and airy with plants

Include Call-to-Actions​

Don't forget to specify your CTAs:

Primary CTA button: "Start Free Trial"
Secondary CTA: "Watch Demo"

Performance Tips​

Keep It Focused​

Websites with a clear purpose perform better:

  • Single landing page > complex multi-page site
  • Focused content > everything on one page
  • Specific features > generic catch-all

Mobile-First Thinking​

Mention mobile requirements explicitly:

Ensure the design works well on mobile:
- Hamburger menu on small screens
- Stack cards vertically on mobile
- Touch-friendly buttons (min 44px)

Optimize for Speed​

Request optimization when needed:

Keep the page lightweight - avoid heavy animations
and large images. Prioritize fast load times.

Common Patterns​

Landing Pages​

Create a SaaS landing page with:
- Hero: Headline, description, email signup, product screenshot
- Social proof: Logo bar of client companies
- Features: 3-4 key features with icons
- How it works: Step-by-step process
- Testimonials: 2-3 customer quotes with photos
- Pricing: 3-tier pricing table
- CTA: Final call-to-action section
- Footer: Links, social icons, newsletter

Portfolio Sites​

Create a portfolio for a [profession] with:
- Hero: Name, title, brief intro
- Work: Grid of projects with thumbnails
- About: Photo, bio, background
- Skills/Services: What you offer
- Contact: Form or contact information

Business Websites​

Create a website for [business type]:
- Hero: What we do, key value proposition
- Services: What we offer
- About: Company story, team
- Testimonials: Client reviews
- Contact: Form, location, hours

Troubleshooting​

Generation Taking Too Long​

  • Simplify your request
  • Break it into smaller parts
  • Check your internet connection

Results Don't Match Expectations​

  • Add more specific details
  • Provide visual references
  • Use explicit structural descriptions

Build Errors​

The AI automatically attempts to fix build errors. If issues persist:

  • Request a simpler version
  • Specify fewer custom features
  • Start fresh with a new generation

Best Practices Summary​

  1. Be specific - Details lead to better results
  2. Structure your request - List sections and components
  3. Include style preferences - Colors, fonts, spacing
  4. Iterate gradually - One change at a time
  5. Provide real content - Avoid generic placeholders
  6. Think mobile - Specify responsive requirements
  7. Start simple - Add complexity incrementally
  8. Experiment freely - Try different approaches to find what works best