Skip to content

Work / Babul / Wiki / Concepts

capture-reads-the-product

Conceptcanonicalverified 2026-10-23

CONCEPT.CAPTURE

Capture reads the running product

Summary

Capture turns a live URL into primitives. It opens the product in a real browser at each size the site supports, reads what a user would see, and files it as tokens, icons, components, variants, pages and journey edges. It is how every product in Babul 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: Babul follows the links it finds. By hand: the person uses their product in the frame, signed in if needed, and Babul captures each page they open. Both are drawn: onboarding-capture and onboarding-capturing. By hand is in every plan; automatic is Team (2026-10-19-walk-free-automatic-team).
  • Babul never draws inside the product. The captured site is shown in a browser frame that holds only the site. Every Babul 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.
  • Roles. Capture asks who uses the product. Open (no sign-in) is the default; each added role has a name, an email and a password. Capture runs once for Open and once per role, and marks each page with the roles that reach it. Role passwords are kept encrypted and only the worker reads them, so re-capture and Verify can sign in again. A role with 2FA or single sign-on is walked by hand. Roles are kept in Product settings › Roles.
  • One capture, one run per role, in turn. Open goes first. Then Babul signs in as each role the plan allows (the free month: one), at the role's sign-in address or at the first page where Open met a sign-in, and walks from where signing in led. A signed-in walk never follows a link that signs out. A page an earlier role already saved is not saved again; it gets a mark for this role too. A refused sign-in fails that role only, with the reason, and the next role still runs. A value nobody's pages use any more leaves main only when every role was captured.
  • A password goes only to the product's own site. Babul types it only on the site the product was captured from, and stops anything that would carry it to another site, such as a form that posts elsewhere; that role fails with the reason. Verify against the same site opens each page behind a sign-in as a role that reaches it. Against another site no role signs in, and those pages are left out.
  • Sizes are picked by hand in Your product (Web, Tablet, Mobile), with one design for all or one per size. Nothing detects them.
  • A component is structure that repeats, on one page or across pages, and is a thing a designer would draw (owner, 2026-10-19): something to press; a header, footer or nav on every page; or something with a look of its own that the site names, or that sits side by side with others like it, as cards and tiles do. A section, a list or a wrapper with no look of its own is layout, however often it repeats; utility classes such as no-print or wrap name nothing. The same structure in another style or state is a variant, not a second component. Buttons, inputs, headers, footers and navs the site names nothing are one component each however they are built; other things nothing names are one when built nearly alike.
  • A component is named by what the site calls it in data-component or data-testid, else by a class most of its uses share, else by what it is: a Stat (a label and a value in a box), a Card (a box with a heading, a list or a picture), a LinkCard or LinkButton, a TableRow, or its tag.
  • A page differs from another only by its query when it is built the same (85% alike): a form's scenario or a plan picked is one page, not one per value. A query that changes how the page is built is a page of its own.
  • Logos are found by place and name, not by size alone: a "logo" class or label, a class of exactly "brand", or the home link in the header. The favicon is a logo.
  • 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 action that triggers it. Capture draws the journey first; in Edit a person can add pages and links. See journeys.
  • Two other ways in. Your product offers a URL, images or blank. Images become HTML and CSS pages (AI, metered); a blank product skips Capture. See onboarding-steps.

A saved page must look right with no scripts and no access to its own site. It is shown in a sealed frame. So capture writes into the page everything the frame could not fetch: stylesheets, the fonts the page loaded, and a picture of each canvas. What a script would animate in later is the one thing that can be lost.

Related

Sources

  • .context/designs/web/onboarding/product.html · capture.html · capturing.html
  • .context/designs/web/northwind/northwind-web/main/analysis/overview.html