Exploration 03 · screenshots

Full-page captures at 1440px, light theme, in click-through order for each study. The assistant is simulated.

Back to the comparison

A · Embedded workbench

A · Library: catalogue of 17 families by category. One sentence states the condition; filters narrow to what needs you or is waiting to be built. — 03-A1-library.png · live pageA · Library: catalogue of 17 families by category. One sentence states the condition; filters narrow to what needs you or is waiting to be built.

A · Primary action unfolds in place inside the grid: approved definition (states, tokens, variants, brands) on the left, the 212 observed instances grouped on the right. — 03-A2-component.png · live pageA · Primary action unfolds in place inside the grid: approved definition (states, tokens, variants, brands) on the left, the 212 observed instances grouped on the right.

A · Checkout inspected in place: magnified corners with the 4px corner circled, each property compared, and wiring shown (hardcoded radius vs token). — 03-A3-inspect-checkout.png · live pageA · Checkout inspected in place: magnified corners with the 4px corner circled, each property compared, and wiring shown (hardcoded radius vs token).

A · Placing it in “Bring into line”: a small follow-up confirms the token and lets the designer leave the Refund outlier open; scope and implementation consequence stated. — 03-A4-propose-align.png · live pageA · Placing it in “Bring into line”: a small follow-up confirms the token and lets the designer leave the Refund outlier open; scope and implementation consequence stated.

A · Library definition now lists the agreed Checkout change as not built yet (11 instances, Checkout team); the Refund outlier stays open. — 03-A5-after-align.png · live pageA · Library definition now lists the agreed Checkout change as not built yet (11 instances, Checkout team); the Refund outlier stays open.

A · Search placed as a new variant: name it, define its height with a new token, and choose not to carry over the hardcoded fill. — 03-A6-propose-variant.png · live pageA · Search placed as a new variant: name it, define its height with a new token, and choose not to carry over the hardcoded fill.

A · Back in the library: Primary action shows changes waiting on the Checkout and Search teams; the condition sentence updates. — 03-A7-library-after.png · live pageA · Back in the library: Primary action shows changes waiting on the Checkout and Search teams; the condition sentence updates.

03-A8-partner-theme.png · live pageA · Kestrel brand: every specimen re-themes through token values; no duplicate families appear.

A · Revisiting Checkout: the group reopens with its current placement; the designer can move it, here to an allowed exception. — 03-A9-revisit.png · live pageA · Revisiting Checkout: the group reopens with its current placement; the designer can move it, here to an allowed exception.

B · Focus workspace

B · Library index: a one-line map of all 17 families coloured by state, a plain-language condition, and grouping by category, what needs doing, or owner. — 03-B1-library.png · live pageB · Library index: a one-line map of all 17 families coloured by state, a plain-language condition, and grouping by category, what needs doing, or owner.

B · Focus workspace: approved definition with token chains on the left; observed groups on the right. The family map stays in the top bar for orientation. — 03-B2-workspace.png · live pageB · Focus workspace: approved definition with token chains on the left; observed groups on the right. The family map stays in the top bar for orientation.

B · Property-by-property comparison (corner crops, height bars, swatches, wiring), with the placement sheet for “Bring into line”. — 03-B3-propose-align.png · live pageB · Property-by-property comparison (corner crops, height bars, swatches, wiring), with the placement sheet for “Bring into line”.

B · Search: the proposed Large variant appears dashed in the approved pane while being defined; the hardcoded fill is not carried over. — 03-B4-propose-variant.png · live pageB · Search: the proposed Large variant appears dashed in the approved pane while being defined; the hardcoded fill is not carried over.

B · All groups placed: agreed changes listed per team in the approved pane, and a prompt to return to the library. — 03-B5-all-placed.png · live pageB · All groups placed: agreed changes listed per team in the approved pane, and a prompt to return to the library.

B · Back in the library: Primary action’s entry glows, lists what was decided with a revisit link, and its map cell shows “agreed, not built”. — 03-B6-library-after.png · live pageB · Back in the library: Primary action’s entry glows, lists what was decided with a revisit link, and its map cell shows “agreed, not built”.

B · Grouped by owner and switched to Kestrel: same families, re-themed specimens. — 03-B7-partner-by-owner.png · live pageB · Grouped by owner and switched to Kestrel: same families, re-themed specimens.

B · Revisit opens the workspace on a decided group, ready to place it elsewhere. — 03-B8-revisit.png · live pageB · Revisit opens the workspace on a decided group, ready to place it elsewhere.

C · Sorting table

C · Collection board: family cards by category; unsorted observations pile up behind the card they probably belong to. — 03-C1-board.png · live pageC · Collection board: family cards by category; unsorted observations pile up behind the card they probably belong to.

03-C2-table.png · live pageC · Sorting table: piles on a belt, buckets shaped like the component (definition, variants, brand themes, exceptions, not sure, other families), live library entry on the right.

C · Looking closer: the Checkout button overlaid on the definition with the corner called out, wiring per property, and all 12 instances fanned with the Refund outlier marked. — 03-C3-lens.png · live pageC · Looking closer: the Checkout button overlaid on the definition with the corner called out, wiring per property, and all 12 instances fanned with the Refund outlier marked.

C · Pile dropped on the Definition bucket: a small confirmation, with the outlier left out; the library preview shows the change as a proposal. — 03-C4-propose-align.png · live pageC · Pile dropped on the Definition bucket: a small confirmation, with the outlier left out; the library preview shows the change as a proposal.

C · Search dropped into Variants: name it; height and fill come from tokens rather than the observed hardcoded values. Preview shows the ghosted Large variant. — 03-C5-propose-variant.png · live pageC · Search dropped into Variants: name it; height and fill come from tokens rather than the observed hardcoded values. Preview shows the ghosted Large variant.

C · Belt clear: piles sit in their buckets, each with its build status and a “back to belt” control. — 03-C6-sorted.png · live pageC · Belt clear: piles sit in their buckets, each with its build status and a “back to belt” control.

C · Back on the board in Kestrel: Primary action’s piles are gone except the Refund outlier the designer set aside; families re-theme without duplication. — 03-C7-board-after-partner.png · live pageC · Back on the board in Kestrel: Primary action’s piles are gone except the Refund outlier the designer set aside; families re-theme without duplication.

C · Reversing a decision: Checkout goes back on the belt and the preview drops its pending change (Undo in the toast). — 03-C8-revisit.png · live pageC · Reversing a decision: Checkout goes back on the belt and the preview drops its pending change (Undo in the toast).