Dave Financial: Transforming a Design System for the Generative AI Era

1. Overview

Project metadata, scope, and technical stack

Role

Lead Design System Architect / AI Design Engineer

Core Tools

Figma
zeroheight (via MCP)
Cursor
DeepSeek (V3/R1)
Vite / React

Scope

End-to-end Figma token architecture audit and variable primitive refactoring.
zeroheight documentation sync via Model Context Protocol (MCP).
Authoring machine-readable AI behavioral contracts (design.md).
Local Vite/React verification testbed setup for deterministic prompt testing.

Key Outcome

Achieved 100% "zero-touch" code generation from Figma to production-ready React components without manual CSS tweaks.
Eliminated component structural drift across complex multi-slot fintech cards.
Established an automated MCP pipeline making human design specs instantly consumable by LLM coding agents.

2. Executive Summary

Bridging human design systems and automated AI code generation

Dave Financial Mobile and Web Interface Dave Financial Platform Interface Dave Financial operates at the forefront of digital banking, serving millions of users with automated cash advances and financial management tools. While the design ecosystem featured rich Figma components and React Native implementations, the underlying architecture lacked unified variable tokenization for typography and spacing. Crucially, pattern layout logic remained unwritten—relying heavily on designer intuition.

To prepare Dave's design system for the AI-assisted development era without modifying production repos or requesting extra engineering spend, I designed and executed a zero-touch pipeline architecture. By restructuring token primitives, connecting zeroheight directly to local IDEs via Model Context Protocol (MCP), and creating a strict AI behavioral contract (design.md), I proved that AI agents can translate visual designs into pixel-perfect React components with absolute structural fidelity.

3. The Challenge & Paradigm Shift

Moving from human-interpreted UI kits to machine-deterministic design contracts

Traditional design systems are built for human eyes. Designers and developers naturally fill in missing details, infer alignment physics, and manually tweak CSS when a layout breaks. Generative AI models lack this human context. When tasked with translating design assets into code, LLMs generate code based on probability—leading to visual drift, broken flex containers, and hardcoded overrides.

Paradigm Shift • Naive Prompting vs. Contract-Driven Output

Without Behavioral Contract Visual Drift

// Hardcoded styles & broken flex wrap

<span className="badge-wrapped">Today</span>

</div>

LLM guesses component hierarchy, wraps badges onto multiple lines, and uses hardcoded inline styles.

With design.md Contract 100% Fidelity

// Token-bound semantic components

Today • $50

</PillRow>

</CardContainer>

Deterministic slot rules enforce single-line badge rows and bound token properties[cite: 2].

Fragmented Token Primitive Layer: Colors were fully tokenized, but typography and spatial scales existed as static, hardcoded component values—preventing automated translation into CSS custom properties.
AI Layout Hallucination: Without clear layout physics, LLMs like DeepSeek fragmented unified card components into disconnected wrappers, wrapped single-line pill badges, and hallucinated dynamic date strings.
The Manual "CSS Hotfixing" Trap: Developers routinely patched AI-generated code with inline styles, corrupting the design system as the authoritative single source of truth.

4. Strategy & Solution

A architectural blueprint for deterministic, contract-driven component output

System Architecture • Zero-Touch Pipeline Flow

01. DESIGN

Figma Tokens

Primitives & Auto-Layout Rules

02. KNOWLEDGE

zeroheight + MCP

Live Token Querying Layer

03. CONTRACT

design.md

AI Structural Constraints

04. OUTPUT

Cursor / DeepSeek

Zero-Touch React Code

4.1 Figma: Tokenization, Primitives, & Auto-Layout Physics

I performed an architectural audit of Dave's Figma assets to isolate hardcoded parameters. I separated visual attributes into a clean two-tier hierarchy: raw Primitives (hex colors, pixel values) and Semantic Aliases (--color-bg-card, --spacing-card-padding). Next, I refactored key composite components—such as Balance Summary Card and Flex Advance Card—with strict Auto-Layout rules, establishing a 440px max-width container bound directly to semantic spatial tokens.

Figma Semantics & Token Mapping Panel Two-Tier Token Hierarchy

Layout components rely on auto-layout physics mapped directly to web browser flexbox rules, ensuring fluid container behavior and deterministic gap/padding values.

Auto-Layout Component Physics & Constraints 314 Fill × 29 Hug

Extracted raw style values into centralized variable primitive collections.
Mapped primitives to role-based semantic tokens to decouple presentation from implementation.
Standardized flexbox growth behaviors (Fill Container vs. Hug Contents) to reflect real browser rendering physics.

4.2 zeroheight & MCP: Building an AI-Accessible Knowledge Layer

Publishing design tokens to zeroheight created a cloud-based source of truth. To bridge documentation directly into developer workflows, I configured a Model Context Protocol (MCP) server. This empowered AI coding assistants to programmatically query live zeroheight specs during generation, converting traditional documentation into an active runtime data layer.

zeroheight System Guidelines & Token Specifications

zeroheight • Token Specs & Component Guidelines MCP Live Data Layer

Synchronized updated Figma variables into zeroheight token tables.
Integrated an MCP server enabling IDE agents (Cursor) to read token values in real time.
Structured pattern documentation using machine-readable frontmatter metadata.

4.3 Local Architecture: Lightweight Vite/React Verification Sandbox

To evaluate AI code generation safely without touching production environments, I set up an isolated Vite + React sandbox. Global CSS custom properties mirroring zeroheight semantic tokens were injected directly into index.html. This provided a fast, hot-reloading environment to test whether generated JSX correctly resolved tokens without external library overhead.

Bootstrapped a zero-dependency Vite/React development environment.
Mapped local CSS custom properties (var(--color-bg-card), var(--radius-16)) to zeroheight tokens.
Created an instant browser visual loop to inspect and benchmark LLM code output.

4.4 design.md: Authoring the AI Behavioral Contract

The key innovation was design.md—a system prompt contract defining structural constraints, slot anatomies, and strict string schemas for dynamic data. Rather than trusting the LLM to guess component architecture, design.md explicitly forbade destructive flex-wrapping and mandated exact prop-to-token bindings.

Structured design.md Contract Spec in Editor

design.md - Behavioral Contract Specifications Machine-Readable Specs

Defined strict slot schematics for card header alignment, balance metrics, and pill badge containers.
Enforced explicit layout constraints (white-space: nowrap, flex-wrap: nowrap) to prevent line wrapping.
Established strict content schemas (e.g., pill text formatted strictly as [Label] • $[Amount]).

4.5 DeepSeek & Cursor: Closed-Loop Upstream Iteration

Using Cursor Composer connected to DeepSeek models (V3/R1), I initiated component generation. Crucially, I adopted a strict governance rule: never touch generated code by hand. When visual flaws occurred (like a wrapped pill badge), I edited the upstream specification in design.md and re-prompted until the output rendered perfectly.

DeepSeek Context Injection and JSX Generation

DeepSeek Chat - Contract Context & Code Generation Zero-Touch Code Output

Executed prompt passes in Cursor using design.md as the primary system context.
Enforced zero manual code edits, forcing all refinements back into upstream contract rules.
Eliminated hallucinated properties through systematic, contract-driven prompt refining.

4.6 Final UI Output & Parity Verification

The resulting components achieved 1:1 pixel and structural parity with Figma designs. The rendered cards maintained exact container dimensions (440px), padding math (20px), typography scales, and a flawless single-line four-item badge pill row.

Cursor Editor - Live React Rendered Sandbox 100% Fidelity

Verified visual parity across typography hierarchies, surface tokens, and border radii.
Rendered single-line pill rows (Today • $50 through Wk 6 • $50) without visual overflow.
Validated a completely automated, zero-touch component generation workflow.

5. Execution & Impact

Transforming design operations into an automated, AI-first engine

This project demonstrated that the bottleneck in AI code generation is not model intelligence—it is the structure of the input contract. By engineering design systems to be AI-native, organizations can achieve instant component generation while preserving complete brand integrity.

Zero-Touch Code Pipeline: Replaced slow, manual CSS handoffs with deterministic AI component generation driven by design.md.
True Systemic Tokenization: Closed critical token gaps across spatial scales and font families, turning Dave's design system into a machine-readable architecture.
Future-Proofed MCP Integration: Established an active live-data bridge between cloud documentation (zeroheight) and developer IDEs, providing a scalable framework for cross-functional engineering teams.