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
×
Claude
AI-ready by design
Raw values in, tokens out
00 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.
Project plan
Three weeks, three stages
01 Results
From 45 to 93 in three weeks
AI readiness, measured weekly
{{ sc.label }}
{{ sc.note }}
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.
{{ g.title }}
{{ g.text }}
“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.
{{ s.label }}
{{ s.text }}
Design-to-dev handover, as is
How a design becomes a live page today.
Validated with the tech lead{{ h.title }}
{{ h.text }}
How a design becomes a live page today, validated with the tech lead.
Week 1 output
Every foundation and component, checked against the website.
Week 1 deliverablesBrand purple · as documented
Neutrals · as documented
One pixel value apart
#EBEBEB documented, #EAEAEA used on cards and borders. Two greys doing one job.
Findings
{{ f.title }}
{{ f.text }}
{{ q.title }}
{{ q.sub }}
{{ n.text }}
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.
Issues, by priority
Ranked by cost to AI outputFigma, as the model sees it
{{ l.text }}
What Claude Code writes
{{ l.text }}
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.
{{ ts.num }}
{{ ts.label }}
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.
# {{ docActive.title }}
{{ docActive.purpose }}
{{ ln.text }}
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.
{{ f.title }}
{{ f.text }}
Supported living providers · HTML artefactWeek 3 · What got fixed
Fixes applied directly in the file, not just recommended.
{{ x.area }}
{{ x.num }}
{{ x.text }}
Week 3 deliverables{{ b.label }}
{{ b.from }} → {{ b.to }}
{{ f.title }}
{{ f.text }}
05 Our Role
Audit, system and coaching, in one engagement
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.