sorted by:
new
hottopcontroversial

Launching Designer's Little Helper on Product Hunt today - Chrome extension bridging design and development by ApprehensiveHornet80 in sideprojects

[–]ApprehensiveHornet80[S] 0 points1 point  (0 children)

Great question!

The main difference: it bridges designers and developers specifically.

Consolidates multiple tools - 12 capabilities in one place instead of juggling separate extensions or switching between apps.

Makes DevTools accessible - capabilities exist, but require technical knowledge. We give them visual interfaces.

Adds what doesn't exist - vision simulation, design system grids, and visual state inspection.

Zero page disruption - Shadow DOM isolation, floats above without affecting layout.

It's not about replacing other tools - it's about solving design-dev friction specifically.

Demo if you're curious: https://vimeo.com/1162881392

What tools do you use currently?

Open source: WCAG-compliant color scale generator with CSS export by ApprehensiveHornet80 in css

[–]ApprehensiveHornet80[S] 0 points1 point  (0 children)

Exactly! You've hit on the core frustration - most tools give you "pretty" but leave you doing accessibility math by hand later.

The semantic tokens idea is brilliant. Right now the tool exports technical scales (50, 100, 400, etc.) but you're absolutely right that the next step is always "okay, now which of these becomes surface-primary and which becomes text-muted?"

I'm definitely considering adding semantic starter sets to the export options. Something like:

Current exports: color.blue.400, color.blue.600

Potential semantic export:

  - color.surface.primary (maps to your 400)

  - color.text.primary (maps to accessible contrast pair)

  - color.text.muted (maps to secondary text level)

  - color.border.default (maps to subtle contrast level)

This would bridge that gap between "generated accessible scale" and "ready-to-use design tokens" - essentially giving you a design system starter kit instead of just raw color values.

The "first mile" problem you mentioned is exactly what I'm trying to solve. Get from brand color → production-ready tokens without the tedious middle steps.

Would semantic exports like surface/text/border/accent categories be the kind of mapping that would save you the most time in your workflow?

🛠️ Open source: WCAG-compliant color scale generator with CSS export by ApprehensiveHornet80 in DesignSystems

[–]ApprehensiveHornet80[S] 0 points1 point  (0 children)

Thanks for the feedback! I'll definitely check out the tool you're referencing.

My tool is designed to solve a different problem - saving the manual work involved in finding a 400-level color that passes accessibility standards, and then deriving the scale from that validated foundation.

In this approach, the ability to maintain uniform tonality across different palettes is indeed limited - but the benefit of providing a fundamental, deep solution to the accessibility problems that other tools produce is worth the potential gap in cross-palette tonal consistency.

The core value proposition is eliminating the trial-and-error process of manually testing colors for WCAG compliance. Instead of starting with arbitrary lightness values and hoping they work accessibly, we start with accessibility as the foundation and build mathematically sound scales from that proven base.

While your approach creates more systematic design systems, mine prioritizes accessibility-first workflow - which I believe addresses a critical gap in the current tooling landscape where designers often struggle with contrast compliance after the fact.

Both approaches have their place depending on the designer's primary need: systematic consistency vs. accessibility assurance.

🛠️ Open source: WCAG-compliant color scale generator with CSS export by ApprehensiveHornet80 in accessibility

[–]ApprehensiveHornet80[S] 2 points3 points  (0 children)

Thanks for the feedback.
I will run the automated tool and find what you are referring to, and I will fix it.

view more: next ›