管理

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/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.

これ以上のコンテンツはありません