BrightBridge Connect: Getting a Design System Ready for AI-Assisted Development
BrightBridge Connect wanted their design system to work with Claude Code, not against it. In three weeks Studio Soren reviewed the system against the live website, defined what was stopping AI from building on it consistently, and restructured it so AI-assisted work stays true to the brand.
Visit brightbridgeconnect.co.uk
Claude00 Brief
A working design system, not yet written for AI
The BrightBridge website was the visual reference to protect. Everything in the system had to answer to it.
A design system Claude Code can read, follow and reproduce, so AI-assisted builds stay consistent and compliant.
Three stages over three weeks, with the team coached at every step so the workflow outlives the engagement.
01 Results
From 45 to 93 in three weeks
AI readiness, measured weekly
AI design workflow readiness
Good. Token migration and naming fully resolved.
Design system documentation
Good. Colour duplicates resolved, radius and typography reconciled.
Directional scores from an AI-assisted read, re-checked each week. A guide to focus, not a certified benchmark.
The road to 100
The final points are natural next steps for the BrightBridge team, and we’ve documented each one so it’s simple to pick up.
Complete the component set
A couple of components are still in design and will join the library as they’re finalised.
Connect the brand font
Sharing the brand font across the team’s Figma workspace lets automated checks cover typography too.
Agree one type scale
A quick team decision on the preferred type scale keeps every heading consistent.
“They didn’t limit themselves to just completing the project. They shared genuinely useful recommendations and tips that we could take forward beyond the scope of the work.”
Dorcas Adeboye
Technical Project Manager, BrightBridge Connect
“Have you ever seen Messi on the pitch? That’s exactly how calm and composed Suraj was throughout the entire experience. His teaching was detailed, patient, and always focused on explaining things down to the core.”
Ridwan Gbolahan
BrightBridge Connect
02 Week 1 · Review
Start with what is live
The website is what customers actually see, so it set the standard. We reviewed BrightBridge’s foundations and components against it, piece by piece, to find where the Figma library and the live site had drifted apart.
Alongside the audit we interviewed the designers and developers who use the system day to day, to understand how they work, where they get stuck and how AI already fits into their week.
BBC website
The live reference: colour, type, spacing and components as customers see them.
Figma library
Variables, component sets and their variants, checked against the site.
User interviews
Designers and developers on how they build today and where AI breaks down.
Design-to-dev handover, as is
How a design becomes a live page today.
How a design becomes a live page today, validated with the tech lead.
Week 1 output
Every foundation and component, checked against the website.
Review: foundations and components mapped against the BBC website, then sorted by what is worth doing first.
03 Week 2 · Define
What a person sees, and what the model reads
Claude reads names, values and structure. Where those are vague, it guesses.
Illustrative: the primary button, before and after the clean-up.
Week 2 · Design token update
Three tiers, so the model always knows which value to use.
3
Tiers
213
Variables
7
Collections
3
Mode families
04 Week 3 · Recommend
Written for Claude Code, tested against the real thing
We restructured the system around how Claude Code works: tokens it can resolve by name, components whose properties map straight to code, and a governance pack it reads before it builds anything. The team wrote twelve of those files; we checked each one against the live Figma file, corrected what had drifted, and added a thirteenth for accessibility.
Then we put it to the test. Claude rebuilt selected parts of the website. Where the output drifted, we refined the system. Prompts were tuned in the final phase.
The governance pack
Thirteen files Claude reads before it builds. Open one.
Excerpts from the BrightBridge governance pack.
Proof of concept
A new sales funnel page, from Figma frame to clickable HTML.
For BrightBridge’s new page for supported living providers, we ran the recommended workflow end to end. Claude read the Figma frames through MCP, used the governance pack as shared context, and turned the design into an interactive HTML artefact.
Stakeholders reviewed a prototype they could click through on desktop, tablet and mobile, with every FAQ state working, instead of a static mockup. Comments were resolved in Claude Code, and anything structural went back to the Figma canvas.
Figma frames
Desktop, tablet and mobile, read through Figma MCP.
Governance pack
The 13 .md files loaded as shared context.
HTML artefact
A clickable prototype, not a static mockup.
Comment and iterate
Small fixes in Claude Code. Anything structural goes back to Figma.
Week 3 · What got fixed
Fixes applied directly in the file, not just recommended.
Typography
49 bindings, 0 errors
32 tokens rebound across 15 text styles. 3 missing tokens added.
Avatar
187 / 206 sets
Naming bug fixed. 418 fallback fills rebound to live semantic colours.
Badge
8 fills rebound
Hardcoded and legacy fills moved onto live semantic colour tokens.
Button
191 / 192 renamed
Variant naming normalised. A “Bold” size value corrected to “Large”.
Radius
12 → 8 steps mapped
Legacy scale mapped explicitly against the active 8-token collection.
Page cleanup
5 names fixed
Stray-space page names corrected, including a “Desing” typo.
05 Our Role
Audit, system and coaching, in one engagement
Design system audit against the live website
Design system restructure: tokens, components, states
AI integration and Claude Code optimisation
User research and interviews with the team
Workshops and design coaching on AI best practice
Design operations and review gates
Design to dev handover conventions
Close collaboration with design and engineering
More case studies
Taking new projects
Suraj Soren
Founder & Creative Director
Hi, I'm Suraj
Is your design system ready for AI?
BrightBridge had a solid system that AI couldn’t yet follow. If your team is moving to AI-assisted development, book a free 30 minute call with me. We’ll look at where your system stands and what we’d fix first.