Reverse-engineer public website design primitives into localized design tokens and CSS variables automatically.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install extract-design-system
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install extract-design-system using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is Extract Design System?
The Extract Design System skill is designed for developers who need to jumpstart their styling process by analyzing existing public websites. It captures essential design primitives—such as colors, fonts, spacing, and shadows—and converts them into structured starter token files. As a part of the Openclaw Skills library, this tool streamlines the transition from inspiration to implementation by providing a technical foundation for design systems.
By automating the discovery of CSS properties, it eliminates manual color picking and font identification. The skill produces both raw data for auditing and normalized files that serve as the backbone for your application's theme, ensuring you have a consistent starting point for any web project.
Extract Design System Use Cases
- Rapidly bootstrapping a new project with established brand colors and typography.
- Migrating design primitives from legacy websites to modern component-based architectures.
- Auditing competitor design scales for spacing and shadows.
- Generating standard tokens for multi-platform styling using Openclaw Skills.
How Extract Design System Works
- The user specifies a target public URL for analysis.
- The skill installs and configures a Chromium instance via Playwright to ensure accurate rendering.
- The extraction engine crawls the site to map out raw CSS values and design patterns.
- A normalized JSON file is created to summarize primary themes, fonts, and spacing scales.
- Starter assets like tokens.json and tokens.css are generated in the project directory for immediate use.
Extract Design System Setup
To begin extracting design primitives, ensure your environment is ready by installing the necessary browser dependencies and running the extraction command:
npx playwright install chromium
npx extract-design-system <url>
If you only need to regenerate the starter files from previously extracted data, use the initialization command:
npx extract-design-system init
Extract Design System Data Schema & Taxonomy
The skill organizes extracted data into specific directories to maintain a clear separation between raw data and usable assets:
| File Path | Description |
|---|---|
.extract-design-system/raw.json |
Contains the complete, unrefined data captured from the target URL. |
.extract-design-system/normalized.json |
A cleaned summary of colors, fonts, and scales used for generation. |
design-system/tokens.json |
A JSON representation of your design tokens for programmatic use. |
design-system/tokens.css |
A stylesheet containing CSS custom properties (variables) for your project. |
Extract Design System Advanced Features
- Headless browser integration for high-fidelity extraction of dynamic styles.
- Extraction-only flag to perform analysis without modifying local project files.
- Automatic normalization of spacing and shadow scales for design consistency.
- Support for re-generating starter files from cached data within the Openclaw Skills ecosystem.
SKILL.md
Loading
Related Openclaw Skills
Ark Seedance Video Generation
An end-to-end video generation skill for AI agents using Volcengine Ark Seedance models for professional video synthesis.
Doc Doctor
Doc Doctor is an automated maintenance tool for markdown knowledge bases that scans for broken links, missing metadata, and orphan pages to ensure a high-quality documentation score.
Claude Config Linter
A specialized utility to audit Claude Code configurations for token waste and provide actionable performance scores.
Solana Analytics Pro
A professional-grade Solana ecosystem analysis platform integrating technical indicators, on-chain metrics, and sentiment tracking.
TDD E2E PR Workflow
Automate the end-to-end development cycle from issue selection to pull request creation with mandatory visual verification.
Resilient Claude Agent
A robust execution layer that decouples Claude Code from the orchestrator using tmux for persistent, crash-resistant coding tasks.
Featured*
