← Live site See the PhotoCraft version →
Glow, recreated in Affinity
A one-to-one rebuild of the Glow landing-page design using Affinity JavaScript SDK (MCP) scripts building vector, text and image layers. The photographic parts (hero photo, card thumbnails, brand logos) are slices cut from the original. Everything else is editable text and shapes. The live site at / is responsive HTML and CSS built from these slices.
Original vs. Affinity v6
Drag the handle to compare. v6: every text block traced from the original and auto-tuned (live text kept, hidden), original-pixel cutouts for tiny elements, the original's own background pixels, shapes calibrated against the tool's real render, per-renderer ink gain, the photographed phone bezel. See the benchmark in the README.
Affinity v1 → v6
v1 had hand-drawn icons, a single logo strip and lookalike fonts. v2 added traced icons and logos, a custom font and upscaled photos.
Glow UI framework → Source on GitHub →
Affinity vs. PhotoCraft
| Affinity | PhotoCraft | |
|---|---|---|
| Ran | First, with no prior knowledge | Second, given coordinates, colours and fonts from the Affinity run |
| Tokens used (context) | ≈174k (≈135k excluding ≈40k session overhead) | ≈146k |
| Tool calls | ≈82 | 58 |
| Calls that built the page | 3 full build scripts (≈15 KB each) | 13 command batches + 4 single commands |
| Main token cost | Reading SDK docs and finding the right APIs | Shape commands returning their full path data |
| Slicing | Cut with sips (outside Affinity), then placed as image layers | Slice tool marked the regions; Save for Web is blocked over the API, so cut by crop, save and undo |
| Editable layers | 164 layers in 8 groups | 133 layers |
| v2 upgrade: approach | One 13 KB script reading the shared manifest (traced icons, logos, fonts, 2x photos) | Wrote all traced paths to one SVG, opened it, pasted the group in place |
| v2 upgrade: tool calls | ≈10 (2 build runs + checks) | 81 |
| v2 upgrade: tokens | ≈25k (script + 2 runs; the shared tools did the heavy lifting) | ≈151k (two 133-layer doc_inspect dumps ≈50k) |
| v3 pixel-exact: mismatch | 0.35% (similarity 0.9941) | 0.19% (similarity 0.9946) |
| v4 tuned: changed / SSIM / ΔE2000 | 0.245% / 0.9797 / 0.364 | 0.143% / 0.9815 / 0.356 |
| v5 tuned shapes: changed / SSIM | 0.163% / 0.9818 | 0.064% / 0.9852 |
| v5 max-fidelity: changed / SSIM | 0.079% / 0.9847 | 0.032% / 0.9867 |
| Photoshop v6 (same kit, best overall) | 0.054% / 0.9866 standard, 0.026% / 0.9880 max | same |
| Latest: changed standard / max | Affinity v6: 0.068% / 0.026% (SSIM 0.9882) | PhotoCraft v8: 0.020% / 0.005% (SSIM 0.9886); exact mode (v7): 0 px |
| Photoshop v9 / website v8 (same kit) | Photoshop 0.024% / 0.004% (exact mode: 0 px); website 0.026% / 0.006% | same |
| Website v9: exact mode (default on 1x desktop) | 0 px different (SSIM 1.0000): PhotoCraft's exact layers, exported over MCP, as CSS backgrounds; live text on top | same |
| Latest: what moved it | Background plate, shapes calibrated against Affinity's own render, ink gain, logo parts | Background plate, ink gain (sub-pixel strokes via shape.edit), logo parts, photo edges + badge cut-out + clipped arc (v8) |
| Measured-fix pass | 2 script runs after an Affinity restart (fonts), ≈15k tokens | ≈22 tool calls, ≈65k tokens (type.setStyle echoes) |
| v2 headline | Live text in the custom Glow Display font | Traced outlines (the server started before the font was installed) |
| Measured mismatch (tools/diffcheck.py) | 3.80% of pixels → 2.28% after measured corrections | 2.22% (traced headline) → 1.76% after measured corrections |
Token figures come from the context counter, not a billing meter, so treat them as approximate. The comparison isn't like-for-like: the PhotoCraft run was given the layout measurements the Affinity run had to work out, which saved it a lot of exploration.