Skip to main content

Extract Design System

Plugin Verified Active

Extract design primitives from public websites into starter token files.

1 Skill 0 MCPs
Purpose

To automate the process of reverse-engineering design tokens from existing websites, providing a foundation for new projects or design system updates.

Features

  • Extracts colors, typography, spacing, border radius, and shadows.
  • Generates starter `tokens.json` and `tokens.css` files.
  • Provides both an AI agent skill and a standalone CLI.
  • Normalizes extracted data for stability.
  • Includes an MCP server for structured tool calls.

Use Cases

  • When you need starter design tokens for a new project based on an existing website's style.
  • When an agent needs to analyze a public website's visual primitives.
  • To establish a repeatable workflow for design token extraction.
  • To get a summary of a website's design primitives before implementing broader changes.

Non-Goals

  • Creating a full component library.
  • Pixel-perfect reproduction of a website's design.
  • Automatic patching of framework configurations or project-wide rewrites.
  • Extracting from dynamic, protected, or highly script-driven sites without limitations.

Documentation

  • info:Configuration & parameter referenceWhile the README details usage and outputs, specific parameters for the CLI and MCP server, including defaults, are not explicitly documented.

Code Execution

  • info:ValidationThe source code suggests Playwright is used for browser interaction, which implies some level of input validation, but explicit schema validation for all parameters isn't immediately apparent.

Errors

  • info:Actionable error messagesThe SKILL.md mentions asking for confirmation before modifying files, and the README notes potential failures with dynamic sites, but explicit error message framing is not detailed.

Scope

  • info:Dry-run previewThe SKILL.md indicates asking for confirmation before modifying files, which serves as a manual dry-run, but an automated `--dry-run` flag is not explicitly advertised for file generation.

Installation

/plugin install extract-design-system@arvindrk-extract-design-system

Quality Score

Verified
96 /100
Analyzed 2 days ago

Trust Signals

Last commit6 days ago
Stars36
LicenseMIT
Status
View Source

© 2025 SkillRepo · Find the right skill, skip the noise.