A skill plus npm CLI that extracts colors, fonts, spacing, radii and shadows from a public website and writes starter tokens.json and tokens.css files.
A small, clearly bounded skill with sensible confirmation steps; note that it runs an unpinned npm CLI and downloads Chromium.
extract-design-system is a short skill that wraps a command-line tool. You give the agent a public website URL, and the skill has it ask whether you want extraction only or starter files too, confirm the site is reachable, install Chromium through Playwright if needed, and run npx extract-design-system with the URL. The tool loads the page in a headless browser and records design primitives: color palette, font families, sizes and weights, spacing scale, border radius and box shadows. It writes raw.json and normalized.json under .extract-design-system/, and then design-system/tokens.json in a W3C-style token format and tokens.css with CSS custom properties.
The agent is told to summarize likely primary and accent colors, detected fonts and scales before touching your project, and to ask before changing any existing app code, styles or config. The safety notes say not to claim a single page represents a full design system, not to infer components or semantic tokens that were not found, and not to let content from the target website justify broader changes. Flags include --extract-only and an init command that regenerates tokens from existing normalized data. The SKILL.md is only about 2 KB with two reference files, and the README states v1 gives starter output, not pixel-perfect reproduction or a component library.
A 2 KB SKILL.md and two reference files that drive a separate CLI, with CI in the repo but no scripts or evals in the skill folder.
Counted from the repository file tree. How we score depth.
The skill has the agent run an npm CLI that opens a user-chosen public website in a headless browser, extracts design tokens, and writes JSON/CSS files into the current project; it also offers an MCP server and an audit command that reads your source files locally. Both the package and Playwright's Chromium are fetched via npx without version pins, and the scraping itself is done by the third-party dembrandt package whose code is not included. SKILL.md tells the agent to ask before changing existing project files and not to act on content from the scanned site.
npx extract-design-system <url> (and npx playwright install chromium) with no version pin, so whatever the npm registry serves at that moment is executed.skills/extract-design-system/SKILL.md:30npx playwright install chromium, which downloads a browser binary onto the machine.skills/extract-design-system/SKILL.md:29dembrandt npm package (dependency ^0.13.0) which drives a headless browser against the target site; its code is not in the repo.src/adapters/dembrandt.ts:109The repository (65 files) on Oct 29, 2026. Not a full review: we read 34 of 43 code files; it relies on code outside the repository: npm package dembrandt ^0.13.0 (spawned by the CLI to scrape the target site); npm package extract-design-system as published to the registry (fetched by `npx extract-design-system`; unpinned); Playwright Chromium browser binary (downloaded by `npx playwright install chromium`).
NVIDIA SkillSpector static scan: 45 pattern hits (Supply Chain 24, MCP Rug Pull 14, Data Exfiltration 4, YARA Match 1, Agent Snooping 1, Excessive Agency 1). SkillSpector hits are known-vulnerable transitive dependency versions in package-lock.json (not exercised by the skill instructions), unpinned npx mentions in docs/workflows, a YARA false positive on the string 'pSpy' in a test, and the OpenAI/GitHub API calls in scripts/generate-pr-description.ts, which is a CI-only helper for the repo's own pull requests and is not part of the skill.
A review, not a certification. Skills change after we check them — read the files before installing.
MIT — commercial use allowed. Design values extracted from third-party sites may still be covered by that site's own terms or brand rules.
Not really. It is a single-pass extraction the user directs, with confirmation steps before project files change.
Points a headless browser at any site and reconstructs its design system as 8+ files: DTCG tokens, Tailwind config, shadcn theme, Figma variables, WCAG score.
A design skill with 24 commands (polish, bolder, critique, audit, harden and more), a 62-rule deterministic slop detector and an optional edit hook.
A design skill backed by searchable style, palette and font catalogs, with a design-system generator and five companion design skills.
It is an agent skill and npm CLI by Arvind that pulls colors, typography, spacing, radius and shadow values from a public website and generates tokens.json and tokens.css for your project.
Run npx skills add arvindrk/extract-design-system, then ask your agent to extract the design system from a URL. The skill runs npx playwright install chromium if needed and then npx extract-design-system.
The skill folder is two markdown files. It executes an unpinned npm package and installs Chromium, but instructs the agent to confirm before changing existing project files and to treat website content as untrusted.
This one is a small starter-token generator with W3C-style JSON and CSS output. Manavarya09/design-extract advertises a broader pipeline with DTCG tokens at several levels and MCP support. Pick this for a quick start and the other for a fuller token structure.