guimkt-design-system-extractor
CommunityExtract complete design systems from websites.
Design & Creative#markdown#design-system#design-tokens#website-analysis#brand-identity#reference-assets#css-components
Authorguilhermemarketing
Version1.0.0
Installs0
System Documentation
What problem does it solve?
Websites lack a structured, reusable reference for reproducing a brand's visual identity. The Design System Extractor automates capturing tokens, components, assets, and layout conventions into a single, shareable Markdown document.
Core Features & Use Cases
- Output: Generates a complete Markdown design-system document plus a
{brand}-refs/directory with visual references and CSS tokens. - Tokens & Components: Extracts color palettes, typography, spacing, buttons, navigation, cards, and other UI primitives for reuse.
- Use Case: Ideal when starting a new site or reworking a page to match an existing brand identity; provides a ready-to-consume guide for designers and developers.
Quick Start
Run the guimkt-design-system-extractor on a target website to generate a Markdown design system document and a refs directory with design tokens, components CSS, and asset URLs.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: guimkt-design-system-extractor Download link: https://github.com/guilhermemarketing/esc-skills/archive/main.zip#guimkt-design-system-extractor Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.