Pixel Pushing, Redux

Redesigned dgw.ltd in Claude Design over a weekend for £23.84. Implementation runs 10x faster; planning, testing and rework run 10x slower. The 80/20 is flipped, and the handoff is the new bottleneck. Claude Design dropped on a Friday. Anthropic have form for that. I played. This site redesign is the result. Who is this aimed at? It’s not a stretch to suggest Figma. One of Figma’s board members (also an Anthropic employee) resigned three days before the Claude Design launch. Figma’s stock dropped several percent on the press release. Anthropic’s pattern is becoming clear: Claude Code for software engineers, Claude Cowork for knowledge workers who don’t want or need the terminal, Claude Design for designers who don’t want or need to code. Workflow, workflow, workflow Structure in, structure out. Slop in, slop out. The first thing Claude Design asks on launch is to import or point to a design system. The first question. LLMs crave context to deliver better results: ingest a JSON file or a Markdown doc and it’s like catnip. Back to Figma, and what looks like a missed opportunity around structured workflows. Exporting design tokens from Figma is still awkward. Proper design system support still requires plugins, which maybe is fine as a community-led approach, but it feels like it should be first-class. People talk about Figma as the source of truth, but without token export and import built in, that truth is harder to maintain than it should be. Developer mode is a paid add-on. On source of truth: there’s a long-standing gap between how designers measure type and how the web renders it. It’s subtle, but it means a design can look right in the file and slightly off in the browser. Tracking down the cause isn’t always straightforward. Figma has moved closer to web conventions over time, but the gap hasn’t fully closed. And it probably won’t, because Figma is not a browser. If web constraints are the more realistic representation of truth, why can’t we better load design systems into Figma, and export them back out? WordPress’s theme.json defines spacing scales, typography, colours, components. Shouldn’t I be able to load that into Figma, or export from Figma to theme.json? When building a component, shouldn’t I be bound by those imported constraints? Claude Design hands off to Claude Code, Canva, or exports to various formats. It’s a pipeline. Figma isn’t, not really. Token in, token out Claude Design is a little shonky in places and a significant paradigm shift. There’s no nudging, no delete key. Want to remove a component? That’s a prompt. Adjust something? That’s a prompt. You can edit and draw directly, but the primary interaction is prompting, via the main chat or by commenting on specific elements. Design by natural language processing. I burnt through my token allocation within a couple of pages. I’m not entirely sure it fully ingested my design system, or whether it replicated it fresh on each page. I fed it my existing theme: theme.json with spacing scales, typography, colours, components, plus a live stylebook, logos, patterns. Around 500 lines of JSON and a handful of CSS stylesheets. About as comprehensive as I could make it. Some changes were token-inefficient: a colour change that should have been a one-line token edit got applied nine times as raw hex across nine files. Some work went down rabbit holes that ended up partially stripped out. I used some complimentary usage from Anthropic and spent an additional £23.84 to complete the redesign. Some of that rework happened because the prototype layer reinvented the system in its own image rather than referencing the source. A consequence of briefing the tool on the output without enforcing the contract. That’s fixable. The pattern worth repeating: bring a real, opinionated system, brief the tool on the concept you’re selling, and let composition happen inside the constraints. Narrow through conversation. But here we are with a new website and I am pretty happy with it. Some time over the weekend and £23.84. It sure does love a pulsing dot. The handoff problem In the end this was more of a product demo than a design system build. That’s the right framing. The foundation was already there: theme.json, a live stylebook, 25 years of knowing what a system needs to do. The tool composed; I brought the architecture. Not entirely unlike Figma, where the file-vs-source-of-truth question never quite goes away. Claude Design hands off to Claude Code. But to do what, exactly? Build static HTML? That would be trivial but not really helpful in my setup. My site is hosted on WordPress, so this needs to integrate. Ah. My setup is pretty opinionated. After 22 years (!!) as a WordPress developer I have accumulated a lot of strong feelings about how to do things. I’m all in on the block editor, but not full site editing. I control the stack: a custom theme, a custom plugin handling core functionality, custom block patterns, custom blocks, block variations. As well as years of accumulated best practice. I wasn’t going to let a rogue approach undo any of that. Crucially, I have a design system in the form of theme.json, and since we used it to create the design, it had to remain the source of truth going forward. That’s my choice, and I own it. But most businesses don’t get to choose from scratch. They inherit a CMS, a codebase, a set of constraints accumulated over years. The handoff problem belongs to any new tool you drop into an existing system. The implementation grind Even with a plan, it took several sessions before there was a reliable roadmap. So we (myself and Claude) went into a detailed planning session with some strict rules. Use block patterns for content; ACF blocks or block variations where block-level settings are needed. Here are some of the rules we landed on: NeedChooseExampleCompose core blocks, no dynamic dataPattern (patterns/.php)dgwltd/cta-dark-contact, dgwltd/feature-agent-readableRepeater fields or per-instance dynamic logicACF blockmeta-strip (repeater), services-ledger (repeater)Semantic HTML core blocks can’t emit (,

, ,

)ACF blockcase-study emits Presentation swap on an existing block, no content changeis-style-

variantis-style-editorial on acf/dgwltd-heroSmall reusable chrome applied via classUtility class in _editorial-accents.scss.dgwltd-eyebrow-pill, .dgwltd-plus-list, .dgwltd-feature-tags Default to pattern. Escalate to ACF block only when repeater fields or a semantic element justify it. Semantic fit is a second, independent reason. On a GEO-positioned site, idiomatic markup is the product. Block Bindings (WP 6.5+) let a pattern render per-post data without a custom block. Use when data is per-post, rendering is simple attribute substitution, and the markup doesn’t need a specific semantic element. Don’t use for repeaters (unsupported) or when you need conditional render logic. Onwards. This enabled much faster development. The tendency was to create each component as a unique pattern, even when many shared similar structures, so we needed another round of discussion to ensure components could be delivered via shared blocks: block styles on a hero component rather than hero-about, hero-blog, hero-team. After that it really sped up. I even created a custom linter for the patterns, because various edits would quietly break them. The verdict The 80/20 is flipped. Some of the implementation is massively faster: 5x, 10x. But the setup, planning, testing, editing and tweaks take 5x, 10x more. I spent a lot of time in CSS. Either I disagreed with the Claude Design output, or the Claude Code output bore no resemblance to it. We’re trying to smush one method of defining a design system into another. Sure, you can say your design system is sovereign, living in Figma, but is it? Ownership is traded off between systems. If you don’t bring the people and the tools along, it’s self-enclosed and self-referential. I’m impressed, and happy with the design. Fast iteration from something that was quite plain before. That tension between design and engineering hasn’t gone anywhere. PSD slicing, pixel pushing, consultants promising features the system doesn’t support: different clothes, same problem. I’ve been watching it since 1999: fine art degree, first web job, then variously a developer, UX designer, workshop facilitator and everything in between. Claude Design might well earn a place in that workflow — but only if you bring the architecture with you.