How We Built This Entire Site with Claude Code

The premise

We're a Claude AI deployment studio. We help manufacturers and mid-market companies integrate Claude into their operations. So when it came time to build our own website, using Claude to build it felt less like a marketing stunt and more like an obvious decision.

The tool we used was Claude Code — Anthropic's CLI agent for software development. Not the web chat interface at claude.ai. Claude Code runs in your terminal, reads your codebase, writes files, runs commands, and commits to git. It operates on your actual project, not in an isolated sandbox.

The workflow looked like this: we would describe what we wanted, Claude Code would write the components, we'd review the output in the browser, screenshot anything that needed fixing, and Claude Code would iterate. The entire site — Next.js 16, Tailwind CSS v4, D3.js, deployed on Vercel — was built this way. Every commit in the git history was authored through Claude Code sessions.

This post walks through the major features and what it was actually like to build them.

The hero: a WebGL globe

The first thing visitors see is an interactive 3D globe rotating slowly on the hero section. It's rendered with WebGL, plots geographic points representing global reach, and supports smooth 60fps rotation.

Building a globe from scratch is a non-trivial task. You need sphere geometry, projection math, mouse interaction handlers, and performance optimisation to keep frame rates smooth on lower-end devices. We described the visual we wanted — a minimal, light-themed globe with country outlines and pin markers — and Claude Code generated the component, including the WebGL setup, the GeoJSON parsing, and the animation loop.

The first version had clipping issues where the globe would get cut off by its container's overflow-hidden. We screenshotted the problem, described it, and Claude Code fixed it by restructuring the container hierarchy. The pin labels weren't rendering at the right scale on mobile. Another screenshot, another fix. This back-and-forth was the pattern for the whole project: describe, generate, review, screenshot, refine.

The Cowork demo

This was the most ambitious section. We wanted to show what Claude looks like when it's actually working inside a manufacturing context — not a generic chat window, but something that communicates the depth of what's possible.

The result is an interactive replica of Claude's Chat/Cowork UI from claude.ai, adapted for Settle's light theme and contextualised for manufacturing. It features tab switching between a BOM Template, a Vendor RFQ, and an SAP Connector. Each tab has its own content. Hovering over elements reveals tooltips. An animated progress panel shows deployment status with blur effects.

The implementation started from Anthropic's actual login page source code. We gave Claude Code the reference HTML and asked it to port the layout into React components, swap the dark theme for our warm parchment palette, and replace the generic content with manufacturing-specific artifacts. The tab switching, hover states, animated progress bars, and backdrop blur effects were all generated in a single session.

The trickiest part was getting the blur and layering right. CSS backdrop-filterbehaves differently depending on stacking context, and the initial output had z-index conflicts that made certain panels render on top of the navigation. Claude Code resolved it by restructuring the component tree and isolating the blur layers into their own stacking contexts. That kind of CSS debugging — where the fix requires understanding how the browser composites layers, not just tweaking a number — is exactly the sort of thing you'd normally spend an hour on Stack Overflow for.

The D3 force-directed mindmap

The Services section needed to communicate that our offering spans four categories, each with multiple specific capabilities. A static list would work but wouldn't be memorable. We wanted something interactive.

The solution was a D3 force-directed mindmap: a central node with four category branches, each branching into four child nodes, for a total of 16 hoverable capabilities. Hovering over a child node shows a tooltip describing that capability. And here's the detail that ties the section together: hovering over a service card on the left side of the page highlights the corresponding category branch on the mindmap.

D3 force simulations involve configuring charge forces, link distances, collision radii, and tick handlers that update SVG positions on every animation frame. The initial prompt described the data structure (four categories, four children each, with descriptions) and the desired interaction pattern. Claude Code produced the full D3 setup: force simulation configuration, SVG rendering, hover handlers, tooltip positioning, and the cross-component highlighting that connects the cards to the graph.

The original design was inspired by Anthropic's product page, which uses a similar graph visualisation. We repurposed the concept with Settle's service categories and let Claude Code handle the D3 implementation details. Force-directed layouts are notoriously finicky — nodes overlap, labels collide, the simulation either converges too fast or oscillates indefinitely. Getting the parameters right took several iterations, but each iteration was just a sentence of feedback and a new render from Claude Code.

SEO infrastructure

SEO is one of those areas where the work is invisible when done right. We needed comprehensive structured data, crawler rules, and performance optimisation — the kind of work that's tedious but essential for a new site competing for search visibility.

Claude Code set up the entire SEO stack:

• JSON-LD schemason every page — Organization, Service, FAQPage, Article, and BreadcrumbList types, each with the correct properties and nesting.
• FAQ with FAQPage schema— built with native HTML5 <details>/<summary> elements for the accordion, with structured data that qualifies for Google rich results.
• robots.txt with AI crawler rules— standard search engine directives plus explicit rules for AI training crawlers.
• XML sitemap with all pages and correct priorities.
• Open Graph and Twitter card metadata on every page.
• Security headers configured in the Next.js middleware.

The structured data alone would have taken hours to write manually and debug against Google's validator. Claude Code generated all of it from a description of our pages and services, and updated it whenever we added new content.

The blog system

This blog you're reading is the sixth post on a system that Claude Code built from scratch. Each post is a standalone Next.js page with full Article schema, BreadcrumbList markup, Open Graph metadata, and cross-links to related posts. The blog index page pulls from a posts array and renders cards with tags, dates, and descriptions.

We deliberately chose not to use a CMS or MDX. Each post is a TSX file with prose content. This keeps the system simple — no build pipeline for content, no API calls, no database. Claude Code generates each post as a component that follows the established pattern, including the metadata export, the JSON-LD script tags, and the prose styling.

Adding a new post means creating a directory, writing the page component, adding an entry to the index, and updating the sitemap. Claude Code handles all four steps in a single session.

Performance work

Performance wasn't an afterthought. Claude Code handled the optimisation passes that make the difference between a site that feels fast and one that feels sluggish:

• WebP image conversion— the original assets totalled 3.5MB. After conversion, 1.3MB. Claude Code identified the largest files, converted them, and updated all references.
• Lazy loading— images below the fold use loading="lazy" with explicit width and height attributes to prevent Cumulative Layout Shift.
• Explicit image dimensions — every <img> tag has width and height set, so the browser can allocate space before the image loads. This is a small detail that most AI-generated code misses.

These are the kinds of details that separate a proof-of-concept from a production site. Claude Code applied them consistently across every image and component because we could describe the rule once and it would follow it everywhere.

What the workflow actually felt like

Building a site this way is different from traditional development, but not in the way most people assume. It's not “type a prompt and get a website.” It's closer to pair programming with an extremely fast partner who has read every documentation page but needs visual feedback to get the details right.

The cycle was tight: describe a feature, review the output, screenshot the issues, get a fix. Most features went through three to five iterations before they were right. The globe needed clipping fixes. The Cowork demo needed z-index restructuring. The mindmap needed force parameter tuning. None of these were first-try successes — but each iteration took minutes, not hours.

Claude Code also handled the operational work that usually slows projects down: git commits with meaningful messages, sitemap updates when new pages were added, metadata consistency across all pages, and the Vercel deployment configuration. The entire git history of this project is Claude Code sessions.

The biggest advantage wasn't speed, though speed was significant. It was scope. A solo designer could build a site with a WebGL globe, D3 force simulations, production-grade SEO, and interactive demos — features that would normally require a frontend developer, a data visualisation specialist, and an SEO engineer. Claude Code compressed that team into one terminal window.

What this means for our clients

We built Settle's site this way because it's what we do for our clients, just at a different layer. We deploy Claude into manufacturing operations — writing the instructions, structuring the knowledge files, mapping the workflows. The principle is the same: Claude is remarkably capable when you give it the right structure and context.

For our clients, that structure is instruction engineering and workflow mapping. For this site, it was a well-configured Claude Code environment with clear visual feedback. In both cases, the value isn't in the AI itself — it's in knowing how to direct it.

The site you're reading this on is the proof. Every pixel, every animation, every schema tag. Built in Claude Code.