Case 01 · Design tooling
UI Inspector
A style inspector and editor for our prototypes that turns every tweak into a prompt for Claude Code. I built it on my own initiative, by vibe coding, soon after I started using the AI prototyping framework our teams share on this client.
Illustrative screens · NDA
The product behind the UI Inspector is under NDA, so I can’t show its real screens. The ones here are heavily simplified illustrative adaptations, set in the same fictional supermarket chain as the other cases, with invented names and data. The UI Inspector itself is shown as it works.
- Adoptedby the whole design team
- 1 promptfor every batch of tweaks, ready for Claude Code
- 12features, from token specs to Write Prompt
Problem
Our prototypes are code. To read a colour, a spacing or a font size, a designer had to open the browser’s inspector: a developer’s tool, full of noise, showing raw values instead of our design tokens.
And changing anything meant describing it to the AI in words, and hoping it found the right element.
How it grew
- Jun · Style ReaderPick an element and read its styles as tokens. Copy any value.
- Jul · SpacingDistances between elements, the way Sketch Measure shows them.
- Jul · Live editChange a value in place and see it live.
- Jul · UI InspectorA new name and a new panel: docked or floating, keyboard‑first.
- Sep · For the teamA teammate brings it to the whole design team.
What it does
-
01
Select any element
Its size, spacing, colours and type show up as the design system’s tokens, next to the raw value: #5B3FB8 sits beside --shelf-accent. Measurements, rulers and guides sit on top of the prototype.
-
02
Edit it in place
Click a value to change it. Every change is live on the prototype, and nothing gets written to a file.
The UI Inspector docked on a prototype: a link selected, its padding, radius and weight changed in place, and every value shown as a design-system token. -
03
Turn it into a prompt
Write Prompt writes every tweak as one instruction for Claude Code: which element, how widely to apply it, and each property and value.
Write Prompt: the four tweaks written as one instruction, with the element, the scope and each property.
What it can do today
What every designer on the team has today.
Open it anywhere
From the prototype’s toolbar or with ⌘I. Docked as a sidebar or floating, and it remembers your choice.
Pick like a browser inspector
Arm the crosshair, or hold ⌥ and click. Hovering only outlines an element, so what you are reading never changes under you.
Read specs as tokens
Colours, spacing and type resolved back to the design system’s tokens, with each colour’s hex beside it, plus the icon’s name. Click any value to copy it.
Climb the tree
See the element’s ancestors as a tree and jump to any of them.
See the box model
Margin, border, padding and size drawn over the element, when you want them.
Measure gaps
Hold ⌃ and point: distance lines run from your selection to anything else, the way Sketch Measure shows them.
Rulers and guides
⌃R shows rulers. Drag guides off them and snap to elements, even with the panel closed.
Edit in place
Size, spacing, colours, radius, border, shadow, opacity, layout and type change live, from the keyboard too: Tab, Enter, and Esc to undo a field.
Hover colours
Edit how an element looks on hover, not only at rest.
Swap an icon
Search the icon set and replace the glyph in place.
Rows, columns, whole tables
In a table, apply one change to a row, a column or the whole table.
Write Prompt
Every tweak becomes one instruction for Claude Code, with its reach chosen per element: just this one, every match, or a row or column of the table. Reset all puts the prototype back.
Decisions I would defend
-
01
It opens inert
The prototype keeps working until you arm the picker. A tool that hijacks your clicks is a tool you close.
-
02
Hover never changes the panel
Only the outline follows the pointer, so the values you are reading never change under you.
-
03
Tokens first, hex too
The panel speaks the design system’s language, so a designer and a developer read the same thing: the hex and the token name, side by side.
-
04
Nothing is saved, everything becomes a prompt
The prototype’s code stays the source of truth. The prompt is how a tweak gets there, and someone reviews it first.
Adoption
I use it more than anyone. For fine adjustments on every prototype, it’s faster and more precise than describing the change to the AI, and it spends fewer tokens, because the prompt already names the element and the exact values.
It started for the designers on our team. Then the project’s front-end developer began using it to lift styles from the prototypes, and sometimes the prompt itself, to fine-tune the real application.
Today the whole design team uses it.
There are no usage numbers yet. A teammate brought it to the rest of the team. The idea, the design and the code before it are mine.