Freedom251 › AI Screenshot-to-Code Tools
Calque

What Calque is
Calque converts a PNG or JPEG screenshot of a website into HTML and CSS by measuring the image’s pixels. It can save the result as a self-contained HTML file or as JSON describing its measurements. Those measurements include colors, type scale, font weights, spacing, container width, gutters, and corner radii. Calque also identifies sections, columns, cards, buttons, alignment, and reading order, and can crop photographs from the screenshot to use as image assets.
Its check command renders a rebuilt page in an installed Chrome-family browser and compares it pixel by pixel with the screenshot. Calque is also packaged as a Claude skill that supplies measurements for Claude to use when writing project code. Its documented workflow uses Tesseract for OCR, and Docker is an optional way to run it in a container. Calque makes no model calls or API requests; after OCR data is cached, it works offline. It supports plain HTML and CSS custom properties, and is available for Linux, macOS, Windows, and self-hosting. The project is MIT-licensed and is part of Openware. Calque handles one screenshot at a time, cannot determine the exact typeface, and uses image crops rather than recovering original photographs.
Who it suits
Calque suits developers who want to rebuild a page from a PNG or JPEG screenshot and work with plain HTML and CSS. It may also suit people using Claude for project code or looking for software they can host, fork, or sell under the MIT license.
What it does well
- Exports a self-contained HTML file or JSON measurement specification.
- Measures colors, type scale, spacing, gutters, and corner radii.
- Identifies sections, columns, cards, buttons, alignment, and reading order.
- Can crop photographs from screenshots as image assets.
- Runs offline after OCR data is cached, with no model calls or API requests.
- Includes a browser rendering check that compares pages pixel by pixel.
What to know first
- Processes one screenshot at a time.
- Cannot identify the exact typeface used in a screenshot.
- Uses cropped screenshot images instead of recovering original photographs.
- Reconstruction matches are lower for photograph-heavy pages and dark pages with large glows or gradients behind text.
Limits
Calque processes one screenshot at a time and cannot identify the exact typeface. Its image assets are crops from the screenshot rather than the original photographs; matches are lower on photograph-heavy pages and on dark pages with large glows or gradients behind text.
Getting started
- Open the Calque GitHub repository.
- Choose Linux, macOS, Windows, or a self-hosted setup.
- Provide a PNG or JPEG screenshot.
- Use the documented Tesseract OCR workflow; Docker is optional.
- Choose HTML or JSON output, and use the check command for a browser comparison.
Verdict
Choose Calque if you want pixel measurements from a single website screenshot to guide an HTML and CSS rebuild, with a browser-based visual comparison. Look elsewhere if you need whole-site processing, exact typeface identification, or recovery of the original photographs.
Questions
Is Calque free?
Yes. It is free and described as open-source software.
What license does Calque use?
The repository describes it as MIT-licensed and says it can be hosted, forked, or sold.
Which platforms does it support?
Calque is available for Linux, macOS, Windows, and self-hosting.
What does Calque produce?
It can write a self-contained HTML file or a JSON specification of its measurements. Its supported output uses plain HTML and CSS custom properties.
Does Calque use a model or make API requests?
No. After its OCR data is cached, it works offline.
Who makes Calque?
The repository identifies Calque as part of Openware, whose GitHub profile describes its work as self-hostable replacements for subscription software.
Facts from Calque's own pages
- Claude integration
- Calque ships as a Claude skill that provides measured screenshot details for Claude to use when writing project code. · github.com, 9 Oct 2026
- Design measurements
- It extracts design tokens including colors, type scale, weights, spacing, container width, gutters, and radii. · github.com, 9 Oct 2026
- Image handling
- With the --assets option, it crops photographs from the screenshot and references those crops in the output. · github.com, 9 Oct 2026
- Inputs and outputs
- It reads PNG or JPEG screenshots and can write a self-contained HTML file or a JSON file of measurements. · github.com, 9 Oct 2026
- Known weak cases
- The maker reports lower reconstruction matches for photograph-heavy pages and identifies dark pages with large glows or gradients behind text as its worst case. · github.com, 4 Oct 2026
- Layout and images
- It finds sections, columns, cards, buttons, alignment, and reading order, and can crop photographs from the screenshot as assets. · github.com, 4 Oct 2026
- Layout features
- It identifies sections, columns, cards, buttons, alignment, and reading order, and can reconstruct vertical gradients. · github.com, 9 Oct 2026
- License
- The repository is MIT licensed, and its README says users may take, host, fork, and sell it. · github.com, 9 Oct 2026
- Limit: icons and photos
- Icons become placeholders, while cropped photographs remain screenshot-resolution images with any overlaid text baked in. · github.com, 9 Oct 2026
- Limit: page coverage
- It reads one screenshot and does not capture scrolling, hover states, or another breakpoint. · github.com, 9 Oct 2026
- Limits
- It processes one screenshot rather than a whole site, cannot identify the exact typeface, and uses cropped screenshot images rather than recovering original photographs. · github.com, 4 Oct 2026
- Limit: typography
- Calque cannot identify a typeface from a screenshot, and font weight resolves to about one step. · github.com, 9 Oct 2026
- Maker
- The repository says Calque is part of Openware, whose GitHub profile describes its work as self-hostable replacements for subscription software. · github.com, 4 Oct 2026
- Other tools
- The documented workflow uses Tesseract for OCR and Docker as an optional way to run Calque in a container. · github.com, 4 Oct 2026
- Output
- It can write a self-contained HTML file or a JSON specification of its measurements. · github.com, 4 Oct 2026
- Performance and accuracy
- The README says processing takes about a second per page and reports fixture match scores ranging from 15.3% to 97.1%. · github.com, 9 Oct 2026
- Privacy and operation
- The maker says Calque makes no model call or API request, and that after its OCR data is cached it works offline; the Docker build preloads that data. · github.com, 4 Oct 2026
- Purpose
- Calque turns a website screenshot into working HTML and CSS by measuring pixels rather than asking a vision model to interpret them. · github.com, 9 Oct 2026
- Quality check
- Its check command renders the rebuilt page in an installed Chrome-family browser and compares it with the screenshot pixel by pixel. · github.com, 4 Oct 2026
- Requirements
- The package specifies Node.js 20 or later; the README says the first run downloads about 15 MB of OCR data and caches it. · github.com, 9 Oct 2026
- Runtime
- The maker says Calque runs in about a second per page and its tests run without network access. · github.com, 4 Oct 2026
- Runtime and network
- The maker says the Docker build works offline after building, and that nothing else opens a socket. · github.com, 9 Oct 2026
- Validation
- The check command renders the output in an existing Chrome-family browser and compares it with the screenshot pixel by pixel. · github.com, 9 Oct 2026
Where Calque stands on Freedom251
- AI Screenshot-to-Code Tools#5 of 24