DesignFlow

DesignFlow is an open-source CLI for designing screens in React and seeing their navigation flow on a canvas. It is aimed at developers who design in code and want to wireframe faster while iterating with AI. The product lets users write screens as React components, connect flows, and export or share the result from the terminal.

Its workflow centers on real React components and flow links between them. The page says that every screen is real React, and that adding data-df-navigate causes flow arrows to appear automatically. It also supports Claude Code and AI Agents: screens can be described in plain English, and Claude Code generates real React components on the canvas. The interface includes live components and flows, export and sharing features, theming with design tokens in one file, instant HMR, zero-config Tailwind v4 with dark mode, and light or dark mode toggles per screen. Screen previews are shown at desktop, tablet, or mobile resolution.

DesignFlow is run from the terminal with npx. The page shows an init command to scaffold screens, flows, and a theme file, followed by a dev command that launches a local canvas at http://localhost:4800. It also offers PNG download, single-file HTML export with all JavaScript and CSS inlined, and cloud sharing through a public link that anyone can open without login. The project is open source under the MIT License and links to GitHub.