Claude Code × GitHub × Vercel — AI Development Workflow for Non-Engineers

Introduction

With the emergence of AI coding tools like Claude Code and Cursor, it's now possible to create websites and applications without extensive programming knowledge.

However, many people wonder: "I've built something, but how do I publish it?" or "How do I handle updates and fixes?"

In this article, we'll introduce a workflow for publishing and managing AI-created sites and apps using the Claude Code → GitHub → Vercel combination. Rather than diving into technical code explanations, we'll focus on ideas, approaches, and creative thinking from a non-programmer perspective.

Why This Combination?

There are various deployment methods available, but here's why I chose this particular combination:

Of course, this isn't the only solution. Netlify, Cloudflare Pages, and AWS Amplify are all excellent alternatives. However, in terms of "ease of understanding" and "minimal effort" for non-engineers, this combination feels quite practical.

The Overall Flow

The basic flow is simple:

1. Create code with Claude Code or Cursor
2. Push to GitHub (on a separate branch)
3. Check preview on Vercel (automatically deployed)
4. Create a PR on GitHub and merge to main if everything looks good
5. Automatically reflected in production

Once this flow is established, it's just a matter of cycling through "create → verify → publish."

Choosing Your Development Tools

Claude Code and Cursor are both AI-powered coding tools, but using them strategically makes your work more efficient.

Small Pages or Landing Pages

For simple HTML-centric pages or single-page landing pages, Cursor is convenient. The GUI-based interface makes file creation and editing visually intuitive.

For Larger Projects

When working with projects spanning multiple files or adding API-based features, I run Claude Code in the terminal. It excels at understanding the entire project, making it easier to handle situations where changes in one file require updates in another.

See "Choosing Your Development Environment" for details.

GitHub Push and Branch Management

When pushing created code to GitHub, I give instructions directly to Claude Code.

Simply saying "push to this branch name" is enough, and Claude Code executes the appropriate git commands. Using branches clearly separates work-in-progress changes from the production environment.

See "GitHub Push and Branch Management" for details.

GitHub × Vercel Integration Setup

By linking GitHub and Vercel, sites are automatically deployed just by pushing to GitHub.

The setup simply involves selecting and syncing a GitHub repository from your Vercel project. Once configured, everything syncs automatically without any conscious effort.

See "GitHub × Vercel Integration Setup" for details.

Preview Verification and PR Merge

When you push to a branch on GitHub, Vercel automatically creates a preview (staging) environment.

Check the actual display in this preview environment, and if there are no issues, create a Pull Request (PR) on GitHub to merge to the main branch. Once merged, Vercel automatically deploys to production.

See "Preview Verification and PR Merge" for details.

Utilizing Vercel Services

Vercel is more than just a hosting service. Through its Storage feature, it also provides databases (KV, Postgres), scheduled execution (QStash), and email delivery (Resend).

Claude Code can handle coding that utilizes these services. If you're unsure about settings, you can ask Claude Code to write setup instructions to a file, or consult ChatGPT.

Additionally, Speed Insight (available for around $10/month) quantifies site performance and usability issues. You can pass these findings to Claude Code for improvements.

See "Utilizing Vercel Services" for details.

Spreadsheet Integration

When integrating web apps with spreadsheets, it's sometimes convenient to write the spreadsheet-side processing in Google Apps Script (GAS).

I tell Claude Code what I want to do and have it write GAS code to a file. After reviewing the code, I execute it in the spreadsheet, and if there are problems, I share the error with Claude Code for improvements.

What's particularly useful is that Claude Code investigates both the app-side design and GAS, returning results that maintain consistency between both.

See "Spreadsheet × GAS Integration" for details.

Working with Smartphone and Voice Input

By linking Claude Code with GitHub, you can give modification instructions via voice input from your smartphone or web browser.

For example, if you want to "add a blog post" while commuting, you can voice input the content on your phone, and by the time you arrive at your destination, it could already be uploaded to the site.

See "Working with Smartphone and Voice Input" for details.

About Costs

Cost is likely a concern. For small projects, you can operate at surprisingly low costs.

For small-scale projects, both GitHub and Vercel can be managed within their free tiers. Claude Code can be used modestly from around $20/month, making low-cost "create → publish" achievable—great news for small business owners.

Even for larger projects, with Claude Code at $100, Cursor at $20, Vercel Pro at $20 plus some usage charges, you can create and manage multiple sites and pages. The cost-performance ratio feels excellent.

See "Thinking About Low-Cost Operations" for details.

Summary

The Claude Code → GitHub → Vercel combination makes it easy even for non-engineers to cycle through "create → verify → publish."

• Create code with AI
• Manage changes with GitHub
• Preview and production deploy with Vercel

Once you learn this flow, you can publish various sites and apps based on your ideas.

Of course, there are many other methods available. Find the approach that works best for you while expanding the possibilities of AI coding.