Roughflow: Rough it out. Tag it. Ship the spec.

The thesis

Roughness is a feature, not an omission.

No templates

A polished starting frame makes it psychologically uncomfortable to leave anything rough. Roughflow gives you a blank frame and a handful of primitives, nothing to live up to.

No icon hunting

You never search a library for a "settings icon." Draw a square, tag it icon, name it "settings" in the layers view. The annotation is the icon, and that's what makes the export mean something.

No forced precision

Nothing snaps to a fixed template size. Nothing forces a resize to "fit." This is the one place native wireframe apps kill momentum: Roughflow is built to never ask you to stop and get it right.

This app is deliberately not a Figma or Balsamiq competitor, and not a high-fidelity mockup tool. Constrained flat primitives, a closed role vocabulary, zero polish: on purpose, so ideation stays fast.

Canvas

Drag out primitives, snap to a 16px grid.

Five primitives (rect, circle, text, line, image) are the whole vocabulary. Place them inside a phone, tablet, or desktop frame, move and resize with a thumb, and let placement snap to the same 16px grid the export is quantized to. No icon search, no template sizing to fight.

Dragging a primitive on the Roughflow canvas, snapped to the grid — Canvas layer: the only place geometry gets edited.

Layers

A list view for everything you've placed.

Every element on canvas shows up here: thumbnail, name, role, indent for stacking order. Flat clusters accordion inline; a list/grid repeater or nested group pushes into its own screen, Settings-app style: deep containers stay one tap away instead of nesting indentation forever.

Roughflow layers view listing tagged elements with thumbnails — Layers layer: thumbnail, name, role, indent for grouping.

Semantic roles

Tap a shape. Tell it what it means.

You never search a library for a "settings icon." Draw a square, tag it icon, name it "settings." The closed set, button, input, heading, text, image, icon, list, grid, group, nav-bar, tab-bar, frame, keeps the export unambiguous; a custom escape hatch covers anything the enum doesn't, flagged lower-confidence on the way out.

Roughflow's element detail sheet with the role tag picker open — Tag from a closed role set, or drop to custom for the rest.

Grid & list repeaters

Define the template once. Set count and gap. Done.

Lists and grids aren't primitives: they're repetition containers. Take one child (a primitive or a group) as the template, set an axis count and spacing, and Roughflow lays out the rest. No more clone-and-eyeball-the-spacing. A vertical list and a square grid are the same repeater, just a different row/column count.

Flow

Wire up navigation between screens.

Link a button, a nav-bar item, or a list template to the frame it opens. Flow edges are element-anchored, not just frame-to-frame, so the export knows exactly which tap triggers which navigation, and your agent can wire the real thing the same way.

Roughflow flow view showing frames connected by navigation arrows — Flow layer: arrows from element to frame, zoomed out.

Light & dark

Rough it out in whichever light you're in.

Canvas, layers, and flow all follow system appearance: same paper, ink, and accent relationships in both directions, never a washed-out dark mode bolted on afterward.

Roughflow's Roughs list shown in both light and dark theme — Same paper/ink system, day or night: every screen, including your Roughs list.

The killer feature

The wireframe was never the point. The spec is.

Every Rough exports to a clean, structured YAML spec: frame sizes, element trees, semantic roles, list/grid repetition, flow edges between screens. Hand it directly to Claude Code or Codex and it scaffolds real components, not a guess from a screenshot.

# Roughflow spec v1
# schema: https://roughflow.com/llms.txt
rough: "Checkout flow"
exported: 2026-07-19T14:02:11.000Z
scope: full
frames:
  - id: frame-1
    name: "Cart"
    device: phone
    size: {w: 384, h: 848}
    elements:
      - id: el-navbar
        type: rect
        role: nav-bar
        name: "Top bar"
        frame: {x: 0, y: 0, w: 384, h: 64}
      - id: el-heading
        type: text
        role: heading
        text: "Your cart"
        frame: {x: 16, y: 80, w: 200, h: 32}
      - id: el-list
        type: group
        role: list
        name: "Cart items"
        frame: {x: 16, y: 128, w: 352, h: 480}
        children:
          - id: el-item-template
            type: group
            frame: {x: 0, y: 0, w: 352, h: 64}
            children:
              - id: el-item-thumb
                type: rect
                role: image
                frame: {x: 0, y: 0, w: 64, h: 64}
              - id: el-item-title
                type: text
                role: text
                frame: {x: 80, y: 8, w: 200, h: 20}
        repeat: {cols: 1, rows: 4, gap: 16, gap_cross: 0}
      - id: el-checkout-btn
        type: rect
        role: button
        name: "Checkout"
        frame: {x: 16, y: 760, w: 352, h: 56}
  - id: frame-2
    name: "Checkout"
    device: phone
    size: {w: 384, h: 848}
    elements: []
flow:
  - from: {element: el-checkout-btn, frame: frame-1}
    to: frame-2

Roughflow export sheet: copy YAML or share — Export sheet: copy to clipboard or share sheet.

Wireframe on your phone between meetings: primitives, tagged roles, linked frames.
Export the whole Rough or a single frame as YAML, straight from the doc screen.
Hand it to Claude Code or Codex: paste it in, or point the agent at the file.
Get scaffolded components: roles become real components, repeaters become real lists/grids, flow edges become real navigation.

Full schema reference for agents: roughflow.com/llms.txt

Get notified

Be first to rough it out.

Roughflow is coming to iOS and Android. Leave your email and we'll let you know the moment it ships, nothing else.

We only use your email to tell you when Roughflow launches. Privacy policy.

Rough it out.Tag it.Ship the spec.