A mobile app that gamifies funded trading, taken from concept to build-ready in a few weeks
Viperium
2026
Product designDesign systems
Read the case study →
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
F2 FOCUS TF Tokenomicon ITAM X2026
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.
In Figma, via variable modes In the prototype, via the brand switcher
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. Sync runs both ways, so it catches drift rather than only gaps.
Let the system correct me.
I asked an agent to push the prototype's DatePicker into Figma, on the assumption that no Figma counterpart existed yet — the component's own code comment said so. It checked first and corrected me: a real 10-variant Date Picker set already existed, properly token-bound, just missing the open-calendar-panel state. It built that missing state, then caught a second real problem while it was in there — the panel's disabled styling and its selected-day font weight didn't match Figma. Rather than guess, it flagged both and asked which side should change. I chose, it applied the fix consistently across every input component in the family rather than just this one, and along the way found and fixed a pre-existing dark-mode bug where the calendar panel had been rendering light on dark pages sitewide.
1. The ask 2. Lands in Figma as the 10th variant, State = Open 3. The same open panel, matching, across every brand
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.
In Figma, across ten brand × theme modes In the running docs shell
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 under 30 minutes
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. The handoff step is still evolving: a component already copies out as an HTML fragment for pasting into a CMS block, and the reusable pieces export as an installable kit, but turning a fully assembled prototype page into drop-in production markup is the part I'm still building out.
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.
- An agent with access to the real system will check your assumptions against it. The DatePicker round trip started from something I had wrong, and the correction was worth more than the component.
- 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
b1eb0d6 · 2 aug 2026 · colophon · design system