arvindrk/extract-design-system — Extract design tokens (colors, typography, spacing, border radius, shadows) from any public website.

Description and use

A lightweight open‑source tool that scrapes any public website to capture its design tokens—colors, typography, spacing, border‑radius, and shadows—and outputs them as JSON and CSS custom properties for easy reuse in local projects. It can be run as a standalone CLI or invoked as an AI‑agent skill for Claude, Cursor, Codex, and similar platforms, streamlining design‑system extraction in orchestration, AI/ML, and frontend workflows.

Problem

arvindrk/extract-design-system helps turn isolated prompts and tools into repeatable agent workflows.

Outcome

Medium: useful for prototypes or internal workflows, with dependency and maintenance checks before production.

Workflow

• coordinate multi-agent workflows
• add tool-use pipelines
• standardize agent memory

Evidence

Extract design tokens (colors, typography, spacing, border radius, shadows) from any public website. Generates JSON and CSS custom properties for local projects. Available as an AI agent skill (Claude, Cursor, Codex) and standalone CLI.

Source