Open source · Local-first · Any stack

Figma to frontend.
Measured, not guessed.

Give your AI coding agent the exact design values and a brief that knows your codebase. Then check the built screen against Figma, layer by layer, until it passes.

Get started See how it works Star on GitHub

Free, MIT licensed. Your designs and code never leave your machine.

Verifies the stack you already use

  • React
  • Next.js
  • Vue
  • Svelte
  • HTML
  • Flutter
  • React Native
  • Jetpack Compose
  • SwiftUI
  • Android
  • iOS
See it work

Watch the whole loop, start to PASS.

One video: export from Figma, brief your agent, build, then verify layer by layer and fix until the report passes.

Watch on YouTube
The loop

Three tools. One loop. Pixel-checked.

A Figma plugin, a CLI and the AI agent you already use. Each does one job, and the last step proves the result.

  1. 01

    Figma plugin

    In Figma desktop

    Exports exact layout, colours, text, components, icons and reference screenshots as one portable folder. Nothing leaves your machine.

  2. 02

    CLI: build

    In your app repo

    Reads your code read-only, maps the design to the components and tokens you already have, and writes a brief your agent follows.

  3. 03

    Your AI agent

    In your editor

    Implements the screens from exact numbers instead of guessing from a screenshot, and tags each element with its Figma id.

  4. 04

    CLI: verify

    Against the running app

    Measures every tagged element and reports what is off, by how many pixels. The agent fixes it and runs verify again until PASS.

The gap, closing

Every pixel off, found. Then fixed.

Teal is the Figma box, violet is your first build, off by the same pixels the report lists. Move your cursor through the dots, then watch the fix snap into place.

Figma box Your build First build · FAIL
Figma vs your build

See exactly what does not match.

Verify compares every tagged element with its Figma box and writes a report your agent can act on: which layer, which direction, how many pixels.

verification/profile.md FAIL

6 / 99 / 9 layers match

  • #title Title Δy +8 ±0
  • #avatar Avatar Δw −4 Δh −4 ±0
  • #bio1 Bio line 1 ±0
  • #bio2 Bio line 2 ±0
  • #stat1 Stat 1 ±0
  • #stat2 Stat 2 ±0
  • #stat3 Stat 3 ±0
  • #row List row ±0
  • #button Follow button Δw +24 ±0
Figma box Your build Off by more than 1 px
Why it works

Built for real codebases, not demos.

Six decisions that keep the agent honest and your repo clean.

Facts, not guesses

Values come from the Figma Plugin API. Each one is marked as source, calculated or inferred, so your agent never treats a guess as a spec.

Reuses your codebase

Finds your existing widgets, colour tokens, text styles, fonts and routes, and tells the agent to reuse them instead of duplicating.

Measured, not claimed

Every layer is compared to ±1 px. On web, fonts, colours and corners are compared as numbers, the page is checked at 375 px, and a diff image highlights the rest.

Any frontend stack

React, Next, Vue, Svelte, HTML, Flutter, React Native, Compose and SwiftUI. Web, Android, iOS or a Flutter host test.

Any AI agent

The output is plain Markdown and JSON. Any coding agent that can read files and run a command can follow the loop.

Local-first and free

No server, no paid API, no telemetry. The plugin has no network access at all. MIT licensed.

Platforms

Verify where your app actually runs.

  • Web

    React · Next · Vue · Svelte · HTML

    data-figma-id

  • Flutter

    Web, Android, iOS or host test

    Semantics identifier

  • Android

    Flutter · React Native · Compose

    testTag / testID

  • iOS

    Flutter · React Native · SwiftUI

    accessibilityIdentifier

Your next page, measured against the design.

Free. Open source. Your designs and code never leave your machine.

Read the quick start Star on GitHub