DESIGN:OS · AST Audit · DESIGN:OS Code2Flow
Turn any frontend or mobile codebase into a complete user-flow map and 11-heuristic UX audit.
Local-first CLI and programmatic SDK that statically analyzes Next.js, React Router, TanStack, Expo, SwiftUI, Flutter, and Jetpack Compose into Mermaid flows and UX gap reports.
DESIGN:OS Code2Flow in operation: deterministic execution with verified output contracts.
production build · verifiedWhat it is
- Repository
- jangtrinh/
design-os-code2flow - Requires
- Standard ToolchainZero native dependencies
- Interface
- CLI & Library APIDeterministic output
- Telemetry
- Zero TrackingNo phone-home
- Environment
- Local-FirstWorks completely offline
- License
- MIT
Why DESIGN:OS Code2Flow, compared with alternatives
What this project does that alternative approaches do not, or do differently. Our advantages first, followed by the honest trade-offs.
7-framework AST & route extraction
Statically analyzes Next.js App Router, React Router (v6/v7), TanStack, Expo, SwiftUI, Flutter, and Jetpack Compose into a canonical flow graph.
11-heuristic UX gap detection
Automatically flags dead-end screens, orphan routes, missing loading/error states, unconfirmed destructive actions, and broken navigation edges.
File:line evidence & confidence tiers
Every transition edge carries exact source coordinates (`file:line`), trigger type, confidence score, and real Playwright screen captures.
Interactive local Flow Canvas
Explore Product Map, Story Present lanes, Focus step player, and modal/drawer state frames locally at `127.0.0.1:4317` with zero cloud uploads.
Where cloud analytics & session-replay tools win, and it is not close: PostHog, Amplitude, and FullStory measure real production user drop-off and conversion funnels from live traffic. Code2Flow audits what your codebase actually implements before a single user hits production.
Install once
Install globally via npm or invoke directly with `npx` to audit any frontend or mobile repository on your machine.
npm i -g design-os-code2flow
# Or run directly without global installation
npx design-os-code2flow audit .First safe use
- Run a static AST flow extraction and 11-heuristic UX audit in read-only mode.
npx design-os-code2flow audit . - Initialize configuration, `.gitignore`, and agent skills in your target app.
code2flow init /path/to/your-app - Scan routes, capture real screenshots, lint flows, and serve the interactive Flow Canvas.
code2flow run /path/to/your-app && code2flow serve /path/to/your-app
Examine the structured output before executing live actions. Verified outputs guarantee state integrity.
A practical loop
audit
Statically parses routes, screens, and navigation edges while running the 11-heuristic UX gap detector.
init
Scaffolds `code2flow.config.json`, `code2flow.stories.json`, and AI coding agent skills into the target repo.
run
Boots the dev server, captures Playwright screen & modal states, runs flow lint, and writes an offline bundle.
serve
Launches the local Flow Canvas viewer at `http://127.0.0.1:4317` with Product Map, Present, and Play modes.
Frequently asked questions
What is DESIGN:OS Code2Flow?
DESIGN:OS Code2Flow is an open-source tool designed for developers and engineering teams. Local-first CLI and programmatic SDK that statically analyzes Next.js, React Router, TanStack, Expo, SwiftUI, Flutter, and Jetpack Compose into Mermaid flows and UX gap reports.
How is DESIGN:OS Code2Flow installed?
Clone the repository from GitHub and follow the Quickstart instructions, or install via your preferred package manager if distributed.
How does it compare with alternatives?
DESIGN:OS Code2Flow prioritizes zero-dependency execution, deterministic results, and local privacy over bloated closed-source platforms.
Does it send telemetry or require cloud services?
No. DESIGN:OS Code2Flow operates strictly on your local machine. No external tracking, no cloud lock-in, no telemetry.
What license is DESIGN:OS Code2Flow released under?
DESIGN:OS Code2Flow is licensed under the permissive MIT license, allowing free commercial and personal use.
Ecosystem & Related Projects
Explore complementary developer tools and companion repositories designed to work together.