design-system-extraction-code

Extract design tokens and component definitions from visual audits or source repositories.

1|Updated Mar 30, 2026

Search Tags:#automation #documentation #components #design tokens #UI design #Figma #visual audit

Ready to run

npx skills add https://github.com/AndrejKiri/prometheus-design-system --skill design-system-extraction-code

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: design-system-extraction-code
Source: https://github.com/AndrejKiri/prometheus-design-system/tree/main/.claude/skills/design-system-extraction-code
Command: npx skills add https://github.com/AndrejKiri/prometheus-design-system --skill design-system-extraction-code

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires python3, jsonschema, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill streamlines the process of deriving a comprehensive design system by extracting tokens and components directly from visual audits or source repositories.

Core Features & Use Cases

Design Token Extraction: Produces JSON files for colors, spacing, typography, and other tokens from visual audit data or source code.
Component Identification: Detects and documents UI components, including variants, layouts, and accessibility info.
Use Case: Developers and designers can quickly generate an up-to-date design tokens.json and components.json from a website or codebase, facilitating design consistency and rapid prototyping.

Quick Start

Run the skill to produce design system files by providing the visual audit or source code repository location as input.

Frequently Asked Questions about design-system-extraction-code

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I extract design tokens from a visual audit or source code?▼

Extract design tokens from visual audits or source code by running this Skill's Python automation to parse inputs and generate standardized JSON files for colors, spacing, and typography. It handles partial inputs and flags gaps for reporting.

What is the best way to automate design system documentation from a codebase?▼

Automating design system documentation from a codebase is best handled by extracting component definitions and design tokens to JSON, supporting standardized documentation site generation and iterative design system development.

Do I need Python to generate design tokens and component definitions?▼

Yes, you need Python3 and the jsonschema dependency to generate design tokens and component definitions, as the Skill uses Python automation to process visual audits or source repositories and validate output.

Can I identify UI components and variants from a Figma visual audit?▼

Yes, you can identify UI components from a Figma visual audit by providing the audit data to the Skill, which detects and documents components including variants, layouts, and accessibility info into a components.json file.

How do I handle partial inputs when extracting a design system?▼

When extracting a design system from partial inputs, the Skill processes available visual audit or source data and automatically flags missing information, ensuring comprehensive reporting on gaps for iterative development.