Build a Website with AI

How It Works

Describe the purpose of the site (portfolio, lead-gen, store, personal brand), list the pages you need, and the visual direction you like. The builder recommends the best current AI tool (Framer AI, Webflow AI, Wix ADI, v0 + Vercel, Lovable, etc.), creates a page-by-page blueprint with copy prompts and component suggestions, defines responsive and accessibility rules, and walks you through deployment and basic analytics. Everything is actionable with [[merge fields]] for your specifics.

What to Provide

Website Build Blueprint

This is the finished plan. Replace tokens and execute section by section.

1. Purpose and Information Architecture

Primary goal of the site: [[e.g. "Capture qualified leads for freelance design services and book discovery calls"]]

Key conversion action: [[e.g. "Fill the contact form" or "Buy the starter template"]]

Sitemap (recommended order):

1. Home: Hero + value + CTA + social proof

<blank line between>

1. [[About or Services or Portfolio]]

<blank line between>

1. [[Pricing or Packages]]

<blank line between>

1. [[Work / Case Studies]]

<blank line between>

1. Contact / Book a call

Navigation structure: Top nav with 4–6 items max. Mobile hamburger. Footer with legal + quick links + social.

2. Tool Selection

Recommended primary builder: [[Framer AI or Webflow AI or Wix ADI or Lovable + custom code export or v0.dev + Vercel]]

Why this tool for your case: [[Speed + design quality + AI prompt strength + export flexibility]]

Cost estimate (first year): [[Free tier during build + $X/mo after launch]]

Fallback: [[Webflow or Framer or plain HTML + Cursor if needed]]

Required add-ons: [[Form tool (Tally or Typeform), analytics (Plausible or GA4), email (ConvertKit or Beehiiv), payments if selling (Stripe via tool native)]]

3. Content & Copy Generation Prompts

Use these prompts in the AI builder or with ChatGPT/Claude to generate page content. Adapt [[brand voice]].

Home hero prompt:

"Write a 2-line hero headline and 1-sentence subhead for a [[site purpose]] aimed at [[audience]]. Voice: [[confident, friendly, direct]]. Include the main CTA."

About / Services prompt:

"Create 4 benefit-focused sections with short headline + 2 sentences + icon suggestion. Focus on outcomes not features. Use [[specific proof points or client types]]."

Portfolio / Case study prompt:

"Write a 150-word case study summary for [[project name]]. Structure: Challenge → Approach (AI + design) → Results (numbers). End with the client quote."

Contact / CTA prompt:

"Write a short form headline and 3-field form description that reduces friction. Offer [[lead magnet or direct calendar link]]."

4. Design Direction and Components

Overall style: [[Modern minimal with generous whitespace, accent [[#HEX]], sans-serif headings, readable body]]

Key components to use in every page:

• Sticky nav with CTA button
• Hero with image or illustration + primary CTA
• Trust bar (logos or stats)
• Feature / benefit grid (3–4 cols max)
• Testimonial carousel or grid
• Final CTA section

Responsive rules:

• Mobile first: stack everything under 768px
• Text size: 18px body min on mobile
• Buttons: 48px+ tap target
• Images: lazy load, webp preferred, max 1200px unless hero

Accessibility baseline:

• Alt text on all images
• Color contrast ratio >= 4.5:1
• Focus states visible
• Semantic headings (H1 once per page)

5. SEO & Technical Basics

Target keywords (primary): [["[[main phrase]]" ]]

Page titles (template): [[Page Name]] | [[Brand or Your Name]]

Meta description template: [[One sentence value + CTA for search result]]

On-page checklist per page:

1. H1 contains primary keyword naturally.

<blank line between>

1. First 100 words mention the value.

<blank line between>

1. Internal links to 2–3 other pages.

<blank line between>

1. Image file names descriptive, alt text includes keyword where natural.

Technical:

• HTTPS enforced (default on modern builders)
• Fast hosting (Vercel / Framer / Webflow edge)
• Sitemap.xml auto-generated; submit in Google Search Console
• robots.txt default allow

6. Domain, Hosting, Deploy

Domain choice: [[yourname.com or brandname.co or firstlast.design]]

Registrar: [[Namecheap / Google / Porkbun: check current pricing]]

DNS setup steps:

1. Buy domain.

<blank line between>

1. In builder, add custom domain and follow the DNS records shown (usually CNAME or A).

<blank line between>

1. Wait for propagation (minutes to 48h).

Deployment steps (example for Framer or similar):

1. Publish from the builder UI.

<blank line between>

1. Connect domain.

<blank line between>

1. Enable SSL (auto).

<blank line between>

1. Add password protection during soft launch if desired.

7. Analytics, Forms, and Post-Launch

Analytics setup:

• Add Plausible or GA4 via the builder integration or script.
• Create goal for [[form submit / purchase / call book]].

Forms & notifications:

• Connect form to [[email tool or Slack or Notion DB]].
• Auto-reply email to submitter with [[thanks + next step or calendar link]].

Launch checklist (run in order):

1. All copy proofread; links work.
2. Mobile view tested on real phone.
3. Forms submit and notifications arrive.
4. Domain live + redirect from www if used.
5. Search Console + Analytics verified.
6. Favicon and OG image set (1200x630).
7. Privacy / legal pages added if collecting data.
8. Soft announce to 5 people for feedback.
9. Public launch + share.

Worked Examples

Example 1: Freelance Designer Portfolio + Lead Capture

Purpose: Show work and book new client calls.

Pages: Home, Work, Process, About, Contact.

Tool: Framer AI.

Style: Clean minimal, large typography, dark mode option.

Key prompts used: Hero focused on "I help indie founders ship beautiful products fast."

Result: Site live in one afternoon. Form sends to email + adds to CRM. 3 calls booked first week.

Example 2: Local Service Business (Plumbing)

Purpose: Rank locally and book emergency + scheduled jobs.

Pages: Home, Services, Areas, Reviews, Book Now.

Tool: Wix ADI + manual polish.

Style: Trustworthy blue/gray, big phone CTA on every page.

SEO: "[[City]] emergency plumber" on home and services.

Result: Form + calendar embed. Calls increased 40% in first month per owner.

Example 3: Digital Product Site (SaaS landing + waitlist)

Purpose: Collect waitlist emails and explain the product.

Pages: Home, Features, Pricing, Blog stub, Waitlist.

Tool: v0 + Vercel + custom React + Framer motion.

Style: Bold, tech-forward, purple accents.

Result: Deployed same day. Waitlist form to Beehiiv. OG images generated in Midjourney matching brand.

Format Checklist

Common Pitfalls and Fixes

• Picking a tool that cannot export or connect forms later: choose builders with open export or native integrations.
• Too many pages at launch: start with 5 core pages; add blog later.
• Generic stock photos: use AI to generate 3–5 custom hero/options that match your exact style.
• No mobile test before launch: always view on device; fix tap targets and font sizes.
• Forgetting analytics on day one: add before you announce.

Post-Launch 30-Day Optimization

1. Week 1: Watch real usage in analytics; fix any broken flows.
2. Week 2: A/B test hero headline and CTA copy.
3. Week 3: Add one case study or testimonial from a real user.
4. Week 4: Submit sitemap, claim in Google Business if local, start simple content updates.

Follow the blueprint in order and you will have a fast, good-looking, functional site that actually converts. Update the [[tokens]] when your goals or brand evolve.