AI Inspiration Worldextract-design-system
Give it a web page address and it pulls out colors, type and spacing as ready-to-use design token files.
- Ecosystem
- Agent Skills
- Skill category
- Design
- Creator / organization
- arvindrk
What it is
extract-design-system is published by GitHub user arvindrk. Give it the address of a public web page and it extracts the colors, typography and spacing the page uses as design tokens, writing them to tokens.json and tokens.css. The author says it works as an AI Skill for Claude, Cursor and Codex, or as a standalone command-line tool. If you want to turn an existing site's visual rules into style variables for your own project, it saves a lot of manual comparison.
Who it's for:Front-end developers and designers who want to capture a reference site's palette and type quickly. Readers who don't write code may find it hard to use.
Before you start: Install with the skills CLI; Node is required. Documentation is mainly in English. Extracting from someone else's site is for reference only: brand graphics and protected page content can't be copied directly, and you still need to follow the target site's terms. MIT license.
Based on the project's public documentation. Not tested by AI Inspiration World.