DevLens — Design-to-Development Handoff Tool
A tool that documents the interactions, edge cases and responsive rules a Figma file alone can't explain, then scores how ready the result actually is to hand to a developer.
Context
A Figma file communicates spacing, typography and layout well, and says almost nothing about what happens when a list is empty, a field fails validation, or a modal needs to respond to Escape. Those gaps usually surface mid-sprint, as a developer's Slack question. DevLens set out to catch them before handoff, by documenting intent alongside the pixels.
The Challenge
The product needed to identify what's genuinely missing from a design — interactions, edge cases, responsive behaviour, accessibility — without requiring a Figma plugin or API access, and turn that into documentation a developer would actually read instead of a longer document nobody opens.
Research
Catalogued the kinds of questions that actually derail a sprint — empty states, loading behaviour, focus and keyboard handling — and used that list to define what 'documented' needed to mean, rather than treating documentation as a single yes/no checkbox.
Insights
The key findings that shaped the direction.
Figma explains what things look like, not what they do
Spacing, colour and layout are well covered by a design file — interaction, validation and edge-case behaviour almost never are, and that gap is exactly where handoff friction comes from.
The right output is a question list, not a document
A generic 'add more detail' prompt doesn't help — surfacing specific, answerable developer questions per component is what actually gets a design finished before build starts.
Readiness has to measure documentation, not design quality
Conflating 'is this documented' with 'is this good design' would have made the score untrustworthy — the readiness score deliberately measures completeness only, leaving design judgement to the reviewer.
Design Strategy
How decisions were made.
Detect, document, handoff — as three distinct stages
Structured the product around finding what's missing, capturing the intent behind it, and generating structured documentation, so a project's state is always legible as one of those three.
Ask the same questions a developer would
Generated per-component developer questions — does this list paginate, what happens on zero results, does Escape dismiss this — instead of a generic 'incomplete' flag.
Score readiness across four independent dimensions
Split the handoff-readiness score into Documentation, Interactions, Responsive and Accessibility, so a team can see exactly which dimension is dragging a project down.
Link back to Figma instead of replacing it
Let every documented decision link to its corresponding Figma frame, positioning DevLens as the layer that explains intent rather than a competing source of truth for the visuals.
Build solo, with AI as the engineering partner
Designed and built end-to-end using Claude Code as a development partner — from the gap-detection logic to the readiness-scoring engine — without a dedicated engineering team, while keeping every UX and scoring decision in my hands.
Solution
A local-first handoff-documentation tool that detects undocumented interactions, edge cases and responsive rules in a design, turns them into developer questions, and scores overall handoff readiness across four dimensions.
A look at the work.
The live product at getdevlensapp.vercel.app.
Handoff readiness scored across four dimensions, alongside the developer questions it generated.
The three-step model behind every project — detect what's missing, document intent, hand off with clarity.
Design System Thinking
This project wasn't designed as a one-off — here's how it connects back to the system.
Components
A shared readiness-bar component (dimension, percentage, open questions) reused across the dashboard summary and the per-page documentation views.
Tokens
A consistent status language — resolved, open question, needs attention — applied across developer questions, readiness bars and the sample handoff.
Patterns
A detect-then-document pattern — flagged gaps paired with a place to resolve them — reused across interactions, responsive rules and accessibility.
Governance
Projects are stored locally via IndexedDB with no account and no database, so unreleased design work never leaves the device, by architecture rather than policy.
Impact
DevLens shipped as a working alternative to handing over a Figma link and hoping the right questions get asked in time, giving a design a measurable readiness score before it reaches a developer.
Reflection
The hardest call was keeping the readiness score honest about what it measures — it would have been easy to let 'documented' quietly drift into 'good,' and the moment that line blurs, the score stops being something a team can trust.