Skip to main content
Elizabeth Stein.
Open to workWorkAboutContact3D Galaxy

Case study

DevTools Arsenal

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

Role
Creator
Year
2026
Status
Live
Stack
Next.js, React 19, TypeScript, Google Gemini, Sandpack, axe-core
View live site →Source codeRead the writeup ↗

Interactive Demo · DEV.to Winner

Screenshot-to-Code Grounding Inspector

Trace — Grounded Screenshot-to-Code Engine
★ DEV.to Winner
Live Sandpack Component Preview:
Production ClusterHealthy
99.98% Uptime

Story · how this shipped

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.

The build

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.

What shipped

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

Scale & impact

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

Engine room

At a glance

38
Tests

Inventory

Stack & signals

Next.jsReact 19TypeScriptGoogle GeminiSandpackaxe-core

Let's talk

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 conversation →See more projects

Related work

Signal = how many tags a project shares with this one.

Same clustersignal 3Consent CompassCookie consent widget built for GDPR/CCPA requirements. Drop-in banner with preference management, granular consent categories, and a consent audit trail.Next.jsTypeScriptSame clustersignal 3Rocket VitalsScan-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.Next.jsTypeScriptSame clustersignal 3Site SheriffDrop a URL and get an agency-grade website QA report in under two minutes. Crawls up to 500 pages across 10 levels, running 100+ static checks plus 80+ axe-core accessibility rules on desktop and mobile. Delivers a prioritized, severity-weighted report with fix instructions, effort estimates, and a copy-paste client email.Next.jsTypeScript

Keep exploring

← Previous projectCodeMemoryMaster web development through spaced repetition using FSRS algorithm with flashcards and coding challenges.Next project →hqPersonal 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.

Vetting Liz? Ask an AI

  • Claude ↗: opens Claude with a prefilled prompt
  • ChatGPT ↗: opens ChatGPT with a prefilled prompt
  • Perplexity ↗: opens Perplexity with a prefilled prompt
© 2026 Elizabeth Stein·WorkAboutContactPrivacy
Let's work together → GitHubLinkedIn
Set in Fraunces, Space Grotesk & JetBrains Mono.Built with Next.js & React. Shipping production code across three organisations.