Quality framework and token checklist

Two working tools I designed and built with AI, over one scan of the codebase: an inventory of every colour, spacing and size in use, and a worklist for deciding what each should become.

About the tool

Tool · Built with AI · Design systems

Why: Tokens had to be clean before AI could build screens that match the design system. Nobody knew how many colours, spacings and sizes were really in use.
Built by me: I designed and built both tools myself, using AI (Claude Code) to write the code, run the scan across the codebase and sort the results. No developer time was needed to build them.
The scan: One scan across two repositories: 4,881 files and 15,569 colour declarations. Every tool reads the same file, so they can't disagree.
Colour audit: The raw inventory: the full palette by family, every declaration, and the breakdown by component and CSS class.
Colour consolidation: Every distinct colour mapped to a proposed scale, sorted into adopt, replace, review and decide, with a decision you can record and export.
Dimensions: Rounded corners, border widths, spacing and sizing measured against proposed scales, with the same four decisions plus report only.
Checks: Visual-fidelity gates, token-coverage checks and validation of generated code, with fixes pushed back into Figma.
Names: Product and repository names have been replaced with neutral ones.

Screens

Colour tool start page: the consolidation worklist and the audit, with their headline numbers.

Colour mapping worklist: one row per distinct colour, showing what it becomes, the decision, its colour family, the nearest Figma primitive and how many components and tokens use it.

Colour audit overview: files scanned, declarations, colour tokens, distinct colours and token health.

Dimensions summary: values sorted into adopt, replace, review and decide, with the spacing rhythm problem called out.

Proposed scales for spacing, rounded corners, border widths and sizing, shown as bar charts.

Get in touch

Looking for a product and UX/UI designer for a contract role? I'd like to hear about it.

Start a conversation

Connect
LinkedIn