If you have ever asked an AI to “make me a website,” you already know what usually comes back. A purple gradient hero, a centered headline, three identical feature cards, and a footer. It works, but it looks like every other AI-generated site on the internet.
The problem is not the AI. The problem is the prompt.
Claude is genuinely good at web design when you give it the right information in the right structure. After a lot of testing, I have landed on a single master prompt that consistently produces polished, responsive, professional-looking websites in one go. You fill in a few details about your site, paste it into Claude, and you get a complete website in a single HTML file.
In this post, I will share the full prompt template, explain why each part matters, and walk you through two real examples so you can see exactly how to fill it in.
Why One Well-Structured Prompt Beats Many Short Ones
Most people design websites with AI through trial and error. They start with a vague request, then spend the next twenty messages fixing colors, spacing, fonts, mobile layout, and missing sections.
A structured prompt flips that process around. Instead of correcting Claude after the fact, you give it everything up front:
- Context about the site, the audience, and the goal, so layout decisions have a purpose.
- Design direction that pushes Claude away from generic templates.
- Technical requirements so the site is responsive, accessible, and SEO-friendly from the start.
- A clear process that makes Claude think about the design before it writes any code.
The result is a first draft that already feels finished, and any follow-up requests become small refinements instead of major repairs.
The Claude Website Design Prompt Template
Copy this template, replace everything in square brackets with your own details, and paste it into Claude.
Design and build a complete, production-quality website for me as a single self-contained HTML file (HTML, CSS, and JavaScript inline).
ABOUT THE SITE – Name: [site name] – What it is: [one or two sentences on what the site/business does] – Target audience: [who visits and what they care about] – Main goal of the site: [e.g. get newsletter signups, show a portfolio, sell a product, drive clicks to blog posts] – Pages/sections needed: [e.g. hero, features, about, testimonials, FAQ, contact, footer] – Real content to use: [paste your text, headlines, links, or say “write realistic placeholder copy”]
DESIGN DIRECTION – Mood and personality: [e.g. playful and bold / calm and premium / techy and minimal] – Colors: [brand colors in hex, or “choose a distinctive palette that fits the mood”] – Sites I like the feel of: [optional references] – Avoid the generic “AI template” look: no default purple gradients, no centered-everything layouts, no stock-style cards repeated endlessly. Make deliberate choices in typography, spacing, and layout so the site feels designed by a skilled human designer. – Use a strong type pairing from Google Fonts with a clear visual hierarchy. – Add tasteful micro-interactions (hover states, smooth scroll, subtle entrance animations) without overdoing it.
TECHNICAL REQUIREMENTS – Fully responsive: looks great on a 375px phone, tablet, and wide desktop. – Semantic HTML, accessible color contrast, alt text, keyboard-friendly navigation. – Support light and dark mode via prefers-color-scheme. – Fast and lightweight: no heavy libraries unless truly needed. – Use inline SVG for icons and illustrations instead of external images. – SEO basics: proper title, meta description, Open Graph tags, one H1, logical heading order.
PROCESS 1. Before writing code, briefly state your design concept in 3 to 5 lines (palette, fonts, layout idea, and why it fits the audience). 2. Then build the full site in one file. No placeholders like “content goes here” and no unfinished sections. 3. After the code, list 3 specific improvements I could ask for next.
How Each Part of the Template Works
Before jumping into the examples, it helps to understand what each section is doing. Once you know the purpose behind it, you can adapt the template to almost any project.
About the Site
This is the most important section. When Claude knows who the visitors are and what you want them to do, it makes smarter layout decisions. A bakery that wants pre-orders needs a very different page structure than an app that wants downloads. The more specific you are here, the better the final design will be.
If you have real content, always paste it in. Websites built around actual headlines and copy look far more polished than ones filled with invented filler text.
Design Direction
This section gives the site its personality. Describing the mood in plain words like “warm and handmade” or “fresh and modern” is surprisingly effective. If you already have brand colors, include the hex codes so Claude uses them exactly.
The line about avoiding the generic AI template look is the secret weapon of this prompt. Without it, many AI-built sites drift toward the same safe, interchangeable style. With it, Claude makes bolder and more intentional design choices.
Technical Requirements
These lines quietly handle the boring but essential parts of web design. Mobile responsiveness, accessibility, dark mode support, and basic SEO are all baked in, so you do not have to remember to ask for them every time.
Using inline SVG for icons also means the site works as a single file without depending on external images that might break later.
Process
Asking Claude to state its design concept before coding forces it to commit to one coherent visual idea. This small step leads to a much more unified result than jumping straight into code. The final step, listing three improvements, gives you a ready-made list of next steps for refining the site.
Example One: A Local Bakery Website
Here is the template filled in for a small neighborhood bakery. Notice how specific the audience and goal are, and how the menu items give Claude real content to design around.
Design and build a complete, production-quality website for me as a single self-contained HTML file (HTML, CSS, and JavaScript inline).
ABOUT THE SITE – Name: Crumb & Copper Bakery – What it is: A small neighborhood bakery known for sourdough bread, cardamom buns, and seasonal fruit tarts, baked fresh every morning. – Target audience: Local families and young professionals nearby who want quality baked goods and a cozy weekend breakfast spot. – Main goal of the site: Get visitors to place pre-orders for weekend pickup and visit the shop in person. – Pages/sections needed: Hero with today’s specials, menu with prices, our story, weekend pre-order section, customer reviews, opening hours and location, footer with Instagram link. – Real content to use: Write realistic placeholder copy with warm, friendly wording. Menu items: Country Sourdough $8, Cardamom Bun $4, Mango Tart $6, Chocolate Babka $12, Banana Walnut Loaf $7.
DESIGN DIRECTION – Mood and personality: Warm, handmade, and inviting, like walking into a bakery early in the morning. – Colors: Cream #FAF3E8, copper #B5651D, deep brown #3B2A20, sage accent #8A9A7B. – Sites I like the feel of: Independent artisan bakeries and specialty coffee roasters with editorial layouts. – Avoid the generic “AI template” look: no default purple gradients, no centered-everything layouts, no stock-style cards repeated endlessly. Make deliberate choices in typography, spacing, and layout so the site feels designed by a skilled human designer. – Use a strong type pairing from Google Fonts with a clear visual hierarchy. – Add tasteful micro-interactions (hover states, smooth scroll, subtle entrance animations) without overdoing it.
TECHNICAL REQUIREMENTS – Fully responsive: looks great on a 375px phone, tablet, and wide desktop. – Semantic HTML, accessible color contrast, alt text, keyboard-friendly navigation. – Support light and dark mode via prefers-color-scheme. – Fast and lightweight: no heavy libraries unless truly needed. – Use inline SVG for icons and illustrations instead of external images. – SEO basics: proper title, meta description, Open Graph tags, one H1, logical heading order.
PROCESS 1. Before writing code, briefly state your design concept in 3 to 5 lines (palette, fonts, layout idea, and why it fits the audience). 2. Then build the full site in one file. No placeholders like “content goes here” and no unfinished sections. 3. After the code, list 3 specific improvements I could ask for next.
What makes this example work is the combination of a clear business goal (weekend pre-orders) and a strong mood description. The warm color palette and the “early morning bakery” feeling give Claude a vivid creative direction, while the real menu items make the page feel like an actual business instead of a demo.
Example Two: A Mobile App Landing Page
This second example shows how the same template handles a completely different kind of website. Here the goal is app downloads, so the structure shifts toward features, social proof, and strong calls to action.
Design and build a complete, production-quality website for me as a single self-contained HTML file (HTML, CSS, and JavaScript inline).
ABOUT THE SITE – Name: FocusLeaf – What it is: A mobile app that helps students stay focused by growing a virtual plant during study sessions, with streaks, study stats, and group study rooms. – Target audience: College students and exam aspirants aged 17 to 25 who struggle with phone distractions. – Main goal of the site: Get visitors to download the app from the Play Store or App Store. – Pages/sections needed: Hero with app screenshot mockup and download buttons, how it works in three steps, key features, study stats showcase, student testimonials, FAQ, final download call to action, footer. – Real content to use: Write realistic placeholder copy that is energetic but not cheesy. Stats to show: 200,000+ downloads, 4.7 star rating, 12 million focus minutes logged.
DESIGN DIRECTION – Mood and personality: Fresh, motivating, and modern, with a playful touch that still feels trustworthy. – Colors: Leaf green #2E9E5B, soft mint #E6F5EC, charcoal #1F2421, sunny accent #FFC93C. – Sites I like the feel of: Popular productivity and habit-tracking apps with clean, friendly landing pages. – Avoid the generic “AI template” look: no default purple gradients, no centered-everything layouts, no stock-style cards repeated endlessly. Make deliberate choices in typography, spacing, and layout so the site feels designed by a skilled human designer. – Use a strong type pairing from Google Fonts with a clear visual hierarchy. – Add tasteful micro-interactions (hover states, smooth scroll, subtle entrance animations) without overdoing it.
TECHNICAL REQUIREMENTS – Fully responsive: looks great on a 375px phone, tablet, and wide desktop. – Semantic HTML, accessible color contrast, alt text, keyboard-friendly navigation. – Support light and dark mode via prefers-color-scheme. – Fast and lightweight: no heavy libraries unless truly needed. – Use inline SVG for icons and illustrations instead of external images. – SEO basics: proper title, meta description, Open Graph tags, one H1, logical heading order.
PROCESS 1. Before writing code, briefly state your design concept in 3 to 5 lines (palette, fonts, layout idea, and why it fits the audience). 2. Then build the full site in one file. No placeholders like “content goes here” and no unfinished sections. 3. After the code, list 3 specific improvements I could ask for next.
The difference here is all in the first two sections. A fresh green palette, a playful but trustworthy mood, and specific stats give Claude everything it needs to build a convincing app landing page. The download goal also tells Claude to place call-to-action buttons in the hero and again at the end of the page.
Tips for Getting Even Better Results
Once you start using this template, a few small habits will make your results even stronger.
Keep the guardrail sections the same. Notice that in both examples, only the “About the site” and “Design direction” sections changed. The design guardrails, technical requirements, and process stayed identical. That consistency is what makes the template reliable across any kind of project.
Be specific about the audience. “Students” is okay. “College students who struggle with phone distractions” is much better. The more Claude understands your visitors, the more targeted the copy and layout become.
Describe a feeling, not just a style. Phrases like “like walking into a bakery early in the morning” give Claude a creative anchor that generic words like “modern” or “clean” cannot.
Use the improvement list. The three suggestions Claude gives at the end are usually spot on. Pick one, ask Claude to apply it, and repeat until the site feels right.
Preview the result right away. Since the output is a single HTML file, you can save it, open it in your browser, and see the full website instantly. No setup, no hosting, and no extra tools needed.
Designing a website with AI does not have to mean endless back and forth or settling for a generic template. With one well-structured prompt, Claude can produce a complete, responsive, and genuinely good-looking website on the first try.
Save the template, fill in the details for your next project, and see how much better your results get. Whether you are building a site for a local business, a personal portfolio, or an app launch, this one prompt gives Claude everything it needs to design something you will actually be proud to publish.