● Reckoneerhow it works
Reckoneer / Stage 2
Stage 2CaptureAutomatic

Competitor Capture

Stage 2 is the first fully automated step. Reckoneer launches a headless browser, navigates to the competitor URL, and systematically captures everything needed to understand the design.

Capture includes: full-page screenshots at desktop and mobile viewports, raw HTML of key page sections, computed CSS for structural elements, color values extracted from rendered output, font families and sizes in use, spacing patterns, and layout structure.

All captured data is stored in the run record. A NICHE-BRIEF.md is written to the docs folder summarizing what was found. The run advances to Stage 3.

Terms
Headless browser

A web browser that runs without a visible graphical interface. Used by Reckoneer to programmatically visit competitor sites, render JavaScript, and capture the fully-rendered page as a real browser would show it.

AnalogyA robot that can browse the internet exactly like a human would — clicking, scrolling, waiting for pages to load — but with no screen. It does everything a browser does, invisibly.
OriginHeadless: lacking a 'head' (display/GUI). In computing: a server or process running without a user interface attached.
Design tokens

The atomic values that define a visual design system: specific color hex codes, font names and sizes, spacing values, border radii, shadow definitions. Extracted from the competitor site and used to inform the generated theme.

AnalogyThe ingredients list of a recipe. A dish (design) looks and tastes a certain way because of specific ingredients (tokens) in specific quantities. Extract the ingredients and you can recreate — or riff on — the dish.
OriginToken: from Old English 'tacen' (sign, symbol). Design token: a named, reusable unit of design decision — a symbol that carries a specific value.
Computed CSS

The final CSS values applied to an element after all stylesheets, inheritance, and browser defaults are resolved. Unlike raw CSS files (which may use variables or overrides), computed CSS is the actual pixel value the browser uses.

AnalogyThe final invoice after all discounts, taxes, and adjustments are applied. The raw CSS is the price list — computed CSS is what you actually pay.
OriginCompute: from Latin 'computare' (to reckon, to calculate). Computed: already calculated — the result, not the formula.