Extract Design System
Skill Verified ActiveExtract design primitives from a public website and generate starter token files for your project.
To provide developers with a quick way to reverse-engineer design tokens from any public website and generate foundational style files for their projects.
Features
- Extracts colors, typography, spacing, radius, and shadows
- Generates starter `tokens.json` and `tokens.css` files
- Provides raw and normalized JSON outputs
- Requires explicit confirmation before modifying existing project files
- Analyzes public websites only
Use Cases
- Initialize a new project with design tokens based on an existing website's style
- Analyze a competitor's or inspiration site's design primitives
- Generate foundational style assets for rapid prototyping
- Establish a repeatable workflow for design token extraction
Non-Goals
- Claiming the extracted system is complete or pixel-perfect
- Inferring components or semantic tokens not explicitly extracted
- Treating extracted output as authoritative without review
- Automatic broad app rewrites or framework config patching
Installation
/plugin install extract-design-system@arvindrk-extract-design-systemQuality Score
VerifiedTrust Signals
Similar Extensions
Color Audit
100Color-only audit to extract, evaluate, and recommend improvements for the project's color system
Type Audit
100Typography-only audit covering font selection, type scale, readability, hierarchy, performance
Layout Audit
100Layout and spacing audit covering grid, spacing consistency, density, responsive behavior
Vue Router Best Practices
100Vue Router 4 patterns, navigation guards, route params, and route-component lifecycle interactions.
Develop Web Game
100Use when Codex is building or iterating on a web game (HTML/JS) and needs a reliable development + testing loop: implement small changes, run a Playwright-based test script with short input bursts and intentional pauses, inspect screenshots/text, and review console errors with render_game_to_text.
UI Design System Toolkit
99UI design system toolkit for Senior UI Designer including design token generation, component documentation, responsive design calculations, and developer handoff tools. Use for creating design systems, maintaining visual consistency, and facilitating design-dev collaboration.