skills.rest
Aradotso
AradotsoOFFICIAL
Explore all skills by this author →
Website𝕏@aradotsoGitHub

design-md-chrome-extractor

Extract computed design tokens from websites into TypeUI-compliant DESIGN.md or SKILL.md.

3|Updated May 16, 2026
Search Tags:#design system#chrome extension#markdown generation#token extraction#TypeUI#UI replication
One-click install
npx skills add https://github.com/Aradotso/design-skills --skill design-md-chrome-extractor
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-md-chrome-extractor
Source: https://github.com/Aradotso/design-skills/tree/main/skills/design-md-chrome-extractor
Command: npx skills add https://github.com/Aradotso/design-skills --skill design-md-chrome-extractor

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about design-md-chrome-extractor

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I extract a design system from an existing webpage?▼

You can extract a website's design system using a Chrome extension to capture computed style tokens like typography, colors, spacing, radius, shadows, and motion, then convert them into a standardized markdown file for AI workflows.

Can I generate markdown for AI coding agents from website styles?▼

Yes, you can generate TypeUI-compliant DESIGN.md or SKILL.md files from extracted website styles. This creates an agent-readable style foundation that coding agents use to implement components matching the original site's look and feel.

How to capture design tokens for UI replication from a production site?▼

Capture design tokens for UI replication by scanning a live production page to collect computed style values. This allows you to mirror exactly what users see and reverse engineer the site's design system for accurate component implementation.

Does design token extraction work with dynamic content and SPA navigation?▼

Yes, design token extraction supports SPA navigation and dynamic content by allowing you to re-extract after the page state changes. You can then download the updated markdown documentation for immediate use.

Do I need a Chrome extension to reverse engineer a website's design system?▼

Yes, you need a Chrome extension to reverse engineer a website's design system because the extraction requires a browser-based flow to access and capture live computed styles directly from the target webpage.

Related Skills

Explore More Design & Creative Skills→
Chang-Shih-YungChang-Shih-Yung

connect-chrome

Control a real Chrome window with gstack and auto-load the Side Panel extension.

Community
Advanced
AradotsoAradotso
3

figma-design-md-generator

Generate DESIGN.md and SKILL.md from Figma design tokens and component families.

Official
Intermediate
AradotsoAradotso
3

awesome-design-skills-registry

Pull curated DESIGN.md and SKILL.md design system artifacts into projects.

Official
Basic
fajjarnrfajjarnr

product-designer

Codify a premium UI/UX system with tokens and audit patterns for design governance.

Community
Advanced