Building a fintech KYC flow: what actually paid off.

Larry walks us through using Claude Code for a regulated fintech app for the UK market

I'm Larry. I'm part of the team building Kintro, a UK shared digital wallet that lets friends and families pool, spend and save together. Think of the informal savings circles your auntie has run for decades, except it's an app.

This means we have to run KYC for withdrawals above a certain amount: name, date of birth, phone number, and address, all verified against a third-party provider.

Four fields. I've built forms before. I figured two days for the build, three at most.

Two days were accurate.

What I didn't budget for were the next two weeks.

The enemy inside every multi-screen app 

Something nobody warns you about when you're building a flow across multiple screens. The design system starts bleeding almost immediately. 

Kintro's onboarding spans five screens. Each screen has its own soft background colour. A progress indicator at the top must look identical at every step.

Sounds fine. Then, a few days in, someone in the team chat asks:

“Was the background on the name screen the lighter purple, or the slightly lighter purple?”

Because Figma files get updated constantly, two people pulling the same colour value on different days might get slightly different results. Nobody's being careless; the source itself is shifting underneath them.

I started calling this the Tuesday hex code conversation. Not catastrophic. Just draining. The kind of thing that eats your afternoon without you noticing it happened.

This problem has a name, by the way. It's called design token drift; W3C even has a working group standardising design tokens to prevent it. It's a known industry pain. Most teams just live with it.

Stop screenshotting the design. Start reading it.

The fix that worked was simple.

Stop treating the design file as an image to eyeball. Start treating it as data to query.

I connected Claude directly to our Figma file via Figma's Dev Mode, so it could read the values programmatically (Reads them as raw data rather than visually interpreting them). 

Instead of asking “Hey, can you match this screenshot?”, the prompt became:

“Read the exact colour and spacing values from this screen. Tell me which ones already exist in our codebase. Flag anything new or inconsistent.”

You're not asking the AI to guess. You're asking it to reconcile two sources of truth.

The colours came back correct on the first try. No back-and-forth.

It also caught something we hadn't noticed: three border-radius values across different screens that were almost but not quite the same. They'd been drifting for months.

Now they line up.

What  Claude code couldn't do

Too many AI posts insult the reader's intelligence. All hype, no honesty.

Claude code did not design anything. It has no taste.

I gave it a design reference once and asked it to assemble a new screen. It came back with something technically correct and visually quite sad. Wrong proportions. A purple that matched the hex code but felt completely off in context.

You still need a designer. Full stop.

The judgment. The Feel. That instinct of “something is slightly wrong here, even though I can't explain why.” That's still a human's job.

What changed is the underlying layer, cross-referencing, and token checking.

The team chat questions used to interrupt every build session? Those are mostly gone now. The KYC form has the right purple on every screen. First time.

This is Part 1 of 3.

Part 2 - What happened when we actually shipped the form, and why the verification provider made me rewrite half of it. 

Previous
Previous

Testing: where MCP genuinely changed how we work

Next
Next

Three Massive AI Deals. How SME’s can keep up.