Case 03 · Fintech · 2026
AI-Built Design System & Operations App
I pulled a regulated financial institution’s brand from its live website, built an eight-screen back office on it, and only then extracted a design system.
- Role
- Solo UX Lead for a regulated financial institution (under NDA), directing Claude Code and three audit-agent pairs
- Team
- Just me on the human side · Claude Code as the builder · three audit-agent pairs as reviewers
- to extract the brand from the live site
- Hours
- responsive screens, bilingual with full RTL, light and dark
- 8
- audit-agent pairs reviewing Claude Code’s work
- 3
01
The brand was already live
The back office had to match the website’s family. I skipped Figma and pointed Claude Code at the live site. It pulled colours, type, spacing, even transition timings. The extraction took hours, not weeks, and left a markdown file of every design decision the site had never written down.
Where the extracted values ended up: 16px card, 8px button and 30px badge radii, all from the live site.
02
I built the app first
React, Tailwind, six waves. The dashboard was friendly territory; the case detail was the real test. The website had nothing like its comment thread, so my first interpolation from the extracted patterns was wrong. A few trips back to the live site fixed the rhythm. The core tokens held.
The case detail, fully mirrored for RTL, comment thread and timeline included.
03
The eye test wasn’t enough
Form inputs looked fine until I checked the contrast ratios. The same check caught white toggle switches sitting on white cards. So accessibility got its own pass against WCAG 2.2 AA, not a checkbox at the end.
Toggles on a white card in the finished app. Earlier, white toggles disappeared on white cards like this one.
04
Wrong in a useful way
With the app working, I asked Claude to extract a design system. It mirrored the app screen by screen: a component dump. I spelled out Atomic Design; the rerun gave six atoms, five molecules, organisms like comment threads, and two templates. Every component exists because a real screen needed it.
The first version crammed everything onto one scrolling page. I had it rebuilt: a page per layer, plus this overview.
Looking back
I assumed Claude would extract the logo’s symbol for the collapsed sidebar. It generated a new icon from scratch instead, and that happened more than once. Next time I’d put “take what exists, don’t invent” into every extraction prompt, starting with the first.