Extract Design

Name: Extract Design
Author: dembrandt

Extract colours, typography, spacing, components and W3C design tokens from a live website with Dembrandt. Use when you need a site's real tokens or want to seed a design system from it.

Skill169 stars on dembrandt/dembrandt-skills · shared by 45 skills

Kit Designers · Design systems & tokens4/7

Install

npx skills add dembrandt/dembrandt-skills --skill extract-design

About

Extract colours, typography, spacing, components and W3C design tokens from a live website with Dembrandt. Use when you need a site's real tokens or want to seed a design system from it.

ui
design
extract-design
skill

Next in the Design systems & tokens kit

Whole kit

Design Md
Analyze Stitch projects and synthesize a semantic design system into DESIGN.md files
Skill
8.5k· repoGitHub stars for google-labs-code/stitch-skills, shared by the 7 skills listed from this repo
@storybook/mcp
MCP server that serves knowledge about your components based on your Storybook stories and documentation
Connects to Storybook
91.4kGitHub stars for storybookjs/storybook
Design Systems MCP
Specialist assistant for design system tokens, components, patterns, and best practices across major DS libraries.
Connects to Design Systems
200GitHub stars for the source repo