用 Claude Code 建立並發布小型商業網站的完整工作流程

You can build a small business website without writing code by hand. You still have to make decisions and check the result yourself. This is the workflow I use with Claude Code in the Claude desktop app. It takes you from an empty folder to a live site on Vercel. I've written it for people who have never coded.

What you need

• A Windows or Mac computer. A phone or tablet won't work for this.
• The Claude desktop app with a plan that includes Claude Code (Pro, Max or Ultra). Usage limits vary by plan.
• Free GitHub and Vercel accounts for the last two steps. Vercel's free Hobby plan is meant for personal, non-commercial projects, so check the terms before you host a real business there.

Step 1: Make one empty folder for the project

Create an empty folder with a plain name, for example anna-first-site. Every file for the site will live there.

Open the desktop app, sign in and go to the Code tab. Choose that folder as the project. Before you build anything, ask:

Which folder are you working in?

If Claude names a different folder, stop and fix that first. A wrong folder is the most common way beginners lose work or mix two projects together.

Step 2: Write a first prompt that sets limits

A vague prompt like "make me a website" gets you a generic page. A good first prompt says what the business is, which sections the page needs, what it should look like, what one button must do, and what Claude must not do. Here is the kind of prompt I start with, using a fictional photographer:

In this empty project folder, build a responsive Next.js website for Anna, a fictional family photographer. Include an opening section, services, three stages of a session and contacts. Use a dark graphite background, warm light text and a copper accent. The "Discuss a session" button must scroll to the contact section. Label sample content; do not invent reviews or contact details. Keep it local, with no accounts or payments. Explain any missing setup simply, then start the preview and give me its exact address.

These lines do most of the work:

• "Label sample content; do not invent reviews or contact details." If you leave this out, you may get made-up testimonials and a fake phone number that are easy to miss before launch.
• "Keep it local, with no accounts or payments." This keeps the first version small enough to check properly.
• "Give me its exact address." You want a real preview URL, not a description of what it built.

Let Claude finish. If it asks you to install something or approve a step, read what it says before you agree.

Step 3: Check the page in the Browser pane

Claude starts a local preview, usually an address like http://localhost:3000, and you can open it in the app's Browser pane. A localhost address only works on the computer running the project. You can't send it to anyone yet.

Test it the way a visitor would:

1. Scroll to the bottom.
2. Click the main button. Does it really reach the contact section?
3. Refresh. Does the page still load?
4. Make the window narrow. Do the text and buttons still fit?

Only call it done when it passes these checks. "Claude said it works" isn't a check.

Step 4: Change one thing at a time

Ask for one specific change per message:

Make the main heading shorter and keep the "Discuss a session" button working.

Then check that change yourself. Asking for one change at a time makes it obvious which change broke something, if anything does.

When something does break, give Claude a proper bug report, not just "it's broken":

I opened http://localhost:3000, clicked "Discuss a session", expected to land on Contacts, but nothing happened.

Next time, keep working in the same project folder. Don't start over in a new one.

Step 5: Save it to GitHub

While the site lives only in a folder, you have no history and no backup. GitHub fixes both. Create a free account, then ask Claude in the same project:

Put this project on GitHub as a new private repository. Explain each step before you do it, and tell me what I need to approve.

After that, make each change on purpose and save it with a clear description, for example "Shorten hero heading". If a later change goes wrong, you can go back to a version you know was good. That's the main reason to use GitHub in the first place.

Step 6: Publish on Vercel

Sign in to Vercel with your GitHub account. Import the repository and keep the defaults Vercel detects for a Next.js project, then deploy. You get a public *.vercel.app address.

Now test the hosted site like a stranger would, on your phone too. Run the Step 3 checks again on the public address. From now on, each change you save to GitHub creates a new deployment. Look at it before you call it released.

Adding your own domain comes later. You set it up in Vercel's domain settings once the site is in a state you're happy with.

What this workflow does and doesn't cover

At the end of this, you have a working, published, version-controlled marketing site. You don't yet have online booking, payments, email notifications or a client login. Each of those is a separate project with its own setup and its own ways to go wrong. Get the simple site live first.

I've turned this workflow into a written course, Build & Launch Your First Website with Claude: 16 practical lessons in English and Russian. It covers the steps above in more detail and then adds sign-in and a private client area with Supabase. The first lesson is free to read at https://g-lab.agency/learn/welcome. The full course is $19, one-time: https://g-lab.agency/courses/build-with-claude.