> Portal Navigation: > > - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version. > - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages). > - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`). > - Top-level index of all portals: https://dev.wix.com/docs/llms.txt > - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt ## Resource: Send a Claude Design to Wix ## Article: Quick Start from Claude Design ## Article Link: https://dev.wix.com/docs/go-headless/wix-managed-headless/other-frameworks/claude-design/send-a-claude-design-to-wix.md ## Article Content: # Send a Claude Design to Wix Send a [Claude Design](https://claude.ai/) directly to Wix and publish it as a live site. Wix hosts your site and connects it to Wix business solutions such as Stores, Bookings, and the CMS. You can manage your business from the [Wix dashboard](https://support.wix.com/en/article/about-your-wix-dashboard) with no code required, and continue updating the site's design in Claude Design or a different AI agent of your choice. This is a [Wix-managed headless](https://dev.wix.com/docs/go-headless/wix-managed-headless/about-wix-managed-headless.md) setup, started from Claude Design instead of the CLI. Your design is deployed like any other frontend you bring yourself. ## Before you begin - Connect the Wix Connector to your Claude environment (you only need to do this once): in Claude Design, click **Share** > the **Send to** tab > **Add a destination** > **Wix**. - Build your design as a single page. **Send to Wix** deploys only one HTML page, so if your design has multiple pages, the extra pages aren't included. Ask Claude for a single-page site with in-page navigation between sections. ## Step 1 | Send your design to Wix 1. Create a design in Claude Design. 1. At the top right, click **Share** and select the **Send to** tab. 1. Select **Send to Wix**. This publishes your site. It also creates a `wix.config.json` file, uploads and hosts your files with SSL, CDN, and business APIs configured. 1. Wait for the process to complete. 1. In the Claude Design chat, click the **Open in Wix** link. A success page opens. 1. From the success page, you can: - Visit the live site. - Connect a custom domain. - Connect and manage your site. This is required to complete setup. See [Step 2](#step-2--set-up-your-local-project) below. - Open your Wix dashboard, where you can manage your business and access your site's tools and information. Your site is now live, but it isn't fully set up. You must complete your setup by following [Step 2](#step-2--set-up-your-local-project) below. Before or after completing the setup for your site, you can: - **In the Wix dashboard:** Manage store products, appointment bookings, blog posts, forms, members, and more, without any code required. - **In Claude Design:** Keep updating the design. See [Step 3](#step-3--keep-working-on-your-site) below. ## Step 2 | Set up your local project To finish setup, you need the project on your machine, including the generated `wix.config.json` file that connects your frontend to Wix APIs. You also need to set up authentication. If you are not a developer, an AI coding agent can handle this for you.
**Important:** Wix hosts and runs your site, but it doesn't handle authentication for you. You create a [Wix client](https://dev.wix.com/docs/api-reference/articles/sdk-setup-and-usage/set-up-a-wix-client.md) and set up authentication yourself, the same as for [self-managed headless](https://dev.wix.com/docs/go-headless/authentication/about-authentication.md). Automatic authentication and extensions are available only with [Wix's Astro integration](https://dev.wix.com/docs/go-headless/get-started/choose-your-development-path.md).
Choose one of the following approaches. ::::tabs :::Use-an-AI-agent > **Note:** If you're using Claude Code on the web (not installed on your computer), turn on **Full network access** when you set up the environment. Without it, Claude Code can't download your project or connect to Wix. 1. On the success page in **Connect and manage**, copy the prompt. You can also optionally select a specific Wix business solution you'd like to add to your site, such as Stores or Forms, and the copied prompt will enable the agent to add it to your site. If you no longer have the success page open, use the prompt below instead. Replace `YOUR_SITE_ID` with your site's ID. To find it, find your new project in [your Wix sites list](https://manage.wix.com/studio/sites), select the project to open the dashboard, and copy the value in the URL immediately after `/dashboard/`. ```text Download my project from https://www.wix.com/_api/wixstro-deployments/v1/instant-sites/YOUR_SITE_ID/download.zip and follow the guide at https://wix.com/headless/skill.md ``` > **Note:** Use this prompt for initial setup only. 2. Paste the prompt into your AI coding agent, such as Claude Code or Cursor. - Chat apps such as Claude.ai or ChatGPT can't complete this step. - From the [Claude desktop app](https://claude.com/download), you can select the **Code** tab to access Claude Code. The agent: - Downloads your project files. - Installs dependencies and configures it to run against your live Wix site. - Connects it to Wix business solutions, such as Stores, Bookings, or the CMS. - Sets up authentication. If you notice that your content such as store products or blog posts is not appearing on the site, your authentication may not be set up correctly. If that's the case, complete the steps in the **Set it up yourself** tab. ::: :::Set-it-up-yourself To get your project running locally, download your files, install the SDK, and create a client that authenticates your API calls. The groundwork is already done: sending your design to Wix created an OAuth client for you and stored its client ID as the `appId` in your `wix.config.json` file. You'll use that `appId` in the following steps. > **Note:** This flow requires Node.js 20.11.0 or higher, because publishing uses the Wix CLI. To set up your local project: 1. Download your project files from `https://www.wix.com/_api/wixstro-deployments/v1/instant-sites/YOUR_SITE_ID/download.zip`. Replace `YOUR_SITE_ID` with your site's ID. To find it, find your new project in [your sites list](https://manage.wix.com/studio/sites), select the project to open the dashboard, and copy the value in the URL immediately after `/dashboard/`. The archive includes a generated `wix.config.json` file that links your files to your Wix project. See [The wix.config.json File](https://dev.wix.com/docs/go-headless/wix-managed-headless/other-frameworks/the-wix-config-json-file.md). 2. Install the Wix JavaScript SDK and create a client that authenticates your API calls, using the `appId` from `wix.config.json` as the client ID. Follow [Create an SDK Client with OAuth](https://dev.wix.com/docs/go-headless/authentication/setup/create-an-sdk-client-with-oauth.md). To learn more, see [About Authentication for Self-Managed Headless](https://dev.wix.com/docs/go-headless/authentication/about-authentication.md). ::: :::: ## Step 3 | Keep working on your site After your site is live, keep building in the ways that fit how you work: - **Manage business data in the Wix dashboard.** Add and update store products, booking services, blog posts, forms, members, and more directly from your project dashboard. No code required. - To access your dashboard go to [your Wix site list](https://manage.wix.com/studio/sites) and select your site. - **Keep iterating on the design in Claude Design.** Before you publish the site yourself, **Send to Wix** updates your existing live site. After you publish with the CLI or an AI coding agent, it creates a new site instead, so you export the design and hand it to your agent. See [Sync Design Changes from Claude Design](https://dev.wix.com/docs/go-headless/wix-managed-headless/other-frameworks/claude-design/sync-design-changes-from-claude-design.md). - **Keep building with an AI coding agent.** Ask your agent to use the [Wix Headless skill](https://wix.com/headless/skill.md) when you want to add Wix features such as a store, bookings, or a blog, or to change how your site works. For more information, see the [Headless AI Toolkit](https://dev.wix.com/docs/go-headless/get-started/headless-ai-toolkit.md). ## Step 4 | Republish your site Your site went live when you sent it to Wix in [Step 1](#step-1--send-your-design-to-wix). You only need to republish when you change the site's design or code. Changes you make in the dashboard, such as adding store products or blog posts, appear on the live site automatically and don't require a republish. How you republish depends on how you work: - **With an AI coding agent:** Ask your agent to publish your site. For example: "Publish my site" or "Release my latest changes." The agent runs the publish command for you. - **With the CLI:** Run `npx wix preview` to test locally, then `npx wix release` to publish. Global commands like `npx wix login` are also available. These are currently the only CLI commands available for this kind of project. See the [CLI command reference](https://dev.wix.com/docs/wix-cli/command-reference/introduction.md). - **From Claude Design:** If you haven't yet published with the CLI or an AI coding agent, send an updated design from Claude Design to update the live site. See [Step 3](#step-3--keep-working-on-your-site). ## See also - [Sync Design Changes from Claude Design](https://dev.wix.com/docs/go-headless/wix-managed-headless/other-frameworks/claude-design/sync-design-changes-from-claude-design.md) - [Develop Your Project](https://dev.wix.com/docs/go-headless/wix-managed-headless/develop-your-project.md) - [About Supported Frameworks](https://dev.wix.com/docs/go-headless/wix-managed-headless/about-supported-frameworks.md) - [About Wix-Managed Headless](https://dev.wix.com/docs/go-headless/wix-managed-headless/about-wix-managed-headless.md)