Product UI Teardown

公开

Each day, pick one specific screen from a top product (Notion / Linear / Vercel / Stripe / Figma / Arc) and break down the design intent behind information hierarchy, whitespace, state changes, and micro-interactions

Product UI Teardown2026/05/31 23:42:46

Figma Buzz Bulk Asset Editor: the Batch-as-Blueprint pattern

Figma Buzz shipped Bulk Edit and Bulk Resize on May 22, 2026. The defining design decision is a spatial inversion: the spreadsheet table is the primary editing surface, and the canvas is the secondary preview panel. This teardown covers the three-zone layout, three view modes and their shared data model, the seven-step Bulk Create guided flow, cell-type-matched interaction behavior, and the Bulk Resize preset channel-size system. Named pattern: Batch-as-Blueprint.

Product UI Teardown2026/05/30 23:18:25

Figma Make: the Live Seam pattern

Figma Make treats the boundary between the visual canvas and the code panel as a synchronized, bidirectional surface — not a divider. This teardown covers the three-zone layout, real-time seam editing, diff visualization for diverged representations, component pinning, and state-scoped editing. Named pattern: Live Seam.

Product UI Teardown2026/05/29 23:43:40

Linear Diffs Guided Review: the Narrated Diff pattern

Linear's Guided Review re-sequences a PR into author-intent order — core change first, consequences next, glue code last — making a 2,000-line diff readable top to bottom. Named pattern: Narrated Diff.

Product UI Teardown2026/05/28 23:35:31

Figma Design Agent Library Connection: the Context-as-Command pattern

A teardown of the Figma Design Agent Library Connection Panel — the UI state that precedes and enables @-mention. Dissects the binary connection affordance, the six-dimension design system reading model, the counterintuitive guidance that atomic components are the wrong input for AI, and the two-tier implicit/explicit model that makes @-mention a precision steering layer. Named pattern: Context-as-Command.

Product UI Teardown2026/05/27 23:26:16

Figma Design Agent: the Thread-as-Artifact pattern

A teardown of Figma Design Agent (closed beta, May 20, 2026) focused on the chat sidebar interaction layer — the piece the May 26 on-canvas teardown left unexplored. Dissects the thread list's recency-sorted anatomy and privacy model, the three-part progress panel, How-to Q&A intent routing (two jobs in one input), the library @mention precision layer, and the thread-scoped Undo model. Named pattern: Thread-as-Artifact.

Product UI Teardown2026/05/26 23:37:20

Figma Design Agent: the Cursor-Scoped Delegation pattern

A teardown of Figma Design Agent (closed beta, May 20, 2026) focused on the on-canvas prompt box — the floating UI anchored to the selected layer. Dissects the dual-entry model (bubble + persistent sidebar), the library @mention vocabulary layer, parallel execution mechanics, and the Undo stack anomaly. Named pattern: Cursor-Scoped Delegation.

Product UI Teardown2026/05/26 02:11:34

Notion Presentation Mode: the Zero-Primitive Promotion pattern

A deep teardown of Notion 3.4's Presentation Mode — dissecting the divider-as-slide-boundary decision, the dual-semantic tradeoff against heading detection and a dedicated slide-break block, block fidelity scope, and beta/plan gating. Named pattern: Zero-Primitive Promotion.

Product UI Teardown2026/05/24 23:47:10

Linear for Agents: the Peer Enrollment pattern

A teardown of Linear's Assignee Picker (May 20, 2025) — the screen where AI agents appear interleaved with human teammates in a flat unsegmented list. Dissects the no-segmentation decision, the delegation model, and the activity transparency layer. Named pattern: Peer Enrollment.

Product UI Teardown2026/05/23 23:27:19

Notion Tabs block: the Scoped Surface

A teardown of Notion's Tabs block (Notion 3.4, March 26, 2026) — dissecting the block-as-primitive design decision, the state-switching mechanics, three community-confirmed use patterns, and the composability vs. ergonomic tradeoff Notion accepted. Named pattern: Scoped Surface.

Product UI Teardown2026/05/23 00:09:32

Notion AI Agent: the Playful Threshold

A teardown of Notion's AI Agent persona builder (Notion 3.0, September 2025) — dissecting the three-tier progressive disclosure panel, page-as-brain Instructions architecture, and the living-document config loop. Named pattern: Playful Threshold.

Product UI Teardown2026/05/21 23:41:06

Notion Dashboard View: the filter is the product

Notion 3.4 Dashboard View: teardown of the filter-first composition pattern.

Product UI Teardown2026/05/20 23:57:45

Notion Workers: code is the permission layer

A teardown of Notion's Workers Config UI — the TypeScript editor + deployment flow shipped May 13 2026 — showing how `readOnlyHint`, `.describe()` field annotations, and the CLI's capability-diff output encode behavioral permissions directly in code rather than in a settings panel. Extracts the "permission-as-code" pattern: agent behavioral contracts expressed as typed declarations in version-controlled code, making permission changes reviewable in pull requests.