Build your perfect website
Choose your style. Pick your sections. Get a ready-to-paste prompt for any AI builder.
1
Describe your website
What is your website for?
2
Business type
Pick a category or type your own
3
Visual style
Pick a design aesthetic
4
Page sections
Drag to reorder, click × to remove
- Hero— Headline, CTA & image
- Social Proof— Client logos & trust
- Features— Benefits grid
- Footer— Links & socials
Add more sections:
5
CTA button text
What should the main call-to-action say?
Your Prompt
960 wordsBuild me a beautiful, complete, production-ready Next.js 16 App Router website with TypeScript and Tailwind CSS.
🔷🔷🔷 WHAT IT'S FOR 🔷🔷🔷
Describe your website/business here
🔷🔷🔷 BUSINESS TYPE 🔷🔷🔷
General business
🔷🔷🔷 MAIN CTA BUTTON TEXT 🔷🔷🔷
"Get Started"
🔷🔷🔷 VISUAL STYLE 🔷🔷🔷
Choose a style that fits the business
🔷🔷🔷 PAGE SECTIONS (build in this order) 🔷🔷🔷
1. Hero — Headline, CTA & image
2. Social Proof — Client logos & trust
3. Features — Benefits grid
4. Footer — Links & socials
🔷🔷🔷 TECHNICAL REQUIREMENTS 🔷🔷🔷
- Next.js 16 App Router, TypeScript, Tailwind CSS
- Turbopack is the default bundler in Next.js 16 — no config needed, do NOT add any webpack config
- Use "use cache" directive (Next.js 16 Cache Components) for any static or slow-changing data — do NOT use the old fetch() cache options from Next.js 13/14
- No middleware.ts — use proxy.ts at the project root instead (export function named 'proxy', not 'middleware')
- Fully responsive (mobile-first)
- Realistic placeholder copy — no lorem ipsum
- Smooth animations: fade-in on scroll (Intersection Observer), hover effects on all interactive elements
- CTA button above the fold and repeated near the bottom
- Clean, production-ready. Single page, no routing needed.
🔷🔷🔷 SEO — ON-PAGE 🔷🔷🔷
- Semantic HTML5: one <h1>, logical <h2>/<h3> hierarchy
- Every image gets descriptive alt text
- Meta title: under 60 characters, keyword-rich
- Meta description: 150-160 characters, primary keyword + CTA
- Canonical URL tag
- Open Graph: og:title, og:description, og:type, og:url, og:image (1200x630)
- Twitter Card: twitter:card, twitter:title, twitter:description, twitter:image
- Proper lang attribute on <html>
🔷🔷🔷 SEO — TECHNICAL 🔷🔷🔷
- /app/sitemap.ts (Next.js MetadataRoute.Sitemap)
- /app/robots.ts (Next.js MetadataRoute.Robots)
- proxy.ts at project root (replaces middleware.ts in Next.js 16)
- font-display: swap on all web fonts
- Preconnect + dns-prefetch for external domains
- All images use next/image with explicit width + height
- priority prop on above-the-fold images
- loading="lazy" on below-fold images
🔷🔷🔷 JSON-LD STRUCTURED DATA 🔷🔷🔷
Inject all schemas via <Script type="application/ld+json">:
1. WebPage — name, description, url, breadcrumb
2. Organization — name, url, logo, founder, sameAs
3. BreadcrumbList
4. LocalBusiness (if local business type: dentist, restaurant, personal trainer, law firm) — name, address, telephone, openingHours, geo
5. FAQPage — 5 realistic Q&A based on the business type, questions a real customer would Google or ask ChatGPT
6. Product or Service schema (if relevant)
7. HowTo schema (if "How It Works" section is active)
8. AggregateRating in Social Proof (4.9/5, 200+ reviews)
9. WebSite schema with SearchAction
10. SiteNavigationElement schema for nav links
🔷🔷🔷 AEO — ANSWER ENGINE OPTIMISATION 🔷🔷🔷
(Optimise for ChatGPT, Perplexity, Google SGE, Bing Copilot)
- Dedicated FAQ section component, minimum 6 Q&A pairs based on the business type. Answers 40-80 words, clear direct prose. Mark up with FAQPage JSON-LD schema.
- Use question-format subheadings ("Why choose us?", "How does it work?", "What's included?")
- Include a Glossary block if business is technical/professional
- Write intro paragraphs inverted-pyramid: most important first
- Include statistics and specific numbers in placeholder copy
- Format for extraction: short paragraphs, bullet lists, clear headings
- "About" section with clear Entity description (who, what, where, for whom)
🔷🔷🔷 GEO — GENERATIVE ENGINE OPTIMISATION 🔷🔷🔷
(Help AI search engines cite and recommend this site)
- Clearly labelled "About" section with concise entity description
- Consistent NAP (Name, Address, Phone) if local business
- Expertise signals: years in business, certifications, team credentials in placeholder copy
- Write in first-person authoritative voice for About section
- Include a "Key Statistics" block with 3-4 specific numbers (years experience, clients served, satisfaction rate, etc.)
- Add author/creator byline with credentials where relevant
- Use clear, specific language — avoid vague marketing claims
- Interlink related sections using anchor tags (e.g. CTA button links to Contact section)
- Include a "Sources / Trusted by" logos row to build authority signals
🔷🔷🔷 GEO — LLMS.TXT 🔷🔷🔷
Create /public/llms.txt following the llms.txt standard (llmstxt.org). This file tells AI models (ChatGPT, Perplexity, Claude, Gemini) what this site is about when they crawl it:
- Line 1: # [Business Name]
- Line 2: > One-sentence summary of what the business does and who it serves
- ## What we do — 2-3 short paragraphs describing services/products in plain language
- ## Key facts — bullet list: location, specialties, pricing range (if relevant), what makes this business different
- ## FAQ — 5-6 Q&A pairs matching the FAQPage JSON-LD schema on the page, written in plain prose
- ## Links — canonical homepage URL and sitemap URL
Write it factual, concise, and free of marketing fluff. Optimise for LLM parsing: short paragraphs, clear labels, no jargon.
Also add /public/llms.txt to /app/robots.ts so AI crawlers know where to find it.
🔷🔷🔷 INTERNAL LINKING STRATEGY 🔷🔷🔷
- Navigation links scroll smoothly to each section (anchor IDs)
- Multiple CTA buttons throughout all point to the same #contact or #cta section
- "Back to top" link in the footer
- Cross-link FAQ answers to relevant sections (e.g. FAQ about pricing links to #pricing section)
- Each section has a unique, descriptive id attribute
🔷🔷🔷 PERFORMANCE 🔷🔷🔷
- All images optimised via next/image
- No unused CSS (use Tailwind purge)
- Lazy load all below-fold images and iframes
- Minimal JavaScript — no unnecessary client components
- Use CSS animations over JS where possible
- Web vitals targets: LCP < 2.5s, CLS < 0.1, FID < 100ms
🔷🔷🔷 ACCESSIBILITY 🔷🔷🔷
- All interactive elements keyboard accessible (tabIndex, focus)
- Focus-visible ring on all interactive elements
- ARIA labels on icon-only buttons
- Sufficient colour contrast ratios (WCAG AA minimum)
- Skip-to-main-content link at top of page
- Form fields have associated <label> elements
- Images have descriptive alt text (not empty, not "image of")Paste into Lovable, Bolt, AntiGravity AI Studio, v0, or any AI builder
Your Prompt
960 wordsBuild me a beautiful, complete, production-ready Next.js 16 App Router website with TypeScript and Tailwind CSS.
🔷🔷🔷 WHAT IT'S FOR 🔷🔷🔷
Describe your website/business here
🔷🔷🔷 BUSINESS TYPE 🔷🔷🔷
General business
🔷🔷🔷 MAIN CTA BUTTON TEXT 🔷🔷🔷
"Get Started"
🔷🔷🔷 VISUAL STYLE 🔷🔷🔷
Choose a style that fits the business
🔷🔷🔷 PAGE SECTIONS (build in this order) 🔷🔷🔷
1. Hero — Headline, CTA & image
2. Social Proof — Client logos & trust
3. Features — Benefits grid
4. Footer — Links & socials
🔷🔷🔷 TECHNICAL REQUIREMENTS 🔷🔷🔷
- Next.js 16 App Router, TypeScript, Tailwind CSS
- Turbopack is the default bundler in Next.js 16 — no config needed, do NOT add any webpack config
- Use "use cache" directive (Next.js 16 Cache Components) for any static or slow-changing data — do NOT use the old fetch() cache options from Next.js 13/14
- No middleware.ts — use proxy.ts at the project root instead (export function named 'proxy', not 'middleware')
- Fully responsive (mobile-first)
- Realistic placeholder copy — no lorem ipsum
- Smooth animations: fade-in on scroll (Intersection Observer), hover effects on all interactive elements
- CTA button above the fold and repeated near the bottom
- Clean, production-ready. Single page, no routing needed.
🔷🔷🔷 SEO — ON-PAGE 🔷🔷🔷
- Semantic HTML5: one <h1>, logical <h2>/<h3> hierarchy
- Every image gets descriptive alt text
- Meta title: under 60 characters, keyword-rich
- Meta description: 150-160 characters, primary keyword + CTA
- Canonical URL tag
- Open Graph: og:title, og:description, og:type, og:url, og:image (1200x630)
- Twitter Card: twitter:card, twitter:title, twitter:description, twitter:image
- Proper lang attribute on <html>
🔷🔷🔷 SEO — TECHNICAL 🔷🔷🔷
- /app/sitemap.ts (Next.js MetadataRoute.Sitemap)
- /app/robots.ts (Next.js MetadataRoute.Robots)
- proxy.ts at project root (replaces middleware.ts in Next.js 16)
- font-display: swap on all web fonts
- Preconnect + dns-prefetch for external domains
- All images use next/image with explicit width + height
- priority prop on above-the-fold images
- loading="lazy" on below-fold images
🔷🔷🔷 JSON-LD STRUCTURED DATA 🔷🔷🔷
Inject all schemas via <Script type="application/ld+json">:
1. WebPage — name, description, url, breadcrumb
2. Organization — name, url, logo, founder, sameAs
3. BreadcrumbList
4. LocalBusiness (if local business type: dentist, restaurant, personal trainer, law firm) — name, address, telephone, openingHours, geo
5. FAQPage — 5 realistic Q&A based on the business type, questions a real customer would Google or ask ChatGPT
6. Product or Service schema (if relevant)
7. HowTo schema (if "How It Works" section is active)
8. AggregateRating in Social Proof (4.9/5, 200+ reviews)
9. WebSite schema with SearchAction
10. SiteNavigationElement schema for nav links
🔷🔷🔷 AEO — ANSWER ENGINE OPTIMISATION 🔷🔷🔷
(Optimise for ChatGPT, Perplexity, Google SGE, Bing Copilot)
- Dedicated FAQ section component, minimum 6 Q&A pairs based on the business type. Answers 40-80 words, clear direct prose. Mark up with FAQPage JSON-LD schema.
- Use question-format subheadings ("Why choose us?", "How does it work?", "What's included?")
- Include a Glossary block if business is technical/professional
- Write intro paragraphs inverted-pyramid: most important first
- Include statistics and specific numbers in placeholder copy
- Format for extraction: short paragraphs, bullet lists, clear headings
- "About" section with clear Entity description (who, what, where, for whom)
🔷🔷🔷 GEO — GENERATIVE ENGINE OPTIMISATION 🔷🔷🔷
(Help AI search engines cite and recommend this site)
- Clearly labelled "About" section with concise entity description
- Consistent NAP (Name, Address, Phone) if local business
- Expertise signals: years in business, certifications, team credentials in placeholder copy
- Write in first-person authoritative voice for About section
- Include a "Key Statistics" block with 3-4 specific numbers (years experience, clients served, satisfaction rate, etc.)
- Add author/creator byline with credentials where relevant
- Use clear, specific language — avoid vague marketing claims
- Interlink related sections using anchor tags (e.g. CTA button links to Contact section)
- Include a "Sources / Trusted by" logos row to build authority signals
🔷🔷🔷 GEO — LLMS.TXT 🔷🔷🔷
Create /public/llms.txt following the llms.txt standard (llmstxt.org). This file tells AI models (ChatGPT, Perplexity, Claude, Gemini) what this site is about when they crawl it:
- Line 1: # [Business Name]
- Line 2: > One-sentence summary of what the business does and who it serves
- ## What we do — 2-3 short paragraphs describing services/products in plain language
- ## Key facts — bullet list: location, specialties, pricing range (if relevant), what makes this business different
- ## FAQ — 5-6 Q&A pairs matching the FAQPage JSON-LD schema on the page, written in plain prose
- ## Links — canonical homepage URL and sitemap URL
Write it factual, concise, and free of marketing fluff. Optimise for LLM parsing: short paragraphs, clear labels, no jargon.
Also add /public/llms.txt to /app/robots.ts so AI crawlers know where to find it.
🔷🔷🔷 INTERNAL LINKING STRATEGY 🔷🔷🔷
- Navigation links scroll smoothly to each section (anchor IDs)
- Multiple CTA buttons throughout all point to the same #contact or #cta section
- "Back to top" link in the footer
- Cross-link FAQ answers to relevant sections (e.g. FAQ about pricing links to #pricing section)
- Each section has a unique, descriptive id attribute
🔷🔷🔷 PERFORMANCE 🔷🔷🔷
- All images optimised via next/image
- No unused CSS (use Tailwind purge)
- Lazy load all below-fold images and iframes
- Minimal JavaScript — no unnecessary client components
- Use CSS animations over JS where possible
- Web vitals targets: LCP < 2.5s, CLS < 0.1, FID < 100ms
🔷🔷🔷 ACCESSIBILITY 🔷🔷🔷
- All interactive elements keyboard accessible (tabIndex, focus)
- Focus-visible ring on all interactive elements
- ARIA labels on icon-only buttons
- Sufficient colour contrast ratios (WCAG AA minimum)
- Skip-to-main-content link at top of page
- Form fields have associated <label> elements
- Images have descriptive alt text (not empty, not "image of")Paste into Lovable, Bolt, AntiGravity AI Studio, v0, or any AI builder
Frequently Asked Questions
An AI website prompt builder helps you create detailed, structured prompts that you paste into AI coding tools like Lovable, Bolt or v0. The prompt tells the AI exactly what kind of website to build, what sections to include, what style to use, and what SEO features to implement — saving hours of back-and-forth.
The prompts work with any AI website builder including Lovable, Bolt, v0, AntiGravity AI Studio, Cursor, and Claude Code. They are optimised for Next.js output but can be adapted for any framework by editing the technical requirements section.
Yes. Every generated prompt instructs the AI to implement full on-page SEO, Open Graph tags, JSON-LD schemas (WebPage, Organization, FAQ, BreadcrumbList, LocalBusiness), semantic HTML, canonical URLs, sitemap.xml, robots.txt, and GEO/AEO optimisations like FAQ sections and structured data for AI search engines.
GEO (Generative Engine Optimisation) and AEO (Answer Engine Optimisation) are practices for AI-powered search engines like ChatGPT, Perplexity and Google SGE. The generated prompts instruct the AI to build websites with FAQ sections, schema markup, and answer-formatted content that these engines can surface directly in results.
Yes. The Website Selector prompt builder is completely free to use. No account or sign-up required.
The prompts generate Next.js 16 App Router websites with TypeScript, Tailwind CSS, and full SEO infrastructure built in — including sitemap, robots.txt, structured data, and Open Graph tags.