Build & Launch a Website with Claude Design

Claude account

Claude Design works on every plan, including Free. Building the website in Claude Code, from Step 3, needs a paid plan such as Pro.

See Claude Plans

https://claude.com/pricing

Claude Desktop

The free desktop app. You design in its chat and build in its Code tab — no terminal needed.

Download Claude Desktop

https://claude.com/download

Hostinger hosting

A paid web hosting plan for the live website, used in Step 5. Get it now or when you reach deployment.

Hostinger Hosting

Any Hostinger web hosting plan can run this static website.

See What You'll Build

A premium one-page website for a local service business, live on your own hosting with HTTPS.

The example is a landscaping company, but the same steps work for any service business: a cleaner, a salon, a dentist, a studio. The website has:

A hero with one clear call to action

Services

How it works, in three or four steps

Photos of the work

Reviews, only if they are real

Service area and opening hours

Contact, with call and email buttons

Write Your Website Brief

Open Claude Desktop and start a new chat. Fill in the fields, copy the brief, and send it.

Website Brief

Describe the business once. Claude turns it into a section-by-section plan and a visual direction for the design.

I'm creating a website for a local service business. Read this brief and turn it into a website plan. Do not design anything yet. WEBSITE BRIEF Business: {{BUSINESS_NAME}} Type of business: {{BUSINESS_TYPE}} City or service area: {{LOCATION}} Main services: {{SERVICES}} Main action for visitors: {{MAIN_ACTION}} Phone and email: {{CONTACT}} Look and feel: {{STYLE}} RULES - Use only the facts in this brief. Never invent reviews, awards, years in business, prices, guarantees or statistics. Mark anything missing as [Confirm: ...]. - One page that works on desktop and on phones. - One main call to action, repeated where it helps. REPLY WITH 1. The sections in order, each with its purpose and key content: hero, services, how it works, photos of the work, reviews (only if real ones exist), service area and hours, contact, footer. 2. The hero headline, a supporting line and the button label. 3. A visual direction: a colour palette with hex codes, one heading font and one body font, the photo style and the overall mood. Say what to avoid so it does not look like a generic AI template. 4. Any questions you need answered before designing. Keep it short and specific to this business.

Open Claude

Business name

Evergreen Landscaping

Type of business

Landscaping and garden design

City or service area

Austin, Texas

Main services

Garden design, lawn care, irrigation, seasonal cleanups

What should visitors do?

Request a free quote

Phone and email

(512) 555-0142 · hello@evergreenlandscaping.com

Look and feel

Calm, premium and natural: deep greens and warm stone

Answer Claude's questions in the same chat, and keep the chat open. Step 2 continues in it.

Switch the Chat to Design

Stay in the same chat. In the message box, choose Design as the output:

Claude Output Design

Claude now builds a design on a canvas beside the chat, using the plan from Step 1.

Generate the Design

Send this prompt and wait for the canvas to fill in.

Design the Website

A polished desktop and phone design built from your plan, with nothing that is hard to turn into a real website.

Design the one-page website from the plan above as a polished, premium design for this business. FORMAT - Two artboards with the same content: "Desktop — Home" at 1440 px wide and "Mobile — Home" at 390 px wide. - Use the sections, copy, colours and fonts from the plan. Where a fact is missing, keep its [Confirm: ...] marker visible instead of inventing it. DESIGN QUALITY - A clear type scale: one heading font, one body font, comfortable line height. - One simple grid and a consistent spacing rhythm, with plenty of whitespace. - A restrained palette with readable contrast for every piece of text. - Imagery that fits the business, consistent in style and colour. Use clearly labelled image placeholders where a real photo is needed. - One obvious primary button style for the main action, and a quieter secondary style. - Real, specific copy for this business, never lorem ipsum. AVOID - Generic AI-website patterns: purple or neon gradients, glowing effects, glassmorphism, rows of identical feature cards, emoji icons and stock-photo clichés. - Decorative animation that does not help the visitor. This design will be built as a real website, so keep every element practical: real navigation, real buttons and a contact section with call and email.

Review the Design

Check the canvas against these points before you change anything:

Typography: two fonts at most, with clear sizes from headline to small print

Layout: sections line up on one grid and nothing feels cramped

Spacing: the same gaps repeat between sections and elements

Colour: text is easy to read on every background

Imagery: the photos share one style and fit the business

Hierarchy: the main action stands out in the hero and in the contact section

Mobile: the phone artboard is a real phone layout, not a shrunken desktop

Refine the Design

Use the control that fits the change. Changes save automatically.

Chat: for big or structural changes, such as moving a section or changing the mood

Comments: click Comments, click an element, write the change and keep Send to Claude checked

Direct edits: double-click text to retype it, drag an element to move it, and use the sliders for spacing and colour

Duplicate: try a different direction from the design's title menu without losing this one

Then send this prompt in the chat to polish the whole design at once:

Polish the Design

A senior-designer pass over hierarchy, spacing, contrast and the phone layout, without changing your content or brand.

Review this design as a senior web designer and polish it. Keep the content, the sections and the brand. - Tighten the hierarchy so the headline, the main action and the services read first. - Make the spacing consistent across every section. - Make every text and button colour easy to read. - Replace anything that looks like a generic AI template with a choice specific to this business. - Check the Mobile artboard: readable text without zooming, buttons that are easy to tap, a simple menu and no sideways scrolling. Apply the changes, then list each change in one line.

Repeat until you would be proud to show it to the business owner.

Create a Project Folder

Create an empty folder for the website, for example in Documents, and name it after the business.

Open the Folder in Claude Code

In Claude Desktop, open the Code tab and choose the folder:

Claude Desktop Code Local Select the project folder Open Trust Workspace

Copy the Handoff from Claude Design

Go back to your design and open the handoff for Claude Code:

Claude Export Handoff to Claude Code Send to local coding agent

Copy the prompt it gives you. You'll paste it into the build prompt in the next task.

No handoff option? Choose Export › Download as .zip, unzip it into your project folder, and name the unzipped folder design-bundle. Then leave the handoff field empty in the next task.

Build the Website

Paste the handoff into the field, copy the prompt, and send it in your Code session.

Build the Real Website

Claude Code turns the approved design into a working static website, then checks every link and button itself.

Build my approved Claude Design design as a real website in this folder. THE DESIGN {{HANDOFF}} If you cannot open the design, stop and tell me. Never rebuild it from a description or from memory. HOW TO BUILD IT - A static website in plain HTML, CSS and a little JavaScript, inside a folder named site, with index.html at its top. No framework, build step, server, database or login. - Match the design closely on desktop and on phones (use the Mobile artboard): layout, typography, colours, spacing and imagery. - Save every image, font and icon inside the site folder. Nothing may point to a temporary design link or to a file elsewhere on my computer. - Keep the design's content. Never invent reviews, awards, prices or statistics. Keep every [Confirm: ...] marker and list them at the end. IT MUST WORK - Navigation: every menu link scrolls to its section, and the phone menu opens and closes. - Buttons: every button does something real: a tel: link, a mailto: link or a section link. No button that does nothing, and no form that pretends to send. - Contact: a contact section with click-to-call and email, plus the service area if the design shows one. - Responsive: no sideways scrolling at 375, 768 and 1440 px wide. - SEO: a page title and meta description written for this business, Open Graph tags, a favicon, one H1, and alt text on every meaningful image. - Accessibility: semantic sections, readable contrast, visible focus styles, a menu that works with the keyboard, and reduced motion respected. WHEN YOU FINISH - Open the website in a local preview and give me the address. - Check every link and button yourself, and the browser console for errors. Only tell me something works if you actually checked it. - Reply with what you built, what you checked, and what I still need to confirm.

Claude Design handoff

Paste the prompt from Send to local coding agent

Claude Code may ask questions or ask permission to create files. Read each request, then approve it.

Check the Website Yourself

Open the local preview Claude Code gives you. Check it on desktop, then in your browser's phone view.

The desktop layout matches your design

The phone layout works: menu, text size and buttons

Every menu link goes to the right section

The call and email buttons open your phone and email apps

The content is real, with no leftover placeholder text

Every image loads

Run a Website Check

Ask Claude Code to test what you can't see: missing files, console errors and accessibility.

Check the Website Before Launch

Claude Code tests the running website at three screen sizes, fixes only real problems, and tells you if it is ready.

Check this website before I publish it. Test the running website; don't just read the code. - View every section in the local preview at 375, 768 and 1440 px wide. Report any overflow, overlap or text that is too small. - Click every link and button and confirm that each one does what it says. - Check the browser console for errors and look for missing files. - Check the basics: page title, meta description, favicon, Open Graph tags, one H1, alt text, colour contrast, visible keyboard focus and a menu that works with the keyboard. - Look for leftover [Confirm: ...] markers and placeholder text. Fix only real problems, without changing the design. Then give me a short pass/fail list and end with exactly one line: READY TO PUBLISH or NEEDS ATTENTION

If Claude ends with NEEDS ATTENTION, fix what it lists and send the check again. Continue when it says READY TO PUBLISH.

Improve It in Plain Words

Want a change? Describe it to Claude Code in the same session, such as "Add a Call now button under the services", then check the preview again.

Prefer a contact form to the call and email buttons? Add one after you publish:

Add a Working Contact Form to Any Website

Sends form messages to your business email.

/video/add-a-working-contact-form-to-any-website

Get Hostinger Hosting

Your website is ready. Now it needs a home online.

Get Hostinger Hosting

Recommended plan: Unlimited. Any Hostinger web hosting plan can run this static website.

USED IN TUTORIAL

Already have Hostinger hosting? Continue below.

Connect Hostinger to Claude

Already connected Hostinger to Claude? Skip to the next task. Otherwise, open the plugin directory:

Claude Desktop Customize Plugins Discover

Find Hostinger and install the official Hostinger plugin. Open the plugin's Connectors tab and connect Hostinger. Sign in to Hostinger in the browser window that opens and approve the access.

Then return to your website's Code session.

Publish the Website

Send this prompt in the same Code session. Claude asks which Hostinger website to use, then puts your site live.

Publish the Website to Hostinger

Publish the approved website as a static site, check it over HTTPS, and get the live address.

Publish this website to my Hostinger account with the Hostinger tools. BEFORE PUBLISHING - Use the Hostinger tools from the Hostinger plugin. If they are not available, or I am not signed in to Hostinger, stop and tell me how to connect Hostinger. Never ask for my password, and never write a token or key into any file. - If .hostinger/site.json exists in this project, publish to the website it names. - Otherwise, list my Hostinger websites and ask me which one to use, or offer to set up a new website on a free temporary Hostinger domain. Never guess. Tell me that publishing replaces everything on that website, and only continue once I have confirmed it. PACKAGE - Publish the approved website exactly as it is. Do not redesign or rewrite anything. - Check that the site folder contains every image, font and file the website uses, and that nothing points to a file elsewhere on my computer or to a temporary link. - Package the CONTENTS of the site folder as one archive, with index.html at the top level. Never include design-bundle, .hostinger or any other project file. PUBLISH AND CHECK - Deploy the archive to the confirmed website as a static website. - Open the live address and check that it shows this website's real content, not a placeholder page. - Check that the address opens over HTTPS. If SSL is not active yet, set it up with the Hostinger tools and turn on the HTTPS redirect. - If the deployment fails or the live website is wrong, check the deployment details with the Hostinger tools, fix the cause in this project, and ask me before publishing again. - Save the website's domain in .hostinger/site.json, so later updates go to the same website. Save only the domain — never a token or a key. When it is live, give me the live address and tell me about any change you had to make.

Publishing replaces everything on the Hostinger website you choose. Use a new website, or one you want to replace.

Check the Live Website

Open the live address on your computer and on your phone.

The address opens with a padlock (HTTPS)

It looks the same as your local preview

The menu links, buttons, and call and email work

The phone layout works

Connect Your Domain

Optional. Already have a domain? Claude can connect it to the website for you — add it here and send the prompt.

Connect My Domain

Click Customize Prompt, add your domain, then copy the prompt.

Connect my domain {{DOMAIN}} to the website you just published, using the Hostinger tools. - The website is the one saved in .hostinger/site.json. If that file is missing, or you are not sure which domain I mean, ask me — never guess which website or domain to change. - First check that the domain is in my Hostinger account. If it is not, or the connection needs something only I can do, tell me exactly what to do and wait. - Change only what is needed to point the domain at this website. Leave the website itself unchanged, and do not touch any other domain settings, such as email records. - Make sure the domain opens over HTTPS, and turn on the HTTPS redirect once the certificate is active. - Only give me manual DNS steps if the Hostinger tools genuinely cannot make the change. - If the website's main domain changes, update .hostinger/site.json so later updates still go to this website. When finished, tell me whether the domain is connected, which address to open, and anything I still need to do, such as waiting for the change to take effect everywhere.

Your Domain

e.g. evergreenlandscaping.com

Publish an Update

Describe your change and send this prompt. Claude makes the change and shows you a local preview first. When it looks right, reply Publish — only then does Claude publish it to your Hostinger website.

Publish an Update

Click Customize Prompt, describe your change, then copy the prompt.

Update my website in three stages. Stop after stage 2 and wait for my approval. 1. CHANGE Make only this change: {{CHANGE}} Keep everything else exactly as it is. 2. LOCAL REVIEW - Check that the change works on desktop and on phones, with no new console errors. - Show me the local preview and tell me in one or two lines what you changed. - Then stop. Do not publish anything until I reply Publish. If I ask for adjustments instead, make them and show me the preview again. 3. APPROVED PUBLISH — only after I reply Publish - Publish to the same Hostinger website as before: the domain saved in .hostinger/site.json. If it is missing, ask me which website to use — never guess. - Publish exactly what I approved. Do not make any other change first. - Check that the site folder contains every file the website uses, then package the CONTENTS of the site folder as one archive, with index.html at the top level. Never include design-bundle, .hostinger or any other project file. - Deploy it to that website as a static website with the Hostinger tools. - Open the live address and check that it shows the approved change. If the old version still shows, clear the website's cache with the Hostinger tools and check again. - Give me the live URL.

Your Change

e.g. Change the hero headline to Gardens Designed for Texas Summers

Open the live address when Claude finishes and check that your change is there.