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

Your website is probably costing you in ways you've stopped noticing. On WordPress, you pay the plugin tax: a dozen extensions that each want updating, sometimes break the site, and need a developer when they do. On Webflow or Framer, you rent your own homepage every month, 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.

For a B2B tech company it stings even more, because 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. All you can do is pick a different template.

There's another 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. You don't need an agency retainer or monthly platform rent, and a copy change doesn't need a dev ticket. It's written for a non-technical reader. You won't need to write code.

The short version

• You describe what you want. Claude writes the code and shows you a before/after to approve. You never open a terminal or touch syntax.
• The stack is Next.js for the site, Sanity for content editing, Vercel for hosting, and GitHub for safety. Claude sets it all up.
• Running cost lands near $20 to $60 a month for a small team, compared with 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 the site 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's actually changing

For twenty years you had two ways to get a website. You could hire developers, which is expensive and slow but gets you something custom. Or you could 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. So you get the custom, owned result of a dev team at the speed and cost of a builder. That's the shift, and it deserves your attention even if you never plan to touch code.

The mechanics are simple. Claude Code is a desktop app. You type a request, it proposes a change, and it shows you a diff: a before/after view 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 direct, and Claude does the building, designing, and shipping.

What comes out is a normal, modern codebase that lives in your own accounts. There's no Claude-hosted page and no locked export. You can hand it to a developer later, move it, or keep running it yourself. It's software you own, built by talking.

What it costs: a real comparison

Cost is where this gets persuasive. The headline numbers below were roughly current when we wrote this in 2026, so read them as ranges. The bigger story is in 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 pay 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 pay 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 real bill is the plugins, the security patching, the staging environment, and the developer you call when an update breaks checkout. Most teams undercount it because it arrives in pieces.

The time value nobody prices in

Money is the cost everyone sees, but time costs more. On a normal stack, a landing page for next week's campaign means briefing a developer or agency, waiting for a first version, reviewing it, waiting for revisions, and going live a few weeks later if you're lucky. By then the campaign has moved on and the page is 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 turns into a focused few days. Work that used to wait in a queue gets done while the idea is still warm.

And the 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 carries a tax, and the gap between those two teams widens every quarter.

The full build, step by step

This is 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. You don't need a terminal, 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, and 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 it 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 the 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, and Sanity is the content dashboard. Sign up for both now; you'll 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 step is what gets Claude to build like a senior team instead of producing generic output. Skills are expert playbooks Claude loads when it needs them. Plugins are bundles of skills you install from the Plugins panel (the + button, then 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: turns a Figma file or link into code (optional, handy).

Then add the design and motion bundles. They're 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 you install 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. Still, four words make everything else easier to follow.

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 loop you'll repeat. 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 for each 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 exists. 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. Without it you tend to end up with a pile of sections and no point of view.

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 each section as a separate component; that makes everything easier to change and to hand over 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. You do it once per project. Ask Claude to set it up, then create the project when it prompts you.

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 by itself.

• 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 up 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 has the same shape. Here's 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. Pure content changes don't touch 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 sorts it out.

How to keep it from looking AI-generated

The real fear is that AI-built sites look AI-built, and it's a fair one: 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 design direction starts with a design system.

Start with a design system

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

It's also 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. Your eye registers that consistency as "professionally built," even if you can't say 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. What you get 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, and you don't have to start from scratch to switch. Claude can read your current site and rebuild it.

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 holds on by being hard to leave. You pay in 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.

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 goes away, the site gets quicker, and your content survives the move.

From Webflow or Framer

Webflow and Framer are visual builders. They're 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, so you're a tenant.

On this stack you're 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. You can keep the same look if you like it, minus the rent and the ceilings. Our SEO for B2B tech companies covers technical SEO on headless builds like this one.

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 still review each rebuilt page, move the content over, and check that redirects point where they should. Budget a few focused sessions, because a spare afternoon won't cover it. It's still 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, with no dev ticket and no 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. That's a solid technical base for AI search optimization for B2B tech.
• Lower running cost. Hosting starts free or close to it, and 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, and publishing updates the live page in seconds.

Why this is the future

Step back and look at the trend line. For most of web history, building and changing software depended on whether you could afford engineers. That barrier 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.

Once that happens, the edge goes to whoever has taste and ships, and having a dev team counts for less. A two-person company can run a site that looks and performs like a fifty-person one. The advantage moves from budget to judgment, the same move every other tool-driven shift made, from desktop publishing to no-code.

Owning the code gets more valuable over time. 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 plans to be around. A clean, modern codebase you own, that an AI can keep extending, is the position that holds up.

This won't replace senior engineers for hard systems work, and it shouldn't. But for the marketing site, the landing pages, the blog, and anything else that has to change weekly and look sharp, talking to an AI that builds and ships is already the faster and cheaper option, and you own what it builds. The teams adopting it now are compounding that 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 has held every time: they stop renting, start owning, and ship changes the same week they think of them.

Want this for your site?

You can build a fast, custom, 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 keeps it from looking AI-made, the cost is lower than what you pay now, and moving off your current builder takes a few sessions.

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. If your copy and conversion paths need work too, that's what our website messaging and conversion service is for. Book a 30-minute call and we'll map out what it takes for your site.

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, and 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 takes about 30 to 60 minutes. You can have a first version of a homepage the same day. A full multi-page site with the CMS connected and deployed is realistically a few focused sessions, well short of 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 close to it. WordPress looks cheap until you add plugins, a developer, and maintenance. For most B2B marketing sites, the running cost on this stack comes out 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 step to get right 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 it, change it, or hand it off whenever you want. That's the big 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." Claude can read your code, your logs, and your git state, so it usually diagnoses and fixes the problem in the same session. If you'd rather hand something off, the code is standard and 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.