Open menu

Website Prompt Builder

Pick your site type, pages, sections, tech stack, colors, fonts and quality targets, and the builder writes a structured website prompt formatted for the AI you use. Start from one of 15 niche presets, such as a dental clinic or a Shopify fashion store, then adjust any field and copy, download or share the result.

Presets (15)
Jump to your prompt
Project basics

What the site is, who it is for and what it should achieve.

Leave empty to keep a {{brand_name}} placeholder you can fill in later.

For example: a family dental clinic in Austin with two locations.

Who visits, what they need and which device they mostly use.

Inspiration sites

Up to 5 sites to take cues from. The AI is told not to copy them.

Pages & structure
Tech stack
Design direction
Responsiveness & accessibility
SEO & performance
Content, CMS & integrations
Deliverables

Your prompt

<role>
You are a senior front-end engineer and UX designer. Build production-ready code, not a mockup.
</role>
<context>
Project: {{brand_name}}
Site type: a multi-page business website.
Primary goal: generate leads (enquiries and quote requests).
Tone: friendly, professional. Reading level: standard (about grade 8). Write all visible copy in American English; write realistic, specific copy — no lorem ipsum.
</context>
<requirements>
<pages>
Pages:
- Home
- About
- Services
- Contact
- Legal (privacy, terms)
- 404 page
Navigation: top bar with logo left and links right. Footer: multi column.
</pages>
<tech_stack>
Astro (static output) with islands only where interactive, Tailwind CSS, TypeScript.
</tech_stack>
<design_system>
Style: minimal; comfortable spacing; 8px corner radius.
Palette: primary #4F46E5, accent #F59E0B, background #FFFFFF, text #0F172A. Use only these colors plus their tints and shades so the brand stays consistent.
Color mode: light only.
Typography: headings "Inter", body "Inter", base size 16px, type scale 1.25.
Imagery: photography. Icons: Lucide.
Animation: subtle; disable non-essential motion under prefers-reduced-motion.
Content max width: 1200px.
</design_system>
<responsive_and_accessibility>
Mobile-first; breakpoints 640/768/1024/1280 px; test on mobile, desktop.
WCAG 2.2 AA: semantic landmarks, skip link, visible focus, full keyboard operation, meaningful alt text, labelled fields with inline errors, 4.5:1 text contrast, reduced-motion support.
</responsive_and_accessibility>
<seo_performance>
SEO: unique title and meta description per page, one H1 and logical headings, Open Graph and Twitter cards, JSON-LD structured data, XML sitemap, robots.txt, canonical URLs. JSON-LD types: Organization, BreadcrumbList.
Performance: Lighthouse 95+ on mobile; LCP < 2.5 s, INP < 200 ms, CLS < 0.1; AVIF/WebP images with width and height, lazy-load below-the-fold images, self-hosted fonts with font-display: swap.
</seo_performance>
</requirements>
<constraints>
- Implement exactly the pages and sections listed, so the scope stays reviewable.
- Use only the colors, fonts and radius above, so the result matches the brand.
- Render static HTML by default and hydrate only interactive parts, to keep pages fast.
- Use real, specific copy for this business; placeholder text hides layout problems.
</constraints>
<deliverables>
Deliver a complete, runnable project.
- file tree
- all source files
- README with setup and content-editing instructions
</deliverables>
<acceptance_criteria>
- Zero critical axe issues; no horizontal scroll at 360px.
- Lighthouse mobile ≥95 in all categories on a production build.
- Every page has a unique title, meta description and exactly one H1.
</acceptance_criteria>

If anything above is ambiguous or conflicts, ask me clarifying questions before writing code.

2,847 characters · 392 words · ~712 tokens

Variables (1)
Your saved presets (0)

How to use the website prompt builder

  1. Choose your target AI at the top. The builder reformats the prompt for that model’s conventions.
  2. Start from a preset if one matches your niche. Presets fill 15 or more fields at once, and you can undo with one click.
  3. Work through the groups: project basics, pages and structure, tech stack, design direction, accessibility, SEO and performance, content and integrations, and deliverables. Use the filter box to jump to a field.
  4. Set the detail level. Use 2–3 for a first draft and 4–5 when you want the AI to deliver production-ready work.
  5. Review the prompt on the right. It updates as you change fields. Switch to Edit mode to change wording by hand.
  6. Copy, download or share the prompt, and save your setup as a preset for the next project.

How it works: the anatomy of a website prompt

Every generated prompt follows the same structure, because a model with little context needs the same things a new developer would:

  • Role: a single line setting the expertise expected, for example a senior front-end engineer and UX designer building production code, not a mockup.
  • Context: the project, site type, goal, audience, market, tone and output language. This tells the model who it is building for before it decides how.
  • Requirements, grouped into pages and sections, tech stack, design system, responsiveness and accessibility, SEO and performance, content management and integrations.
  • Constraints: scope rules, each with a short reason, such as using only the listed colors so the result matches the brand. Reasons help the model apply a rule sensibly instead of literally.
  • Deliverables: the output format and what to include, such as a file tree, all source files, a README or a QA checklist, plus an optional phased plan.
  • Acceptance criteria: measurable checks such as zero critical axe issues, no horizontal scroll at 360px and a Lighthouse target, so “done” is unambiguous.
  • Clarifying questions: an optional closing line asking the model to raise ambiguities before writing code.

The same content is then formatted per target. Claude receives XML tags with the task at the end. ChatGPT receives Markdown headings plus scope and verbosity rules. Gemini receives constraints and output format first and a restated task last. Coding agents get a working agreement for existing repositories. v0, Lovable and Bolt get component-by-component instructions and can split the build into sequential prompts.

Worked examples

Example 1: a dental clinic with online booking

Apply the Dental clinic preset and leave the target on Claude at detail level 4. The prompt describes BrightSmile Dental, a family clinic in Austin, Texas, whose primary goal is appointment bookings. It lists a Home page with hero, features, stats, team, testimonials, FAQ and map sections, plus service detail and booking pages. It specifies Astro with Tailwind and TypeScript, a teal and amber palette, DM Serif Display headings at a 17px base size, Dentist structured data, and acceptance criteria including a Lighthouse score of at least 95.

Example 2: the same site for Lovable, split into steps

Switch the target to Lovable and turn on Split into sequential prompts. The output becomes a series: Prompt 1 sets up the design tokens and shared layout, one prompt per page follows, and a final polish prompt covers accessibility and SEO. Each prompt is small enough for the builder to complete in one go, and the series ends with an invitation to ask questions first.

Example 3: a Shopify store prompt for ChatGPT

Apply Shopify fashion store and choose ChatGPT. The tech stack becomes a Shopify Online Store 2.0 theme with section schemas, metafields and section groups, and the site languages include Spanish for shoppers in Mexico. Because ChatGPT tends to add extras, the output ends with a scope block: implement exactly and only what is specified, with no invented colors, shadows or UI elements.

Tips and common mistakes

  • Choose one primary goal. A site that tries to get bookings, sales and newsletter sign-ups equally will be designed around none of them.
  • Give real details. “Parents 28–50, mostly on mobile” produces better layout decisions than “everyone”.
  • Limit the palette. Four roles (primary, accent, background, text) are enough. Use Generate from primary for a balanced starting set.
  • Keep detail realistic. Level 5 is for serious builds. For a quick idea, level 2 gets you a draft faster and costs fewer tokens.
  • Don’t paste secrets. API keys and passwords never belong in a prompt. Use placeholders such as {{form_endpoint}} instead.

Limitations

The builder writes the prompt; it does not run any AI model, and output quality still depends on the model and on reviewing what it produces. Model names and prompting conventions change often, so the formats are reviewed regularly against each vendor’s published guidance. Generated code should always be tested before it goes live.

Frequently asked questions

Which AI tools does the website prompt builder support?

Claude, Claude Code, Cursor, ChatGPT, Gemini, v0, Lovable, Bolt and a generic Markdown format that works with any model. Changing the target only changes how the prompt is formatted; your choices stay the same.

Is my project information sent anywhere?

No. The builder runs entirely in your browser. Nothing you type is sent to our servers or to any AI service. Your last session and any presets you save are stored only on your device.

What does the detail level change?

It controls how many decisions the prompt spells out. Level 1 is a short brief, level 3 adds constraints and acceptance criteria, and level 5 adds non-goals and an edge-case checklist. Fields that only matter at higher levels appear when you raise the slider.

Why does the Claude version use XML tags?

Anthropic's prompting guidance says XML tags help Claude separate instructions, context and examples in long prompts. The builder uses descriptive tags such as context, requirements and acceptance_criteria, and puts the task request at the end.

Can I edit the prompt by hand?

Yes. Switch to Edit mode and change anything. If you then change a field, the builder warns you before regenerating, and you can undo the regeneration.

What are the double-brace placeholders in the output?

Placeholders such as {{brand_name}} and {{form_endpoint}} mark details you haven't decided yet. Fill them in the Variables panel, or leave them for the AI to keep as placeholders.

Can I share a prompt with a client or teammate?

Copy share link creates a URL that restores every choice when opened. For very large configurations, save a preset and export it as a JSON file instead, because long links can be cut off by some apps.

Sources