How-tos

Short workflows for the canvas. New to PuMi? Start with Getting started.

Create a new project

1. Sign in from the home page.
2. Open Dashboard and click New project, or use New canvas from home when signed in.
3. The canvas opens for that project. Rename the project from the top bar if you like.

Work on the site map

1. Select the Site map tab (first tab in the center of the top bar).
2. Add pages with Add (plus). Drag page nodes to lay out your IA.
3. Connect pages with edges to show navigation (e.g. “Sign in → Dashboard”).
4. From a page node, use Open wireframe (or click the page’s tab) to design that screen’s layout.

On Site map, Clear page links (trash control) removes all edges between pages. (Undo history is only tracked on page tabs, so use Clear carefully on the map.)

Map blocks on a page

1. Click the page tab you want (not Site map).
2. Add blocks for major UI regions (hero, sidebar, list, etc.).
3. Connect blocks with edges where flow matters inside the screen.

Edit a wireframe

1. On a page tab, the page wireframe editor opens for that screen’s main surface.
2. Use quick add icons or Add element (search) to place lo-fi boxes—Navbar, Hero, Sidebar, Main content, Footer, plus primitives like Section and Heading—then drag and resize on the grid.
3. Set labels, Preview for a clean read-only view, and link to other pages where the UI navigates.
4. Use Back to return to the site map.

Shortcuts (when focus is not inside a text field): A opens Add element; H / B / I quick-add Heading, Primary button, Input; Esc clears selection or exits preview; arrow keys nudge selection (Shift for larger steps); ⌘D / Ctrl+D duplicates selected elements; Alt + click empty artboard drops the last-used type at that point; drag a rectangle on empty space to select; Shift + drag to add to the selection; with multiple selected, use Align / Distribute in the footer.

Premium: AI blueprints (templates) in the toolbar insert starter layouts on a page—they are disabled while you are on Site map.

Export for specs or AI tools

1. Click Export in the canvas toolbar (opens the side panel).
2. When you exported from a page tab, choose Full project or This page only for the preview and copy/download.
3. Pick Markdown, .cursorrules (Cursor), CLAUDE.md (Claude), or JSON.
4. Expand This page’s wireframe in export to sanity-check geometry before handoff; use Agent instruction or Wireframe (page) for smaller clipboard chunks.
5. Copy or Download; paste into your assistant, README, or repo.

Undo and history

Undo and redo apply only when a page tab is selected (block canvas and wireframe for that screen), not on Site map.

• Use Undo and Redo in the footer bar; they are disabled when Site map is active.
• Shortcuts (when not typing in an input): ⌘Z / ⌘⇧Z on macOS, Ctrl+Z / Ctrl+Shift+Z on Windows and Linux—same rule: switch to the page you are editing first.

Collaboration and appearance

Premium unlocks team-oriented controls (e.g. invites) and canvas themes (dot grid and edge styling). If you see a paywall modal, confirm your plan on Billing.

Find this again later

Use Help in the canvas footer or bookmark Help.