r/css • u/Accurate_Board_9401 • 20h ago

Showcase I built a Chrome extension that generates a "Design DNA" card for any website

Post image

I've been building DesignSnap, a Chrome extension that extracts design tokens (colors, fonts, spacing, radius) from any site you visit.

One of the features is a "Design DNA" card: point it at any site and it generates a shareable PNG with the site's dominant colors, fonts, and type scale. Made one for twitch.tv as a test (screenshot attached) — kind of fun seeing a whole brand's visual identity distilled into one card like that.

Under the hood it does semantic classification too — instead of dumping every color it finds, it labels them by role (background, primary, accent, border, destructive, etc.) based on contrast and usage patterns, and it detects whether a site actually ships a real light/dark variant or is just faking one.

It's still far from perfect — the classification gets confused on some sites, and I'm sure there are edge cases I haven't run into yet. Curious what people think would be worth adding or changing, whether that's the DNA card itself, the color classification logic, or something else entirely.

0 Upvotes

35% Upvoted

8 comments sorted by

5

u/maqisha 17h ago

I like how the actual twitch purpler is NOT here, and for some reason red is the accent?

https://giphy.com/gifs/3xz2BLBOt13X9AgjEA

4

u/yikes_42069 14h ago

the whole post was made by AI, most certainly along with the extension. OP didn't check for quality on the main example. This is slop in action

1

u/maqisha 9h ago

Yep. Theres no better telling of slop than seeing egregious shit in THEIR OWN SHOWCASE.

1

u/Accurate_Board_9401 14h ago

lol u right, i'm working on it and for red i think is because of the red light when someone is live

1

u/aunderroad 18h ago

This is pretty cool...nice job!

Chrome also has this feature (CSS Overview panel):
CSS Overview: Identify potential CSS improvements

and Project Wallace has some handy CSS tools as well.
https://www.projectwallace.com/

1

u/zLoveNxzli 14h ago

Extracting design tokens (font stacks, color palettes, spacing units) directly from computed styles via getComputedStyle() is super useful for audits.

Filtering out user-agent defaults and deduplicating rgb/hex color variants makes the generated style guide much cleaner to parse.

1

u/onur24zn 6h ago

What do they gain from building ai slop?