extract-design-system
This skill extracts design primitives from public websites and generates starter token files for projects.
Is extract-design-system safe to install?
Review the source first: our audit of extract-design-system's source files found 4 shell commands, 0 external URLs, file reads and writes (high risk). Every command and URL listed appears verbatim in the skill's source. The skill executes shell commands and writes files to the local directory, including .extract-design-system/raw.json, .extract-design-system/normalized.json, design-system/tokens.json, and design-system/tokens.css.
How we audit skills: our security review methodology.
Who is this skill for?
Developers and designers who want to initialize design systems based on existing public websites.
What can you do with it?
- Reverse-engineer design primitives from a public URL.
- Generate starter token files in JSON and CSS formats.
- Extract design artifacts without generating starter files.
- Regenerate starter token files from existing normalized data.
How good is this skill?
Quality score: 9/10. The skill provides clear instructions and safety boundaries. It lacks specific API endpoint documentation, but the tool usage is well-defined.
What does the skill file contain?
# Extract Design System Use this skill when the user wants to reverse-engineer a public website's design primitives into project-local starter token files. ## Before You Start Ask for: - the target public website URL - whether the user wants extraction only or starter files too Set expectations: - this v1 extracts tokens and starter assets, not a full component library - results are useful for initialization, not pixel-perfect reproduction - do not overwrite an existing design system or app styling without confirmation ## Workflow 1. Confirm the target URL is public and reachable. 2. R...
Frequently asked questions
What output files does this skill create?
It creates .extract-design-system/raw.json, .extract-design-system/normalized.json, design-system/tokens.json, and design-system/tokens.css.
Does this skill generate a full component library?
No, it extracts tokens and starter assets for initialization purposes.
Can I regenerate tokens if I already have the normalized data?
Yes, you can run npx extract-design-system init to regenerate starter token files.
Related skills
find-skills
2.3MUsers seeking to extend agent capabilities with specialized tools, workflows, or knowledge packages
The find-skills skill enables agents to search for, discover, and install modular packages from the open agent skills ecosystem using the Skills CLI.
agent-browser
506.7KAI agents and developers requiring programmatic web interaction, exploratory testing, or automation of Electron desktop applications
The agent-browser CLI provides browser automation for AI agents using Chrome or Chromium via CDP. It supports page navigation, form interaction, data extraction, and testing. The tool utilizes accessibility-tree snapshots and element references for interaction.
video-edit
338.7KUsers of the RunComfy CLI who need to automate video editing tasks like restyling, background swapping, or motion transfer
The video-edit skill acts as a router for the RunComfy CLI, selecting between Wan 2.7 Edit-Video, Kling 2.6 Pro Motion Control, and Lucy Edit Restyle models based on user intent to perform video transformations.
lark-doc
305.2KUsers who need to automate document management, content updates, and media handling within the Lark/Feishu ecosystem
The lark-doc skill enables agents to read, create, and edit Lark (Feishu) documents, including Docx and Wiki formats. It supports content manipulation via XML or Markdown, media handling, and resource management for document covers. The skill integrates with other Lark skills by identifying and delegating operations for embedded objects like spreadsheets, databases, and mind notes.