How to Build a B2B Website on Claude (No Dev Team Required)

Your website is probably costing you in ways you stopped noticing. If you're on WordPress, you're paying the plugin tax: a dozen extensions that each want updating, occasionally break the site, and need a developer when they do. If you're on Webflow or Framer, you're renting your own homepage every month, and you'll keep renting it for as long as the site exists. Either way, a simple request like "add a pricing page" turns into a ticket, a wait, and an invoice.

Here's the part that stings for a B2B tech company: the result usually still looks like a template. You sell sophisticated software to technical buyers, and your site looks like fourteen other sites in your category. You don't own the code, so you can't really change that. You can only pick a different template.

There's a better way now, and we used it on this exact site. You talk to Claude Code in plain English, it builds a real, custom website, and you own every line of it. No agency retainer, no monthly platform rent, no dev ticket for a copy change. This is the complete guide: the concept, what it costs versus the tools you're on today, the time it saves, the full step-by-step setup, how to migrate, and why this is where B2B web is going. It's written for a non-technical reader. You will not need to write code.

The short version

• You describe what you want. Claude writes the code and shows you a before/after to approve. No terminal, no syntax.
• The stack is Next.js for the site, Sanity for content editing, Vercel for hosting, GitHub for safety. Claude sets it all up.
• Running cost lands near $20 to $60 a month for a small team, versus stacked platform fees plus per-seat charges plus a developer.
• A design system is what makes an AI-built site look professionally built. Skip it and it looks generated.
• Setup takes an afternoon. After that, most changes are a sentence, and your marketers edit content in a dashboard.

The big idea: what is actually changing

For twenty years you had two ways to get a website. Hire developers, which is expensive and slow but gives you something custom. Or use a builder like WordPress, Webflow, or Squarespace, which is cheaper and faster but boxes you into templates and monthly rent. Every B2B company picked a spot on that trade-off and lived with the downside.

Claude Code removes the trade-off. It's an AI that writes real, production-grade code, and you steer it in plain English. You get the custom, owned result of a dev team at the speed and cost of a builder. That's the whole shift in one sentence, and it's why this is worth your attention even if you never plan to touch code.

The mechanic is simple. Claude Code is a desktop app. You type a request, it proposes a change, and it shows you a diff: a clear before/after with Accept and Reject buttons. Nothing touches your site until you accept. You watch the result in a live preview and react in plain words, the way you'd brief a designer. You are the director. Claude is the team that builds, designs, and ships.

The output is not a Claude-hosted page or a locked export. It's a normal, modern codebase that lives in your own accounts. You can hand it to a developer later, move it, or keep running it yourself. You're not adopting a platform. You're getting software you own, built by talking.

What it costs: a real comparison

Cost is where this gets persuasive. The headline numbers below are roughly current as of 2026; treat them as ranges, not quotes. The bigger story is the columns that aren't dollars: who you depend on, and whether you own the result.

Add it up for a five-person team that wants three people able to edit. On Webflow you're paying the site plan plus two extra seats, every month, forever, and you still call a contractor for anything the builder won't do. On the Claude stack you're paying for one Claude plan and hosting that often sits in the free tier, and the changes that used to be contractor work are now a sentence you type.

WordPress looks cheapest on paper and rarely is. The theme is cheap. The plugins, the security patching, the staging environment, and the developer you call when an update breaks checkout are the real bill. Most teams undercount it because it arrives in pieces.

The time value nobody prices in

Money is the obvious cost. Time is the expensive one. On a normal stack, a landing page for next week's campaign means briefing a developer or agency, waiting for a first version, reviewing, waiting for revisions, and going live a few weeks later if you're lucky. The campaign moved on. The page shipped late.

On this stack you describe the page, watch Claude build it in the preview, give two rounds of feedback, and ship the same afternoon. A homepage refresh that an agency quotes at six weeks becomes a focused few days. The work that used to wait in a queue happens while the idea is still warm.

That speed compounds. When changing the site is cheap and instant, you actually run the experiment, fix the confusing headline, and add the case study the day you close the deal. Teams stuck in the ticket-and-wait cycle don't, because every change has a tax. The gap between those two teams widens every quarter.

The full build, step by step

This is the part you can follow along with. It's the same runbook we used on the XQL redesign, written so a teammate who has never touched code or git can go from a blank laptop to a live, editable site. Do the parts in order. Everything happens in the Claude Code desktop app. No terminal required, though there's one inside the app if you ever want it.

Part 1: One-time setup (about 30 minutes)

You do this once per computer. Most of it is downloading apps and signing in. Five accounts and installs and you're ready.

• Claude Code desktop app. Needs a paid Claude plan (Pro, Max, Team, or Enterprise). Download from claude.ai/download, sign in, and open the Code tab.
• Node.js. This runs your website locally. Get the LTS version (20.9 or newer) from nodejs.org and click through with defaults.
• Git. The change-tracking system behind GitHub. It's preinstalled on Mac; on Windows install it from git-scm.com. You'll rarely run it yourself, you ask Claude to.
• GitHub account. Where your code lives in the cloud and what Vercel deploys from. Sign up, then connect it in the app with the + button next to the prompt box.
• Vercel and Sanity accounts. Vercel hosts the site, Sanity is the content dashboard. Sign up for both now; you wire them in Parts 5 and 6.

You don't have to touch the terminal to check any of this. Type a request and Claude runs it for you.

Check whether Node.js and npm are installed and tell me the versions.
Then configure my global git identity: name "Your Name", email
"you@yourcompany.com", and confirm I'm authenticated with GitHub by
listing a couple of my repositories.

Part 2: Install the design and workflow skills

This is what makes Claude build like a senior team instead of producing generic output. Skills are expert playbooks Claude loads on demand. Plugins are bundles of skills you install from the Plugins panel (the + button → Plugins). Install these four official ones first.

• superpowers: the workflow itself (brainstorming, planning, executing, code review).
• frontend-design: Anthropic's official anti-generic design skill (distinctive typography, color, layout, motion).
• github: lets Claude open and manage pull requests.
• figma: turn a Figma file or link into code (optional, handy).

Then add the design and motion bundles. These are third-party, so you add their marketplace first, then install. Paste these into the prompt box one at a time.

/plugin install superpowers@claude-plugins-official
/plugin install frontend-design@claude-plugins-official
/plugin install github@claude-plugins-official

/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill

/plugin marketplace add freshtechbro/claudedesignskills
/plugin install core-3d-animation@claude-design-skillstack
/plugin install animation-components@claude-design-skillstack

There's also a richer community design bundle (the one we lean on) with named looks like high-end-visual-design and minimalist-ui, plus image-generation skills. It installs through the skills tool. After installing anything, restart the app so everything loads cleanly.

npx skills add https://github.com/leonxlnx/taste-skill

Part 3: Git in sixty seconds

You almost never run git by hand. You ask Claude, and you review its work in the app's diff view. But four words make everything else make sense.

The golden rule: never build directly on the main version. Work on a branch, open a pull request, merge. If you ever feel lost, ask Claude to "explain my current git state in plain English and what I should do next."

Part 4: Build the site

This is the repeatable loop. Open the Code tab, pick a folder (an empty one for a brand-new site), and talk to Claude. Run these in order, and repeat the middle steps per page or section.

Scaffold a new Next.js + TypeScript marketing site in this folder.
Use the App Router. Keep all copy in typed content files and one
component per page section so it's easy to edit later. Then run it
and open the Preview.

Now the design loop. Brainstorm first, because it locks the direction before any code. Then plan, then build with the design skills, then add motion once the layout is right, then preview and react. Don't skip the brainstorm. It's the difference between a site with a point of view and a pile of sections.

Use the brainstorming skill. I'm building a marketing site for ACME,
a B2B [what you do]. Ask me what you need, then write a short spec.

Use superpowers:write-plan to turn that spec into a build plan.

Use the frontend-design and ui-ux-pro-max skills. Make it premium
and distinctive, not templated. Commit to ONE aesthetic direction.
Propose a type pairing, color palette, and layout, then build the
homepage.

Use the motion skills to add tasteful scroll reveals and hover
motion. Respect reduced-motion preferences.

Open the Preview, check for console errors, and show me desktop and
mobile. Fix anything broken.

Review it, give plain feedback ("hero's too tall," "make the CTA mint"), and iterate. When it's right, ship it: "Commit, push the branch, and open a pull request." Keep edits small and preview often. Ask Claude to keep copy in content files and sections as separate components; it makes everything easier to change and hand to the CMS next.

Part 5: Add the CMS so your team can edit

This adds an editing dashboard at your-site/studio where anyone can change text and images without code. Do it once per project. Ask Claude to set it up, then create the project when prompted.

Set up Sanity CMS for this site using next-sanity. Mount the Studio
at /studio, put schema types in a sanity/ folder, add an env file for
the config, and a query helper. Walk me through creating the project.

Claude creates a .env.local file for your project's keys (it stays private and out of version control) and writes a short operations guide for your editors. Once the dev server is running, open localhost:3000/studio, log in, and you'll see your content. Edit a field, hit Publish, and the site updates.

NEXT_PUBLIC_SANITY_PROJECT_ID="your-project-id"
NEXT_PUBLIC_SANITY_DATASET="production"
NEXT_PUBLIC_SANITY_API_VERSION="2025-06-01"
NEXT_PUBLIC_SITE_URL="https://your-domain"
SANITY_REVALIDATE_SECRET="a-random-secret-for-instant-updates"

Part 6: Go live on Vercel

Vercel hosts the site and rebuilds it automatically every time you merge to the main version. Make sure the project is on GitHub (ask Claude to "create a GitHub repo for this project and push it"), then import it at vercel.com/new. Vercel detects Next.js on its own.

• Add the same keys from your .env.local to the Vercel project settings, then click Deploy. You get a live URL where both the site and /studio work.
• Wire instant updates: ask Claude to "add an /api/revalidate route that verifies the secret and refreshes the affected pages," then add a webhook in Sanity pointing at that route. Now publishing in the CMS updates the live page within seconds.
• Add your domain in Vercel's Domains settings and follow the DNS steps at your registrar. Update the site URL and you're live on your own address.

Part 7: Your daily workflow

Once it's set up, a normal session is short and always the same shape. This is the whole cheat sheet.

"Start a branch for a new careers page and pull the latest first."
"Use brainstorming, then write a plan for the careers page."
"Build it with frontend-design + ui-ux-pro-max. Add scroll motion."
"Open the Preview, fix console errors, show me desktop and mobile."
"Commit, push, and open a pull request."

Review the preview link on the pull request, merge, and it deploys. For pure content changes, nobody touches code at all: an editor logs into /studio, edits, and clicks Publish. When you get stuck, say so in plain English ("the build failed, read the logs and fix it"). That usually resolves it.

Make it look designed, not generated

Here's the real fear, and it's fair: most AI-built sites look AI-built. The same centered hero, the same purple gradient, the same three feature cards, copy that reads like it's apologizing. It happens because people accept the first thing the model produces. The model defaults to the average of everything it has seen, and the average of every website is a template.

The fix is design direction, and the foundation of design direction is a design system.

Start with a design system

A design system is the set of rules every page follows: your colors, your fonts, your spacing, your buttons and cards. Define it once and reuse it everywhere. It sounds technical. It isn't. It's the difference between a brand and a pile of pages.

This is the single biggest reason a site looks expensive or cheap. When every page draws from the same small set of colors, type sizes, and components, the whole thing reads as intentional. When each page improvises, it reads as generated. Consistency is what your eye registers as "professionally built," even if you can't name why.

So build the system before the pages. Have Claude lock a type pairing, a tight color palette with one accent, spacing rules, and a few reusable components, then build everything from those. We did this for XQL: one system we call Phosphor, a pure-black canvas with a single mint accent and three fixed typefaces. Every page on this site is built from it, which is why they feel like one brand instead of ten.

Use the frontend-design and ui-ux-pro-max skills. Before building
pages, define a design system: one type pairing, a tight color
palette with a single accent, spacing scale, and a set of reusable
components. Commit to ONE aesthetic direction, not templated. Then
build every page from that system.

Name the look you want (high-end-visual-design, minimalist-ui), give feedback in plain English, and iterate two or three rounds. The result doesn't look like an AI made it. It looks like you hired someone with taste, because the taste came from you.

Moving from WordPress, Webflow, or Framer

Most B2B sites sit on one of these three. You don't have to start from scratch to switch. Claude can read your current site and rebuild it. Here's what leaving each one looks like.

From WordPress

WordPress powers roughly 43% of all websites and about 60% of sites that use a CMS (W3Techs). It got there by being flexible, and it stays there by being hard to leave. The cost shows up as maintenance: plugins to update, security holes to patch, themes that fight each other, and a developer on call for anything real. Your marketing team can edit a blog post but not much else without help.

Migrating is straightforward. You point Claude at your live site, it recreates each page as clean, fast components, and you move your posts into the new CMS. The plugin tax disappears, the site gets quicker, and your content survives the move.

From Webflow or Framer

Webflow and Framer are visual builders. They're genuinely nice to start in, which is why so many marketing sites live there. The catch is ongoing: you rent the platform forever (Framer runs about $10 to $100 a month, Webflow's CMS plan starts near $29 and Business near $49), every extra editor is another paid seat at roughly $20 a month, and you hit ceilings like Framer's static-page caps and capped redirects. You can't lift the real site out and host it yourself. You're a tenant.

On this stack you become the owner. Claude rebuilds your layouts in real code that lives in your GitHub, wires the same content into the CMS, and sets up redirects from your old URLs so your search rankings carry over. Same look if you want it. None of the rent, none of the ceilings.

Here is our current site: https://example.com. Recreate these pages
as a Next.js site using our design system: home, about, services,
case studies, blog. Match the content, set up 301 redirects from the
old URLs so we keep our SEO, and move the blog posts into the CMS.

One honest note: migration isn't a single click. Claude does the heavy lifting, but you review each rebuilt page, move the content over, and check that redirects point where they should. Budget a few focused sessions, not a free afternoon. It's far less work than a traditional rebuild, and you come out owning the result.

What you actually get

• Ownership. The code sits in your GitHub and your Vercel. No platform can raise prices on you or shut you down.
• Speed. "Add a pricing page like this one" ships in minutes, not a dev ticket and a two-week wait.
• SEO and AI-search readiness. Real server-rendering, clean metadata, and sitemaps out of the box. We added Google Consent Mode, auto-generated share images, and an llms.txt file for AI crawlers, all by asking.
• Lower running cost. Hosting starts free or near it, the CMS is free to begin with. You trade stacked subscriptions for a single Claude plan.
• A site your marketers run. The content dashboard handles text, images, and blog posts. Publishing updates the live page in seconds.

Why this is the future

Step back from the how-to and look at the trend line. For most of web history, the ability to build and change software was gated by who could afford engineers. That gate is coming down. An AI that writes production code and takes plain-English direction means the people closest to the business, the founders and marketers, can build the thing themselves.

When that happens, the advantage stops being "who has a dev team" and becomes "who has taste and ships." A two-person company can run a site that looks and performs like a fifty-person one. The moat moves from budget to judgment, which is exactly the move every other tool-driven shift has made, from desktop publishing to no-code.

The owned-code part matters more over time, not less. Hosted builders were a reasonable trade when building custom was expensive. Now that it isn't, renting your own website looks like a worse deal every year, especially for a company that intends to be around. Owning a clean, modern codebase that an AI can keep extending is the durable position.

This won't replace senior engineers for hard systems work, and it shouldn't. But for the marketing site, the landing pages, the blog, the things that need to change weekly and look sharp, talking to an AI that builds and ships is already the faster, cheaper, better-owned option. The teams adopting it now are quietly compounding the advantage.

How we built xql.group on this exact stack

This site runs on everything above: Next.js, Sanity, Vercel, and GitHub, designed with our own Phosphor system and built through Claude Code. Recent additions all shipped the same way, by asking: a GDPR-ready cookie banner with Google Consent Mode, share images generated per page, an llms.txt for AI search engines, and a blog our team edits without a developer. The article you're reading was published this way too. We also wrote the step-by-step runbook above so a non-technical teammate can go from a blank laptop to a live, editable site.

We've since moved several B2B clients onto the same setup, off WordPress, Webflow, and Framer. The pattern holds every time: they stop renting, start owning, and ship changes the same week they think of them.

Want this for your site?

The recap is simple. You can build a fast, custom, genuinely professional B2B website by talking to Claude in plain English, own the code instead of renting a platform, and hand content to your marketing team without handing them code. The design system is what keeps it from looking AI-made, the cost is lower than what you're paying now, and the migration off your current builder is a few sessions, not a saga.

We've migrated multiple B2B software and tech companies onto this stack, and we can do the same for you, from the design system to the move and the handoff to your team. Book a 30-minute call and we'll map out what it takes for your site: https://calendly.com/danylo-fedirko/intro-call

FAQ

Do I need to know how to code?

No. You describe what you want in plain English and approve each change in a simple before/after view. Claude writes and edits the code. You direct it the way you'd brief a designer or an agency.

How long does the setup take?

The one-time account setup and plugin install is about 30 to 60 minutes. A first version of a homepage can happen the same day. A full multi-page site with a CMS connected and deployed is realistically a few focused sessions, not weeks.

What does it cost compared to WordPress or Webflow?

You trade subscriptions for ownership. Instead of a monthly platform fee plus per-seat editor charges, you pay for a Claude plan (from around $20 a month) and hosting that starts free or near it. WordPress looks cheap until you add plugins, a developer, and maintenance. For most B2B marketing sites the running cost on this stack is lower.

Can I migrate my existing content?

Yes. Claude reads your current site, rebuilds the pages, and moves your content into the new CMS. The key step is setting up 301 redirects from your old URLs so your search rankings carry over. Plan a few focused sessions to review pages and check the redirects.

Is it good for SEO and AI search?

Yes. The site is server-rendered, which search engines and AI assistants read cleanly, and you get sitemaps and structured metadata by default. You can also add things most builders won't, like an llms.txt file that tells AI crawlers how to read your site. We did exactly that here.

Who owns the website?

You do. The code lives in your GitHub account and runs on your Vercel hosting. There's no platform lock-in, so you can move, change, or hand it off whenever you want. That's the core difference from a hosted builder.

What if I get stuck?

Tell Claude in plain English: "the Vercel build failed, read the logs and fix it," or "explain this error and what to do." Because Claude can read your code, your logs, and your git state, it usually diagnoses and fixes the problem in the same session. For anything you'd rather hand off, the code is standard, so any developer can pick it up.

Can marketing edit it without developers?

Yes. Content lives in a dashboard your team logs into. They edit headlines, copy, images, and blog posts, hit Publish, and the live site updates within seconds. Developers only get involved when you want new page types or design changes.