Cloning a site's look usually means eyedropping colors and guessing spacing. Stylewright reads any page to extract its design system: colors, type, spacing, radii, shadows. It merges shades perceptually into a real scale, then exports to CSS, Tailwind v4/v3, SCSS, W3C JSON tokens, or a DESIGN.md prompt for AI. Runs fully in your browser. Free tier includes element inspect, palette and CSS export. Pro is one time, no subscription. For Chrome.

Hey Product Hunt, Stylewright came out of rebuilding sites in a modern stack and doing the same tedious thing every time: eyedropping colors one at a time, squinting at font sizes, and guessing the spacing scale. So I built an extension that does it in one click. Point it at any page and it extracts the whole design system, colors, type, spacing, radii and shadows, then exports it as CSS variables, Tailwind (v4 and v3), SCSS, W3C JSON tokens, or a DESIGN.md prompt you can hand to an AI coding assistant. The part I am proud of is the output quality. It merges colors perceptually using CIEDE2000, so shades group the way the eye actually sees them, and it names them like a real scale instead of dumping a list of hex codes. It all runs locally, so nothing about the page leaves your browser. The free tier covers element inspect, the palette with a WCAG contrast check, and CSS export. Pro is a one time purchase, no subscription. If you rebuild or clone site designs, what is the most annoying part of that process for you today?

Love that you merged shades into a real scale instead of dumping raw hex values, that's the kind of detail that actually saves time when rebuilding a look.

Stylewright

Turn any website into a design system.

Turn any website into a design system.