Open canvasmain No. 023 Sat · May 30, 2026 4 min

The canvas now opens the pull request.

Design tools learned to commit. This week Figma Make started editing your live product and opening a PR with no terminal, v0 shipped a Git panel, and Cursor ran agents in the cloud — links below.

tooling/shipped.md Tooling

Design tools learned to open pull requests.

technique/review.md Technique

Read the output as a diff, not a deliverable.

When a tool writes straight into your file or repo, the useful question is what changed, not what was made. A diff scopes the answer to the lines that moved — which is also why Figma's Design Agent leans on writing to the canvas with your real design system, so edits stay inspectable.

workflow/gate.md Workflow

If the tool can merge, keep the review.

01

Make the agent state the change, the surfaces it touches, and what it is leaving alone.

Scope
02

Require the change as a diff or editable frames, with screenshots or tests to inspect it.

Diff
03

Keep merge a human action: review the hunks, comment, approve only what is right.

Gate
prompt-lab/idiom.md Prompt Lab

Recreate today's pull-request look.

Hand this to an AI design or build tool — Figma Make, v0, Cursor, or Claude — to get a page in today's Pull Request Review idiom instead of a generic dashboard.

Design a web page using a Pull Request Review art direction.

Lay it out like a code-review "files changed" view: a full-width PR header, then a sticky left "files changed" index rail beside a right-hand feed of entries. Do not use a big hero image.

Translate the references into real web components:
- A masthead styled as a PR header, with an Open status pill and a branch ref (canvas to main).
- A left rail listing each section as a file row with a monospace path and a +N stat, anchored to the feed.
- Each feed section as a changed-file card: a file path, a kind tag, and a +N -N diff stat.
- News items shown as green addition rows: a linked headline, one sentence, a source link.
- A green merge box for the closing takeaway, with a visible Merge button.

Use a cool light review-paper background, near-black ink, merge green, deletion red, and a quiet plum for the merged state. Pair a clean product sans for display with a readable serif for body, and a monospace for paths, line numbers, and labels.

Keep it readable: body text at least 18px, generous line height, no justified prose, strong contrast, no text against borders. Avoid fake readable code in images (use abstract bars), AI-glow, neon gradients, and decorative marks that hurt scanning.

Why it works: it names a real web archetype and a specific layout, then translates the idiom into components, palette, type, and accessibility rules a tool can build — so you get this issue's look back, not a vague "make it look like a code review."

field-note/merge.md Field Note

The merge button is the design surface.

Generation is cheap and constant now; the scarce, designed moment is the one where a person says yes. See also Claude Opus 4.8 and Claude Design.

The change is scoped and visible
The reviewer has a real choice
checks/sources.md Sources

Checks · all green.

Signal scan
Digg AI rankings — live AI-Twitter pulse check used to start research.
Figma
Figma release notes — Make's direct editing, chat edits, and PR creation.
Figma
The Figma Design Agent is here — canvas agent, design-system-aware edits.
Vercel
Introducing the new v0 — Git panel, branch-per-chat, deploy on merge.
Cursor
Cursor changelog — Cloud Agents in isolated VMs reporting to the editor.
Anthropic
Anthropic news — Claude Opus 4.8 and Claude Design.

A field experiment from the team behind Beaver Builder.