A browser tool that made a slow, manual label check 2× faster, and removed a bottleneck no one had thought to question
DURATION
June 2026
ROLE
Design Engineer
TOOL
Claude (vibe coding)
Overview
We outsource our product photography to an external studio, which shoots temporary stand-in garments, so the neck-label colour in each image often does not match the real product specification. Correcting this across an entire launch was slow, repetitive, and dependent on one person’s judgement. I built a browser-based tool that analyses each shot, checks the label colour against our colour rules, and confirms whether it is correct or specifies the exact colour it should be changed to. It reduced the task from roughly four days to two and removed the constant need to interrupt the clothing designer.
Problem
We're an apparel company, and our product photography is handled by an external studio. Because that studio shoots on temporary stand-in garments rather than the final products, the label colour you see in the photo frequently isn't the label the real product ships with. Every launch, someone has to go through the images and correct those label colours to match our official spec (the "BNL Colours" reference).
Before the tool, that meant a designer had to, for every image:
Open each file one at a time
Cross-reference the BNL Colours spreadsheet to find the required label colour for that colourway
Judge by eye whether the label in the shot matched
When it was ambiguous, stop and ask the clothing designer to confirm
The volume was what made the process painful. The number of images depended on how many colourways each style carried. EP01 alone had 38, while some styles had as few as four. New products were launched several times a year, typically in the early, middle, and later parts of the season. Each launch required around four days of careful, repetitive checking, creating a bottleneck around one person’s availability and judgement.
This wasn’t an assigned project. I identified the recurring bottleneck and took the initiative to build a solution.
The insight
The correct label colour was already defined in our BNL Colours specification. The problem was that the information needed to verify it was separated across different sources. The filename identified the product and colourway, while the spreadsheet specified which label colour that colourway required.
Without a connected system, someone had to open every image, look up its colourway in the spreadsheet, judge whether the photographed label was correct, and ask the clothing designer whenever the result was unclear. Since the same issue was likely to recur with every new product launch, repeating that manual process was not sustainable.
I realised the task could be turned into a measurable comparison. By connecting the filename data and colour specification with an analysis of the label visible in the photograph, the tool could determine whether the label was correct and identify the exact colour required when it was not.
How I built it
The tool does four things per image:
Reads the colourway code from the filename.
Looks up the required label rule in the colour spreadsheet.
Measures the real label colour from the neck of the garment using computer vision.
Compares them and returns a verdict: Pass or the exact hex colour to change it to.
Different rules needed different logic, and working that out was the heart of the design:
Fixed colours (Black / Ecru / White) are compared against a reference swatch.
Dye-to-match colourways are checked against the garment's own fabric colour, measured from the same image, so no external reference is needed.
"As per" standards (e.g. as per EP314 blue dusk label) reference external standard labels. I added colour values for these, but deliberately kept a Review state for any whose reference value might not be reliable, so the tool defers to a person instead of forcing a verdict it isn't sure of.
That safety net mattered to me. Where the tool can't be confident, I'd rather it flag the case for a person than fake certainty, so nobody downstream trusts a colour it was only guessing at.
I validated the colour logic first, measuring it against known-good samples until the verdicts held up, and only then rebuilt the interface as reusable components on the Material 3 design system, keeping the validated logic untouched underneath. The whole thing runs as a single file in the browser: no server, no install, so anyone on the team can open it and drop in a folder.
How it works for the user
You drop in a folder of shots. Results group into sections by style, each with a live progress count. Every card shows the label crop, the measured colour, and a verdict: Pass, or "Change to #hex" with the target swatch. You filter to just the Fix items, work down the list, and click a card to mark it Done as you go. You can select and delete cards, and dropping in new folders adds to the results without wiping your progress.
The interaction is built around the actual job: triage fast, fix, track what's left.
Impact
4 days → 2 days
Reduced the manual checking time for a full product launch by half
The tool provides the exact target colour, removing the need for most checks with the clothing designer.
Replaced visual judgement with repeatable ΔE colour-difference measurements.
What I'd do next
Firm up the reference values I'm less sure about, so fewer cases fall back to Review.
Persist progress across sessions.
Add an auto-recolour step, so the tool doesn't just flag the fix but performs it.
Reflection
This started as an annoyance nobody owned. What I'm proud of isn't the code. It's that I noticed a recurring inefficiency and a hidden single-person dependency, shaped a vague brief I gave myself into a scoped tool, and shipped something imperfect but genuinely used. Building it with Claude let me move from "this is slow" to a working, design-system-backed tool in days rather than weeks, which is exactly the kind of leverage I want to keep designing with.