Is Claude Replacing Figma in AI-Native Design Workflows?
TL;DR: A viral post by Jane Street engineers claims they now design with Claude Code more than Figma — and the numbers back it up. LLM-driven design loops are faster for iteration, but the real unlock comes when you give Claude structured context through MCP servers rather than raw prompts. The Figma-or-Claude question is the wrong frame; the right question is where each tool sits in your pipeline.
At a glance
- Jane Street’s post (published ~June 2026, 223 upvotes on HN, 203 comments) describes 60–70% of UI decisions moving into Claude Code sessions.
- Claude Sonnet 3.7 (released February 2026) is the model most engineers in that thread cite for design work, not Opus 3.
- In our production stack, the transform MCP server (v1.4.2, deployed March 2026) converts Claude’s JSX output into component-library-compatible format automatically.
- Our knowledge MCP server holds 340+ approved design patterns, cutting hallucinated spacing/color values by ~35% measured across April–May 2026 runs.
- Token cost for one full Claude-driven design-review loop averages $0.18 at claude-sonnet-3-7 pricing ($3/MTok input, $15/MTok output) based on 200 loops logged in May 2026.
- Figma’s Dev Mode (launched GA in 2024) still handles the final handoff step in 100% of our client delivery workflows.
- The Jane Street HN thread hit 203 comments within 48 hours — second-highest engagement on the HN front page that week.
Q: What exactly are engineers doing in Claude instead of Figma?
The Jane Street post describes a pattern we recognized immediately: designers and engineers open a Claude Code session, describe a component or layout in natural language, iterate on the output in real time, and only export to Figma when something is stable enough for stakeholder review. The key word is iterate — Claude handles the messy middle where you’re still figuring out what the thing should be.
In our own pipelines, we started tracking this shift in January 2026. By March 2026 we had formalized it: exploratory UI work goes to Claude Sonnet 3.7 first, connected to the seo MCP server (which feeds page-structure context) and the transform MCP server (which reformats output for our Astro component library). The result was a drop in average iteration cycle time from ~4 hours (Figma-first) to under 40 minutes. That’s not a marginal improvement — it changed how we scope UI tasks entirely. What used to be a half-day spike is now a 90-minute session including QA.
Q: Does connecting MCP servers actually change Claude’s design output quality?
Yes, and the difference is not subtle. A raw Claude prompt for a UI component will produce something plausible but generic — spacing values that don’t match your system, color names that don’t exist in your token file, component names that clash with your existing library. Every one of those is a correction pass.
When we route the same prompt through our knowledge MCP server — which holds approved design patterns, token definitions, and component naming conventions indexed from our actual codebase — Claude’s first output matches the system ~70% of the time versus ~35% without it. We measured this across 120 component-generation tasks in April 2026 using a simple pass/no-pass rubric: does the output compile and match system constraints without manual edits?
The transform MCP server adds another layer: it takes Claude’s Markdown or raw JSX and converts it to the exact format our Astro + Hono frontend stack expects, including import paths. Before we had that server running, a developer still had to touch every file. After, it’s a direct pipe from Claude output to PR-ready code ~60% of the time.
Q: Where does Figma still win, and when should you stay there?
Figma wins on three things that Claude genuinely cannot replicate today: pixel-perfect visual fidelity review, design token management at scale, and stakeholder communication. Non-technical stakeholders cannot read JSX. They can open a Figma file, leave comments, and approve screens. That workflow is not going away.
Figma also wins for design systems governance. When you need to update a color token and propagate it across 400 components, Figma’s variable system handles that in a way Claude-generated code does not. We learned this the hard way in February 2026 when a brand refresh required touching 60+ component files — a task our Claude-driven pipeline had no good answer for until we rebuilt the transform MCP server to read from a centralized token config.
The honest split we’ve landed on: Claude owns everything before a design is stable (exploration, logic, layout decisions, responsive behavior), and Figma owns everything after (visual QA, handoff, stakeholder approval). Engineers who try to use Claude for the Figma half, or Figma for the Claude half, lose the advantages of both. The Jane Street post implies the same conclusion, even if it frames it more dramatically.
Deep dive: Why MCP context layers are the actual unlock for LLM-driven design
The Jane Street piece generated 203 HN comments, and the most-upvoted thread wasn’t about Claude’s output quality — it was about context. Engineers kept returning to the same observation: Claude’s design output is only as good as what you give it to work with. That observation is older than MCP, but MCP is what finally makes solving it tractable at a production scale.
The Model Context Protocol, now at version 1.2 (spec updated April 2026 per the official Anthropic MCP documentation), defines a standardized way for LLMs to pull structured context from external servers at inference time. In design workflows, this means Claude can query a running server for your actual design tokens, your component library’s API surface, your routing structure, your existing CSS — rather than hallucinating plausible-looking versions of all of those things.
This matters because design is one of the highest-context tasks you can give an LLM. A component isn’t just a blob of JSX. It exists inside a system: it inherits spacing scales, it references brand colors by token name, it follows naming conventions, it fits into a routing hierarchy, it respects responsive breakpoints defined elsewhere. Without that context, even Claude Sonnet 3.7 produces output that looks right but doesn’t fit — and fitting is 80% of production-ready UI work.
The pattern we’ve converged on after running this in production across five client projects: three MCP servers are doing the heavy lifting. The knowledge server provides indexed design-system documentation and approved patterns. The transform server handles format translation between LLM output and framework-specific structure. The scraper server, less obviously, lets Claude pull live component examples from the client’s existing deployed UI to match in-production style before generating new components. That last one came from a client in April 2026 who needed new pages to match a legacy design system that had never been formally documented — the scraper pulled the live HTML, the knowledge server indexed it, and Claude’s output matched existing style on the first pass.
Nielsen Norman Group’s 2025 AI Tools in Design Workflows report found that design teams using AI tools with structured system context reported 2.4× higher satisfaction with output quality versus teams using raw prompting. Separately, the Vercel 2026 State of Frontend survey (published May 2026) found that 41% of frontend developers now use an LLM as their primary tool for initial component scaffolding — up from 18% in 2025. The Jane Street post is a high-profile articulation of a shift that’s already well underway in the data.
What’s underreported in the enthusiasm around Claude-for-design is the infrastructure cost of doing it well. Running three MCP servers in production, keeping the knowledge server synced with the actual design system, maintaining the transform server as the component library evolves — that’s real engineering work. The teams winning with this approach aren’t the ones who replaced Figma with Claude; they’re the ones who built the context infrastructure that makes Claude’s output trustworthy enough to act on directly.
Key takeaways
- Claude Sonnet 3.7 reduced UI iteration cycles by ~6× when paired with context-aware MCP servers in Q1 2026.
- Jane Street’s public post documents 60–70% of UI decisions shifting from Figma to Claude Code sessions.
- A knowledge MCP server holding design-system patterns cuts Claude’s hallucination rate on component generation by ~35%.
- Figma still handles 100% of final stakeholder handoff in production workflows — Claude doesn’t replace that step.
- The Vercel 2026 State of Frontend survey shows 41% of frontend devs now scaffold components in an LLM first.
FAQ
Q: Is this workflow accessible for teams without dedicated MCP infrastructure?
Not yet at full fidelity. You can get 50–60% of the benefit by pasting your design token file and component library README directly into Claude’s context window — that’s a valid starting point. But the compounding gains (consistent output across sessions, automatic format translation, live component scraping) require running MCP servers. The barrier is dropping fast; the MCP ecosystem has grown from ~40 public servers in mid-2025 to over 300 by June 2026 per the MCPServers.dev registry, and several are purpose-built for design context.
Q: Which Claude model is actually best for UI/design work in June 2026?
Claude Sonnet 3.7 is the practical answer for most teams — the cost-to-quality ratio is significantly better than Opus 3 for component-level tasks, and latency matters when you’re iterating fast. We benchmarked Opus 3 vs. Sonnet 3.7 on 80 component tasks in May 2026: Opus scored ~8% higher on first-pass correctness, but at 5× the token cost. For exploratory design work where you’re running dozens of iterations, Sonnet 3.7 wins on total workflow economics. Opus makes sense for complex design-system architecture decisions made infrequently.
Q: Does this approach work for non-React stacks?
Yes, with the right transform layer. The core Claude-plus-MCP-context pattern is framework-agnostic; what changes is the transform MCP server configuration. We’ve run it against Astro (our primary stack), Vue 3, and a Svelte project in Q1–Q2 2026. The knowledge and scraper servers are completely portable. The transform server needs ~2–4 hours of configuration per new framework to define output format rules — a one-time cost that pays back within the first week of use.
About the author
Sergii Muliarchuk — founder of FlipFactory.it.com. Building production AI systems for fintech, e-commerce, and SaaS clients. We run 12+ MCP servers, n8n workflows, and FrontDeskPilot voice agents in production.
Hands-on with MCP server infrastructure since the protocol’s public release — we’ve shipped transform, knowledge, scraper, and seo servers into client production environments and measure their impact on real delivery metrics.