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
I identified a repetitive quality-control task in our product image workflow and built a browser-based tool to automate it. The tool analyses product shots, checks neck-label colours against our internal colour rules, and tells the designer whether each label is correct or exactly what colour it needs to be changed to.
By turning a manual judgement process into a repeatable system, I reduced the checking process from around four days to two and removed much of the dependency on the clothing designer for routine colour decisions.
Problem
Our product photography is handled by an external studio, which often shoots temporary stand-in garments rather than the final production pieces. As a result, the neck-label colour shown in an image does not always match the specification of the product that will actually be sold.
Before launch, every image therefore had to be checked against our internal BNL Colours reference. For each colourway, a designer had to:
Open each image individually
Find the corresponding colourway in the BNL Colours spreadsheet
Compare the photographed label against the required specification
Decide by eye whether a correction was needed
Ask the garment designer whenever the result was unclear
The challenge was not the complexity of any single check, but the scale and repetition of the process. A style could have anywhere from four colourways to 38, as in the case of EP01, and new products were introduced several times throughout the year.
A typical launch required around four days of careful checking. Because unclear cases depended on the clothing designer's judgement, the workflow also created interruptions and a bottleneck around one person's availability.
This was not an assigned project. I noticed the same inefficiency recurring across launches and decided to build a more systematic way to solve it.
Key insight
The task looked subjective, but most of the decision was already based on structured data. The filename identified the product and colourway, and the BNL Colours specification defined the correct label colour for each one.
I realised that by connecting these two data points with colour analysis from the image, the decision could be turned from a visual judgement into a repeatable rule. Instead of simply flagging an incorrect label, the tool could also tell the designer exactly what colour it should be changed to. This became the foundation of the tool.
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.