Claude Design by Anthropic Labs lets you create websites, prototypes, and presentations by describing what you want in a conversation with Claude. When your design is ready, you can publish it to Vercel for a live production URL you can share with anyone. You have two ways to get there: send the design to Vercel directly from Claude Design, or export it as a .zip and deploy with Vercel Drop. Neither needs Git, the Vercel CLI, or local tooling.
In this guide, you'll publish a Claude Design project to Vercel with the connector, deploy with Vercel Drop as an alternative, choose which page loads at your site's root, and set up automatic deployments if you keep iterating.
- A Claude Design project. Claude Design is available in beta on Pro, Max, Team, and Enterprise plans.
- A Vercel account. The free Hobby plan works.
Claude Design works from a plain description of what you want, so you don't need design experience to get a usable result. When your organization's design system is set up, every project uses your brand's colors, typography, and components automatically.
Projects that deploy well to Vercel include:
- Landing pages: a product or API launch page with a hero section, code examples, and pricing.
- Dashboards: a revenue dashboard with filters for region and product line.
- Onboarding flows: a four-screen mobile sequence that introduces your core features.
- Forms: a customer feedback form with questions that change based on category.
- Internal tools: a review-and-approval interface for an operations team.
Design systems automatically align every Claude Design project with your brand, so the sites you deploy to Vercel use your colors, typography, and components without extra prompting. The designer or brand owner on your team sets this up once for the organization, and after that, every team member's projects on Team and Enterprise plans inherit it.
Claude builds the design system by extracting reusable components, colors, typography, and layout patterns from the assets you provide. These assets can be a codebase or component library, a slide deck or document that reflects your brand, or individual brand assets such as logos and color palettes. One source is enough to start, and adding more gives Claude more to work with.
To set it up:
- Open Claude Design and switch to your organization from the project picker in the lower-left corner.
- Upload your brand and product assets during onboarding, or later from your organization settings.
- Review the design system Claude generates, then create a test project to check the output against your brand.
- Turn on the Published toggle to make the design system available to your team.
For the full walkthrough, including how to update your design system as your brand evolves, see Set up your design system in Claude Design in the Claude help center.
The fastest way to publish is to send your design to Vercel directly from Claude Design, without any exports or file downloads. The finished design on the canvas becomes a live Vercel deployment in a few clicks.
- Open your project in Claude Design, then select Share in the upper-right corner.
- Click Send to… and Add a destination at the bottom
- Choose Vercel, then follow the prompts to connect your Vercel account, pick a team, and deploy.
When the deployment finishes, you get a live production URL for your site in seconds.
If you'd rather not use the connector, export your design and deploy the file by dragging it into your browser. Vercel Drop accepts files, folders, and .zip archives, with no Git or CLI required.
Open your project in Claude Design, then select Export in the upper-right corner. Choose Download as .zip to save your design as a zipped folder of website files.
Go to vercel.com/drop and drag the .zip onto the page. You can also select a file to upload instead of dragging. There's no need to unzip the export first, because Vercel Drop accepts files, folders, and .zip archives.
Choose the Vercel team to deploy to, enter a project name, and select Deploy. Vercel creates a new project, uploads your files, and publishes them straight to production. When the deployment finishes, you get a live URL for your site.
If your export has no index.html at the top of the folder, Vercel asks which page people should see first when they open your site. Pick a page from the Root (/) menu. If you choose No root page, your site's root (/) returns a 404, though Vercel still serves each file at its own path.
Each drop creates a new Vercel project, so re-exporting from Claude Design and dropping again gives you a new project with a new URL. If you plan to iterate on a design over time, you have two options:
- Keep dropping: useful for prototypes where each version standing alone is fine.
- Connect a repository: use Claude Design's Handoff to Claude Code export to move the project into a codebase, push it to GitHub, GitLab, or Bitbucket, and connect the repository to Vercel. After that, every push deploys automatically, and your project URL stays the same.
- Read the Vercel Drop documentation for limitations and details.
- Deploy from Git for automatic deployments on every push.
- Managing deployments to redeploy, inspect, and promote.
- Get started with Claude Design for prompting tips and export formats.