AI
AI Development9 min read

No More Subscriptions: Building Websites with Claude Only

DS

De Studio

Web Development Studio

May 6, 2026
9 min read

How we ditched over $600/month in SaaS tools and now build entire production websites using only Claude — no Webflow, no Figma, no page builders required.

The Subscription Stack That Was Eating Our Budget

Every month, like clockwork, the invoices arrived. Figma at $45. Webflow at $39. GitHub Copilot at $19. Linear for project management at $8. Notion for docs at $16. Lottie for animations at $30. A couple of premium UI component libraries. A stock photo subscription. Before we had written a single line of client code, we had already spent north of $400 — and that was a conservative estimate for a small studio.

This is the subscription trap that most freelance web developers and small studios fall into without noticing. Each tool seems reasonable on its own. Twelve dollars here, twenty dollars there. But stack them up and you have a fixed monthly cost that eats directly into your margin on every project.

In early 2026 we decided to audit every recurring charge. The question we asked was brutally simple: could Claude do this instead? The answer, more often than not, was yes — and the results changed how we work entirely.

What Claude Can Actually Do in 2026

The version of Claude available today is not the coding assistant you might remember from a couple of years ago that could write a React component if you were patient with it. In 2026, Claude builds production-grade Next.js applications from a brief, designs full Tailwind component systems with visual consistency, writes GROQ queries for Sanity CMS, configures CI/CD pipelines, audits accessibility, generates SEO metadata and structured data, and debugs runtime errors with the kind of reasoning that used to require a senior engineer.

Here is what we replaced with Claude in our studio workflow:

Figma — We now describe components in plain English and Claude generates the JSX with Tailwind CSS. For client-facing mockups we use Claude to produce a styled HTML file that renders in a browser. Not perfect for every use case, but it covers 80% of projects and the remaining 20% are handled with the free Figma tier.

Webflow — Replaced entirely by Next.js plus Sanity CMS, which Claude scaffolds end-to-end. The result is faster, cheaper to host, and fully owned by the client — no lock-in.

GitHub Copilot — Claude in the terminal with Claude Code handles everything Copilot did and then some. It works across the entire codebase, not just the file you have open, and it understands intent rather than just autocompleting syntax.

Linear and Notion — Claude writes the project brief, breaks it into tasks, and keeps a running context document. One chat thread replaces two SaaS subscriptions.

UI component libraries — Claude knows every major design pattern and generates bespoke components that match your exact design language rather than forcing you to fight against someone else's defaults.

Our Claude-First Workflow: From Brief to Live Site

Here is the exact workflow we now use at De Studio to take a project from client brief to live production website — almost entirely inside Claude.

Step 1 — Discovery and Architecture. We paste the client brief into Claude and ask it to produce a site map, component inventory, and data model. This used to take half a day in Notion and FigJam. It now takes 20 minutes and the output is consistently more structured.

Step 2 — Next.js Scaffold. Claude generates the full project structure: app directory layout, TypeScript config, Tailwind setup, ESLint rules, and initial route files. We use Claude Code so it writes directly to disk — no copy-paste.

Step 3 — Sanity Schema Design. We describe the content model and Claude writes every schema file, the studio configuration, and the GROQ queries. It even writes the TypeScript types that match the query projections.

Step 4 — Component Development. This is where Claude earns its keep most clearly. We describe each section — hero, services grid, testimonials, contact form — and Claude generates the full component with animation using motion/react, responsive breakpoints, and accessibility attributes baked in. We review, refine with follow-up prompts, and move on.

Step 5 — SEO and Performance. Claude writes the generateMetadata() functions, the JSON-LD structured data, the sitemap, the robots file, and suggests Core Web Vitals optimisations. This used to be a full day of work. Now it takes under an hour.

Step 6 — Review and Deploy. We push to GitHub, Vercel auto-deploys. Claude reviews the build output and flags any warnings. Done.

Total time to a polished, performant, SEO-ready website: three to five days depending on scope. Before this workflow it was two to three weeks.

The Real Numbers: What We Actually Saved

Let us be specific, because vague claims about saving money are everywhere and they rarely hold up to scrutiny.

Before our Claude-first workflow, our monthly tool spend looked roughly like this: Figma Professional ($45), Webflow CMS plan across active client projects ($80 to $120), GitHub Copilot ($19), Linear ($8 per seat), Notion ($16 per seat), Lottie Premium ($30), a UI component library ($29), stock photography ($25), and various smaller subscriptions totalling around $50. Grand total: approximately $300 to $620 per month depending on how many active projects were running.

After our Claude-first workflow: Claude Pro ($20), Vercel Hobby for personal projects (free, Pro at $20 when needed), GitHub (free for our use case). Grand total: $20 to $40 per month.

That is a saving of $280 to $580 per month — between $3,360 and $6,960 per year. For a small studio or solo freelance web developer, that is a meaningful number. It is the difference between a profitable month and a break-even month on a smaller project.

The less obvious saving is time. Switching between five tools to do what Claude does in one context window costs more in cognitive overhead than most people account for. Our estimate is that we save six to eight hours per project simply by keeping the work inside a single conversation.

What We Still Pay For (And Why)

Honesty matters here. This is not a zero-subscription utopia, and anyone claiming they run an entire business on one AI tool is either exaggerating or running a very simple operation.

We still pay for Vercel Pro when a client project needs team features or higher bandwidth — but the Hobby tier handles a surprising amount, and many clients host their own Vercel accounts after handover.

We still use Google Workspace for email. There is no AI substitute for a domain email address.

We still use accounting software. Claude can help structure invoices but it cannot file tax returns or sync with a bank account.

We still buy stock photography for clients who need it. Claude does not generate images, though multimodal models are closing this gap quickly.

We keep Figma on the free tier for the occasional client who insists on a design file handover. The free tier is genuinely usable for this.

The point is not that Claude eliminates every subscription. The point is that it eliminates the sprawling middle tier — the project management tools, the code assistants, the component libraries, the hosted CMS platforms — that were never truly essential but somehow became fixed costs anyway.

Your First Claude-Only Project: Where to Start

If you want to test this workflow without committing to a full process change, start with a single project and give Claude the following prompt at the very beginning:

"You are the technical co-founder of a web development studio. I am going to describe a website project. Your job is to: (1) produce a component inventory and page structure, (2) recommend a tech stack with justification, (3) identify the Sanity CMS content types we will need, and (4) list any third-party integrations required. Here is the brief: [paste your client brief]."

What you get back will typically be more thorough than anything a junior developer would produce after a full day of planning. From there, each step of the build has its own prompt pattern — component generation, schema design, metadata and SEO setup, deployment config — and you will develop your own library of effective prompts within two or three projects.

The subscription economy convinced us that more tools meant more capability. Claude is a useful reminder that the opposite is often true. A single, deeply capable tool used with intention beats a sprawling stack of mediocre ones every time. We are not going back — and we suspect you will not either once you try it.

If you want to see this workflow in action, the website you are reading right now was built exactly this way: Next.js, Sanity CMS, Tailwind, deployed on Vercel, and built almost entirely with Claude. The total monthly running cost, excluding Claude Pro, is zero.

TagsAI DevelopmentDesignDe Studio
Keep Reading

Related Posts

A11Y
A11y

May 15, 2026

Accessibility & Inclusive Design: Building Websites for Everyone

Over 1.3 billion people live with some form of disability. When your website fails accessibility standards, you are not just losing users — you are excluding them entirely. Here is everything you need to build truly inclusive digital experiences.

Read Post
UX
UX Research

May 13, 2026

Design Thinking & UX Methodology: The Complete Guide for 2026

Design thinking is not a buzzword — it is the structured process that separates products users love from products they abandon. Here is the complete methodology we follow at De Studio, from empathy mapping to high-fidelity prototyping.

Read Post
SECURITY
Web Development

May 9, 2026

Website Security Checklist: Protect Your Next.js Site in 2026

Most websites ship with zero HTTP security headers, open API endpoints, and unpatched npm vulnerabilities. Here is the complete security checklist we run on every De Studio project before it goes live.

Read Post
Let's Work Together

Ready To Transform Your Digital Presence

Let's build something remarkable together. Book a free discovery call and find out how we can help you design and develop a product your users will love.