IR-First Architecture: Why We Support React, Flutter, and Vue from One Design

The Generation Problem

Most AI coding tools treat each framework as a separate black-box generation task. Feed in a design, get out React. Feed in the same design, get out Flutter. No shared understanding. No preserved constraints. No consistency.

The result? Code that looks plausible but drifts semantically across frameworks. A button in React gets different accessibility attributes than the "same" button in Flutter. Layout constraints are interpreted differently. Design tokens don't map consistently.

When internal representations are implicit and untyped, entropy accumulates with every generation.

We took a different approach.

IR-First: Compilation, Not Generation

CodeFlow Lab uses an Intermediate Representation (IR)—a framework-agnostic, typed AST that captures the semantic structure of your design before any code is emitted.

Think of it as a compiler's parse tree. The IR is the single source of truth that preserves:

The IR isn't just metadata—it's an executable specification of design intent.

Why This Matters

Without an explicit IR layer, you're asking an LLM to:

...all in one opaque step.

That's why most tools achieve 20-30% fidelity. Intent is lost. Constraints aren't preserved. Each generation is a fresh hallucination.

With IR-first architecture:

We don't ask LLMs to be oracles. We ask them to be stateless emitters operating on stable, typed input.

Pipeline Architecture

Figma Design
    ↓
[Extraction Layer]
    ↓
Intermediate Representation (IR)
    ↓
[Semantic Enhancement]
    ↓
Enhanced IR
    ↓
[Framework Codegen]
    ↓
React / Flutter / Vue

Stage 1: Extraction

The Figma API provides raw node data—positions, fills, text properties. Our extraction layer transforms this into structured IR:

Output: Raw IR with structural relationships and design system primitives.

Stage 2: Semantic Enhancement

This is where the IR gains intelligence through structured analysis:

Output: Enhanced IR with explicit semantic structure and accessibility guarantees.

Stage 3: Code Generation

The enhanced IR is transformed into framework-specific code through deterministic emission:

React:

Flutter:

Vue 3:

The key: same IR, different emission. Semantic structure is preserved. Quality is consistent.

Quality Scoring: The 8+/10 Standard

Every generated output passes through our validation pipeline:

Static Analysis:

Semantic Correctness:

Accessibility Audit:

Fidelity Validation:

Each dimension contributes to a composite quality score. We target 8+/10 across all frameworks—a measurable standard that most tools don't even attempt to define.

The Result

One Figma design → production-ready code for React, Flutter, or Vue—with:

Why Competitors Can't Do This

Most tools skip the IR layer because:

But speed without fidelity isn't velocity—it's technical debt at scale.

We optimize for correctness first, speed second. The result is code you can actually ship, maintain, and govern.

The architectural complexity pays dividends: when you add a new framework target, you're not rebuilding everything—you're adding a new emission layer on top of the same semantic foundation.

What's Next

Our IR architecture is evolving to support:

The IR isn't just infrastructure—it's the abstraction layer the design-to-code space has been missing.

Each enhancement to the IR automatically improves output quality across all supported frameworks. This is the compounding advantage of compilation over generation.

Technical Philosophy

The IR-first approach reflects a fundamental belief: design-to-code is a compilation problem, not a generation problem.

Compilers have solved multi-target code generation for decades. LLVM compiles C to x86, ARM, and RISC-V from a single IR. WebAssembly runs on any browser through a shared intermediate format.

The same principles apply to design systems. The semantic structure is framework-agnostic. Only the final emission needs to be framework-specific.

By treating LLMs as stateless emitters rather than end-to-end oracles, we get:

This isn't just better engineering—it's the only architecture that scales to production requirements.

Try It Yourself

Want to see the difference between generation and compilation? Try our framework-specific converters:

Upload a Figma design and generate production-ready code—all from the same semantic IR foundation.

Learn more about why this matters in our [alignment by construction](/blog/alignment-by-construction) article and why [most tools only achieve 20-30% fidelity](/blog/figma-to-code-fidelity).