Profi · Workflow

Code ↔ canvas roundtrip

Pull running UI onto the canvas, refine with designers, push intent back to code.

Purpose

Figma Workflow Lab / code-to-canvas and Codex↔Figma patterns close the loop: designers critique real UI on the canvas; agents bring changes back. Profi practice treats the roundtrip as one workflow with two decide gates — not a party trick screenshot paste.

Steps

1. **Start from running UI** — local or staging URL; know which route/state you capture. 2. **generate_figma_design (or equiv)** — bring frames onto the canvas; name the file/page for the review. 3. **Design refine** — variables, components, empty/error states; collaboration happens here. 4. **Decide** — list accepted canvas changes vs rejected experiments. 5. **Push back** — agent pulls accepted nodes via MCP into the repo; verify visually against staging.

When to use / Skip

Use when engineering already has a running surface and design must regain a editable source of truth. Skip when there is no app yet — use `spec-ai-prototype` or `prompt-to-wire-mock`. Not for one-way marketing captures that will never return to code.