Most stories about building with AI start with code. Someone asks an LLM to generate a component, marvels at the output, ships it. This one started differently. The site was finished before I wrote a single line of code. Not the site itself – but the picture of it. Brand guide, color palette, typography, tone of voice, content strategy. All developed in conversation with Claude, from a logo and a few sentences about what the site should feel like.
That’s the part that surprised me.
The brand guide conversation
What I actually gave Claude wasn’t much. An existing logo and a handful of guidelines. Direct, calm, practical. Scandinavian feel. Show competence through work, not claims.
What came back was a complete brand system. Heading typeface, body typeface, monospace for code. An 11-color palette with specific distribution ratios – 70% light backgrounds, 20% dark primary, 7% accent yellow, 3% green for success states. Voice guidelines. Content strategy. Even the lead magnet approach and newsletter cadence.
I didn’t prompt once and accept the output. It was iterative. I reacted, adjusted, pushed back. “Too cold.” “The headings need more personality.” “The positioning is too generic.” Each round got closer. The process felt less like using a tool and more like working with a designer who listens well.
The key insight: I knew what I wanted but not how it should look. I had direction. Claude had the ability to give it shape. That combination – clear intent plus iterative dialogue – is what made it work.
Architecture that absorbs a brand
The project had a technical head start. I’d already built a WordPress starter kit for a different project – 20 custom blocks, a modular plugin with 8 features, a child theme. Everything built with CSS custom properties instead of hardcoded values. The idea was that the entire architecture could be rebranded by changing three files.
This site was the first real test of whether that theory held.
Here’s where it gets interesting. The brand guide that Claude produced fed directly into those three files. Color codes went into theme.json. Typography into the theme export. Fallback values updated across 22 CSS files. Every var(--theme-palette-color-3, #1A2A3A) in the codebase points to a palette slot – change the palette, every block adapts.
The 20 existing block templates didn’t need a single edit. The plugin modules stayed untouched. Only the visual layer changed.
The theory held.
Building with CLAUDE.md
With the brand in place, I built 14 new site-specific blocks using Claude Code. Homepage hero, lead magnet section, contact page, blog archive components. Plus rebranding the 20 inherited blocks.
The unlock was a CLAUDE.md file – 500+ lines describing the entire project architecture. File structure, naming conventions, CSS variables, coding standards, plugin ecosystem. Instead of re-explaining the architecture in every session, Claude Code reads that file and immediately knows where files go, which patterns apply, how output should be escaped.
This changed the dynamic completely. Without it, every session started with twenty minutes of context-setting. With it, Claude Code understood the project from the first message.
This is what “AI-assisted development” actually looks like in practice. Not “write me a website.” More like: I described what a block should do, what fields it needed, how it should behave on mobile. Claude Code generated the template, styling, and JavaScript. I reviewed, tested, gave feedback. Next iteration.
One example: the homepage hero. I described a two-column layout with headline, subtitle, dual CTAs, and a visual element. Claude Code built it with support for inline emphasis tags in the heading (so individual words pick up the accent color), a toggle between centered and two-column layouts, and an animated floating SVG with CSS keyframes. Would have taken me a full day manually. With AI as co-builder, it was one session.
Another: the lead magnet block. Left column with headline, bullet points, and an email signup form. Right column showing a preview of a checklist – with parts blurred to create curiosity. Small details. But details that separate “functional” from “considered.”
Total across the project: 14 new blocks from scratch, 20 rebranded, 2 new plugin modules, 7 performance optimizations, 4 major bug fixes.
What broke
Things broke. Multiple times.
CTA buttons lost their text color on hover – invisible text against a yellow background. The cause: <a> elements don’t inherit color on hover by default. Simple once you know why. Affected four blocks.
Form fields had inconsistent heights across pages. CSS specificity wars where block-level !important rules overrode the global fix. The solution was ugly – more !important declarations – but necessary when a third-party plugin already uses !important everywhere.
Image blocks crashed repeatedly because the code accessed $image[0]['url'] when the framework returns image data directly as $image['url']. A subtle difference that broke three blocks before the pattern was documented.
And the editor got slow. Every field change triggered a full server-side re-render of all blocks on the page. Form blocks executed complete rendering pipelines. Blog blocks ran database queries. Every keystroke cascaded into unnecessary operations. Fixing it required editor guards, disabled loading for heavy blocks, and externalized scripts.
AI helped debug faster. But the problems still required understanding why something failed – not just what was wrong.
The actual insight
The code wasn’t the hard part. The decisions were.
The brand guide – the conversation that happened before any code was written – shaped everything that followed. Without that foundation, the coding would have gone just as fast. But the result would have been a site that looks good without meaning anything.
AI accelerates execution. But execution without direction is just faster chaos. The value wasn’t created by Claude generating code or color palettes. It was created by knowing enough about what I wanted to steer the conversation.
The starter kit architecture works. The rebranding thesis proved out. Change three files and everything adapts. But none of that matters without the brand conversation that came first – the iterative back-and-forth that turned a logo and a few sentences into a system with actual intent behind it.
That’s the part most AI-and-code stories skip.
