Loading ToolBench
Deterministic UI extraction, screenshot diffing, and design-language/style transfer for AI coding agents
Strong tool definitions with comprehensive descriptions (avg 250+ chars) and well-structured Zod schemas. All 7 tools have explicit input schemas with typed parameters and descriptions. Naming is action-oriented (compare, extract, suggest_fixes, tokens, style_check, capture, converge). However, output schemas are not documented in the source, LLMs cannot see what fields to expect from responses. Error handling guidance is absent. Some parameter descriptions could be more prescriptive about constraints and valid ranges. Tool composition is sound: each tool has a single responsibility, and chaining is supported via file paths and URLs.
Launch a headless browser, load an HTML file or URL, and capture a screenshot. Validates that the page rendered (not blank); returns the screenshot path and dimensions. Useful for converting design files or live URLs into images for extract/compare/tokens. Requires Chromium to be installed (run `bun run install:browsers` or `npx playwright install chromium`).
Deterministically diff an implementation screenshot against a reference screenshot. Returns a pixel-mismatch ratio, width/height deltas, a ranked list of structural issues (missing/extra elements, position, size, color, shadow, spacing), an irreducible-mismatch floor so you know when further pixel-chasing is futile, AND a `spacing[]` array of high-trust, directly-CSS-able sizing/spacing deltas (top-bar/band heights, content-column left edges, gutter widths) measured by pixel projection — use these to close sizing/spacing gaps exactly. Inputs are image file paths (PNG/JPG); the same inputs always produce the same numbers.
Iteratively refine an implementation screenshot to match a reference by suggesting and applying CSS fixes. Runs compare, suggest_fixes, and applies the top fixes to a live HTML file or URL, then re-captures and re-diffs. Repeats until the mismatch ratio is below a threshold or max iterations reached. Returns a summary of applied fixes and final mismatch ratio. Requires Chromium and write access to the HTML file.
Analyze a single reference screenshot into structured data an agent can build from: layout regions (position/size), dominant colors, typography, spacing, a suggested implementation strategy, and a `rulers` block of deterministic projection measurements (background-zone band heights, content-column edges + widths, gutter widths) — build to these exact values to get sizing/spacing right the first time. Returns a compact summary by default; set full=true for the complete report. Input is an image file path.
Output schemas not documented. LLMs cannot see what fields compare/extract/tokens/suggest_fixes return, forcing them to guess downstream field names and risk broken tool chains.
No error handling guidance. Tools lack recovery hints (e.g., 'If image not found, check path format' or 'OCR timeout, retry with disable_ocr=true'). Agents cannot self-correct on failures.
Numeric parameter constraints missing. 'top' (max issues) and viewport dimensions lack min/max bounds. LLMs could pass absurd values (top=999999, width=1).
| Scored | Grade | Overall | Spec posture | Rubric |
|---|---|---|---|---|
| 2026-09-23 | C | 62 | 2026-07-28+ | v2 |
Deterministically check whether a NEW build adopts the design LANGUAGE of a reference screenshot — palette, spacing rhythm, type scale, roundedness, elevation — rather than reproducing it pixel-for-pixel. Use this when copying the *style/aesthetic* of a screenshot onto different content or layout (contrast with `compare`/`converge`, which pixel-match the SAME screen). The reference is always a screenshot; the new build is measured from real computed CSS when you pass an http(s) URL or an HTML file (exact), or from a screenshot as a lossy fallback. Returns per-dimension verdicts: palette/spacing/typography drive pass/fail (high confidence); radius/elevation are advisory when the reference is a raster, since a screenshot can't reliably ground them. It reports drift only — it never assigns semantic color roles or mood; decide those yourself from the image.
Diff a build against a reference and return concrete, ranked fix observations (size, color, shadow, spacing) with values measured from the reference. Selectors are only emitted when they resolve from real DOM; for screenshot-only input the fixes are region-anchored observations with capped confidence rather than guessed selectors. Inputs are image file paths.
Extract the design language of a reference screenshot: the flat `tokens` list (colors, spacing, radii, font sizes/weights, shadows) PLUS a structured `styleSystem` — palette split into neutrals vs accents, the base spacing unit, the type-size scale and its modular ratio, named radius and elevation scales. Use this to copy a UI's *style/aesthetic* onto new content. The values are measured deterministically; it deliberately does NOT name semantic color roles (primary/accent/surface) or classify mood — assign those yourself from the image. Pass `emit` to get paste-ready shadcn CSS variables or a Tailwind @theme block. Input is an image file path.
capture and converge require external dependency (Chromium) not validated at tool invocation time. No clear error message if playwright install chromium was skipped.
converge is a multi-step operation (compare → suggest_fixes → apply → re-capture) but lacks a dry-run or confirmation step. Agents could apply CSS changes without preview.