Vera - Design Ops Agent

AI design co-pilot that connects to Figma, understands a team's design system, and delivers expert-grounded UX critique

Comment

A few years ago, I was dropped into a project mid-flight. The original designer had to leave the country, and I assumed his work with almost no handoff. No design system docs. Just a set of files and a looming deadline.

During my first week, I designed a poster for the event speakers. We had weekly design sprints, design reviews, and critique sessions. I was learning the culture, the team's taste, the process, all at once, at full speed.

Then I made a small edit before publishing. What I didn't realize was that I had opened the wrong file, an older version. When the design went live, my boss's photo had been swapped with another speaker's.

That was definitely a bad impression. In my first week.

I wasn't fired. I adapted. I got faster at reading what the team valued. By the end of that engagement, my colleague told me something I'll never forget: "The boss thought you were bad in the beginning. But they were satisfied with your work once you found your footing."

That story stuck with me, because it shouldn't have to be that way.

A junior designer shouldn't have to survive on guesswork. They shouldn't have to wait for a weekly critique to find out they've been building in the wrong direction. They shouldn't need to catch a senior designer between meetings just to ask: "Is this accessible? Does this even make sense? Will this ship?"

That's what Vera is.

The idea

Vera is the senior designer you don't always have in the room.

Paste a screenshot, a Figma URL, or any live website. Vera sees the design using Gemini 2.5 Flash vision, then grounds its critique in design best practices like WCAG 2.2, Nielsen's 10 Heuristics, Gestalt principles, and Cognitive Load theory.

What comes back isn't a vague suggestion. It's a severity-ranked report: specific elements called out by name, exact hex fixes for contrast failures, and a clear ship/hold verdict. The kind of feedback that usually requires booking 30 minutes with your most senior designer.

And critically, Vera never applies a change. It surfaces findings. The designer decides what ships.

How I built it

Vera is a 5-agent pipeline built on Google ADK, powered by Gemini 2.5 Flash.

When a Figma URL comes in, two agents run in parallel: one fetches the frame image and node tree from the Figma API, the other retrieves the most relevant UX rules from a dual-tier RAG knowledge base using hybrid BM25 + vector search with RRF reranking. Then the critic agent receives the design as an inline PNG alongside the retrieved knowledge, multimodal reasoning, grounded in real standards.

But before the critique reaches the designer, two more agents run. A self-critic checks the draft against 8 quality rules (are the citations specific? are the fixes measurable? is severity accurate?). A revision agent fixes what's flagged and skips entirely if nothing is. Zero extra cost on clean outputs.

Every contrast claim is mathematically verified by compute_contrast_ratio() before it leaves the system. If the model says 2.3:1 and the math says 3.1:1, the claim is suppressed, no LLM judgment, just deterministic math.

The same pipeline handles live websites, too. Playwright captures a screenshot, and the critique runs identically.

Building it in 72 hours: with the lights on (sometimes)

The sprint was not smooth.

Every time I shipped a new feature, a new bug surfaced. Debugging became a constant negotiation between the clock and the codebase. Getting the skip logic on the revision agent to behave predictably took far more iterations than I expected.

And our neighborhood in Zamboanga City had frequent power outages throughout the build. Some of the hardest architectural decisions were made during generator breaks, in notes on my phone.

That constraint forced something useful: every decision had to matter. The features that survived are the ones that genuinely make Vera useful to the designer sitting in front of it at 11pm, trying to figure out if their contrast ratio will pass before the morning review.

What the eval said

Vera is evaluated with Google ADK's rubric-based eval framework — not cherry-picked demos.

  • Route A (Figma critique): 1.0 / 1.0 on case 1, 0.875 / 1.0 on case 2
  • Route B (UX knowledge): 0.833 / 1.0 across 7 test cases

Rubrics tested: grounded citations, actionable specificity, no hallucination, named element references, professional tone, severity accuracy, and impact-first ordering.

What I'm most proud of

Not the eval scores, though those mattered.

It's that Vera gives junior and mid-level designers access to the kind of feedback that usually only exists if you're lucky enough to have a senior designer on your team who has time for you.

I've been that junior designer, the one figuring it out in real time, hoping someone would catch the mistake before it went live. Vera is the tool I wish I had then.

What I learned

The agent architecture only worked because I mapped the full pipeline before writing a single line of code — what each agent receives, what it produces, and what triggers a skip. That upfront clarity is what made the complexity manageable.

And every major pattern in Vera maps to a published result: Constitutional AI, SELF-REFINE, RLVR, BM25+RRF, MMR, Contextual Chunk Headers. Knowing why each decision works made debugging faster and the architecture defensible.

Constraints are design tools. The power outages and the 72-hour clock forced ruthless prioritization. The features that didn't make the cut aren't lost, they're next.

What's next

  • Figma plugin - bring critique directly into the design canvas
  • Team memory - Vera learns from your team's Fixed / Won't Fix patterns and adjusts future critiques accordingly
  • Component-level audit - analyze individual components against your design system
  • Slack / Notion integration - post reports into team workflows so findings don't live only in Vera

Built With

Share this project:

Updates

Submission history