Unlike browser DevTools, Screen Ruler is built for design workflows: visual flexbox/grid breakdown, gradient inspection with color stops, multi-element pseudo-state simulation, CSS-to-Tailwind conversion, and a Page tab with Performance, SEO, and Social previews.
# Product Hunt Launch
Hi Product Hunt,
Over the last 6 months, Screen Ruler has continued to grow to over 50,000 weekly active users on the Chrome Web Store. Screen Ruler continues to evolve as I expand its feature set so this launch doesn't have a typical "theme". Just a whole bunch of cool new stuff to try!
- Stylesheet parsing: When selecting an element, see rules across all stylesheets that affect that element with specificity visualized.
- Page inspection: A new Page tab with Performance, SEO issues, and Social previews.
- Layout inspection block: A glanceable visual breakdown of flexbox and grid: axes, justify/align, gap, and tracks.
- Inspector pinning: Now you can pin the floating inspector.
- State simulation: Force an element into a different pseudo-state (hover, focus, active).
- CSS to Tailwind conversion: Convert any element's CSS to Tailwind utility classes.
- Breakpoints, box-model margin indicators, HSB color space, element-probe contrast detection, plus dozens of refinements across the inspector flow.
Product Hunt Exclusive: Get 15% off Pro with code PH15OFF at checkout. Valid until the end of the month.
Right thing shows up at the right time ! I'm making a pitch deck for my product and it's so hard to center / align stuffs and this help a lot. Well done G
Now that is something we all never asked for. But we all need it
Nailed it man 🫡
As a designer this seems useful to do design QA and provide specific feedback to devs on what to change.
I've typically done this manually through browser developer tools. I find the item, adjust the css until I get the desired result (when possible). Then I give that info to dev for updating.
This will save a bit of time, although it would nice to be able to edit the code from the Screen Ruler sidebar. Then I wouldn't have to use dev tools at all. But I'm not sure the browser allows that.
Great work!
Haven't launched on Product Hunt yet, but this caught my eye. Most rulers just measure. You added actual dev tools.
Genuinely curious – devs or designers as the main user?
About Screen Ruler on Product Hunt
“The go-to ruler for designers and developers”
Screen Ruler launched on Product Hunt on May 29th, 2026 and earned 97 upvotes and 9 comments, placing #10 on the daily leaderboard. Unlike browser DevTools, Screen Ruler is built for design workflows: visual flexbox/grid breakdown, gradient inspection with color stops, multi-element pseudo-state simulation, CSS-to-Tailwind conversion, and a Page tab with Performance, SEO, and Social previews.
Screen Ruler was featured in Chrome Extensions (52.6k followers), Design Tools (260.3k followers) and Developer Tools (513.1k followers) on Product Hunt. Together, these topics include over 120.4k products, making this a competitive space to launch in.
Who hunted Screen Ruler?
Screen Ruler was hunted by Myster Violets. A “hunter” on Product Hunt is the community member who submits a product to the platform — uploading the images, the link, and tagging the makers behind it. Hunters typically write the first comment explaining why a product is worth attention, and their followers are notified the moment they post. Around 79% of featured launches on Product Hunt are self-hunted by their makers, but a well-known hunter still acts as a signal of quality to the rest of the community. See the full all-time top hunters leaderboard to discover who is shaping the Product Hunt ecosystem.
Want to see how Screen Ruler stacked up against nearby launches in real time? Check out the live launch dashboard for upvote speed charts, proximity comparisons, and more analytics.
Myster Violets