Designer's Little Helper
12 professional browser design tools in one extension
6 followers
12 professional browser design tools in one extension
6 followers
Grid overlays, pixel-perfect measurements, WCAG contrast checker, layout inspector, and 8 more professional tools. Built for designers and developers who care about pixel-perfect web design. Zero performance impact. Free forever.
👋 Hey Product Hunt!
I'm Shahar, a product designer with over a decade of experience working across companies, startups, and freelance projects.
Why I Built This
Throughout my career, I kept running into the same challenge.
The gap between design and development.
Not the conceptual gap. The practical, everyday one.
A designer checks their mockup: "16px padding."
They open the live site: it's 18px.
But verifying that requires opening DevTools, finding the element, reading computed styles.
Or an accessibility audit. WCAG compliance checking means digging through technical panels that weren't built with designers in mind.
I saw this pattern repeat:
Designers couldn't quickly verify implementation
Developers needed constant clarification
Simple checks required technical knowledge
Time lost on preventable miscommunication
The Real Problem
The tools exist in DevTools. But they're built for a developer workflow.
They require technical knowledge to navigate.
They interrupt the page layout while you're trying to inspect it.
Some capabilities - like visual grid overlays with design system presets - simply don't exist.
What if these tools were accessible to everyone on the team?
What I Built
Designer's Little Helper brings those capabilities to the surface:
12 tools that float above the page - never disrupting the layout
No technical knowledge required - visual language designers understand
Hide the UI when needed - without closing the tool
It's not about replacing DevTools. It's about making these capabilities accessible to everyone.
The Tools:
Design Precision:
Grid Overlay - alignment without guesswork
Mark & Measure - precise spacing verification
Ruler & Guides - pixel-perfect positioning
Layout Analysis:
Layout Inspector - understand Flexbox and Grid visually
CSS Inspector - see computed styles simply
Type X-Ray - typography at a glance
State Visualizer - see CSS states clearly
Accessibility:
Vision Simulator - 8 types of color blindness
Contrast Inspector - WCAG 2.2 compliance made simple
Workflow:
Responsive Tester - 20+ device presets
Color Picker - with harmonies
Edit Text - quick content prototyping
Why It Matters
Better communication between designers and developers means:
Less back-and-forth
Fewer implementation mistakes
More time actually building
Better products
That's the bridge I'm trying to build.
What I'd Love From You
Honest feedback:
Does this solve a real problem for you?
What's missing?
What would make this a daily tool?
If you're a designer or developer who's felt this friction - I'd love to hear your story.
And if you find this useful, an upvote would mean a lot 🙏
I'll be here all day answering questions.
Links:
🌐 Website: https://srefine.com/DLH/
🎥 Demo: https://youtu.be/cPBRw8qlbyA
💾 Chrome Store: https://chromewebstore.google.com/detail/gnmejhainjnfgfoehbdnacflcodpfpbg
Thanks for checking this out.