Ranju Ravindran
The Vera app icon - a pencil-holding figure on a pale blue square - beside the VERA wordmark. The Vera app icon beside the VERA wordmark, in white for a dark background.

Lab · shipped · August 16, 2026

Vera

A Flutter tool that lets you correct design bugs directly on the running app.

Hypothesis

AI writes whole screens now and skips the constant Figma-check a developer used to do by hand - closing that gap needs a live editor pinned to the running app, not another prompt.

Outcome

Vera - tap a widget, fix it live against the real Figma spec, and export the result as a code patch a developer or Claude Code applies directly.

Fix the design, not the prompt.

A Flutter tool that lets you correct design bugs directly on the running app, then hands you the code patch.

The problem

AI writes my screens now. That’s great, until the padding is 2px off.

Here’s what fixing that used to look like:

  1. Spot something wrong
  2. Describe it in words to an AI that can’t see it
  3. Wait for a rebuild
  4. Squint at the result
  5. It’s still wrong. Go to step 2.

Death by a thousand round trips, and every one of them is a designer trying to describe a pixel in English.

The deeper issue: when a developer built screens by hand, they checked against Figma constantly without thinking about it. One decision at a time, one comparison at a time. AI writes the whole screen in a single pass and skips that entirely. Nobody catches the drift until someone opens the app and notices.

What Vera does

Tap the thing. Fix the thing. Ship the fix.

The overlay (design_qa, a Flutter package)

  • Drop it into any Flutter app, debug builds only
  • Tap any widget on the running app, a property panel opens
  • Drag to adjust padding, margin, color, radius, font, alignment
  • Changes apply live, no rebuild
  • Pin your Figma export over the running app and compare pixel for pixel
  • Jump straight to any screen, no clicking through the flow to get there

The Figma reference image pinned over the running app in Vera's canvas, with opacity, blend mode, and scale controls for a pixel-for-pixel comparison.

A widget selected on the Vera canvas, outlined and tagged "Container", ready to inspect and edit.

The companion app (macOS)

  • Point it at a Flutter project, it finds the entry point and wires everything up
  • Launches your app on any device
  • Turns every edit into a real source-code patch, AST-level, not a diff dump
  • Hand the patch to a developer, or to Claude Code, and it applies directly

The Vera companion app's project picker: the Vera icon and wordmark above a "Choose app folder" prompt and a list of recent projects.

The Vera companion app mid-session: "Running on Pixel 8" with three live edits listed, and a "Save my changes" export confirming the patch was written to the app folder.

That last part is the whole point. Most design QA tools end at “here’s a screenshot with arrows on it.” Vera ends at code.

Why the name

It was called Design QA. Accurate, forgettable.

Vera means truth. That’s the actual job: finding where the build stops telling the truth about the design.

How it was built

  • Claude Code, end to end
  • Figma read programmatically through MCP, not eyeballed from screenshots
  • Color values pulled from Figma’s own variables, so nothing was guessed
  • Every fix verified with a real rebuild and a real screenshot before it counted as done

Building a design-fidelity tool by guessing at design values would have been a bad look.

What it changes

  • Fix padding, color, spacing, and type yourself, on the spot
  • Checked against the real Figma spec, not memory
  • Edits leave as code, not as a bug report
  • Works on any Flutter project. Point, wrap one line, start fixing

Visit the site View the repo

FROM THE LAB

View all→