DesignFlow

DesignFlow

A visual documentation platform where the design is the documentation. The output is a structured project folder — UI definitions, interaction specs, user flows, and design tokens — that an IDE coding assistant reads as its source of truth.

Scope

What it is

  • A design tool whose artifact is the spec, not a write-up of the spec.
  • Human-readable JSON on disk: UI definitions, interaction specs, user flows, business logic, design tokens.
  • Built for the work up to the approved spec — design, documentation, and visual prototyping for product validation.
  • Read by IDE assistants such as Claude Code, Cursor, and Copilot over a bundled MCP server.

What it is not

  • Not a code generator. The IDE assistant writes the code.
  • Not a Figma replacement. Figma import is deferred to a later phase.
  • Not a code editor or an IDE.
  • Not a Storybook sync tool, and not a mobile app.

Download

Desktop app for Windows and macOS. Free while in early release.

Download for Windows See releases Download for macOS See releases

Windows build is x64. macOS build is Apple Silicon (arm64). Every version is listed on the releases page.

First run

These builds are not code-signed yet, so both operating systems warn about them the first time. The warning is about the missing signature, not about the file. 

xattr -d com.apple.quarantine /Applications/DesignFlow.app

How it works

  1. Design in DesignFlow. Frames, components, tokens, user stories, and interaction logic on one canvas.
  2. The project folder is the spec. Everything saves as human-readable JSON next to your code.
  3. The IDE assistant reads it. A bundled MCP server exposes the project to Claude Code, Cursor, and other assistants, which implement from it.

Documentation