Case 03 · Design tooling
UI Inspector
On my own initiative, I built a tool that lets designers adjust the prototype right on screen and turns every tweak into an instruction ready for the AI to apply to the code.
- Adoptedby the whole design team and the project’s front‑end developer
- 12features, from token specs to Write Prompt
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.
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 rest of the 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.
-
02
Edit it in place
Click a value to change it, and the prototype changes with it.
The UI Inspector docked on a prototype: a link selected, its padding, size 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
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
Turn on the crosshair, or hold ⌥ and click an element.
Read specs as tokens
Every value comes with its token, the icon’s name included. 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.
Every property
Size, spacing, colours, radius, border, shadow, opacity, layout and type, 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
Choose how far each tweak reaches: just this element, or every match. Reset all puts the prototype back.
Decisions I would defend
-
01
Opening it doesn’t block the prototype
With the panel open, the prototype keeps answering clicks as usual. A click only selects an element once you turn on selection. If the tool took over your clicks the moment it opened, nobody would want to keep it open.
-
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 also 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.
The idea, the design and the code are mine. There are no usage numbers yet.
That was the summary.