Capture reads the running product

Summary

Capture turns a live URL into primitives. It opens the product in a real browser at each chosen screen size, reads what a user would see, and files it as tokens, icons, components, variants, pages and journey edges. It is how every product in Trunk starts.

Why it matters

The product is the source. A design file drawn by hand drifts from what shipped. A capture cannot, because it is made from what shipped.

Nothing to install. Capture needs a URL and nothing else.

Implications

• Two ways to walk. Automatic: Trunk follows the links it finds. By hand: the person uses their product in the frame, signed in if needed, and Trunk captures each page they open. Both are drawn: capture-walk and capture-manual.
• Trunk never draws inside the product. The captured site is shown in a browser frame that holds only the site. Every Trunk control is outside it.
• Walking by hand is a live session. The person clicks in their own product, signed in. That needs a hosted browser, which the automatic walk already uses, streamed to the person.
• Device sizes are picked by hand on the Capture screen. Nothing detects them.
• A component is structure that repeats, on one page or across pages. The same structure in another style or state is a variant, not a second component.
• A missing state is a finding. Capture reports what it did not see, such as a card with no empty state.
• A capture can stop, and never loses work. A login wall pauses it, a dead site stops it, and a site with nothing readable ends it empty. Each says what was saved and what to do next.
• A journey edge is a real link, labelled with the element that triggers it. Nobody draws the journey.
• Other ways in. Import a Figma file once, start blank, or start from the blank website template. All four are on the Capture screen.

Related

• capture · capture-walk · capture-manual · capture-complete — the four screens.
• onboarding-steps
• 2026-10-09-design-tool-only

Sources

• .context/designs/web/onboarding/capture.html
• .context/designs/web/onboarding/capture-walk.html
• .context/designs/web/onboarding/capture-complete.html