Sneak Peek

See every take. Then touch the code.

A Mac app where your coding agent builds a few takes on a screen, from your real components. You pick one before anything touches your code.

Design and build · 10 days · Mac app · Shipped, 0.8 · 2026

The gap Sneak Peek closes

Design tools give options. An agent gives the real thing. Nothing gave both.

Design toolsoptions, as picturesYour agentreal, but one guessSneakPeek

Six tools near the same corner

Each one gives part of it. This is where each one stops.

FigmaWhat it givesA canvas for many options, drawn as pictures.Where it stopsWhat you compare is a drawing, not the running product.
FramerWhat it givesA canvas that publishes real sites.Where it stopsBuilt from Framer's own components, not from your repo.
LovableWhat it givesA working app from a prompt.Where it stopsA new codebase, and one result at a time.
Magic PatternsWhat it givesAI prototypes in a design system you import.Where it stopsIts own AI working on a copy, not your agent in your code.
PaperWhat it givesAn HTML and CSS canvas that agents write to over MCP.Where it stopsIt draws its own HTML. Your code components were still on its roadmap in September 2026.
pen.devWhat it givesA canvas agents draw on, saved as an open .pen file.Where it stopsA design file beside the code, not the code running.
Sneak PeekWhat it givesYour real components, in several takes side by side.Where it stopsBuilt by the agent you already use, outside your repo.

Three tries to find a home for variants

The first two tries fixed the toolbar and hid the variants. The third came from exploring the sidebar in Figma and trying it as a clickable prototype before any code. I set the direction and made the calls, and Claude built the explorations, the prototype and the code.

  1. Starting pointDidn't work

    A segmented control in the toolbar

    The first build listed every variant as a segment. It grew with each new variant until it pushed the rest of the toolbar into overflow.

    The toolbar in 0.1.0 with a segmented control: All, Colors, Sizes, States, Shapes, followed by device and zoom controls

  2. Quick fixDidn't work

    A menu that hid the variants

    Claude swapped it for a fixed-width All variants menu. The toolbar stayed tidy, but seeing the variants took a click and switching took two.

    The toolbar in 0.4.0 with a single All variants pop-up button

  3. DivergeExplored

    Four directions for the sidebar

    I asked for sidebar ideas, and Claude built four on the real window in Figma: search and recents, live status, variants nested under prototypes, and thumbnail previews.

    Direction A: a search field and recents above the projects

    A · Search

    Direction B: live running status on each project

    B · Status

    Direction C: variants nested as rows under their prototype

    C · Nested

    Direction D: wide rows with thumbnail previews

    D · Previews

  4. ConvergeMy call

    C and D, combined

    D's thumbnails were my favorite, but I wanted to talk it through before any code. Then I suggested keeping C's compact rows and putting D's thumbnails inside them. That became option E.

    Option E with a prototype selected: compact rows with thumbnails inside them

    E · Prototype selected

    Option E with a variant selected

    E · Variant selected

  5. ValidateTested

    A clickable prototype before any code

    Claude built 31 screens with real captures and 396 hotspots, so the sidebar could be tried in Figma first. I chose E over the toolbar menu once it was built.

    The 31 screens of the clickable Figma prototype, laid out in a grid

  6. Trade-offHard call

    The toolbar menu goes

    Choosing E meant removing the variant menu entirely. Nesting snapshots would have added a third sidebar level, so they moved into the title menu, with a count on the prototype row.

    The title menu in 0.5.0, open, with Save Snapshot, Open in Browser and the list of snapshots

  7. FixDidn't work

    Blank thumbnails

    The first thumbnails were taken as soon as a page loaded, before it rendered, so most came out as one flat color. They now wait until the stage reports it has settled.

    A thumbnail taken at load: one flat dark color

    Taken at load: 1 color

    The same thumbnail taken after the stage settled, showing the buttons

    After the stage settles: 330+ colors

  8. ShipShipped in 0.5.0

    Variants in the sidebar

    Every variant is a row with a thumbnail, in canvas order. Picking one hides the other rows without a reload.

    Sneak Peek 0.5.0: the buttons prototype open in the sidebar, with Colors, Sizes, States and Shapes as thumbnail rows

Not measured yet

The usage log records rendered frames and previews, but not which variant was picked, so this change has no before and after. Logging a variant pick would make the next change to the sidebar measurable.

Who did what

My part

Asked for sidebar directions. Favored D, then suggested combining C with D. Chose E once the clickable prototype was built.

Claude's part

Built the segmented control and the menu, the four directions and option E in Figma, the 31-screen prototype, and the code. Found why the thumbnails were blank.

How it was decided

Direction from me, options from Claude, and a clickable prototype to settle it before any code was written.

Variants moved out of a menu and into the sidebar

A prototype in Sneak Peek holds several variants, and comparing them is the point of the app. In 0.4 they sat behind an All variants button in the toolbar, while the sidebar only counted them. Seeing what existed took a click, and switching took two.

Before0.4.0

Sneak Peek 0.4: the sidebar lists prototypes with a variant count beside each, and an All variants button sits in the toolbar

  1. A count, not a list

    Each row said how many variants a prototype had, never which ones.

  2. Hidden behind a pop-up

    It replaced a segmented control that outgrew the toolbar, and hid the variants along the way.

A · Search and recents

Option A: a search field and a Recents list above the projects

B · Live status

Option B: each project shows Running or Stopped, and a row says Claude is editing

C · Variants as rows

Option C: variants nest as a second level of rows under their prototype

D · Previews

Option D: each prototype is a wide row with a thumbnail and its variant count

The decision

None of the four, well. I took the rows from C and the previews from D: a prototype stays one compact row, and its variants open under it as thumbnails, so you can tell them apart before you click. Search and live status help you find and monitor. The problem was comparing. The toolbar menu is gone.

After0.5.0

Sneak Peek 0.5: the buttons prototype is open in the sidebar, with its variants Colors, Sizes, States and Shapes as thumbnail rows in canvas order

  1. Every variant in view

    Variants nest under their prototype as rows, each with a thumbnail taken from its frame on the canvas.

  2. In canvas order

    Rows follow the canvas from top to bottom, and picking one hides the other rows without a reload.

Design review: a preview that stays in the window

Opening a variant used to mean a new full-screen window and a switch of Space.

A variant of the buttons prototype fills the main window, with the controls inspector on the right

The preview fills the same window and the canvas stays loaded underneath, so Esc returns at once. Controls sit in a native inspector beside the design, not over it.

Design review: pointing instead of describing

Describing an element to an agent in words kept failing. Select lets you point at it.

A phone preview with two numbered note pins; one note is open beside its element, and the inspector lists both notes

A click on a pin opens its note. Each note is a numbered pin on its element and a row in the inspector.

The inspector after picking an element: PageHeader, its div and page.tsx line 18, its controls, and an Add Note button

Pick an element and the inspector names it: the component, the tag, and the line of code it came from. Its controls and Add Note sit right under it.

A phone preview with a numbered note pin on its headline, beside the inspector's controls and its Notes list

The note becomes a numbered pin on the element, and the agent gets it with that line of code.

Popover option one: only the note text, with no visible actions

The calmest option. But nothing says the note can be edited or deleted, so both actions are things you must already know.

Popover option two: the note text, with Edit and Delete as two small icons under it

Shipped. Both actions are one click away and easy to find. Two quiet icons cost little room, and Delete turns red only under the pointer.

Popover option three: the note text, with only a faint Edit link under it

Edit is the common action, so only it shows. Delete moves to the context menu: safer, but harder to find.

The decision

I shipped the second. A note is something you come back to: you fix its wording, or remove it once the agent has handled it. So both actions stay in view, as two gray icons that keep the note itself the main thing. Its status moved out to the inspector row.

What is still open

The parts I have not solved.

  • No outside user has saved a prototype
  • Controls and Terminal share one column
  • Designers still meet a terminal
  • Measure the 0.8 first run

Next project

Artza Website & CMS

Artza Productions: the home page, a production page, and the mobile site in a layered composition
WhatsApp