HomeCasa Prompts

Build a complete professional website

Generate the structure, copy and HTML/CSS code for a responsive professional business website with basic SEO and accessibility. Designed for ChatGPT, Claude and Gemini. It includes 7 customizable variables and you can copy it for free in one click.

Intermediate · Code · Pending editorial review

Designed for:

Prompt

Act as a senior web developer and UX designer who specializes in small-business websites.

I want to build the professional website for {{business}}, a {{industry}} business located in {{location}}.
Target audience: {{audience}}.
Main goal of the website: {{goal}}.

Deliver, in this order:
1. A sitemap with the required pages and the purpose of each one.
2. For the home page: the section structure (hero, value proposition, services, social proof, call to action, contact) with real, ready-to-use copy in a {{tone}} tone.
3. Semantic HTML5 and modern CSS (Flexbox/Grid, CSS variables, mobile-first) for the home page in a single block, with no external frameworks.
4. SEO tags: title (max 60 characters), meta description (max 155) and LocalBusiness JSON-LD structured data with sample fields marked as [FILL IN].
5. An accessibility checklist (contrast, alt text, keyboard navigation) applied to the code.

Constraints:
- Do not invent contact details, prices or reviews: use [FILL IN] placeholders.
- Color palette: {{colors}}.
- Briefly explain every important design decision.

How to use it

  1. Fill in the variables with your real business details.
  2. Paste the prompt into your AI assistant.
  3. Review the code in an editor and replace every [FILL IN] placeholder before publishing.
  4. Ask for specific iterations: “make the hero more compact on mobile” or “add an FAQ section”.

Usage example

Business: Lumen Physio · Industry: sports physiotherapy · Location: Austin · Goal: get first-appointment bookings.

Sample output

1. Sitemap

  • Home: introduce the studio and drive quote requests.
  • Services: full renovation, interior design project, hourly consultations.
  • Projects: before-and-after shots of real homes.
  • Contact: quote form and [FILL IN] details.

3. Home page code (excerpt)

<header class="hero">
  <h1>Your first home, designed to grow with you</h1>
  <p>Aurora Studio designs renovations for young families in London: bright, practical spaces that fit the way you live.</p>
  <a class="btn" href="#quote">Request your free quote</a>
</header>

<style>
  :root {
    --off-white: #f7f5f0;
    --sage: #8a9a7b;
    --black: #1c1c1c;
  }
  body { margin: 0; background: var(--off-white); color: var(--black); font-family: system-ui, sans-serif; }
  .hero { display: grid; gap: 1rem; padding: 4rem 1.25rem; max-width: 60rem; margin: auto; }
  .btn { justify-self: start; background: var(--black); color: var(--off-white); padding: .9rem 1.4rem; border-radius: .5rem; }
  .btn:focus-visible { outline: 3px solid var(--sage); outline-offset: 3px; }
  @media (min-width: 48rem) { .hero { padding: 6rem 2rem; } }
</style>

The button uses black on off-white (well above 4.5:1 contrast); sage green is kept for accents and the focus ring, because on a light background it is not strong enough for body text.

4. SEO

  • Title: Aurora Studio | Interior Design & Renovation in London
  • Meta description: Renovations and interior design for young families in London. Bright, practical spaces. Request your free, no-obligation quote today…

Key facts

Category
Programming & development · Build websites
Output type
Code
Level
Intermediate
Designed for
ChatGPT, Claude and Gemini
Verified in
Pending editorial verification
Variables
Business name, Industry, Location, Target audience, Website goal, Tone and Brand colors
Language
English
Price
Free, no sign-up
Updated
Nov 7, 2026

Frequently asked questions

Can I publish the AI-generated code directly?

Use it as a starting point: review the code in an editor, test the site on mobile and desktop, replace the [FILL IN] placeholders and check contrast and alt text before publishing.

Does it work for WordPress or other site builders?

Yes. The sitemap, copy and SEO tags can be moved to any builder. The HTML and CSS work as a design reference or for a static site.

How many pages should a small business website have?

It depends on the goal, but home, services, about, contact and legal pages are usually enough. The prompt proposes a sitemap tailored to your case.

What is this prompt for?

Generate the structure, copy and HTML/CSS code for a responsive professional business website with basic SEO and accessibility.

Which AI tools does it work with?

It is designed for ChatGPT, Claude and Gemini. We have not verified it in these tools yet, so results may vary between them.

How do I customize the prompt?

Click “Customize” and fill in the variables (Business name, Industry, Location, Target audience, Website goal, Tone and Brand colors). The text updates instantly and you can then copy it in one click. Values are stored only in your browser.

Do I need experience to use it?

It is intermediate: it helps to know the topic so you can provide good context and review the result critically.

Is this prompt free?

Yes. Every HomeCasa Prompts prompt is free, with no sign-up or subscription. You can also use them in professional projects.

Can I trust the AI output?

Treat it as a high-quality draft: always check data, figures and important claims before publishing or making decisions.

Related prompts