Case Study
Prototyping across multiple brands using Claude Code, Desktop Bridge & Figma
One tool to explore design ideas fast, get them in front of stakeholders as something real, and hand off to dev without anything getting lost in translation. At the FinOps Foundation my work spans six brands: FinOps Foundation, FOCUS, TF, Tokenomicon, ITAM and FinOps X. The sites are built on WordPress, each with its own codebase and quirks, while my design system in Figma uses one set of Tailwind-based components with a layer of semantic tokens applied on top, so I can design for each site. Despite our best efforts, the reactive and fast-paced nature of the role means a lot of drift builds up between design and development.
Testing a design idea against any of those sites meant touching a live, production instance, and the same idea often translated differently on each one because of the different codebases. So I built the safe middle ground between "a static Figma frame" and "changing the real site".
- My role
- Builder / Product Designer
- Duration
- June 2026 – ongoing
- Status
- Active
Context & Challenge
Two things were compounding. First, there was nowhere to explore a new direction without the risk and slowness of working in live WordPress code, so ideation either didn't happen or happened too carefully to be useful. Second, even when an idea did get designed, it lived only in Figma: stakeholders reviewed static frames, not something they could click through, and a lot got guessed at or renegotiated once it reached a developer, because nothing connected the Figma file to what the frontend could actually render.
Approach
Decouple exploration from production.
I built a standalone prototype, deliberately decoupled from any live WordPress site, that mirrors exactly how I already design in Figma: semantic tokens layered over Figma primitives, mapped one-to-one onto Tailwind utility classes. Nothing here ships directly; it exists to get an idea in front of stakeholders looking and behaving like the real thing, before a developer ever touches it.
Make Figma and code speak the same language.
I went a step further and made Figma's own variable names and the code's token names identical, with a validation script guaranteeing that never drifts. An idea can move from Figma into a working, on-brand, clickable prototype in the same sitting, across any of the six brands and both themes.
Start in whichever tool suits the idea.
The workflow runs in both directions. Using the Figma Console MCP, I can think an idea through with Claude, build it, feel it out in the browser, then move it into Figma to refine, or start in Figma and push the other way. Because the naming is identical on both sides, nothing is lost in either direction, and each idea starts in whichever environment suits it best.
Build a workbench, not one-off mockups.
A live component and block workbench, with real Figma-to-code parity tracking, means new pieces get reused rather than rebuilt from scratch each time.
Prototype whole architectures, not just components.
A shared docs shell lets full information-architecture explorations, not just individual components, be tested end-to-end before anything touches WordPress.
Make handoff a formality.
Prototypes export as HTML carrying the same inline classes used on the live sites, so moving from an approved prototype to production code is a simple transition rather than a rebuild.
Collaboration
The tool exists to change how design decisions get made with others: stakeholders review real, clickable prototypes instead of static frames, and developers receive HTML whose classes and naming already match what the live sites use, so nothing needs re-translating on the way into production.
Outcomes & Impact
Concept to interactive, on-brand webpage in minutes, not days
Previously days of work spanning design, development and multiple rounds of stakeholder revision before a single line of production code was written.
- Design ideas get explored end-to-end, across any of the six brands and both themes, without ever touching a live WordPress site.
- Stakeholders review a real, clickable, on-brand prototype instead of a static frame, so design decisions get made earlier and with more confidence.
- Because Figma's naming, the prototype's tokens and the exported HTML classes are all identical, nothing gets lost in translation by the time a prototype goes to dev.
- 72 components and blocks are tracked against their Figma counterparts, so exploration reuses real, proven pieces instead of one-off throwaway mockups.
- Already used to prototype a full docs information architecture (five content types, 43 supporting files) end-to-end before any of it touched WordPress.
Reflection
The point was never the prototype itself. It's a faster, lower-risk loop from idea to stakeholder buy-in to dev handoff, for a portfolio of sites that were never built to make that easy, and it changed where design thinking can happen: in Figma, in code, or in conversation with an AI, with the same system underneath all three.
Key Learnings
- Token parity between design and code isn't a nicety; it's the mechanism that stops handoff being a translation exercise.
- AI is most useful when it's wired into the system. Connecting Claude to Figma through MCP turned it from a drafting aid into a full member of the design loop.
- Stakeholders make different (and earlier) decisions when they're clicking something real rather than reviewing a picture of it.
- Investing in tooling is design work: the highest-leverage deliverable here wasn't a screen, it was a faster loop for every future screen.
Testimonials
“I would put James on any problem that requires detailed thinking and systemic, organized design. Plus, he's just a likeable chill guy.”
Garrett Schultz
Creative Director & Art Curator
“James Newton lead the change in the way we designed products at Blockade Games.”
Kyle Chivers
Operations Officer at Blockade Games
“James excels at simplifying... complexities for users, with designs that both explain to and inspire the user.”
Benjamin Heidorn
CTO, Co-Founder at Blockade Games
“James is a practiced designer with a unique combination of skills and life experiences — a strong creative energy paired with a keen sense for aesthetic harmony. I would recommend James without hesitation.”
Adam Smith
CTO & Co-Founder at Similie
Let's chat, drop me an email or connect on LinkedIn
© 2026 James Newton. Product Design
92a6438 · 1 aug 2026 · colophon · design system