So far this workflow has been about tools that make things. Patterns, posters, logos. But there’s a second half to it: tools that help you review your work.
We already have lots of tools that help you review code like linters, type checkers and unit tests. But reviewing design still seems like a very manual process. We can make this easier though.
Just like Lapse is meant to help you review animations, we can expand this approach and build other tools that help you review other parts of the interface.
Lapse has made reviewing animations much easier.
Whenever I work on something, I’m looking for ways to improve the workflow. Not very actively, I focus on the task at hand of course, but I try to remind myself to think about the process and think of smart ways to improve it.
As an example, nested border radii are a common source of frustration. They are easy to get wrong. But there’s a formula to calculate the correct value, so why not build a tool that checks whether the correct value is applied?
We could of course just have it as part of a skill (it is part of /emil-design-foundations), but maybe we want to do a quick visual check or we’re reviewing someone else’s work on a preview url. Then a tool like this is perfect.
Take a look at it yourself, press the inspect button and hover over the two cards to see which one has the correct radii.
Press inspect and hover over the two cards.
In the prompt I simply described what I wanted to build:
Build me a mountable inspector for nested border radii. Hovering a nested rounded element should show me actual vs expected per corner, the inner radius should equal the outer radius minus the inset between them. Add a button that scans the whole page, and a copy button that gives me a report I can paste into an agent.
You can build this out further and further. The only thing you need is an actual good idea. One that solves a real problem you have.
A thing I always did when building pages was tabbing through the page to see in which order the elements are focused. It was a pain to do manually, and I was losing track of the order quickly, so I built a tool that does it for me.
We’ll use this to create your course account.
Press the inspect button to see the focus path.
Those are just two examples of tools you can build, but you get the idea.
If you follow this idea of fixing problems you encounter often, you’ll definitely speed up your workflow. But you have to be picky and careful about not wasting too much time on things to help you do other things. Otherwise you’ll become one of those “productivity” people that end up spending more time setting up their tools than doing the actual work.
If you want to improve your review workflow even further, you can use the /emil-ui-review skill:
npx @aiforui/install emil-ui-review --token=…