skills.rest
pmatos
pmatosCOMMUNITY
Explore all skills by this author →
Website𝕏@pocmatosGitHub

extract-design-system

Extract fonts, colors, CSS tokens, and assets from a public website into a local git repo.

2|Updated Mar 18, 2026
Search Tags:#fonts#svg#design-system#design-tokens#og-image#web-assets
One-click install
npx skills add https://github.com/pmatos/skills --skill extract-design-system-pmatos
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: extract-design-system
Source: https://github.com/pmatos/skills/tree/main/extract-design-system
Command: npx skills add https://github.com/pmatos/skills --skill extract-design-system-pmatos

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires requests, beautifulsoup4, tinycss2, and includes scripts (resource) components.

What problem does it solve?

This tool turns any public website into a local design-system repository by extracting fonts, colors, CSS tokens, favicons, logos, and OG assets without inventing or guessing brand data.

Core Features & Use Cases

  • Extracts fonts via font-face rules and downloads them for local use.
  • Captures CSS custom properties (design tokens) and converts them into CSS variables.
  • Saves logos as inline SVGs and collects open graph images and favicons for asset parity.
  • Produces a machine-readable manifest.json and a concise fact-only README to document what was collected.
  • Use case: a designer wants a starter design-system repo from a live site to bootstrap tokens and assets for a new project.

Quick Start

Provide the public URL you want to extract from and an optional output directory; the system will create a local repo containing assets, tokens, and documentation.

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 design tokens and fonts from a public website?▼

To extract design system assets from a public website, you need a tool that parses linked resources, inline SVGs, and manifests. This process downloads fonts and CSS custom properties into a fresh local git repo.

Can I download SVG logos and favicons from a live URL for a local design system?▼

Yes, you can download SVG logos and favicons from a live URL. The extraction captures inline SVGs and Open Graph images, saving them locally to ensure asset parity for your fresh design system repository.

Do I need Python and BeautifulSoup to scrape CSS custom properties from a site?▼

Yes, you need Python with the BeautifulSoup4, requests, and tinycss2 dependencies to scrape CSS custom properties. These libraries handle fetching the public URL and parsing the stylesheet rules to capture design tokens.

What is the best way to bootstrap a local design system repo from an existing site?▼

The best way to bootstrap a local design system repo from an existing site is automated extraction. This captures fonts, colors, and logos without inventing brand data, outputting a machine-readable manifest.json and a concise README.

Does this website design system extractor work on sites without a web manifest?▼

Yes, the extractor works on sites without a web manifest by relying on inline SVGs and linked CSS resources. However, having a manifest ensures higher asset parity when collecting favicons and Open Graph images.

Related Skills

Explore More Design & Creative Skills→
prince3626ezechiel-langprince3626ezechiel-lang

article-visualizer

Convert articles or local PDFs into structured HTML summaries with key insights.

Community
Advanced
Tx1207Tx1207
5

project-creator

Create a new project from a template, initialize uv, and configure a local Git repository.

Community
Advanced
radioactive-labsradioactive-labs
68

plutonium-theming

Apply CSS design tokens to standardize UI theming across web application components.

Official
Advanced
gooseworks-aigooseworks-ai
6

mask-wipe-through-letters

Create text-based alpha masks with SVG and CSS3 for motion graphics.

Official
Intermediate