TastefulKit 2 views · 24h
← AI skills

Extract Website Design Tokens

Extracts visual primitives from a public webpage and generates starter JSON design tokens and CSS custom properties.

design-tokensdesign-systemscss
View skill source ↗ Repository ↗

256 GitHub stars (repository-wide; checked Oct 26, 2026)

130648 skills.sh installs (checked Oct 26, 2026)

When to use it

Use to inventory colors, fonts, spacing, radii and shadows before a styling migration. Requires Node.js 20+, network access and Playwright Chromium. Single-page extraction can miss dynamic or protected content; results are starter tokens, not a complete component system or pixel-perfect reproduction. Not installed, executed or runtime-tested during discovery. GitHub stars are repository-wide.

Compatible agents

ClaudeCursorCodex

Installation

Upstream README: npx skills add arvindrk/extract-design-system. Keep the skills/extract-design-system folder and companion references together. At use time, the workflow runs the npm CLI and may require npx playwright install chromium; review dependencies first.

Review the source and instructions before installing in your agent.

License

MIT

Last checked Oct 25, 2026.

Pair this skill with a visual reference

A skill guides how your agent works; a design reference shows the direction you want. Choose an example for a specific job, such as the headline hierarchy or form layout, and keep your project's existing design rules explicit.

Start with design references you can inspect, then use our guide to briefing an AI coding agent to turn observations into requirements. If you need implementation components, compare UI libraries for your stack.

These pages are public. Browsing a skill does not install it, and TastefulKit's design-reference MCP tools do not search the AI-skill directory.