Updated: 1 day ago
Make any AI project business-ready in one prompt. Try Wix Headless→
Claude Design turns a written prompt into a working web page you can edit visually. You can shape the layout, add your brand and content, and refine the result through chat or direct edits on the canvas.
But creating a design is different from launching a functioning website. You'll also need to publish your page, set up hosting and connect any features your business needs. In this guide, you'll learn how to make a website with Claude Design and explore how to publish it with Wix Headless, which adds hosting and business features to your design.
Go from code to live site with Wix Headless. Upload or drag in your HTML, CSS and JavaScript files to get your site live with a shareable URL. Wix handles the hosting and infrastructure, and you can add ecommerce, bookings, CMS, payments and more with a single prompt.
TL;DR: how to make a website with Claude Design
To make a website with Claude Design, start with a prompt describing your site, then refine the layout, add your brand assets and content and prepare the design for publishing. Once you're happy with it, you can export or send it to a hosting platform to make it available online.
In this guide, you'll learn:
What Claude Design is and how to access it
How to write an effective website prompt
How to customize your design and check its mobile layout
How to publish your website and connect business features
What to check before launch and how to manage your site afterward
What Claude Design is and what it isn't
Claude Design is a tool for creating designs by chatting with Claude. You describe what you want, Claude builds it on a canvas next to the chat, and you refine it from there. The result is real HTML and CSS, the code browsers read to display a page, which is why Wix can host it directly.
Where to find Claude Design
Claude Design is available on the Free, Pro, Max, Ultra, Team and Enterprise plans. You can start a design in any Claude chat, from the Artifacts tab or in Claude Code. Design work counts toward the same usage limits as the rest of your plan.
There's also a standalone version at claude.ai/design, which closes on December 14, 2026, and Anthropic is moving projects from it into the main Claude app. Menu names in this guide may look slightly different depending on which version you use.
What Claude Design doesn't do
Claude Design doesn't give you hosting, a domain or a visual website editor. Sending a design to Wix creates a Wix-managed headless setup: Wix hosts the page you designed and runs the business tools behind it, while you keep changing the design in Claude Design or in code.
The Wix Editor and Wix Studio aren't part of this route. If you want to keep editing visually on Wix, the built-in Wix connector for Claude creates a regular Wix site instead. Read how to make a website with Claude to compare both routes.
Way to build | What you get | How it goes online | Best for |
Claude chat | An HTML file in a conversation | You download it and host it yourself | A quick one-off page |
Claude Code | Code in your own project folder | You deploy it yourself or connect it to a host | People who want to own the code |
Claude Design | A designed page (the part visitors see) | Send to Wix publishes it on Wix Headless, with no Wix editor | Design-led one-page sites |
Wix connector in Claude | A full Wix site | Opens in Wix Harmony, Wix's AI website builder, where you keep editing | People who want to edit on Wix later |
In short, Wix Headless gives you the business backend (the part that stores your content and handles orders), and the design stays yours. If you don't have a design yet, Claude Design can create one, and moving it to Wix takes one button.
Read more:
How to build your Claude Design site in 6 steps
You need three things before you start: a Claude account, a free Wix account and your content, meaning the text for each section and the images you want to use.
01. Describe the site you want in Claude Design
Write your prompt like a short brief. Say what the site is for, who it's for, which sections it needs and how it should look. Claude asks follow-up questions if something is missing, but being specific from the start saves time.
Ask for one page with a menu that jumps between sections. Send to Wix deploys a single HTML page, so extra pages in a multi-page design don't come along.
You can copy this prompt and fill in the brackets:
Create a single-page website for [business name], a [type of business] in [location], for [target audience]. Include these sections: [for example hero, about, services, gallery, booking, contact], with a menu that jumps to each one. Use [brand colors] and [fonts or a style, such as warm and minimal]. Use the text and images I've attached. Make it work well on mobile and desktop, and add a clear [Book now / Shop / Contact us] button at the top.For example, "a single-page site for a Brooklyn ceramics studio with a hero, a class schedule, a gallery and a booking section, warm neutral colors, in-page menu" gets much better results than "a nice pottery website."
02. Refine the design and check it on mobile
Claude Design gives you three ways to make changes. Use chat for big changes, like moving sections or changing the color scheme. Use inline comments to click one element and ask for a specific fix. Drag, resize and align things directly on the canvas for quick visual tweaks.
If you're unsure about a direction, ask for two or three layouts and compare them. You can also ask Claude to review the design for accessibility, color contrast and readability before you publish.
Ask Claude to make the design work on mobile screens as well as desktop. Then check how the menu, images, text and buttons look on a phone-sized screen before you publish.
Tip: if an inline comment seems to be ignored, paste the same feedback into the chat instead. Anthropic lists this as a known issue.
03. Add your brand and real content
Claude Design builds with a design system, which is the set of colors, fonts and page elements your brand uses. On Team and Enterprise plans, designs can use your organization's design system automatically once someone sets it up.
Working on your own, you can import one from design files, a code project or uploaded files. The better the source, the better the result.
You can attach reference material at any point, such as screenshots of designs you like, your logo and photos, or a slide deck with a style you want to match. This is the step where the site stops looking like generic AI output and starts looking like your business.
04. Add Wix as a destination (one time only)
You do this once, not for every project. In your design, open the Export menu at the top right, go to Send to, choose Add a destination and select Wix. After that, Send to Wix appears in the same menu for every design you make.
In the standalone version at claude.ai/design, the same option sits under Share, in the Send to tab.
05. Send to Wix and open the live site
Select Send to Wix and your site goes live. When it's done, an Open in Wix link appears in the Claude Design chat.
In the background, Wix creates a settings file called wix.config.json, uploads and hosts your files, sets up a secure connection (SSL) and fast loading worldwide (a CDN), and connects the project to Wix business tools.
The Open in Wix link leads to a page where you can visit your live site, connect a custom domain, open your Wix dashboard or start step 06. Your site is live at this point, but it isn't fully set up yet.
Your site starts on a free Wix web address. To use your own domain name, such as yourbusiness.com, buy or connect one from the dashboard. Connecting a custom domain requires a Premium plan.
06. Connect business tools with an AI coding agent
Before you continue: finish your design edits in Claude Design and send the latest version to Wix. This step publishes your site from a copy of the project on your computer, and after that, Send to Wix creates a new site instead of updating this one.
To finish setup, you need that copy of the project (called the local project) and you need to set up authentication, the login system that lets your site safely read and save data in Wix, like products or bookings. Wix doesn't set this up automatically for designs sent from Claude Design.
If you're not a developer, the easiest option is an AI coding agent such as Claude Code or Cursor. The page you reached from Open in Wix has a ready-made prompt: copy it, paste it into your agent, and it downloads the project, sets up authentication and connects the business tools you pick.
Regular chat apps can't complete this step, so use a coding agent. Developers can also set it up by hand with the Wix JavaScript SDK.
Turning on a business tool in your Wix dashboard doesn't add it to your design by itself. Your agent also builds the matching part of the page, like a product list, cart and checkout for a store, or a booking calendar for appointments.
For example, a ceramics studio might start with a gallery and a class schedule. After connecting Wix Bookings, the agent adds a booking section where visitors see available classes and reserve a spot. The studio then manages classes and bookings from the Wix dashboard.
Taylor Ott, a real estate investor with no coding background, took this route. "Having an AI agent tell me step by step what to do has been really smooth. I showed people my website and they were pretty impressed."
Explore more: Real estate investor Wix Headless story
What to check before you launch your Claude Design site
Your site is online after the first publish, but test it before you share it with customers:
Open the site on a phone and a computer and check that everything displays correctly.
Click every menu link and button.
Fill in your forms and check that submissions arrive in your Wix dashboard.
Check the page title and description that show in search results.
After connecting business tools, place a test order or booking.
Connect your custom domain when you're ready to go live under your own name.
What happens to your Claude Design site after the first publish
Where you make a change depends on what you're changing. Business content, such as products, booking services, blog posts, forms and members, is managed in the Wix dashboard with no code, and changes appear on your live site automatically.
Design changes need a republish. Until your local project is published, update the design in Claude Design and select Send to Wix again. After that, ask your coding agent to make design changes, or export the design from Claude Design and ask the agent to apply it to your project.
So decide early where you'll keep editing. If Claude Design stays your main design tool, finish the design before step 06. If you expect to keep changing things in code, treat Claude Design as the starting point. There's more on this in how to host a website you built with Claude.
Expert tip from Tuvit Rubin Kaplan, Head of DevRel at Wix:
"Frontend creation became easy almost overnight. But running a business still requires real infrastructure. Wix Headless is where those two things meet."
Discover more:
How Wix runs a Claude Design site
Wix Headless is the business backend behind your design, meaning the part that stores your content and handles orders, bookings and payments. It includes a CMS, ecommerce, bookings, events and payments, all managed from one Wix dashboard.
Unlike the Wix website builder, there's no visual editor here: your design controls what visitors see, and Wix runs everything behind it.
Hosting and security
Your site runs on Wix's managed infrastructure: multi-cloud website hosting, servers around the world (a CDN with more than 200 servers), 99.99% uptime and auto-scaling when traffic rises. SSL and DNS are handled for you, so there are no servers to manage.
Business tools
Turn on the Wix ecommerce platform, online scheduling, events, the headless CMS or a blog from the dashboard, then ask your coding agent to add the matching section to your page. Orders, inventory, shipping and payments are all managed in one place.
SEO
SEO (search engine optimization) is your job on this route. Wix's Astro integration, another way to build with Wix Headless, adds SEO tags to each page's code automatically. A design sent from Claude Design doesn't get that, so your page ships with whatever code Claude wrote.
Wix can add some SEO settings from your dashboard through scripts that run in the visitor's browser, but search engines that don't run those scripts won't see them. To be safe, ask Claude to put these in the page's code while you design:
A clear page title
A meta description, the short summary shown in search results
A logical heading structure
Alt text for every image
Canonical tags, structured data and a sitemap also need to be handled in your project, and your coding agent can add them.
Domain and costs
Connecting your design to Wix Headless and hosting it are free, with no developer pricing and no API fees. You can build your site and test it before upgrading. You need a Premium plan to accept live payments, connect a custom domain and use certain advanced features.
When you're ready, buy or connect a domain name from the dashboard, and Wix handles SSL and DNS.
Good to know: with Wix-managed headless, Wix hosts your site. With self-managed headless, you host the design yourself and connect it to the same Wix business tools. Designs sent from Claude Design use the Wix-managed option.
Making a website with Claude Design FAQ:
Can Claude Design build a website on its own?
It can design one, but it cannot put it online by itself. Claude Design produces the page, and the hosting and business tools behind it come from wherever you send that design. Sending it to Wix publishes the page on Wix hosting and gives the project access to Wix business solutions. Wiring your design's features into those solutions takes one more step with a coding agent, and you add a custom domain separately when you want one. On its own, what you have is a finished design rather than a working website.
Do you need to know how to code to use Claude Design?
No. Designing the site and sending it to Wix involve no code at all, and running products, bookings and content from the Wix dashboard is fully visual. The one step that touches code is connecting the local project and setting up authentication, and an AI coding agent handles it from a ready-made prompt, though expect a round or two of back and forth.
Can you make a multi-page website in Claude Design?
You can design one, but Send to Wix deploys a single HTML page, so the extra pages will not transfer. Build one page with in-page navigation between sections and ask for exactly that in your prompt. If you truly need separate routes, add them in the local project after the first publish or start from an AI coding agent instead.
What's the difference between Claude Design and the Wix connector in Claude?
Claude Design is a design workspace, and what it hands Wix is a page that Wix hosts headless with no Wix editor attached. The built-in Wix connector creates an actual Wix site that opens in Wix Harmony, where you get the full editor and Wix's own AI agent. Pick Claude Design when the design is the point and one page is enough. Pick the connector when you want to keep editing on Wix afterwards.
Is Claude Design free?
Yes. Claude Design is available on Claude's Free plan as well as paid plans, and design work counts toward the same usage limits as the rest of your plan. On the Wix side, connecting and hosting your design is free, and you upgrade to a Premium plan when you want live payments, a custom domain or other advanced features.
