Calque vs Quest

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.

Quest turns Figma designs, wireframes or templates into frontend UI and React code, which can be downloaded as individual components or as a complete application. The output can be added to an existing React app or used to build an app, and users can add props and bindings to connect an interface to a backend. Updated designs can be exported again to regenerate code components. The Figma plugin is installed through Figma Community and opened from Figma Desktop’s Plugins menu. Quest supports custom components, its own Design Kit, MUI Design Kit with MUI v5 or later, and Chakra UI Design Kit. A page can combine one to five frames or device views for responsive designs. Quest requires React 17.0.0 or later. A free account provides access to basically all features and one code download to try the product. Google Fonts are supported, but custom fonts do not automatically transfer from Figma. In some cases, Quest cannot retrieve element rotation from Figma, so rotated elements may need adjustment in Quest or Figma.