> 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: Quick Start from Claude Design

## Article: Quick Start from Claude Design

## Article Link: https://dev.wix.com/docs/go-headless/get-started/quick-starts/wix-managed-headless/quick-start-from-claude-design.md

## Article Content:

# Quick Start from Claude Design

Send a [Claude Design](https://claude.ai/) directly to Wix and deploy it as a Wix-managed headless project.

This is a Wix-managed setup, just started from Claude Design instead of the CLI.

<blockquote class="important">

**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/self-managed-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).

</blockquote>

## 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. The Send to Wix flow deploys one HTML page, so a multi-page design won't come across as a single site. Ask Claude for a single-page site with in-page navigation between sections.

## Step 1 | Send your design to Wix

1. In Claude Design, click **Share** and select the **Send to** tab.
2. Select **Send to Wix**. This creates a `wix.config.json` file, uploads and hosts your files with SSL, CDN, and business APIs configured, and releases your site so it goes live.
3. Wait for the process to complete and verify your site is live on the success page.
4. From the success page, open the live URL, go to your site dashboard, or connect a custom domain.

Your site is now live, but it isn't on your local machine yet. The success page gives you a prompt to copy to bring the project down and finish setup. The next step covers this process.

## Step 2 | Set up your local project

To keep developing, 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, since Wix hosts and runs your site but doesn't handle authentication for you.

Choose one of the following approaches.

::::tabs

:::Use-an-AI-agent

Copy the prompt from the success page and paste it into your AI agent. 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 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 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-headless.dev/skill.md
```

> **Note:** Use this prompt for initial setup only. After the first iteration, keep developing with your agent as you normally would. Don't reuse it.

The agent sets up authentication as part of this flow. If your project still isn't authenticating against Wix APIs once it finishes, 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 18 or higher.

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/`.

2. Install the [Wix JavaScript SDK](https://dev.wix.com/docs/sdk.md) and a package for each business solution you want to call. Domain packages follow the `@wix/{domain}` naming convention. For example:

   ```console
   npm install @wix/sdk @wix/stores
   ```

3. Create a [Wix client](https://dev.wix.com/docs/api-reference/articles/sdk-setup-and-usage/set-up-a-wix-client?apiView=SDK.md) with `OAuthStrategy`, using the `appId` from `wix.config.json` as the client ID. Pass in the modules you installed. Create the client once and reuse it across your app. For example:

   ```js
   import { createClient, OAuthStrategy } from '@wix/sdk';
   import { products } from '@wix/stores';

   const wixClient = createClient({
     modules: { products },
     auth: OAuthStrategy({
       // The appId from your wix.config.json file.
       clientId: '<YOUR_APP_ID>',
     }),
   });
   ```

   With no tokens passed, the client authenticates as an anonymous site visitor automatically, which is enough to start calling APIs.

4. Confirm the client works by calling an API.

   ```js
   const { items } = await wixClient.products.queryProducts({});
   ```

To learn more, see [About Authentication for Self-Managed Headless](https://dev.wix.com/docs/go-headless/self-managed-headless/authentication/about-authentication.md).

:::

::::

## Step 3 | Continue developing

After your project is set up, keep building:

- **Develop your site with an AI agent.** Point your agent at the Wix Headless skill to integrate Wix business solutions and iterate on your site design and flow. For more information, see the [Headless AI Toolkit](https://dev.wix.com/docs/go-headless/get-started/headless-ai-toolkit.md).
- **Keep iterating on the design in Claude Design.** If you prefer working on the style in Claude Design, you can create a new design and then export it rather than using **Send to Wix** (which creates a new site). Click **Share** > the **Export** tab, select **Standalone HTML**, and click **Download**. Attach the downloaded file to your AI agent and ask it to update your existing project with the new design.
- **Manage business data in the dashboard.** Manage products, bookings, blog posts, forms, members, and more directly from your project dashboard. No code required.
- **Preview and deploy with the CLI.** Supported-framework projects support `npx wix preview` to test locally, `npx wix release` to publish, and global commands like `npx wix login`. See the [CLI command reference](https://dev.wix.com/docs/wix-cli/command-reference/introduction.md).

## See also

- [About Wix-Managed Headless](https://dev.wix.com/docs/go-headless/wix-managed-headless/about-wix-managed-headless.md)