Skills
.Work. You
Rest

design-md-chrome-extractor

Official

Extract design systems from any webpage.

Design & Creative#design system#chrome extension#markdown generation#token extraction#TypeUI#UI replication
AuthorAradotso
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Design system documentation is hard to recreate from scratch when you need consistent tokens, so this Skill helps you quickly extract real typography, colors, spacing, radius, shadows, and motion from an existing website.

Core Features & Use Cases

  • Webpage-to-Design System Extraction: Scans a live page and collects computed style tokens (typography, colors, spacing, radius, shadows, motion) to mirror what users see.
  • AI-Ready Markdown Outputs: Generates TypeUI DESIGN.md or SKILL.md so coding agents can reproduce the extracted system in downstream work.
  • Iterate on Page State: Re-extracts after SPA navigation or dynamic content changes and lets you download the generated documentation for immediate use.

Example use case: convert a production site like Stripe into a reusable DESIGN.md so an AI can implement components that match the site’s established look and feel.

Quick Start

Ask an AI to help you install the Chrome extension and generate a SKILL.md for a specific site you’re trying to replicate (for example, stripe.com) so your agent can follow the extracted tokens.

Dependency Matrix

Required Modules

None required

Components

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: design-md-chrome-extractor
Download link: https://github.com/Aradotso/design-skills/archive/main.zip#design-md-chrome-extractor

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.