What it is
Give this skill a website address and it reads the site's design language: color palette, fonts, spacing, shadows, components, and more. You get a visual preview page, a summary of the key design decisions, an accessibility score, and ready-made theme files, including variables you can import into Figma. It helps designers and founders study a competitor's look or hand a consistent style to whoever builds the next page.
What it does
- Extracts the color palette with exact color codes and the font families a site uses
- Captures spacing, shadows, rounded corners, layouts, and common components
- Scores the site's color contrast against accessibility guidelines
- Creates a visual preview page plus Figma variables and theme files for developers
- Compares the design of two websites side by side
Use it when
- You want to know exactly which colors and fonts a website uses
- You're studying a competitor's or inspiration site's visual style
- You need to hand a site's design system to a designer in Figma or to a developer
Add this skill to your AI
Copy the source URL and ask your AI to add it. Most coding agents — Claude Code, Cursor, Codex, Gemini CLI, OpenCode, Windsurf — will fetch and install it for you.
Try this prompt:
Add this skill to my project: https://github.com/Manavarya09/design-extract/tree/main/skills/extract-design