I Found a Better Way to Build Websites with Claude AI

Shakeworld — Fri, 04 Sep 2026 21:19:41 +0000

If you're using Claude to build websites or applications, one of the biggest improvements you can make is to stop treating Claude like a chatbot where you simply copy and paste code.

Instead, you can set up a development workflow where Claude works on the project, GitHub stores the code, and Vercel handles deployment.

The basic workflow looks like this:

You → Claude → Code → GitHub → Vercel → Live Website

Claude works on the project, GitHub keeps the source code and its history, and Vercel can automatically deploy new code pushed to the connected repository.

Here's how I approach the setup.

Start by discussing the project with Claude

Don't immediately tell Claude:

"Build me a website."

First explain what you're actually trying to build.

Tell Claude:

What the product is
Who the target users are
What problem you're solving
The main features
How the business will operate
What you already know
What you don't know

You can also give Claude examples of existing websites or products that are similar to what you're trying to build.

The purpose of this stage isn't to generate code yet.

It's to make sure Claude understands the project before development begins.

Plan the technical side

Once Claude understands the idea, decide how you're going to build it.

This is where you determine things such as:

Programming language
Framework
Database
Authentication
APIs
Hosting
Folder structure
Major features
Development priorities

For example, you might choose JavaScript/TypeScript with Next.js, PHP with Laravel, or another stack depending on your project.

The important thing is to make these decisions deliberately instead of letting the AI randomly choose technologies as the project develops.

So my basic AI development process is:

Discuss → Plan → Build → Test → Deploy → Improve

Create a GitHub repository

Next, create a repository for your project on GitHub.

Think of GitHub as the central home for your project's source code and its change history.

Once the repository exists, your development environment needs permission to push changes to it.

Use GitHub fine-grained access

This is an important part of the setup.

Rather than giving broad access to your entire GitHub account, create a fine-grained personal access token and restrict it to the repository you're working on.

Give it only the permissions required for the workflow.

And be extremely careful with the token.

Never:

Put it inside your source code
Commit it to GitHub
Publish it publicly
Share it unnecessarily

Treat the token like a password.

Connect GitHub to Vercel

Now connect your GitHub repository to Vercel.

Import the repository into Vercel and configure the project.

Once the connection is established, Vercel can detect new pushes to the repository and create new deployments.

Your deployment pipeline now looks like:

Claude → GitHub → Vercel → Live Website

Build with Claude

Now you can actually start building.

Claude creates and modifies the project.

You run and test the application locally.

If something doesn't work, you give Claude the error or explain what needs to change.

Once you're satisfied with the current version, commit the changes and push them to GitHub.

The repository now contains your project.

Vercel deploys the new version

Once the code reaches GitHub, Vercel can pick up the new commit, build the project and deploy it.

If the build succeeds, you have a live application.

And this is where this workflow becomes really useful.

You don't have to start over every time you want to make a change.

Suppose you want to redesign your homepage.

Instead of downloading the project, manually editing files and uploading everything again, you can go back to Claude and say something like:

"Update the homepage hero section. Keep the existing design system and don't modify anything unrelated to this feature."

Claude can inspect the existing project, make the changes and test them.

Then you commit and push the updated code.

GitHub receives the new version → Vercel detects the commit → Vercel creates the deployment.

That's the real advantage of this workflow.

The complete setup

Think of each tool as having a different job:

Claude
Builds and modifies the project.

↓

Git
Tracks changes.

↓

GitHub
Stores the source code.

↓

Vercel
Builds and deploys.

↓

Your domain
Makes the application available to users.

You don't necessarily need to be an expert programmer to start using AI this way, but understanding the basics of your technology stack will make you much better at directing Claude and troubleshooting problems.

I also recorded the entire setup

I recently made a step-by-step video showing this workflow visually, including the development environment, GitHub repository, fine-grained GitHub access, Vercel connection, deployment and updating the project.

Watch the full tutorial on my YouTube channel:

👉 Stop Copying Claude's Code — Use This GitHub + Vercel Workflow Instead

If you're serious about using Claude to build real projects rather than simply copying code from an AI chat window, this workflow is worth learning.

DEV Community: Shakeworld

I Found a Better Way to Build Websites with Claude AI