Back

WireFlow

A browser canvas for product flows, wireframes, and planning sketches.

Product sketches often live in separate tools or throwaway screenshots, making it harder for agents and implementers to connect the plan to the build.

What I built

A planning and wireframing canvas built with Next.js and React.

The source includes shape tools, frames, component groups, layers, documentation panels, image export, keyboard shortcuts, persistence, and an MCP bridge.

How it works

Open the canvas, create frames, place shapes/text/arrows, group reusable components, annotate elements, and export or persist the workspace.

What it proves

The output is a structured visual plan that can be reviewed by humans and potentially driven or inspected by agents.