DEV Community

Cover image for Your UI Has Problems You Cannot See Until It Is Too Late
roynick365
roynick365

Posted on

Your UI Has Problems You Cannot See Until It Is Too Late

You ship a component. It looks fine. Users struggle with it anyway.
Not because of a bug. Because the button said "Go" instead of "Get Started". Because the empty state said "No data" instead of something a human would actually understand. Because the form had five fields when it needed three.

Small things. The kind you do not notice until someone else points them out.

I built a tool that points them out before you ship. And this week I made it a lot harder to ignore.

What changed

I added three things to Fix My UI, and one of them might save you from a review that comes back as "output too complex to be reliable" — which is a frustrating thing to find out after you have already waited for the result.

You now know before you run whether your component is going to get a good review.

A complexity indicator sits below the input and reads your HTML in real time. It counts your lines, counts your tags, and tells you whether what you have pasted is simple, medium, or complex. If it is complex, it tells you to split it before running.

Sounds obvious. I did not have it before. I was pasting full dashboard sections, getting weak reviews, wondering why, and only later realizing the component was too large. Now I know before I click the button.
You can now get the raw data out.

The Markdown export I shipped in the last version is good for PR comments and tickets. But sometimes you want the structured JSON — the scores, the issue array, the full machine-readable output. Maybe you want to store it, compare it across versions, or pipe it somewhere else.

JSON export is now a second button next to the Markdown one. One click, clean structured file, includes metadata.

You can now use the tool in the light. Dark mode only was a choice I made for myself and forced on everyone else. There is a toggle in the top-right corner now. It works.

The thing I keep learning building this
Every version I want to add ten things. Every version I add three. The discipline of asking "did I actually hit this problem or am I just adding features" is the only reason the tool still does one thing well.

The complexity indicator almost did not make it. I thought it was too small. But it is the kind of quiet improvement that makes every single interaction slightly less frustrating, and those compound.

What is coming next
The roadmap has three items and the third one is the interesting one.
Before and after rendered preview is coming — see the original and improved component side by side as actual rendered HTML, not just code.
CSS analysis alongside HTML is coming — right now the tool only sees your markup, not your styles.

And then there is screenshot input. Paste an image of a component, skip writing the HTML entirely, get a review based on what it actually looks like. I am still figuring out the right approach. It is the feature I am most curious about and least certain how to build well.

Try it: roynick365.github.io/fix-my-ui
GitHub: github.com/roynick365/fix-my-ui

If you paste a component and the review misses something obvious, open an issue. That is the most useful thing you can do right now.

Top comments (0)