SkillFoxx

Type a name, a task or a service

extract-design-system

A skill and CLI that pull colors, type, spacing, radius and shadows from a public site and save them as JSON and CSS tokens

SkillMedium risk

arvindrk/extract-design-systemAuthor: Arvind RK

Install

npx skills add arvindrk/extract-design-system

This is third-party code. Review the repository files before installing.

What it does

The skill gives the agent a repeatable flow: confirm the site is public and reachable, run the bundled CLI through Playwright, normalize the output and generate starter tokens. It writes raw and normalized data to .extract-design-system/, plus design-system/tokens.json in W3C format and tokens.css with CSS custom properties. The agent must ask before touching existing app styles or code.

Who it is for. For frontend developers and designers who need a starter design system modeled on an existing site.

Good fit when

  • You need starter tokens from a reference site
  • You want to analyze a site's visual primitives before a redesign
  • You want a repeatable flow instead of manual DevTools inspection

Not a fit when

  • You need a full component library or a pixel-perfect copy
  • The site is behind login or heavily script-driven

Example request

Extract the design system from https://linear.app and generate starter tokens for this project

Limitations

Public sites only, one page per run. The output is starter tokens, with no components and no framework config changes. Dynamic sites may give incomplete data. Requires Chromium for Playwright.

How to disable. Delete the extract-design-system folder from the agent's skills directory and the generated files in .extract-design-system/ and design-system/.

Security check

  • Launches a browser and loads third-party sites
  • Writes files into the project

README in short

The README lists what is extracted and which files appear in the project, and gives the skills.sh install command. It includes example prompts and the steps the skill follows. Separate sections cover limits and security: target sites are untrusted input and tokens need review. MIT licensed.

SKILL.md

---
name: extract-design-system
description: Extract design primitives from a public website and generate starter token files for your project.
---

# Extract Design System

Use this skill when the user wants to reverse-engineer a public website's design primitives into project-local starter token files.

## Before You Start

Ask for:

- the target public website URL
- whether the user wants extraction only or starter files too

Set expectations:

- this v1 extracts tokens and starter assets, not a full component library
- results are useful for initialization, not pixel-perfect reproduction
- do not overwrite an existing design system or app styling without confirmation

## Workflow

1. Confirm the target URL is public and reachable.
2. Run:

```bash
npx playwright install chromium
npx extract-design-system <url>
```

FAQ

Can I use it without an agent?

Yes, the CLI is included: npx extract-design-system <url>. The skill wraps it in a workflow.

Will the agent change my styles?

The skill requires confirmation before modifying existing code, styles or config.

Editors’ pick

Official Claude Code plugin from the Next.js repo: adopting Cache Components and Partial Prefetching, and verifying changes on a running dev server

PluginMedium risk142.3K
Editors’ pick

Official shadcn/ui skill and MCP server: the agent searches registries, adds components via the CLI and follows the library's rules

SkillMedium risk123.8K
Editors’ pick

A frontend design skill with 23 commands, live browser iteration and 61 detector rules for common AI-generated UI tells

SkillHigh risk68.1K
Editors’ pick

Vercel's skills: React and Next.js performance, UI guideline audits, React Native, component composition and deploys

SkillMedium risk31.2K