How to use Extract Design in your AI agent

What you'll get

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.

Step 1 — Get the skill source URL

The Extract Design skill lives at:

Step 2 — Add it to your AI agent

Copy one of these prompts and paste it into your AI tool. The agent will fetch and install the skill for you.

Add the agent skill from https://github.com/Manavarya09/design-extract/tree/main/skills/extract-design to my project.

Install this agent skill: https://github.com/Manavarya09/design-extract/tree/main/skills/extract-design

Add this skill to .codex/skills/: https://github.com/Manavarya09/design-extract/tree/main/skills/extract-design

Add the skill at https://github.com/Manavarya09/design-extract/tree/main/skills/extract-design to my .gemini/skills/ directory.

Install this agent skill from https://github.com/Manavarya09/design-extract/tree/main/skills/extract-design

Add this skill: https://github.com/Manavarya09/design-extract/tree/main/skills/extract-design

Step 3 — Try these prompts

Once the skill is installed, ask your AI things like:

• Know exactly which colors and fonts a website uses
• Studying a competitor's or inspiration site's visual style
• Hand a site's design system to a designer in Figma or to a developer

What this skill 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