Why did walllet’s design system have to work for AI coding agents?

walllet.com moves money. A balance that renders differently on two screens reads as a bug, and in a wallet a bug reads as risk. Our engineers build with Claude Code and Codex. Agents are fast and literal: give them a hard-coded color and they will copy it into fifty files before anyone notices.

The problem: Block was precise enough for a designer to follow, but not structured enough for an engineer or an agent to build from without guessing.

What moved from Figma into Git?

On October 13, 2026, Block moved into code. I split it into five repositories published as packages on GitHub: design-tokens, icons, design-assets, design-system and design-handoff. The same day, all 76 Figma components had a coded twin, each with its spec, variants and known gaps written down.

Then I removed every reason to guess. Effects, motion, opacity and fixed sizes come from tokens, and no hard-coded design value is left in a component. Every variable carries its code name for web, Android and iOS. In Figma’s Dev Mode, 207 components, icons and logos show the exact code an engineer or agent should import.

Crypto needs assets no UI kit ships. Block has 84 service logos as components: 55 crypto, 15 stock, 7 commodity and 7 network logos. A Tether row or a Solana network chip is a named component, not a pasted PNG, which matters when one asset lives on several chains, as in Merge Token & Chain.

How do designers, engineers and AI agents stay in sync?

Git is the meeting point. Every design change becomes a versioned release, and each release names the token, asset and icon packages it ships with. Engineers and agents pull the same versions, so what they build matches Figma pixel for pixel, and nobody works from last month’s file.

The library is now two layers. Primitives holds the foundation: buttons, rows, sheets, navigation, inputs. Composites holds product pieces like the total balance, the activity widget and the now-bar cards for an in-progress transaction, KYC status or a declined card. A flow component only moves into Composites after a promotion checklist: ownership, API, variants and states, accessibility, tokens, Code Connect, version and documentation.

Agents do most of the typing. The change log says “Claude on October 21” far more often than it says my name. The decisions stay with design, though. Entries titled “Designer decisions applied” record calls like modals being dismissible by default and loading animations that keep running under Reduce Motion. And only a designer can save a named library version in Figma, so design is the release gate.

The Figma side works the same way. Role-based AI agents read the designer’s flow flags and notes before they act. A UX writing skill applies walllet’s tone and destructive-action vocabulary, then writes English copy and Turkish translations into a walllet_copy structure keyed by messageId. The team uses both every day.

How are motion and haptics part of the system?

Motion and haptics are tokens too. Springs are a little softer on iOS and firmer on Android. An outcome haptic waits 120 ms after a tap so the two don’t blur together. Under Reduce Motion, a light press remains but the stretch goes away. It’s the kind of detail that used to get lost between a Figma prototype and a build. Now it ships as a value, the same way a color does, which helps in flows like Send where every tap confirms money moving.

What changed after Block moved into code?

The bigger change doesn’t fit in a number yet. I design new flows faster because I work with AI against real components instead of drawing from scratch. And we put live builds in front of people for testing sooner, because what engineers and agents ship already matches the design. More about how I work is on my resume.