Capture and import
Capture: a live page on the canvas
Capture opens a page in the headless browser and copies it onto the canvas as editable layers: real text, images, vectors and CSS, laid out as the page was. Use it to start from an existing site, to redesign it, or to extract a brand from it.
One page
bogen capture https://example.com| Option | What it does |
|---|---|
--file <id> | Add the artboard to this file. Without it, a new file named after the host. |
--page <name> | The page in that file. |
--name <name> | The artboard's name. |
--width <px> | The viewport width, 200 to 4000. Default 1440. |
--height <px> | The viewport height, 200 to 4000. Default 900. |
--scheme dark|light | The colour scheme the page sees. |
--no-fonts | Do not keep the page's self-hosted fonts. |
It prints the result as JSON. Your agent does the same with page_capture.
A whole site
bogen capture --site https://example.com --widths 1440,768,390 --schemes dark,light --limit 30Bogen finds the routes through robots.txt, the sitemap and links on the same origin, and captures one page per route, with one artboard per width and colour scheme. Links to anchors on the same page keep working, with their targets. It prints its progress and ends with a report: what it captured, the fonts it kept, and what it skipped or could not capture.
| Option | What it does |
|---|---|
--widths | Widths, comma separated. Default 1440. |
--schemes | dark, light or both. Default dark. |
--limit | The most routes to capture. Default 30, at most 200. |
--file <id> | Add to this file instead of a new one. |
--name <name> | The name of the new file. |
--no-fonts | Do not keep self-hosted fonts. |
Your agent uses site_capture, which takes at most 50 routes and answers with a job id when the capture takes long; site_capture_status follows it.
What may be captured
- Public addresses, from the command line and from your agent.
- Pages on this computer (
localhost,127.0.0.1), such as your dev server: from the command line only. - Addresses on your private network: not at all.
Fonts
Capture keeps the font files that the page's own style sheets declare for the families it uses: the bytes the browser received, and other weights of those families from the same address. They are stored in the document. A family the page declares but does not use stays out. They load on the canvas, in renders and in HTML, SVG and .bogen exports, without a Google Fonts request for those families. Fonts the page takes from Google Fonts stay as names. Each kept face records where it came from; your agent lists them with fonts_captured.
Keeping a font does not change its licence. Whether you may use it in other work is up to the licence. --no-fonts turns this off.
Light and dark
Capture a page a second time in the other colour scheme, and Bogen fills in that theme mode's token values instead of adding a second set of hard-coded colours. Both artboards then use tokens. It reads the page's own CSS variables and compares the two captures.
This works for sites that switch with prefers-color-scheme. A site that switches themes with a class gives no difference, and the result says so. Only colours are compared. For an artboard captured before Bogen tracked this, your agent passes pair_with. It has been tried on a test page with a real colour scheme switch, not yet on a live site.
Hover and focus
Hover, focus and active rules of a captured page are kept apart, per artboard, with the layers they match. They do not render on the canvas. Your agent reads them with interaction_rules when it rebuilds the page in code, and can turn one into a :hover block on the layer with layer_style, which then shows in preview mode and in exports. Captured ::before and ::after become child layers; see Pseudo-elements and conditions.
Limits
- Motion is not captured.
- Content wider than a phone viewport is captured at the phone width, so captures at 390 differ more from the live page: 2.89% of the pixels on the tomacco.dev home page.
- There is no browser extension; Capture runs from the command line, from your agent and over HTTP.
On the seven pages of tomacco.dev at 1440 wide, dark, the capture differs from the live site by 0.07% of the pixels on the home page and 0.00% on the six text pages, with exact heights.
Import from Figma
bogen import figma https://www.figma.com/design/<key>/... --token <your token>Bogen reads the file through Figma's public REST API with your own personal access token. Make one in Figma under Settings, Security, with the file_content:read scope.
| Option | What it does |
|---|---|
--token <t> | Your token. FIGMA_TOKEN in the environment works too. |
--save-token | Keep the token for later imports, in config.json in the data folder, readable by you only. |
--name <name> | The name of the new file. |
It makes a new file and reports what did not come over exactly. The home screen has Import from Figma too, and your agent has figma_import.
What comes over: frames, auto layout as flex, text with style ranges, fills, gradients, strokes, effects, vectors through Figma's SVG render, and images.
Limits:
- Components come over as plain frames.
- Masks and diamond gradients are approximate.
- Fonts come by name. Google Fonts load; other fonts need to be on your machine.
- It has been built from Figma's public documentation and tested against recorded answers, not yet against the real API. Expect rough edges with real files.
Bogen does not read Figma's clipboard or .fig files, and that is not planned: only the public API.
Other ways in
- Paste HTML with inline styles and style sheets, images, SVG or text onto the canvas.
- Open a
.bogenfile on the home screen. - Design folders:
bogen import-folder <folder>makes a file from a folder thatbogen export-folderwrote; see History.