Skip to main content
Elizabeth Stein
DevTools ArsenalOpen to workHomeWorkAboutContact

Case study

devtools2026

Trace

Paste a screenshot, get a real runnable React component. Google Gemini recreates the layout grounded in a shadcn-style catalog, renders it live in an editable Sandpack sandbox, and shows which pixels became which component with honest confidence tags. Won the DEV.to GitHub Finish-Up-A-Thon.

Building the tools that build the tools

Field notes

Role

Creator

Read order

Evidence first, then constraint → build → proof. Use the chapter rail to jump sections; orbit to adjacent work from the bottom of the case study.

DevTools Arsenal·✦I-Class Giant
🏆CONTEST WINNER●LIVE★FEATURED
38 tests passing
View on GitHub
View Live SiteSource CodeRead the Writeup

Evidence

System surface

No public screenshot on file, generative preview stands in for the visual layer.

Signature viewtrace-liz.vercel.app
Open Live Site
trace-liz.vercel.app

Story arc

How this shipped

Building the tools that build the toolsThree beats: what pressed against the work, how the stack answered, and what changed once it was live.

I · Constraint

The brief

AI screenshot-to-code tools invent generic markup that ignores your design system, and they hide how they got there. Developers get garbage JSX with no way to trust or steer it.

II · Build

The craft

Grounded generation in a real component catalog via an in-prompt whitelist (no vector DB, no credentials). Added "what the AI sees" inspector with per-element confidence and grounded/inferred/guessed tags, a Sandpack live-editable preview, a compile-check self-repair loop, and an axe-core accessibility score with one-click fixes.

III · Proof

What moved after launch

Won the DEV.to GitHub Finish-Up-A-Thon. 38 tests. Reuses real components instead of inventing markup, renders live and editable, and self-repairs both compile errors and accessibility violations on one click.

Signals

◆Signals & scale

Winner
Contest
0
Tests
Gemini + shadcn grounding
AI
axe-core score + fix
A11y

Engine room

At a glance

0
Tests

Inventory

Stack & signals

Next.jsReact 19TypeScriptGoogle GeminiSandpackaxe-core
← Project archive

Tell me what you're building

If you need someone who can own UI, systems, and AI integration without losing the plot, I'm listening. Contract, advisory, or full-time: we'll find the right shape.

Start a ConversationSee More Projects

Related work

Same clustersignal 3
Signal: Medium
Next.jsTypeScript

Consent Compass

GDPR and CCPA compliant cookie consent solution. Drop-in banner with preference management, granular consent categories, and compliance audit trail.

Same clustersignal 3
Signal: Medium
Next.jsTypeScript

Rocket Vitals

Scan-first website QA tool that crawls up to 500 pages and runs 200+ checks across SEO, accessibility, performance, security, links, content, and AI readiness. Delivers prioritized reports with severity scoring, department routing, regression monitoring, and client-ready exports.

Nearby systemsignal 2
Signal: Low
TypeScriptNext.js

Coulson One

Enterprise-scale TypeScript/React application with 64,806 files. Led architecture decisions and core feature implementation for aviation resource management.

Keep exploring

Previous Project

CodeMemory

Master web development through spaced repetition using FSRS algorithm with flashcards and coding challenges.

Next Project

hq

Personal dev-ops CLI that aggregates live state across ~90 repos and the services behind them (GitHub, Vercel, Sentry, Stripe, Notion, ClickUp, UptimeRobot, Railway, Jira) into work contexts, surfacing only what is broken, blocking, or worth attention. No dashboards, just the next thing to do.

© 2026 Elizabeth Stein

·Contact·Privacy
Let's work together → GitHubLinkedIn

Built with Next.js, Three.js, and obsessive attention to detail.