one-shot-ui

You have access to the one-shot-ui CLI tool. Use it to analyze reference screenshots and compare your implementations against them.

When to Use

• The user provides a screenshot or mockup and asks you to build it
• The user wants to compare their implementation against a design
• The user wants to iteratively refine a UI to match a reference
• The user wants a different UI that copies the style/aesthetic of a screenshot (same design language, different content) — see "Style transfer" below

Workflow

Step 1: Extract the design

Run one-shot-ui extract <reference.png> --json --overlay to get:

• Layout nodes with positions, sizes, colors, gradients, shadows, border radii
• Text blocks with content, font size, weight, color, and monospace
• Design tokens (spacing scale, color palette, radius scale)
• Component clusters (repeated visual patterns)
• Implementation plan (suggested CSS strategy: grid/flex/absolute)

Pass --dpr for Retina/Mac screenshots. A 2x screenshot reports every pixel at double its CSS value (a 35px heading measures 70px), which throws off fonts, spacing and sizing. If you know the screenshot is from a Retina/Mac display, pass --dpr 2 so sizes and bounds come back in CSS pixels. Otherwise check the report's scale block: units: "css-px" means values are normalized; a scale.scaleHint means it might be Retina and you should re-run with --dpr 2. Build to the reported CSS pixels.

Step 2: Build the UI

Use the extracted data to write the implementation directly. Set exact:

• Colors (hex values from extraction)
• Spacing (px values from spacing measurements)
• Typography (font sizes, weights from text blocks)
• Border radii, shadows, gradients (from style extraction)

Build to the rulers block — this is the single biggest lever for sizing/spacing. extract reports deterministic pixel-projection "rulers" so you don't have to eyeball or hand-measure geometry:

• rulers.bands — background-zone heights down the page (e.g. a top header/nav bar's exact height in CSS px, with its background hex). Set those container heights/paddings exactly.
• rulers.columns — content column left edges and widths (sidebar width, main column, card columns). Drive your container widths / grid tracks from these.
• rulers.gutters — the exact gaps between columns. Use them for column-gap, margins, padding. These are CSS px (DPR already applied). Matching them up front avoids the slow "off by ~16px, shifted right" iteration loop.