Calque vs Instant Tools Screenshot to Code

Calque is a free, MIT-licensed tool that turns a PNG or JPEG website screenshot into HTML and CSS by measuring pixels. It can produce a self-contained HTML file or JSON measurements, including colors, type scale, weights, spacing, container width, gutters, and corner radii. It also identifies sections, columns, cards, buttons, alignment, and reading order, and can reconstruct vertical gradients. With the assets option, it crops photographs from the screenshot for use in the output. Its check command renders the result in an installed Chrome-family browser and compares it pixel by pixel with the screenshot. Calque is packaged as a Claude skill that provides measurements for Claude to use when writing project code. The documented workflow uses Tesseract for OCR; Docker is optional. The maker says it makes no model call or API request and works offline after OCR data is cached. It handles one screenshot, not a whole site, and cannot identify an exact typeface. Icons become placeholders, and photo crops retain screenshot resolution and any overlaid text.

Instant Tools Screenshot to Code is a free web tool that converts a UI screenshot or mockup into code for a selected framework. It accepts JPG, PNG, WebP, AVIF, and HEIC images; HEIC decoding happens on the user’s device. Images can be uploaded, dragged in, captured as photos, or pasted from the clipboard. Output choices are HTML with Tailwind, React with Tailwind, Vue Single File Components, and vanilla HTML with CSS. The page highlights landing heroes, app dashboards, and mobile screens as suitable inputs. Each result can be refined in chat for up to six turns, then copied or downloaded. The Free plan costs nothing, requires no signup, and includes no watermark plus shared free-tier AI capacity. Requests generally use Google Gemini, with possible Amazon Bedrock and Claude use when configured. Dense tables, custom icon fonts, and exact spacing may need manual adjustment.