Prompts / Coding & Software Engineering

Claude prompt for a website

This prompt produces a small, working website with code you can run and a clear explanation of how it works. Use it when you have a defined site goal and want more than an attractive mockup.

Quick answer: This page gives you a free, copy-and-paste Coding & Software Engineering prompt for ChatGPT or Claude. This prompt produces a small, working website with code you can run and a clear explanation of how it works. Copy the prompt, replace the 6 placeholders in square brackets with your details and paste it into ChatGPT or Claude.

Updated

PromptOpen ChatGPTOpen Claude
I want you to design and build a complete, responsive website for [BUSINESS OR PROJECT]. Its primary visitor is [TARGET AUDIENCE], and the main action I want them to take is [PRIMARY CONVERSION].

Site requirements:
- Pages or sections: [REQUIRED PAGES OR SECTIONS].
- Brand direction: [BRAND AND VISUAL DIRECTION].
- Technical constraints: [TECH STACK AND CONSTRAINTS].
- Use only facts, copy, offers, and links I provide. If content is missing, use clearly marked placeholders rather than inventing testimonials, metrics, client logos, prices, legal claims, or integrations.

First, give me a compact build plan: page hierarchy, conversion path, content needed, components, data/state needs, and assumptions. Then produce the implementation.

Output requirements:
1. Provide a file tree, followed by complete code for every file needed to run the site.
2. Use semantic HTML, visible keyboard focus, labeled form fields, sufficient color contrast, descriptive image alt text, responsive layouts from 320px upward, and respect prefers-reduced-motion.
3. Include loading, empty, validation-error, success, and failure states for every interactive element. Forms must prevent duplicate submission and explain what happens when submission cannot be completed.
4. Keep copy scannable: a specific value proposition near the top, proof only where supplied, and one primary call to action per page.
5. Include setup and run instructions, then explain the architecture and the three most useful places to customize.

Before answering, check that every import, route, asset reference, and interaction is accounted for. Also check that the primary conversion remains usable on mobile, with JavaScript disabled where feasible.

Ask up to 3 clarifying questions only if a required input is missing; otherwise make clearly labeled, reasonable implementation assumptions.

Fill in

PlaceholderWhat to enterExample
[BUSINESS OR PROJECT]State what the website is for and what it offers.A one-person bookkeeping service for independent architects.
[TARGET AUDIENCE]Describe the main visitor and the problem they are trying to solve.US-based architects with 1–10 employees who need monthly books and tax-ready records.
[PRIMARY CONVERSION]Name the single action the visitor should take, such as book a call or join a waitlist.Book a 20-minute discovery call.
[REQUIRED PAGES OR SECTIONS]List the pages or sections the site needs.Home, services, process, about, FAQ, contact form, and privacy page.
[BRAND AND VISUAL DIRECTION]Describe the voice, colors, visual references, and any existing brand rules.Calm, precise, plainspoken; navy, warm white, and muted green; no stock-photo-heavy look.
[TECH STACK AND CONSTRAINTS]Specify the framework, hosting, dependencies, content source, and any restrictions.Next.js with TypeScript and Tailwind; deploy to Vercel; contact form can show a mocked success state.

How to use

  1. Replace every bracketed input with your site brief, including the intended conversion.
  2. Paste the prompt into Claude, ChatGPT, or Gemini and answer only any necessary missing-input questions.
  3. Run the generated project and test the main action at phone width, tablet width, and desktop width.
  4. Follow up with: “Now audit the contact flow against the original brief and return only fixes with changed files.”

Variations

Landing page only

Use this when you need one focused conversion page instead of a full site.

Variation
Create a responsive single-page landing page for [OFFER] aimed at [AUDIENCE]. The sole conversion is [CTA]. Use this proof only: [APPROVED PROOF]. Produce a section outline, then complete runnable [TECH STACK] code. Include a focused hero, problem-to-outcome framing, how it works, approved proof, objections, and CTA. Do not invent metrics, testimonials, or urgency. Add accessible form behavior with validation, loading, success, and error states. Check mobile readability and that every CTA leads to the same intended action before answering.

Website content plan

Use this before development when the information architecture and copy are still unclear.

Variation
Plan the content for a website for [BUSINESS] serving [AUDIENCE] who need [PROBLEM SOLVED]. The conversion goal is [CTA]. Based only on [SOURCE MATERIAL], produce a page map and a copy brief for each page: visitor intent, headline, essential sections, proof needed, objections, and CTA. Identify missing facts that block credible copy. Do not write fictional customer outcomes or claims. Check that each page has a distinct job and that the conversion path has no unnecessary detours. Ask up to 3 questions only if a required input is absent.

Website code audit

Use this when a site exists and you need actionable fixes before launch.

Variation
Audit this [WEBSITE CODE OR URL] for a site whose primary visitor is [AUDIENCE] and primary conversion is [CTA]. Evaluate mobile layout, keyboard navigation, semantic structure, form validation, performance risks, broken states, copy hierarchy, privacy-sensitive data handling, and conversion friction. Return findings grouped by critical, important, and polish; for each, cite the affected file or page, explain the user impact, and give a specific fix. Do not assume functionality that is not present. Check that recommendations do not conflict with [TECH CONSTRAINTS].

Tips

  • Write the conversion as an observable action, such as “request a quote with project size,” not “learn more.”
  • Give the model approved source material for claims; a website that invents a client count or compliance claim creates a real publishing risk.
  • Ask for form failure states early, because mockups commonly omit invalid input, slow networks, duplicate clicks, and unavailable services.
  • If AI generates code, run it before polishing copy; missing packages, asset paths, and routes are easier to fix while the file structure is fresh.

FAQ

Can Claude build an entire website from one prompt?

It can generate a useful starting project, but you still need to run it, test its integrations, and verify every published claim and legal page.

What should I give the AI before asking for website code?

Provide the visitor, conversion goal, required sections, approved copy or facts, brand rules, and your technical stack.

How do I stop AI website copy from sounding generic?

Supply real customer language, specific offers, boundaries, and proof. Tell it to mark missing proof instead of filling gaps with broad claims.

Related prompts

All Coding & Software Engineering prompts →

Get a few prompts like this every week

Something Big is a free AI newsletter read by 70,000+ professionals. About three short emails a week with prompts and tools that work, plus what changed in AI and what to do about it.