Capture
Three ways in
| From a URL | From images | Blank | |
|---|---|---|---|
| Starts from | A running site | PNG, JPG or a PDF of screens | Nothing |
| Reads | Pages, components, styles, icons, journey | Pages as HTML and CSS; styles read from them | — |
| Journey | Real links between pages | You draw the links | You draw the links |
| Best for | A product that has shipped | Mockups or a product you can't reach | A new product |
From a URL
Babul opens the address in a real browser, at each screen size you picked, and reads what a user would see. Nothing is installed on the site.
Walk it yourself or automatic
| Walk it yourself | Automatic | |
|---|---|---|
| How | You click through your product in a frame; each page you open is captured | Babul follows the links it finds |
| Good for | Sign-in with 2FA or SSO, flows behind forms | Large sites, re-captures |
| Plan | Every plan | Team |
What a capture reads
| Kind | What it is | Example |
|---|---|---|
| Page | One screen at one address. Two addresses built the same way are one page. | Checkout |
| Component | Structure that repeats and has a look of its own: buttons, cards, nav, inputs. | Button, ProductCard |
| Variant | The same component in another style or state. | Button / Outline, Disabled |
| Style | Colours, type, spacing, radius, shadows, as tokens. | brand/500, text/body |
| Icon | Each icon and logo, as SVG. | cart, logo |
| Journey link | A real link between two pages, labelled with what you press. | Home → Product · "Shop now" |
Components are named from what your site calls them (data-component, data-testid, a shared class), or from what they are.
Pages behind a sign-in
Add a role for each kind of user, with a test email and password. Babul captures once as Open (no sign-in), then once per role, and marks which roles reach each page.
- Passwords are encrypted and used only by the capture browser.
- Babul types a password only on your product's own site; a form that sends it elsewhere stops that role.
- A refused sign-in fails that role only; the others still run.
- Roles with 2FA or single sign-on: use Walk it yourself.
Screen sizes
At setup, pick every size your site supports — at least one:
| Size | Captured at | |
|---|---|---|
| Web | 1440 × 900 | |
| Tablet | 1024 × 1366 | |
| Mobile | 390 × 844 |
Babul captures each page once per size you picked. Then choose how to keep them: one design that adapts, where each page has one layout and sizes differ only where the site differs; or a separate design per size, where each size is its own page and can change on its own. Sizes you did not pick are not captured; add one later in Product settings and capture again.
From images
Upload one image per screen. Babul turns each into a page of HTML and CSS with AI, finds repeated parts as components, and reads colours and type into styles. The free month includes 25 conversions; on Team each one is an AI action.
- PNG, JPG or PDF, up to 20 MB each, up to 25 images at a time.
- Clean screenshots work best: no browser bars, one screen per image.
- Check the result: text, spacing and icons are read, not guessed perfectly.
Limits
| Free month | Team | |
|---|---|---|
| Pages per capture | 25 | 500 |
| Roles | Open + 1 | Unlimited |
| Automatic walk | — | |
| Image conversions | 25, once | Counted as AI actions |
| Images per upload | 25 | 25 |
When a capture stops
| What you see | Why | What to do |
|---|---|---|
| Paused at a sign-in | A page asked for a sign-in and no role was set | Add a role, or walk it yourself |
| Site unreachable | The address did not answer, or blocks bots | Check the address; allow Babul's address in your firewall |
| Nothing readable | The page draws only on a canvas or needs a plugin | Upload images of it instead |
| Page limit reached | Your plan's pages per capture | Capture again from a deeper start page, or move to Team |
A stopped capture keeps everything it saved.
Northwind/Northwind Web/mainnorthwind.shop/account asked for a sign-in. 9 pages are saved.
Capture again
Re-capturing reads the live site again and puts what changed in a draft, so you review it like any other change. Nothing reaches main without a merge.