How to Deploy a Website Built with Claude Design to Vercel

From Design to Live URL: The Complete Workflow

You’ve built something in Claude Design. It looks good in the browser. Now what?

Getting that design deployed to a real URL — one you can actually share — requires a few more steps. You need to export the code, get it into a git repository, connect it to a deployment platform, and push it live. None of these steps are hard, but they’re not obvious if you haven’t done it before.

This guide covers the full Claude Design to Vercel deployment workflow: building your site, exporting it through Claude Code, pushing it to GitHub, and connecting it to Vercel. If you follow these steps in order, you’ll have a live URL in under an hour.

Prerequisites: What You Need Before You Start

Before touching any code, make sure you have the following accounts and tools set up:

Claude account (Pro or higher) — required to access Claude Design
Claude Code — Anthropic’s agentic coding tool; check the complete installation guide for Mac and Windows if you haven’t set it up yet
GitHub account — free at github.com; this is where your code will live
Vercel account — free at vercel.com; this is where your site will be hosted
Node.js (v18 or later) — required by most modern frontend frameworks
Git — the version control system; if it’s new to you, this explainer on what Git is is worth a read before you proceed

If you’re missing any of these, set them up first. The rest of the guide assumes they’re in place.

Step 1: Build Your Website in Claude Design

Claude Design is Anthropic’s AI-powered design tool, accessible through claude.ai. It lets you describe a UI in natural language and get back a rendered, interactive prototype — complete with layout, color, typography, and interactive states.

Start a New Design

Go to claude.ai and sign in.
Select Design from the left navigation panel.
Click New Project or start from a blank canvas.

Prompt Your Way to a Layout

Claude Design works best when you give it a clear brief. Instead of “make me a website,” try something like:

“Create a landing page for a productivity app called Focusr. Include a hero section with a headline and CTA button, a three-column feature section, and a simple footer. Use a dark background with a purple accent color. Clean, minimal typography.”

Claude Design will generate a full-page layout based on your description. You can iterate from there — ask it to adjust spacing, swap out colors, add sections, or change the layout entirely.

This is especially powerful for things like animated prototypes and slide decks, where the visual fidelity of a quick prototype would otherwise take hours in a traditional design tool.

Refine Until You’re Happy

Don’t rush this stage. The more polished your design is in Claude Design, the less cleanup you’ll need to do in code. Iterate on:

Layout and structure — is every section in the right place?
Colors and typography — do they match your brand?
Copy — placeholder text is fine, but real headlines help Claude Code understand intent
Interactive states — hover effects, button states, form inputs

When the design looks the way you want it, you’re ready to export.

Step 2: Export from Claude Design to Claude Code

Claude Design can output your design as code. The workflow bridges directly into Claude Code, which takes that output and turns it into a proper project structure you can run locally and deploy.

Export the Code from Claude Design

In Claude Design, look for the Export or Open in Claude Code option in the top-right toolbar. Depending on your Claude version, this may be labeled slightly differently, but the intent is the same: it generates the HTML, CSS, and JavaScript (or React components) from your design.

Claude Design typically outputs one of the following:

Vanilla HTML/CSS/JS — simple, no build step required
React components — requires Node.js and a bundler like Vite
Next.js pages — if you asked for SSR or routing support

Note which format it exports, because that determines how you structure the project and how Vercel will build it.

Open Claude Code in Your Terminal

If you haven’t used Claude Code before, it runs as a CLI tool in your terminal. Once installed, navigate to the folder where you want to create your project:

cd ~/Projects
mkdir my-website
cd my-website
claude

This opens a Claude Code session in that directory.

Paste Your Exported Code

If Claude Design gave you a code export directly (as a file download or copy-to-clipboard output), paste or move the files into your project directory. If Claude Design provides a direct handoff link or Claude Code integration, use that — it will pre-populate your working directory.

Once your files are in place, ask Claude Code to help you set up the project properly:

“I have a React site exported from Claude Design in this directory. Help me set up a proper package.json, configure Vite as the bundler, and make sure it runs locally.”

Claude Code will scaffold the rest — install dependencies, create config files, and get your local dev server running.

Run It Locally First

Before pushing anywhere, confirm the site works locally:

npm install
npm run dev

Open your browser to localhost:5173 (or whatever port Vite assigns) and check that the design looks right. Fix any obvious issues now. It’s faster to debug locally than to troubleshoot a broken Vercel deployment.

Step 3: Set Up Git and Push to GitHub

Vercel deploys from GitHub (or GitLab or Bitbucket), so you need your project in a repository. If you’re not familiar with version control, understanding how Git works will make this step a lot less mysterious.

Initialize a Git Repository

In your project directory:

git init
git add .
git commit -m "Initial commit: Claude Design export"

This creates a local git repository and commits all your files.

Create a .gitignore File

Before you push, make sure you’re not committing files you don’t need. Create a .gitignore file in your project root with at least:

node_modules/
dist/
.env
.DS_Store

If you already have node_modules/ staged, run:

git rm -r --cached node_modules
git commit -m "Remove node_modules from tracking"

Push to GitHub

Go to github.com and create a new repository (click the + in the top right).
Name it something sensible — my-website or focusr-landing works.
Leave it public or private, your choice. Vercel can access both.
Don’t initialize with a README — you already have files.

GitHub will show you the commands to connect your local repo. They look like this:

git remote add origin https://github.com/yourusername/my-website.git
git branch -M main
git push -u origin main

Run those in your terminal. Your code is now on GitHub.

Step 4: Connect GitHub to Vercel and Deploy

Vercel is the platform you’ll use to host the site. It integrates directly with GitHub, so every time you push code, Vercel rebuilds and redeploys automatically.

Create a New Vercel Project

Go to vercel.com and sign in (or sign up — it’s free).
Click Add New → Project.
Select Import Git Repository.
You’ll be prompted to connect GitHub if you haven’t already. Authorize it.
Find and select your repository from the list.

Configure the Build Settings

Vercel is smart enough to detect most frameworks automatically. If you’re using Vite + React, it will set the following by default:

Framework Preset: Vite
Build Command: npm run build
Output Directory: dist
Install Command: npm install

If your export used a different setup (Next.js, plain HTML, etc.), Vercel will usually detect that too. Double-check the build settings before deploying. If something looks off, adjust it manually.

For a plain HTML/CSS site with no build step, set:

Framework Preset: Other
Output Directory: . (root) or wherever your index.html lives
Build Command: (leave blank)

Set Environment Variables (If Needed)

If your site uses environment variables — API keys, analytics IDs, anything you stored in a .env file — add them in the Environment Variables section before deploying. Don’t skip this step; a missing env var is a common reason deployments break at runtime even when they build fine locally.

Deploy

Click Deploy. Vercel will:

Clone your repository
Run npm install
Run your build command
Publish the output to its CDN

The whole process usually takes under two minutes. When it’s done, Vercel gives you a live URL that looks like your-project.vercel.app. That’s your site, live on the internet.

Step 5: Connect a Custom Domain (Optional)

The auto-generated Vercel URL works fine for sharing and testing. If you want a real domain (like yoursite.com), Vercel makes it straightforward.

Add a Domain in Vercel

Go to your project in the Vercel dashboard.
Click Settings → Domains.
Type in your domain name and click Add.

Vercel will show you the DNS records you need to set. These are usually one or two records:

An A record pointing to Vercel’s IP
Or a CNAME record for www

Update DNS at Your Registrar

Log into wherever you bought the domain (Namecheap, Google Domains, Cloudflare, etc.) and add the records Vercel specifies. DNS changes usually propagate within a few minutes to a few hours.

Once propagation is complete, your site is live at your custom domain with HTTPS automatically provisioned by Vercel.

Step 6: Iterate and Redeploy

One of the best things about this setup is how easy iteration becomes. Once your GitHub-to-Vercel pipeline is live, updates are just a push away.

Make changes in your local files (or ask Claude Code to help you refine something), then:

git add .
git commit -m "Update hero section copy"
git push

Vercel detects the push, triggers a new build, and redeploys automatically. Your live site updates without you touching the Vercel dashboard.

This continuous deployment workflow is standard for professional web development. You’ve essentially set up the same pipeline that development teams use for production sites — just without writing the infrastructure yourself.

If you want to go further with this kind of workflow, building visual dashboards on top of your infrastructure with Vercel shows what’s possible when you start adding backend logic to your deployed frontend.

Troubleshooting Common Issues

Even with a straightforward workflow, a few things tend to trip people up.

Build Fails: “Module not found”

This usually means a package is referenced in code but not listed in package.json. Run npm install <package-name> locally, commit the updated package.json and package-lock.json, and push again.

Build Succeeds But Site Looks Broken

Check the browser console (F12 → Console). Common causes:

Missing CSS — check that your CSS files are imported correctly
Font loading failures — if you’re using a Google Font or similar, check the network tab
Image paths broken — Vercel serves files from the build output directory; relative paths that worked locally may need adjustment

Environment Variables Not Working

Vercel environment variables are only injected at build time for static sites (unless you’re using server-side code). If a variable is missing at runtime, verify it’s set in the Vercel dashboard under Settings → Environment Variables and that it’s assigned to the correct environment (Production, Preview, Development).

”Not Found” on Page Refresh

This is a React Router issue. If you’re using client-side routing, you need to tell Vercel to serve index.html for all routes. Add a vercel.json file to your project root:

{
  "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
}

Commit and push that file, and page refreshes will work correctly.

Where Remy Fits in This Workflow

The Claude Design → Claude Code → GitHub → Vercel pipeline works, but it has a few friction points. You’re stitching together four separate tools, managing your own git setup, handling environment variables manually, and debugging build failures without much context about what went wrong.

Remy takes a different approach. Instead of starting with a visual design tool and then exporting code, you start with a spec — a markdown document that describes what your app does. Remy compiles that spec into a full-stack application: frontend, backend, database, auth, and deployment, all from a single source of truth.

The difference matters most when your project grows beyond a landing page. A static site built in Claude Design is easy to deploy. But if you need a contact form that actually sends email, a login system, a database to store user data, or any backend logic at all — the Claude Design workflow gets complicated fast. You’d need to wire in a separate backend, manage API keys, set up a database, and handle all of that yourself.

Remy handles the full stack from the start. The spec describes the data model, the backend methods, the frontend behavior, and the auth rules. The code is generated from that spec, not the other way around. When you need to change something, you update the spec and recompile — rather than hunting through generated React components to find the right file.

If you’re building a full-stack app without writing code, Remy is worth looking at before you commit to the multi-tool assembly approach.

You can try Remy at mindstudio.ai/remy.

Frequently Asked Questions

Does Claude Design export production-ready code?

Mostly yes, with caveats. Claude Design exports real HTML, CSS, and JavaScript (or React components) that can run in a browser. For a marketing site or portfolio, the output is often close to production-ready. For anything with backend logic, authentication, or a database, you’ll need to extend the code significantly — Claude Design is a UI-focused tool. For context on how it compares to more full-featured design tools, see Claude Design vs Figma.

Do I need to know how to code to deploy a Claude Design site?

For a static site, you can get by without much coding knowledge. The main things you need to handle manually are: initializing a git repo, running a couple of terminal commands, and configuring Vercel’s build settings. Claude Code can assist with all of that if you describe what you need. For a more opinionated walkthrough of the broader process, shipping your first web app as a non-developer covers the concepts involved.

Is Vercel free for personal projects?

Vercel’s Hobby plan is free and covers most personal and small projects. It includes unlimited deployments, automatic HTTPS, custom domains, and a generous bandwidth allowance. The free tier has limits on build minutes and serverless function execution, but for a static marketing site built from Claude Design, you’re unlikely to hit those limits. If you want to compare Vercel’s strengths against other platforms, Vercel v0 vs Webflow covers some of the tradeoffs.

What framework should I use when exporting from Claude Design?

It depends on what you need. If you’re building a pure marketing site with no interactivity, vanilla HTML/CSS is the simplest option — no build step, no dependencies, deploys in seconds. If you need component reuse, React with Vite is a solid default and what Vercel expects by default. If you need server-side rendering or dynamic routing, Next.js integrates tightly with Vercel and gives you access to serverless functions. Ask Claude Code to scaffold whichever framework makes sense for your use case.

Can I add backend functionality to a Claude Design export?

Yes, but it’s more work than the deployment itself. Claude Design generates frontend code only. To add a contact form, database, or user accounts, you’d need to set up API routes (either in Next.js or a separate backend), connect a database like PlanetScale or Supabase, and manage secrets and environment variables carefully. This is where the multi-tool nature of the workflow starts to show its limitations — and where understanding what a full-stack app actually involves is useful context before you start.

How long does it take to go from Claude Design to a live Vercel URL?

For a simple static site, the full process — designing, exporting, setting up git, pushing to GitHub, and deploying to Vercel — takes roughly 30–60 minutes the first time. Once you’ve done it once and have the accounts set up, subsequent projects are faster. The design stage is usually the longest part, since iterating on the layout and getting it right takes time regardless of the tooling.

Key Takeaways

Claude Design produces real code — HTML/CSS/JS or React components — that can be deployed directly to Vercel with minimal modification for static sites.
The deployment pipeline is GitHub → Vercel — once connected, every git push triggers an automatic rebuild and redeploy.
Claude Code bridges the gap between Claude Design’s export and a properly structured, locally runnable project.
Vercel handles the hosting, CDN, and HTTPS automatically — you don’t need to configure a server.
For backend functionality, the Claude Design workflow has real limits. Tools that handle the full stack from the start — like Remy — are worth considering if your project needs more than a frontend.

If your site stays within the frontend-only boundary, the workflow in this guide will get you to a live URL efficiently. And once you’ve done it once, the path from design to deployed is a lot shorter the second time.