Make any AI project business-ready in one prompt. Try Wix Headless→
You can make a website with Claude Design by describing the site you want in a prompt, refining the design on the canvas with chat and inline edits, then adding your real copy and images. What you end up with is a real HTML page rather than a picture of one. But a page on a canvas isn't a website yet, because it still needs somewhere to live and a business behind it if you want to take orders or bookings.
That's where the second half of this guide comes in. The design gets handed off to Wix Headless, which hosts the page and connects it to a store, booking system, or CMS once a coding agent sets things up. For the smoothest handoff, it's best to keep the design to a single page, since that's what deploys cleanly. If you want multiple pages, you can always build those out afterward. Below are the six steps that walk through where Claude Design's role ends and Wix Headless takes over.
TL;DR: how to make a website with Claude Design
Claude Design owns how your site looks. Wix owns everything that makes it a business. The handoff between the two is one button. Getting the page to actually take orders and bookings is one step past that, through a coding agent.
What you do | What you get |
01. Describe the site you want in Claude Design | A working first draft on the canvas |
02. Refine it with chat, comments and canvas edits | A layout that matches your brand |
03. Bring in your real copy and images | A page that looks like your business, not a template |
04. Add Wix as a destination, one time only | Send to Wix in your Share menu |
05. Hit Send to Wix | A live site on Wix hosting with SSL and a CDN |
06. Connect the project, set up auth and wire in the business tools | A page that can read and write real Wix business data |
Wix Headless gives you access to the full Wix business stack through a single connected backend: stores, bookings, events, a CMS and payments, all managed from one Wix Business Manager dashboard. There's no separate charge per feature, no API fees and no enterprise tier to unlock. Connect for free today.
What Claude Design is and what it isn't
Claude Design is a conversational design workspace, not a website builder. It has a chat panel on the left and a canvas on the right. You describe what you want, Claude generates a working design on the canvas, and you refine it from there. What lands on that canvas is real HTML and CSS rather than a picture of a layout, which is exactly why Wix can host it directly.
It is in beta on the Claude Pro, Max, Team and Enterprise plans, and it runs on the web at claude.ai/design or from the sidebar in the Claude desktop app. On Enterprise plans the capability is off by default, so an admin has to switch it on first. There is no separate Claude Design allowance to track, since design activity draws from the same usage pool as the rest of your plan.
What it does not give you is hosting, a domain or a Wix editing experience. Sending a design to Wix creates a Wix-managed headless setup, which means Wix hosts the page you designed and runs the business tools behind it, and you keep changing the design in Claude Design or in code. The Wix Editor and Wix Studio are not part of this route. If editing visually on the Wix side matters to you, the built-in Wix connector is the route that gives you that, and it's worth reading how to make a website with Claude before you commit to a path.
Way to build | What it gives you | Where it goes | Who it's for |
Chat artifact | An HTML file inside a conversation | You download and host it yourself | A quick one-off page |
Claude Code | Code in your own repository | You deploy it yourself | People who want to own the code |
Claude Design | A designed HTML page | Send to Wix, hosted headless, no Wix editor | Design-led single-page sites |
Wix connector in Claude | A real Wix site | Opens in Wix Harmony, Wix's AI website builder, fully editable | People who want to keep editing on Wix |
Worth being clear on: Wix Headless gives you a complete business backend, and the frontend stays yours to build and own. On the Claude Design route that means your design lives in Claude Design or in your project's code. If you don't have a frontend yet, that is what Claude Design is for, and the handoff to Wix is a button rather than a migration.
Read more:
How to build your Claude Design site in 6 steps
You need three things before you start. A paid Claude plan, a Wix account and your content ready to go, meaning the copy for each section plus the images you want to use.
01. Describe the site you want in Claude Design
Write the prompt like a brief. A good one names the goal, the layout, the content and the audience. Claude will ask clarifying questions if something is missing, but starting specific saves a round trip.
Ask for one page with in-page navigation between sections. Send to Wix deploys a single HTML page, so anything past the first page of a multi-page design does not come along. A prompt like "a single-page site for a Brooklyn ceramics studio with a hero, a class schedule, a gallery and a booking section, warm neutral palette, in-page nav" gets you much closer than "a nice pottery website."
Taylor Ott, a real estate investor with no coding background, started the same way. "I really wanted a video animation as my landing page and I just couldn't figure out the best way to do that. So I sat down with Claude and described what I was trying to build."
This surprises most new users, there is no time limit, no credit card required and no sandbox mode on the Wix side. You connect your frontend to the full Wix backend at zero cost, build everything out and test every flow before spending anything. A paid plan is what unlocks live payments, a custom domain, advanced analytics and some other advanced features. Most builders get further than they expect before the upgrade decision comes up.
02. Refine the design with chat, comments and canvas edits
Three tools do three different jobs. Use chat for structural changes like rearranging sections or changing the whole color direction. Use inline comments to click a specific element and request a targeted fix, which is faster than describing where something is. Edit directly on the canvas to drag, resize and align things when you just want a quick visual adjustment.
If you are unsure about a direction, ask for two or three alternative layouts and compare them instead of guessing. You can also ask Claude to review the design for accessibility, contrast and information hierarchy, which is worth doing once before you publish.
One thing worth knowing: inline comments occasionally don't register before Claude reads them. If a comment seems to have been ignored, paste the same feedback into the chat instead. It is a known beta issue with a one-second workaround, not something you need to debug.
03. Add your brand and real content
Claude Design builds with a design system, which is the set of colors, typography and components your work should follow. On Team or Enterprise plans, projects use your organization's design system automatically once someone has set one up. Working solo, you bring one in from design files or raw uploads, and the output only gets as good as what you give it. A messy or incomplete source shows up in the result.
You can attach reference material at any point. Screenshots of designs you like, existing assets, a slide deck with a style you want matched. 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 per Claude environment, not once per project. Open Export at the top right, go to the Send to tab, choose Add a destination and pick Wix. After that, Send to Wix is waiting in the same menu for every design you make from then on.
05. Send to Wix and open the live site
Hit Send to Wix and your site publishes. Wix creates a wix.config.json file, uploads and hosts your files, and configures SSL and a CDN, and makes the Wix business APIs available to the project. When it finishes, an Open in Wix link appears in the Claude Design chat.
That link takes you to a success page where you can visit the live site, connect a custom domain, open your Wix dashboard or start the setup in step 06. Your site is genuinely live at this point. It is not finished.
06. Finish setup so the site can use business tools
To complete setup you need the project on your machine, including the generated wix.config.json file that connects your frontend to the Wix APIs, and you need to configure authentication. Wix hosts and runs your site, and it does not handle authentication for you, so you create a Wix client and set that up the same way any self-managed headless project would.
If you are not a developer, hand this to an AI coding agent. Telling Claude Code to set up the local project and authentication for your new Wix Headless project is enough to get through it.
Authentication is the first half. Each business solution you want live on the page, whether that's Stores, Bookings or the CMS, then has to be wired into your design. Wix gives you a ready-made prompt for it, so expect at least one more round with the agent before the page is reading and writing real data.
Taylor took that route too. "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: How a real estate investor built a Wix Headless site without writing a single line of code
What happens to your Claude Design site after the first publish
Where you make a change depends on what kind of change it is. Design changes go back through Claude Design or into your project's code. Business content, meaning products, booking services, blog posts, forms and members, goes through the Wix dashboard with no code. Dashboard changes appear on the live site on their own, and only design or code changes need a republish. There's more on the hosting side of this in how to host a website you built with Claude.
The part worth planning around is what happens the first time you publish from outside Claude Design. Until then, sending an updated design from Claude Design updates the same live site. Once the site has been published from the CLI or an AI coding agent, that link is cut and Send to Wix starts creating separate new sites instead.
How it actually works: this is a one-way door, so pick a side early. If Claude Design is going to stay your design tool, keep publishing from Claude Design and let an agent handle only the initial setup. If you expect to iterate in code, publish from the CLI early and treat Claude Design as the starting point rather than the ongoing editor. Getting changes back into the local project after that means exporting the design and handing it to your agent.
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 sitting behind your design, running on the same infrastructure as the main website builder. It natively includes a CMS, eCommerce, bookings, events and payments in one connected setup, managed from a single Wix Business Manager dashboard, so there is nothing to assemble from separate vendors. Your design owns the experience and Wix runs everything underneath it. If the architecture itself is new to you, start with what is a headless website.
The infrastructure you would otherwise build yourself. Your site runs on multi-cloud website hosting and a global CDN across more than 200 servers, with 99.99% uptime, auto-scaling, managed SSL and DNS handled for you. Wix Headless runs on enterprise-grade infrastructure designed to support real businesses at scale, and there is no DevOps work on your side.
Business tools your design can call. Turn on an eCommerce website, online scheduling, events, the headless CMS or a blog from the dashboard, then ask your coding agent to wire the matching interface into your page. Orders, inventory, shipping and finances are handled from one place, and payments, checkout and automated sales taxes come with it. For the commerce side specifically, headless commerce covers how the pieces fit together.
SEO stays your job on this route. Wix's built-in SEO support, meaning managed meta tags, structured data and an auto-maintained sitemap, comes with the Astro integration rather than with an imported frontend like a Claude Design build. Your page ships with whatever markup Claude wrote for it, so ask for a proper title, a meta description and a sensible heading structure while you are still designing.
A domain and a clear upgrade path. Buy or connect a domain name from the dashboard and Wix handles SSL and DNS. Connecting is free and you pay the same prices as any other Wix user, with no developer pricing and no API fees, so the cost starts when you are ready to sell.
Learn more: How much does Wix Headless cost
Worth knowing: Wix-managed headless means Wix handles all hosting, CDN, SSL and scaling automatically. Self-managed headless means you host the frontend on your own infrastructure and connect to Wix business data via API. Both paths connect to the same complete Wix business backend. The choice comes down to how much control you want over your hosting environment, not what backend features you can access.
Expert tip from Dor Chaouat, Frontend Developer at Wix:
"Wix Headless isn't a website builder with some API access added on top. It's a full business backend with commerce, bookings, events and a CMS that you connect to in one prompt. You build and own the frontend however you want, and Wix runs everything underneath it."
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?
No. It is included with the Claude Pro, Max, Team and Enterprise plans rather than sold separately, and design work draws from the same usage limits as everything else on your plan. On the Wix side, connecting and hosting your design costs nothing, and you upgrade to a Premium plan when you want live payments, a custom domain or other advanced features.
