Measured 26 October 2026
Same Figma file, six tools, measured
We put one free Figma Community template through six design-to-code tools and measured what came back, every page with the same checks: how closely it matches the design at the width it was drawn, what happens on a phone and a laptop, and whether anything was changed or made up on the way. Every output is downloadable, so you can check our work.
Design: Positivus Landing Page Design by Olga Averchenko, CC BY 4.0. Home frame, 1440px wide.
The scorecard
Six tools, one design
The test file is Positivus Landing Page Design, a free template anyone can open in Figma. Every tool was given the same Home frame. It has no phone version, so every tool had to decide for itself how the page should behave on smaller screens.
| Tool | Font sizes match the design texts, at 1440px |
Spacing within 4px gaps between texts |
Sideways scroll | Words not in the design | Images with alt text | Images served from | ||
|---|---|---|---|---|---|---|---|---|
| phone 390px |
laptop 1024px |
laptop 1240px |
||||||
| Weld | 67 of 67 | 65 of 66 | none | none | none | none | 51 of 76 | its own folder |
| Figma MCP + Claude Code | 35 of 66 | 32 of 65 | none | none | none | 219 | 43 of 43 | its own folder |
| Anima | 67 of 67 | 58 of 66 | 1,050 px | 416 px | 200 px | none | 0 of 59 | c.animaapp.com |
| Codia | 68 of 68 | 56 of 67 | 1,058 px | 424 px | 208 px | none | no <img> tags | static.codia.ai |
| Locofy | 67 of 67 | 40 of 66 | 1,050 px | 641 px | 425 px | 20 | 60 of 60 | its own folder |
| FigmaToCode | 2 of 68 | 35 of 67 | 28,191 px | 27,557 px | 27,341 px | 178 | no <img> tags | its own folder |
| CopyWeb | Could not produce a page to measure. | |||||||
Out of the box
What each page gives you out of the box
The things a client site needs that nobody should have to add by hand afterwards, checked in each page’s own code.
| Out of the box | Weld | Figma MCP + Claude Code | Anima | Codia | Locofy | FigmaToCode |
|---|---|---|---|---|---|---|
| Writes no copy of its own | Yes: none added | No: 219 words added | Yes: none added | Yes: none added | No: 20 words added | No: 178 words added |
| Header, nav, main and footer landmarks | No: no main | No: no main | No: no nav, main, footer | No: no header, nav, main, footer | No: no nav | No: no header, nav, main, footer |
| One h1, no skipped heading levels | –not measured | –not measured | –not measured | –not measured | –not measured | –not measured |
| Every form field labelled | –not measured | –not measured | –not measured | –not measured | –not measured | –not measured |
| Alt text on every image | No: 51 of 76 | Yes: 43 of 43 | No: 0 of 59 | No: no <img> tags | Yes: 60 of 60 | No: no <img> tags |
| Sharp images on retina screens (2×) | –not measured | –not measured | –not measured | –not measured | –not measured | –not measured |
| Page language set | Yes: yes | Yes: yes | No: no | Yes: yes | No: no | No: no |
| Images shipped with the page | Yes: in the download | Yes: in the download | No: loaded from c.animaapp.com | No: loaded from static.codia.ai | Yes: in the download | Yes: in the download |
| No sideways scroll, 320 to 1440px | Yes: none at any width | Yes: none at any width | No: up to 1,120 px | No: up to 1,128 px | No: up to 1,120 px | No: up to 28,261 px |
On a phone
What happens at other widths
Narrow your window on any of these pages and the difference shows in seconds. These are the tops of each page on a 390px-wide phone, with the sideways scroll each one leaves.
What each tool does well
Weld
Follows the design’s type and spacing: font sizes match on 67 of 67 texts, and 65 of 66 gaps are within 4px.
No sideways scroll at any width we tested, from 320 to 1440px, and the only build here that also matches the design at 1440px.
Figma MCP + Claude Code
The cleanest code in this test: semantic sections, real form controls, and alt text on 43 of 43 images.
No sideways scroll at any width we tested, from 320 to 1440px.
Anima
Close to the design at 1440px: font sizes match on 67 of 67 texts.
Codia
Close to the design at 1440px: font sizes match on 68 of 68 texts.
Locofy
Writes styles for four width ranges, and at 1440px font sizes match on 67 of 67 texts.
FigmaToCode
Open source (GPL-3.0) and runs inside Figma, with no account needed.
How we measured
- Font sizes match the design
- Every piece of text on the page is matched to the same text in the design, and its rendered size is compared at 1440px, the width the frame was drawn at.
- Spacing within 4px
- The vertical gap between each pair of neighbouring texts, compared with the same gap in the design. Measuring gaps rather than positions means one tall section can’t push every number below it out.
- Sideways scroll
- How far the page is wider than the window, at 390px (a phone), 1024px and 1240px (laptops). A page built for the web should have none.
- Words not in the design
- Text on the page that appears nowhere in the design file. Page titles and other metadata aren’t counted.
- Images with alt text
- Images carrying an alt attribute, which screen readers use. An empty alt is correct for decoration and counts.
- Out of the box
- Read from each page’s own HTML and CSS: the header, nav, main and footer landmarks screen readers use to move around; one h1 with no heading levels skipped; a label on every field a visitor can fill in; a 2× version of images for retina screens (
srcsetorimage-set); the page language; and whether images ship with the page or load from the tool maker’s server. - What it can’t see
- These checks read text, layout and pixels. They can’t tell whether a picture is the right picture. Those we checked by eye, and the crops on each tool’s page show them.
All pages were opened from the same folder in the same version of Chrome, one after another, with the same scripts. The design itself is the reference for text and spacing.
What we changed in each output so we could open it
Weld
- Output used
- the zip a Weld user downloads, unchanged
- Built
- 26 October 2026
- Generator version
- 6de49e4
Measured exactly as delivered: nothing changed.
Figma MCP + Claude Code
- Run on
- 26 October 2026
- Output used
- index.html + assets/ written by the coding agent
Measured exactly as delivered: nothing changed.
Anima
- Run on
- 26 October 2026
Measured exactly as delivered: nothing changed.
Codia
- Run on
- 26 October 2026
Measured exactly as delivered: nothing changed.
Locofy
- Run on
- 26 October 2026
- Output used
- Two exports: 'Positivus Landing Page Design (Community).zip' (13:14) and an extracted export (14:44, measured). They differ only in class order and tailwind.config.js.
What we changed so we could open and measure it
- Locofy exports Tailwind v4 source files, which a browser cannot use directly. We compiled them with Locofy's own setup (its package.json: Parcel + @tailwindcss/postcss; dependencies resolved 2026-10-26) and linked the compiled stylesheet in place of global.css.
- Its HTML links images as /public/... (site-root paths). We changed them to ./public/... so the page works from any folder. Same files, same names.
- One exported image is named just ".svg" (an unnamed Figma layer). Many web servers send that without an image type, so we copied it to public/unnamed-layer.svg.
- The export references 4 file(s) it does not include (Content-Description.svg, Polygon-1.svg, Shape-Element.svg, Shape-Structure.svg). They stay missing in the measured page. Parcel will not finish while they are missing, so the build step alone used empty placeholders.
FigmaToCode
- Run on
- 26 October 2026
- Output used
- HTML output pasted from the plugin
What we changed so we could open and measure it
- The plugin's HTML output is a bare <div> fragment. We wrapped it in a minimal document (doctype, UTF-8, mobile viewport tag, body margin 0) so it can be opened as a page.
- We moved the outer frame from its Figma canvas position (left: 18404px; top: 4423px) to the top-left of the page. Nothing else was changed.
Download every output
- Weld output zip, 373 KB, sha256
11d0bf2965cd7dba… - Figma MCP + Claude Code output zip, 416 KB, sha256
e0a5e3736d6a52e6… - Anima output zip, 8 KB, sha256
040918f084f7e5ea… - Codia output zip, 14 KB, sha256
edbb5454ee9b34ba… - Locofy output zip, 325 KB, sha256
4d6e3be827d29db8… - FigmaToCode output zip, 7 KB, sha256
3b31c39987c074d4… - All measurements (results.json) CC BY 4.0: reuse them with a link back
Make a tool here?
If your tool has settings that would do better on this file, email support@weldhtml.com and we’ll re-run it with them and update the numbers.
Want your own file measured like this?
Weld’s beta is opening soon. Register and we’ll email you once, when you can upload a file and get the finished page with these checks run on it.