Tearsheet

Extract design palettes that actually match what you see

5 followers

Extract design palettes that actually match what you see

5 followers

A local design reference gallery for images and video. Claude Code catalogs each one, extracts its color palette, and can scaffold the mood, typography, and UI patterns straight into a new Figma file or Claude Design project. - jeanpaulbondy-la/tearsheet

Free

Launch tags:Design Tools•Typography•GitHub

Launch Team

CloudflareYour next app belongs on Cloudflare Workers. Deploy for free

Promoted

Maker

📌

Every designer has a folder of inspiration—screenshots, mood boards, design references. But they're just images. You can't extract the actual colors. You can't see the type system. You can't use them to build anything. Tearsheet changes that. Drop images into your local gallery. Claude Code catalogs each one, extracts real color palettes (using perceptual color science, not broken RGB clustering), identifies typography, and scaffolds UI patterns. Export to Figma or use to bootstrap a full design system. **What it does:** - Builds a searchable gallery of design references - Extracts accurate color palettes (now 71% better at capturing accent colors) - Identifies typography from images - Auto-generates Figma variables and text styles - Creates component sketches for common UI patterns - Works entirely offline—your inspiration stays local **Who it's for:** - Designers building mood boards into production design systems - Design teams standardizing on extracted palettes - Anyone who's frustrated that palette extractors destroy saturated colors - Design schools teaching real color science Built for Claude Code. Integrates with Figma and Claude Design. Open source.

Report

2mo ago

Maker

Hey Product Hunt! Jean-Paul here.

I built Tearsheet because I was losing my mind.

Every design project starts the same way: I'd collect references, screenshots, mood boards. Hundreds of them. But once I had them, they were just images. I couldn't extract the colors for my design system. The palette tools would destroy all the vibrant reds and teals. The type was impossible to identify systematically.

So I'd recreate palettes by hand, squint at screenshots to guess typefaces, rebuild components from memory. Hours of manual work.

The root cause: every palette extractor uses RGB clustering. It averages colors in linear RGB space, which is not how humans perceive color. A vivid red gets averaged down to brown. A teal disappears into the background.

I switched the algorithm to CIE LAB color space (perceptually uniform) + k-means clustering + saturation weighting. Now the tool actually sees colors the way I do. 71% better at capturing reds alone.

Tearsheet is the result: drop in your references, extract colors/typography/UI patterns, export to Figma or use to bootstrap your design system. Runs locally, stays private, integrates with Claude Code.

It's free and open source because design systems should be built on real color science, not RGB approximations.

I'm here to answer questions about the color space deep dive, the k-means++ algorithm, design systems workflows, or why this matters. Ask away!