Agent skill · design visual · aradotso
design-md-chrome-extractor
design-md-chrome-extractor — an agent skill for coding agents.
Why this skill is useful
Adds a Chrome extension that automates the extraction of design tokens and generates structured markdown files for AI workflows, providing new capabilities.
What it needs
Requires chrome installed locally. About 7k tokens when loaded. Last updated 2026-07-09. 70 stars on the source repository.
What this skill does
bash 1. Clone the repository git clone https://github.com/bergside/design-md-chrome.git cd design-md-chrome 2. Open Chrome and navigate to extensions chrome://extensions 3. Enable Developer Mode (toggle top-right) 4. Click "Load unpacked" and select the project folder design-md-chrome/ ├── manifest.json # Chrome extension manifest (MV3) ├── popup.html # Extension popup UI ├── popup.js # Popup logic, UI interactions, file download ├── content.js # Content script — injected into active tab to extract styles ├── background.js # Service worker for Chrome extension messaging ├── generator.js # DESIGN.md / SKILL.md markdown generation logic ├── tests/ │ └── run-tests.mjs # Node.js test runner └── README.md javascript // content.js — core extraction logic pattern function extractDesignTokens() { const elements = document.querySelectorAll( 'h1, h2, h3, p, a, button, input, [class="card"], [class="container"]' ); const tokens = { typography: new Set(), colors: new Set(), spacing: new Set(), borderRadius: new Set(), shadows: new Set(), motion: new Set(), }; elements.forEach((el) => { const styles = window.getComputedStyle(el); // Typography tokens.typography.add({ fontFamily: styles.fontFamily, fontSize: styles.fontSize, fontWeight: styles.fontWeight, lineHeight: styles.lineHeight, letterSpacing: styles.letterSpacing, }); // Colors tokens.colors.add(styles.color); tokens.colors.add(styles.backgroundColor); tokens.colors.add(styles.borderColor); // Spacing tokens.spacing.add(styles.padding); tokens.spacing.add(styles.margin); // Radius tokens.borderRadius.add(styles.borderRadius); // Shadows if (styles.boxShadow !== 'none') { tokens.shadows.add(styles.boxShadow); } // Motion if (styles.transition !== 'all 0s ease 0s') { tokens.motion.add(styles.transition); } }); return { typography: [...tokens.typography], colors: [...tokens.colors].filter(Boolean), spacing: [...tokens.spacing].filter(Boolean), borderRadius: [...tokens.borderRadius].filter(Boolean), shadows: [...tokens.shadow …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aradotso/design-md-chrome-extractor