Point it at a repo. SketchScreens finds the screens, the fields and buttons on each, and the flow between them — and draws it all as a sketch map. Review a whole app without ever opening it.
Every existing tool is either plan-first (you write the plan, it visualizes it), manual (you draw it in Excalidraw or Figma, and nobody keeps it current), or a closed SaaS going the other direction — screenshot → code.
Nothing reads your actual source and draws the actual screens. SketchScreens does exactly that.
npx sketchscreens — no install, no setup, nothing to configure.
A coding agent reads each screen's component and emits a spec — the real headings, fields, buttons, and lists. Agent-first, so it works on any stack.
The renderer draws every screen as a hand-drawn wireframe, wires the flow between them, and opens it on localhost. Search it, focus it, export it.
your repo ──▶ extractor ──▶ map.json (the ProjectMap contract) ──▶ renderer ──▶ sketch wireframe map
It detects the screens that are actually wired together and lays them out as one map: entry → auth → dashboard → every section. 39 screens and 48 flows here, from a real codebase — none of it drawn by hand.
The map is rooted at App Launch and branches through Login, Verify, Front Desk, and out to every settings and billing screen — with the arrows labelled by what triggers each move. Read the whole flow without booting the app once.
Zoom in and the wireframes are recognizable: “Verify your number / 6-digit code”, an Account Settings screen with a red Delete-my-account danger zone, “Your AI Should / Should NOT” rule lists. It reads the actual fields off your components — a sketch, not a lorem-ipsum mock.
Click any screen for its provenance: the route, the exact source file, where it arrives from, where it goes, and every element on it. And every run prints a coverage report — which discovered routes weren't mapped — so a silently-omitted surface can't hide.
Agent-first extraction · no per-framework parser to maintain · works with
SketchScreens runs locally and the viewer binds to localhost. There's no phone-home. It's MIT and self-hostable — your tool, your infra. Fork it, extend it, ship it.
Runs on your machine. The viewer binds to 127.0.0.1.
Nothing about your code leaves by default.
Free, open, self-hostable. Truly yours.
One JSON contract. New stack = a profile, not an engine rewrite.
Get the lay of the land in minutes — every screen and how they connect — before you touch a line.
See the real flow the code implements, not a stale Figma. Catch a missing state or a dead end.
Point it at any repo and get an honest, current map of what actually exists — across many apps.
SketchScreens draws your actual screens, from your code — and stays current because it's generated.
| Approach | Draws your real screens? | From source code? | Stays current? |
|---|---|---|---|
| SketchScreens | ✓Yes | ✓Yes | ✓Yes |
| Manual diagramming | ✓Yes | ✕No | ✕No |
| Architecture diagrams | ✕No | ✓Yes | ~Sort of |
| Prompt → wireframe | ~Sort of | ✕No | ✕No |
| Screenshot → flow | ✓Yes | ✕No | ✕No |
Yes — that's the whole point. SketchScreens reads an existing repo, finds the screens that are actually wired together, and draws a hand-sketched wireframe of each. No design file, no re-drawing, no re-running the app.
Free, open-source, and local-first. Nothing to sign up for.