Building Your Product Website with AI (Days 3-5)

Here is a counterintuitive move: you are going to build your product website before you build your product.

Most founders do the opposite. They spend weeks building the product, then throw up a basic landing page as an afterthought. This is backward for three reasons.

First, your website is your first product. It validates whether your messaging resonates before you invest a week building an MVP. If nobody engages with your website, your product's features do not matter.

Second, SEO and AI visibility need time to compound. Google and AI search engines need weeks or months to index and rank your content. Every day you delay your website is a day of lost organic growth.

Third, the website forces you to clarify your thinking. Writing clear copy about your product's value proposition, pricing, and differentiation is hard. That difficulty is a signal. If you cannot explain your product clearly on a webpage, you do not understand your product well enough to build it.

---

Choosing Your AI Coding Assistant

You will use AI to build your website. Two options are recommended, and they serve different purposes:

Claude Pro ($20/month):

• Stronger at generating complete, production-ready code in a single pass
• Better at understanding complex specifications and maintaining consistency
• Claude Code (terminal-based) is excellent for project-level work
• Best for: building the actual website structure and code

Gemini Advanced ($20/month):

• Strong at research and competitive analysis
• Good at generating marketing copy and content
• Useful for brainstorming and exploring alternatives
• Best for: writing website copy, researching competitors, generating content

My recommendation: subscribe to both ($40/month total). Use Gemini for research and copy, Claude for code generation and implementation. You will use both throughout the 60 days for different tasks.

---

The Spec-First Approach

Never start a coding session by saying "build me a website." That produces generic output. Instead, write a clear specification document first, then feed it to the AI.

Your website spec should include:

# Website Specification: [Your Product Name]

## Overview
[One paragraph describing the product and what 
the website should communicate]

## Target Audience
[Your buyer profile from Chapter 2]

## Brand
- Color palette: [primary, secondary, accent colors]
- Tone: [professional, playful, technical, friendly]
- Competitors' sites to reference (for positioning, 
  not copying): [URLs]

## Pages Required

### Homepage
- Hero: [headline, subheadline, primary CTA]
- Problem section: [what pain you solve]
- Solution section: [how you solve it]
- Features: [3-5 key features with descriptions]
- Social proof: [testimonials, logos, or stats]
- CTA section: [what you want visitors to do]
- Footer: [links, social, legal]

### Features / Product Page
- Detailed feature descriptions
- Screenshots or mockups (placeholder okay)
- Use cases

### Pricing Page
- [Tier 1]: $[X]/month - [features]
- [Tier 2]: $[X]/month - [features]
- [Tier 3]: $[X]/month - [features]
- FAQ section below pricing

### About Page
- Founder story
- Mission
- Why this product exists

### Blog
- Blog listing page
- Individual blog post template
- Categories/tags

### Contact
- Contact form
- Business email
- Social links

## Technical Requirements
- Framework: [Next.js / Astro / static HTML]
- Responsive (mobile-first)
- Fast loading (target < 2s)
- SEO-optimized (meta titles, descriptions, OG tags)
- Schema.org markup on all pages
- Dark/light mode (optional)

Feed this spec to Claude Code with the instruction:

Build this website based on the specification below. 
Use [Next.js / Astro / HTML+CSS+JS]. 
Make it production-ready, responsive, fast, 
and SEO-optimized. 
Include all pages described. Use clean, modern design.
Generate the complete project structure.

[paste your spec]

---

Framework Decision

Which web framework should you use? Here is a simple decision guide:

Static HTML/CSS/JS: Best if your site is simple (under 8 pages) and you want maximum control. No build tools, no frameworks, just files. AI generates these beautifully.

Astro: Best for content-heavy sites (blog + marketing pages). Fast by default, supports markdown for blog posts, and works perfectly with Cloudflare Pages. My recommended choice for most solo founders.

Next.js: Best if your product's marketing site and web app will live on the same domain. More complex to set up but gives you the most flexibility. Use if you plan to build your product as a web app.

For this playbook, Astro or static HTML are the best choices. They are fast, simple to deploy on Cloudflare Pages, and AI generates high-quality code for both.

---

Pages You Need on Day One

Homepage

Your homepage has one job: convince a visitor that your product solves their specific problem and get them to take the next step (sign up, start a trial, or join a waitlist).

Structure:

Hero Section
  Headline: [Clear statement of what you do]
  Subheadline: [Who it's for and what outcome they get]
  Primary CTA: [Start Free Trial / Get Started / Join]
  Visual: [Product screenshot, illustration, or demo gif]

Problem Section
  "The Problem" heading
  2-3 pain points your audience experiences
  Data or quotes that validate the pain

Solution Section  
  "How [Product] Solves This" heading
  3-5 key features with icons and descriptions
  Each feature connects to a specific pain point

Social Proof
  Customer testimonials (even 1-2 early users)
  Company logos (if applicable)
  Stats: users, uptime, satisfaction
  (Use placeholders if you don't have these yet)

CTA Section
  Recap of value proposition
  Primary CTA button
  "No credit card required" or similar trust signal

Footer
  Product links
  Company links (About, Blog, Contact)
  Legal links (Privacy, Terms)
  Social media icons

Prompt for AI-generating your homepage copy:

Write the homepage copy for [product name], 
a [one-sentence description].

Target buyer: [your buyer profile]

The homepage should follow this structure:
1. Hero: Clear headline (under 10 words), subheadline 
   (1-2 sentences), CTA
2. Problem section: 3 pain points the buyer experiences
3. Solution: How our product solves each pain point
4. Features: 4-5 features with short descriptions
5. Social proof placeholder
6. Final CTA

Tone: [professional / friendly / technical]
Avoid: buzzwords, vague claims, superlatives
Focus: specific outcomes and benefits, not features

Pricing Page

Yes, put pricing on your website before you have a product. This is intentional.

A pricing page with real numbers validates willingness to pay. If visitors look at your pricing and leave, your price-to-value ratio needs work. If they click "Start Free Trial" on a product that does not exist yet, you have just validated demand in the strongest way possible (redirect them to a waitlist form with a message that the product launches soon).

Pricing page elements:

• 2-3 tiers (most common: Starter, Professional, Enterprise or Business)
• Clear feature differentiation between tiers
• Annual pricing option (with discount to encourage upfront payment)
• FAQ section below pricing (addresses common objections)
• Comparison to alternatives (optional but powerful)

Pricing strategy for solo founders:

• Starter: $49/month (limited features, attracts small teams)
• Professional: $99-149/month (full features, your bread-and-butter tier)
• Business: $249+/month or "Contact Us" (enterprise features, higher touch)
• Offer annual plans at 20% discount (improves cash flow)

Content Pages (Critical for SEO and AI Visibility)

These pages are not optional. They are the foundation of your organic growth strategy and what will get your brand cited by AI search engines.

1. White paper or deep-dive (1 piece):

Write one substantial piece of content (2,000-3,000 words) that dives deep into the problem your product solves. This is not a product pitch. It is an educational resource that establishes your expertise.

Example: If your product helps B2B companies track AI citations, your white paper might be "The State of AI-Powered Vendor Research: How Enterprise Buyers Use ChatGPT to Evaluate Software in 2026."

Prompt for AI:

Write a 2,500-word white paper on [topic].

Target audience: [buyer profile]
Tone: authoritative, data-driven, practical
Structure: 
- Executive summary (150 words)
- Problem overview with data
- Current landscape analysis
- 3-5 key findings or insights
- Practical recommendations
- Conclusion with forward-looking perspective

Include: specific data points, industry statistics, 
expert perspectives, and actionable takeaways.

Do not include: product pitches, vague claims, 
filler content.

2. Alternative and comparison pages (2-3 pieces):

These are the highest-ROI content pages for early-stage companies. People searching for "[competitor] alternative" or "[competitor A] vs [competitor B]" are actively looking for solutions.

Create pages like:

• "Top 5 Alternatives to [Biggest Competitor]"
• "[Your Product] vs [Competitor], Honest Comparison"
• "[Competitor A] vs [Competitor B] vs [Your Product]"

Be honest in these comparisons. Acknowledge competitor strengths. Highlight where you are different (not necessarily "better"). Readers trust honest assessments far more than biased promotion.

3. Long-form blog articles (2-3 pieces):

Write articles focused on the pain points and questions your target audience has. These should be:

• 1,500-2,500 words each
• Focused on a specific problem or question
• Optimized for search (target a primary keyword)
• Including FAQ sections at the bottom
• Linking to your product pages naturally

---

SEO, GEO, and AEO From Day One

Your website needs to be optimized for three types of search from the start:

Traditional SEO (Google)

On every page:

• Unique meta title (under 60 characters)
• Unique meta description (under 160 characters)
• One H1 tag per page
• Logical heading hierarchy (H1 then H2 then H3)
• Image alt tags
• Internal links between your pages
• Clean URLs (yourdomain.com/features, not yourdomain.com/page?id=123)

Site-wide:

• XML sitemap (auto-generated with most frameworks)
• robots.txt file
• SSL certificate (Cloudflare provides this free)
• Mobile-responsive design
• Fast page load speed (under 3 seconds, ideally under 2)

GEO (Generative Engine Optimization)

GEO optimizes your content to be cited by AI search engines like ChatGPT, Perplexity, and Google AI Overviews. This is increasingly important because enterprise buyers now use these tools to research vendors.

Key GEO tactics for your website:

Create an llms.txt file. This tells AI crawlers what your site is about. Place it at yourdomain.com/llms.txt.

# [Your Product Name]

## Overview
[One paragraph describing your product]

## Key Pages
- Homepage: [URL]
- Features: [URL]
- Pricing: [URL]
- Blog: [URL]
- Documentation: [URL] (when available)

## About
[Brief description of the company and founder]

## Contact
[Email address]

Schema.org markup on every page. Use Organization, Product, Article, and FAQPage schema types. AI engines use structured data heavily.

Entity optimization. Mention your product name, founder name, and company consistently across pages. AI engines build entity graphs from this information.

Authoritative content. Back claims with data, link to sources, and demonstrate expertise. AI engines preferentially cite content with strong authority signals.

AEO (Answer Engine Optimization)

AEO ensures your content appears when people ask AI assistants questions about your problem space.

Key AEO tactics:

• Add a FAQ section to every content page (5-10 questions)
• Structure FAQs with FAQPage schema markup
• Write questions in the way your buyers would ask them
• Provide concise, direct answers (2-4 sentences) followed by deeper context

<!-- FAQPage Schema Example -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "What is [your product category]?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "A concise, direct answer..."
      }
    }
  ]
}
</script>

---

Building with AI: The Practical Workflow

Here is the actual workflow I recommend for building your website in 2 days:

Day 1 Morning (3-4 hours): Copy and Content

1. Write your website spec (from the template above)
2. Use Gemini to generate homepage copy, feature descriptions, and pricing page copy
3. Use Claude to refine, tighten, and improve the copy
4. Write or generate your first white paper
5. Draft 2-3 comparison page outlines

Day 1 Afternoon (3-4 hours): Design and Build

1. Feed your complete spec to Claude Code
2. Review the generated code structure
3. Iterate on design and layout
4. Make sure all pages are responsive (check mobile view)
5. Add all SEO elements (meta tags, schema, sitemap)

Day 2 Morning (3-4 hours): Content and Polish

1. Generate or finalize comparison pages
2. Write 2-3 blog articles using AI (review and edit each one)
3. Add FAQ sections to all content pages
4. Create the llms.txt file
5. Add all internal links between pages

Day 2 Afternoon (2-3 hours): Review and Deploy

1. Test every page on mobile
2. Run through a basic SEO checklist
3. Check all links work
4. Verify schema markup with Google's Rich Results Test
5. Deploy (covered in Chapter 5)

---

End of Day 5 Checkpoint

• Complete website with 8-10 pages live
• Homepage with clear value proposition and pricing
• 1 white paper or deep-dive on your problem space
• 2-3 competitor comparison or "alternative to" pages
• 2-3 blog articles
• FAQ sections on all content pages with Schema markup
• llms.txt file
• XML sitemap and robots.txt
• Mobile-responsive design
• SSL active (via Cloudflare)

Total additional spend: $40 (Claude Pro + Gemini Advanced for the month)

Your website now looks more professional than 90% of funded startups' websites. And it is already generating SEO value that will compound over the next 55 days.