Getting started

Install the app, open a project folder, and understand what ends up on disk.

Install

Download the installer for your platform from the download section. Builds are not code-signed yet, so the first launch needs one extra confirmation.

Windows

Run DesignFlow-Setup-<version>-x64.exe.
SmartScreen shows "Windows protected your PC". Choose More info, then Run anyway.
The app installs to %LOCALAPPDATA%\Programs\DesignFlow and does not need administrator rights.

macOS

Open DesignFlow-<version>-arm64.dmg and drag DesignFlow to Applications. The build is Apple Silicon only.
Gatekeeper blocks the first open. Right-click DesignFlow in Applications, choose Open, and confirm.
If that is refused, clear the quarantine flag and open it normally:

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

Open or create a project

A DesignFlow project is a plain folder. Keep it inside the repository the design describes — the IDE assistant then reads design and code from one working tree.

Create. Choose a new project on the start screen and pick an empty folder. DesignFlow writes project.dfproj and the rest of the scaffold into it.
Open. Point the app at an existing folder, or open its project.dfproj directly.

The four working surfaces

Three top-level modes share the top bar; the component editor opens from a component on the canvas.

Surface	What it is for
Design	The infinite canvas: frames, component instances, design tokens, and annotations.
UX	User stories as canvas cards, on a kanban board or in a force-directed graph view.
Dev	A read-only canvas with story playback, step markers, code links, and spec export.
Component Editor	One component in isolation: properties, slots, variants, and its interaction logic graph.

Where the files live

Everything is human-readable JSON, written next to your code and safe to commit. The full schemas are in the source repository.

Path	What it holds
`project.dfproj`	Project manifest. Opening this file opens the project.
`design.df`	The design file: pages, their elements, annotations, and flows.
`tokens.dft`	Design tokens and variable collections, in W3C DTCG form.
`stories/<id>.dfs`	One user story per file, with its steps embedded.
`epics.dfs`	Epics and features, shared across every story.
`components/<name>.dfc`	Imported and shareable component files.
`code-links.dfl`	Mappings from design elements to paths in your codebase.
`assets/images/`	Image files referenced by canvas elements.
`.cache/`	Read-only copies of components imported from a library.

Local components live inside design.df as wrapper elements; only imported components use a separate .dfc file.

Saving

DesignFlow autosaves. Ten seconds after your last edit, every changed file is written to disk; files nothing touched are skipped. There is no save button and no save dialog.

Because saves land as ordinary files, git diff shows what a design change actually changed, and a review of the design reads the same way as a review of the code.

MCP setup — let Claude Code or Cursor read the project directly.
Collaboration — connect the app to a hosted collab server.