We built a tool that detects UI mismatches between Figma and live websites in minutes
Hi DEV community 👋
As frontend developers, we kept running into a recurring problem:
A design looks perfect in Figma…
but once it’s implemented, small UI issues start appearing in production.
- spacing differences
- alignment issues
- responsive breakpoints breaking
- subtle visual inconsistencies that are easy to miss
These issues usually slip through manual QA and end up being caught late — sometimes even by users.
🧩 What we built
We created a small tool called Whoogy.
It helps developers detect UI mismatches between Figma designs and live websites automatically.
It works by:
- Comparing Figma design vs live UI
- Detecting visual inconsistencies
- Highlighting UI/UX issues that are hard to catch manually
- Generating a report in ~2–3 minutes
⚡ Why we built it
We noticed that frontend QA is still very manual and time-consuming.
Even with good testing practices, UI issues are often:
- subjective
- inconsistent across devices
- time-consuming to review
We wanted to reduce that friction and make UI QA faster and more consistent.
🔍 What we’re looking for
This is still early, and we’re mainly looking for feedback from developers:
- Does this solve a real problem in your workflow?
- How do you currently handle UI QA before production?
- What would make this actually useful in a team setting?
🙌 Feedback appreciated
If you’re a frontend dev, designer, or QA engineer, I’d love your thoughts.
Happy to answer any questions or go deeper technically.
Thanks for reading!
Top comments (0)