---
title: Pixel Pushing, Redux
date: 2026-04-24T11:51:14Z
modified: 2026-04-28T11:52:35Z
permalink: "https://dgw.ltd/2026/04/24/pixel-pushing-redux/"
type: post
status: publish
excerpt: Claude Design dropped on a Friday. I played. This site redesign is the result — some time over the weekend, £23.84, and a lot of thoughts about design systems, source of truth, and whether the tension between design and engineering has really gone anywhere.
wpid: 942
categories:
  - AI
  - Code
  - Design
---

[Claude Design](https://www.anthropic.com/news/claude-design-anthropic-labs) 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

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. Structure in, structure out. Slop in, slop out.

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 — and tracking down the cause isn’t always straightforward. Figma has moved [closer to web conventions](https://www.figma.com/blog/line-height-changes/) over time, but the gap hasn’t fully closed. And it probably won’t, becuase 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.

## The design process

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 — built over years, `theme.json` with spacing scales, typography, colours and components, 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 — and 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 isn’t just a Claude Design problem. It’s the problem of dropping any new tool into an existing system and expecting a clean fit.

## The implementation grind

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.

This was not trivial. Even with a plan, it took several sessions before there was a reliable roadmap.

Here are some of the rules we landed on:



| Need | Choose | Example |
| --- | --- | --- |
| Compose core blocks, no dynamic data | **Pattern** (`patterns/*.php`) | `dgwltd/cta-dark-contact`, `dgwltd/feature-agent-readable` |
| Repeater fields or per-instance dynamic logic | **ACF block** | `meta-strip` (repeater), `services-ledger` (repeater) |
| Semantic HTML core blocks can’t emit (`<dl>`, `<ol>`, `<article>`, `<figure>`) | **ACF block** | `case-study` emits `<article>` |
| Presentation swap on an existing block, no content change | **`is-style-*` variant** | `is-style-editorial` on `acf/dgwltd-hero` |
| Small reusable chrome applied via class | **Utility 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 isn’t nice-to-have, it’s 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

As with all these experiments, some of the implementation is massively faster — 5x, 10x. But the setup, planning, testing, editing and tweaks take up to 5x, 10x more. The 80/20 rule is flipped.

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 am genuinely impressed, and genuinely happy with the design — fast iteration and ideation from something that was quite plain before.

That tension between design and engineering — PSD slicing, pixel pushing, consultants promising features the system doesn’t support — hasn’t gone anywhere. 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. It’s just wearing different clothes now. Claude Design might well earn a place in that workflow. But only if you bring the architecture with you.