Every reference you save already contains the brief.
better-web reads the design out of a screenshot or a live URL — the real palette, the declared type stack, the radii and spacing — files it under tags, and writes the prompt that rebuilds it. Paste the prompt into Claude Code and keep working.
Two ways in. One shape out.
Both paths land in the same token structure, so a screenshot and a live site sit side by side in one library and produce prompts in one format.
Drop an image
- Palette clustered from real pixels, weighted by surface share
- Contrast ratios and saturation profile
- Composition: seams, density, and where the weight sits
Font stacks and radii cannot be read from a flat image, so nothing is invented — the prompt names them as decisions to make instead.
Paste a URL
- Declared font families, weights, and the observed type scale
- Colour roles read from where each value is actually used
- Radii, shadows, and the spacing rhythm as authored
Parsed from the site's own stylesheets, custom properties included — so oklch themes come through as real values, not approximations.
The prompt is the product.
Measurements go in verbatim. The model writes the reading, never the numbers, so a prompt can never drift from the swatches on screen. Regenerating one costs nothing.
Every saved reference renders into any of these targets on demand. The CSS and Tailwind targets emit a theme block you can paste straight into a project.
Build a landing page in the design language described below. The values here were measured from a real reference. Treat them as exact. ## Palette - `#0b0f0d` background 58.2% of surface - `#ede9df` foreground 21.4% of surface - `#7fa86b` accent 6.1% of surface Scheme: dark · Peak contrast: 15.4:1 Mean saturation: 0.14 (restrained) ## Geometry - Border radii in px: 8, 14, 999 - Spacing steps in px: 4, 8, 12, 16, 24, 32 ## Constraints - Use the exact hex values above. Do not substitute near-matches. - Keep the measured contrast: body text at 4.5:1 minimum against its own background.
A library you can filter the way you actually think.
Tags land in families — mood, layout, colour, type, motion, industry — so “dark editorial with a split hero” is a filter, not a memory. Everything you save stays private to your account.
A CLI and an MCP server are next
Pull a saved reference straight into a project from the terminal, or let an agent query your library over MCP. The API they ship on is already in place — the packages are not published yet.
npx better-web add ui-1