Refra

Self-built tool · 2025 · AI · via Luke Allen

A tool I built to audit brand websites at scale: crawling every page, capturing full-page screenshots, and laying thousands of them out to map against a design system.

Introduction

Refra started as a way to solve an impossible manual task. On the Haleon project I had to audit all 15 of their websites, brands and sub-brands (reviewing every page, grouping every component, and mapping each one against the S4D design system AKQA had built) to work out what new components development needed to build. Ideally that audit would have happened before S4D’s master component list was drawn up; instead it landed on me retrospectively, on top of everything else. Brute force wasn’t viable, so I built a tool.

Assess the 15 highest-priority brand sites against S4D at a scale manual screenshotting could never reach: capture every page, judge every image against the system’s fixed aspect ratios, and map every recurring component back to the design system so development knew exactly what to build.

Challenges overcome

The scale was the obstacle. Capturing every page across 15 sites by hand would have taken far longer than the time allowed, and in parallel I had to assess every image against S4D’s fixed ratios (2.4:1, 16:9, 4:3, 1:1) to advise whether each brand’s asset library needed refactoring. Each site fought back with its own blockers (cookie banners, sticky navigations, pages that wouldn’t load cleanly), all of which broke clean full-page capture. And with no access to the brands’ CMS, I couldn’t see how they’d ultimately configure their components.

Strategic thinking & planning

I built Refra: an app that moves through a whole website and captures a full, top-to-bottom screenshot of every page: scanning for a sitemap first and falling back to scraping, capped at 200 pages per site. Across 15 sites that produced thousands of screenshots, a critical mass I could lay on a single Figma canvas and review in one sweep. Rather than perfecting it up front I iterated (each blocker became a prompt) and vibe-coded the first version with Gemini and ChatGPT in a couple of days. For the CMS gap I fell back on best practice, defining for each component what was fixed, what the brand could configure, and what the Visual Brand Language drove automatically, keeping the configurable choices deliberately constrained so teams had flexibility without being able to break the system.

Outcomes

With every page screenshotted into Figma I had a complete visual library in one place: I could see how many pages were effectively the same, group them, and spot the outliers. I cut and cropped every recurring component and mapped each directly to its S4D counterpart, then broke them down so developers could see at a glance which elements were fixed images, which were brand-configurable, and which were token-driven. The result was an accurate, systematic assessment across the 15 highest-priority brand sites: the audit that should have preceded the S4D component list, delivered retrospectively and at a scale manual work could never have reached. I’ve kept iterating on Refra since.