Skip to content

Can I use Claude Design and Vercel Drop together?

Articles

Yes. Claude Design exports your project as a .zip file, and Vercel Drop deploys that .zip by dragging it into your browser. You don't need to unzip the export, connect Git, or install any tooling. Together, they take you from a prompt in Claude to a live production URL in a couple of minutes.

Link to headingWhat do Claude Design and Vercel Drop do?

Claude Design, by Anthropic Labs, lets you create websites, prototypes, and presentations by describing what you want in a conversation with Claude. It's available in research preview on Claude Pro, Max, Team, and Enterprise plans, and exports finished designs as a .zip of website files.

Vercel Drop deploys a file, folder, or .zip by dragging it into your browser, with no Git or Vercel CLI required. It creates a new Vercel project, uploads your files, and publishes them straight to production with a shareable URL. A Claude Design export and a Vercel Drop deploy fit together because the output of one is exactly the input of the other.

Link to headingHow do I deploy a Claude Design project with Vercel Drop?

Deploying takes four steps:

  1. Export your design: In Claude Design, select Export in the upper-right corner, then choose Download as .zip.

  2. Drop the file: Go to vercel.com/drop and drag the .zip onto the page, or select it as a file upload.

  3. Name and deploy: Choose the Vercel team to deploy to, enter a project name, and select Deploy.

  4. Pick a homepage if prompted: If the export has no index.html at the top of the folder, choose which page loads at your site's root from the Root (/) menu.

When the deployment finishes, you get a live production URL for your site. The full walkthrough is in Deploy a Claude Design project with Vercel Drop.

Link to headingDo I need to unzip the Claude Design export first?

No. Vercel Drop accepts .zip archives directly, alongside files and folders, so you can drag the download from Claude Design onto vercel.com/drop as-is. This is one place the pairing saves a step: some deployment tools require you to unzip the archive and confirm the folder structure before uploading.

Link to headingWhat if my export doesn't have an index.html?

Vercel Drop handles this for you. If there's no index.html at the top of the folder, Vercel asks which page people should see first and lets you pick one from the Root (/) menu. If you choose No root page, your site's root (/) returns a 404, but Vercel still serves every file at its own path. You don't need to rename files or restructure the export.

Link to headingHow do I update my site after changing the design?

Each drop creates a new Vercel project with a new URL, so you have two ways to iterate on a Claude Design project:

  • Keep dropping: Re-export from Claude Design and drop again. Each version gets its own project and URL, which works well for prototypes where versions stand alone.

  • 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.

Keep dropping while you're exploring; connect a repository once the design becomes a site you maintain.

Link to headingDo I need a paid plan?

You need a Vercel account, and the free Hobby plan works for Vercel Drop. On the Claude side, Claude Design is in research preview on Claude Pro, Max, Team, and Enterprise plans, so creating the design requires one of those.

Link to headingThe bottom line

Claude Design and Vercel Drop work together out of the box: export a .zip from Claude Design, drag it onto vercel.com/drop, and your design is live in production. When a prototype turns into a project you'll keep iterating on, hand it off to a codebase and connect Git for automatic deployments.

Link to headingNext steps

Ready to deploy?

Start DeployingTalk to an Expert