extract-design-system

Extract design primitives from a public website into JSON and CSS token files.

1|1|Updated Apr 20, 2026

Search Tags:#design system #color palette #token generation #UI theming #website analysis #typography extraction #starter assets

Ready to run

npx skills add https://github.com/svssdeva/agentic-skills --skill extract-design-system-svssdeva

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: extract-design-system
Source: https://github.com/svssdeva/agentic-skills/tree/main/frontend/extract-design-system
Command: npx skills add https://github.com/svssdeva/agentic-skills --skill extract-design-system-svssdeva

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill reduces the time and guesswork of creating a design system by extracting usable design primitives from a public website into project-local starter token files.

Core Features & Use Cases

Website-to-token extraction: Extracts likely color, font, and scale primitives from a target URL.
Normalized artifact review: Produces raw and normalized JSON outputs so you can validate what was detected.
Starter token generation: Creates ready-to-use design-system/tokens.json and design-system/tokens.css for initialization.
Use Case: Starting a new design system for a fresh frontend project by capturing the visual baseline of a reference marketing site (e.g., homepage + key landing pages) to bootstrap spacing, radii, shadows, and typography.

Quick Start

Ask the AI to extract design primitives from a public website URL and generate starter token files for your project.

Frequently Asked Questions about extract-design-system

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I extract a design system from an existing website?▼

To extract a design system from an existing website, provide a reachable public URL to generate project-local starter token files, capturing color, font, and scale primitives to bootstrap your design system initialization.

What are design tokens and how do I generate them for a new frontend project?▼

Design tokens are normalized JSON variables representing UI primitives like spacing and typography. You can generate them by extracting visual primitives from a reference website URL, producing ready-to-use tokens.json and tokens.css files.

Can I extract color palettes and typography from any public URL?▼

You can extract color palettes and typography from any reachable public URL. The process analyzes the target website to identify design primitives and outputs raw and normalized JSON artifacts for your review.

Does generating starter tokens from a website overwrite my existing app styling?▼

Generating starter tokens does not overwrite existing app styling without explicit confirmation. It produces raw and normalized JSON artifacts alongside design-system tokens in both JSON and CSS form for safe initialization.

What is the best way to bootstrap a design system for a fresh frontend project?▼

The best way to bootstrap a design system is extracting visual primitives from a reference marketing site. This captures a baseline for spacing, radii, shadows, and typography to quickly generate project-local starter token files.

When should I not use website extraction for design system initialization?▼

You should not use website extraction when you need full component parity, as it is intended for bootstrapping token sets and early design system initialization rather than replicating complete component libraries or complex UI logic.