design_gauntlet
Measure your page's live CSS against a reference site, identify polish gaps across nine visual dimensions, and receive concrete fixes with a pass/fail verdict to guide redesign iterations.
Instructions
Answers 'why does my page look less polished than theirs?' with numbers instead of adjectives. Give it your page and a page you admire (vercel.com, linear.app, anything); both are rendered headless and their LIVE computed CSS is measured — never recalled from memory — across the nine things that decide perceived polish: surfaces, hairlines, text roles, letter spacing, accent, type scale, radii, elevation, rhythm (the first four dominate). You get back both sets of raw measurements, a per-dimension diff flagging where yours is worse, a concrete bar derived from the reference's own values (e.g. 'at most 4 surface colors — yours has 11'), a fix list split into mechanical find-and-replace vs decisions a human has to make, and one boolean, verdict.on_par. That boolean is the exit gate of the loop the response spells out: build, critique with fresh-context critics against renders, re-run this tool, and only call the work done when on_par is true. The reference is a standard, not a source — never copy its copy, marks, imagery or brand color.
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| viewport | No | Viewport for both measurements. Default 1440x900. | |
| subject_url | Yes | The page being improved — rendered headless and measured live. | |
| color_scheme | No | prefers-color-scheme emulated for BOTH pages (sites that theme by system preference measure differently per scheme). Default light; it is reported on each measurement. | |
| reference_url | Yes | The benchmark page (e.g. https://linear.app) — measured the same way; its values derive the bar. | |
| device_scale_factor | No | Device pixel ratio for BOTH measurements — one value, so the hairline diff is never scale-mismatched. Default 1. Pass 2 to measure a page the way a retina display resolves it — it selects the retina branch of image-set()/srcset and min-resolution media queries, which can change the surfaces and type a page actually renders. It does NOT fix hairlines: border-width is rounded up to 1px by the engine at every scale (border-radius is not), so sub-pixel strokes stay unmeasurable and the borders dimension warns when a 1px entry is ambiguous. Range (0, 4]. |