Devoured - April 28, 2026
Thoughts and Feelings Around Claude Design (5 minute read)

Thoughts and Feelings Around Claude Design (5 minute read)

Design aitoolingfrontend Read original

A designer argues that Figma's complex proprietary system is becoming obsolete as AI tools like Claude Design make it easier to work directly in code than through design abstractions.

What: An opinion piece predicting that design tooling will split into two paths: AI-powered code-first tools (like Anthropic's new Claude Design) that eliminate the gap between design and implementation, and pure creative exploration tools free from system constraints.
Why it matters: This represents a potential paradigm shift in designer workflows—Figma's proprietary format excluded it from LLM training data while models learned code, and as AI makes coding increasingly accessible to designers, the traditional "design file as source of truth" model may become a bottleneck rather than an advantage.
Takeaway: Designers working in product teams should evaluate whether AI-assisted code tools like Claude Design could replace their Figma-based workflow, especially if they're spending significant time maintaining complex design systems.
Deep dive
  • Figma's rise required building baroque infrastructure (components, variables, props, modes) to systematize design at scale, creating complexity so unwieldy that entire roles now specialize in managing the system itself
  • Figma's locked-down file format accidentally excluded it from AI training corpora—LLMs learned code instead, never understanding Figma's proprietary primitives
  • As AI makes code progressively easier to write, working directly in the implementation medium (HTML/JS) becomes more efficient than maintaining a "lossy approximation" in design tools
  • The author's team already experiences pain back-porting code changes to Figma; even Figma's own design system files show 946+ color variables, deeply nested aliasing, and components with 12+ variants
  • Debugging issues requires tracing through multiple layers: component → variable → aliased variable → mode → instance override → nested component → library swap
  • Claude Design takes the opposite bet from Figma Make—it's "HTML and JS all the way down" with no pretense that design files are canonical
  • The integration advantage: Claude Design can dump directly into Claude Code and vice versa, collapsing the traditional design-to-implementation friction into a single conversation
  • Figma Make primarily benefits users already committed to the Figma ecosystem, reading from Figma styles and proprietary formats while still treating the design file as source of truth
  • The author predicts a second tool category will emerge: pure exploration environments for high-fidelity creative work without system constraints or CSS limitations
  • This mirrors Figma's own disruption of Sketch in 2016, but the question has reset: "who can help me, a designer, get my ideas out fastest?"
Decoder
  • Source of truth: The canonical version of a design—historically debated between design files (Figma) and implemented code
  • Design system: Reusable components, styles, and rules that ensure visual consistency across a product, often requiring extensive maintenance
  • Props/Variables: Configurable parameters that let designers customize component instances without creating entirely new components
  • Agentic era: The current phase where AI agents can autonomously write and modify code based on natural language instructions
  • Truth to materials: An Arts and Crafts philosophy that objects should honestly express their construction rather than pretending to be something else
Original article

I tried Claude Design yesterday and I have a theory for how this whole thing shakes out.

As product teams scaled and design needed to justify itself inside engineering orgs, it was pushed toward systematization — and Figma invented its own primitives to make that work: components, styles, variables, props, and so on. Some concepts are borrowed from programming, some aren't, and the whole thing doesn't neatly map onto anything. Guidance evolves, migrations pile up, and if you want to automate any of it you're stuck with a handful of shoddy plugins. The beast is hairy enough that entire design roles now specialize in wrangling the system itself.

There's always been a tense push-pull between Figma and code over what the source of truth should be. Figma won over Sketch partially by staking its claim there — their tooling would be canonical.

That victory had a hidden cost. By nature of having a locked-down, largely-undocumented format that's painful to work with programmatically, Figma accidentally excluded themselves from the training data that would have made them relevant in the agentic era. LLMs were trained on code, not Figma primitives, so models never learned them. As code becomes easier for designers to write and agents keep improving, the source of truth will naturally migrate back to code. And all the baroque infrastructure Figma had to introduce over the past decade will look nuts by comparison. Why fuss around in a lossy approximation of the thing when you can work directly in the medium where it will actually live? If we want to make pottery, why are we painting watercolors of the pot instead of just throwing the clay?

At work, we've spent quite a bit of time back-porting design changes made directly in code back to Figma and it is not fun. I can't share that file, but for a fair comparison, this is Figma's own design system file for their product. I have to assume it was built by the most competent design system team you can find. And yet…

The Figma variables panel showing 946 color variables organized into nested groups like "bg/desktopBackgrounded," with a single selected variable revealing eight mode-specific values: Light, Dark, FigJam-Light, FigJam-Dark, DevMode-Light, DevMode-Dark, Slides-Light, and Slides-Dark.
A modal footer component open to its variant property editor, showing 12 variants with a dropdown full of values like "DS Library Swap," "QA Plugin," "Growth Stepper," and "Sharing Actions." The right panel lists eight props like "Border," "Second CTA," and "Helper Text"
The effect styles panel for a slider component, showing a style named "light/elevation-300-tooltip." Expanding it reveals its entire definition: a 0.5px drop shadow at 30% black. It has its own named style because that's the only way to document what CSS variable it corresponds to.
A combo input component with 16 variants. Its children in the layers panel are named things like "Default, Default, Close Button=False" and "Default, Focused, Close Button=True"

These are Figma's own files. Built by their own team. This is the gold standard.

Imagine debugging a color that looks wrong. You check the component. The component uses a variable. The variable is aliased to another variable. That variable references a mode. The mode is overridden at the instance level. The instance lives inside a nested component with a library swap applied. At this point, you're either considering picking up code or moving to the countryside and becoming a sheep farmer because one more minute of this will make you lose your goddamn mind.

So as the source of truth shifts back to code, Figma is left in an odd spot: holding a largely manual, pre-agentic system that nobody in their right mind would design from scratch today.

I think design tooling forks into two distinct shapes from here — and there's almost a clock resetting between Figma and every other tool competing to answer the same question they answered in 2016: who can help me, a designer, get my ideas out fastest?

Spoiler: it's not Figma Make. Figma Make feels like it primarily benefits people who have already drunk the Kool-Aid — it reads from Figma styles, component libraries, and proprietary props (or, as I like to call them, Prop Props), and it's the only tool in this new landscape still pretending the design file is canonical. It's the tool for people who want to (or have no choice but to) stay inside the system.

Claude Design is the first of those two tools, and takes the opposite bet. There's an Arts and Crafts principle called "truth to materials" — the idea that a thing should be honest about what it is and how it's made, rather than masquerading as something else. Figma ended up being the opposite of this: a set of extremely rigid schemas with a free-form "just vibes, man" costume over the top. Like a Type-A personality physically incapable of relaxing, forced to perform chill while internally screaming that your frames aren't nested and your tokens are detached and nothing is on the grid. Claude Design, for all its roughness, is at least honest about what it is: HTML and JS all the way down.

A Gustav Stickley lamp table, circa 1902. The joinery is exposed, not hidden. The wood is the wood.

And it has a massive structural advantage: its sibling is Claude Code. Eventually, I can see Claude Design just dumping things directly into Claude Code and vice versa. Claude Design's onboarding already lets you import your repos. The feedback loop between design and implementation — which has been a source of friction since the beginning of time — becomes a single conversation.

The other tool that emerges from this moment will have no expectation of code at all. It'll be a pure exploration environment — somewhere to drop rectangles, stack layer styles, fuss with blend modes and gradients, and go completely nuts, unconstrained by systems or prompting conventions. Maybe it's an iPad app with Pencil support where you just quickly sketch a bunch of rectangles. 37signals could do something really funny right now. Or maybe it goes in the opposite direction — something more like Photoshop that goes all-in on high-fidelity compositing and lets our imaginations run wild, now that we're no longer beholden to the ceiling of what you can do with CSS effects. Doesn't it seem kinda weird how for 90% of its life, Figma's only layer effect was a drop shadow or a blur?

Figma's Sketch moment is rapidly approaching. And if you said that sentence to a Victorian child, they would probably have a stroke.

Post Script

The following are messages meant only for the teams behind Sketch and Figma. If neither apply to you, you can skedaddle.

To Figma: I can see a world where this post does numbers in the Figma internal Slack. If that's the case and you're reading this from Figma: this wouldn't have happened if you hired me last year when I was interviewing. Your loss, big dawg.

To Sketch: GET YOUR HEADS OUTTA YOUR ASSES AND GIVE EM HELL. ADD PARTICLE EFFECTS. ADD DEBOSSING EFFECTS. MESH TRANSFORMS. FUCK IT, ADD METAL SHADERS. GO NUTS. STOP COASTING OFF OF BEING MAC NATIVE. QUIT DRINKING COCOA AND GET THIRSTY FOR BLOOD.

To mom: Sorry for cursing.

Post-Post Script

@jonnyburch on Twitter shared a link to their blog post with similar thoughts, it's quite good if you wanna go deeper.