Design & Skill Extractor

About

Design & Skill Extractor reads the active browser tab and exports the page’s design system as a single markdown file you can use with AI coding tools.

WHAT IT DOES
• Scans visible page elements for typography, colors, spacing, border radius, shadows, and motion
• Normalizes repeated values into semantic design tokens
• Infers audience and product type from page content and structure
• Generates a downloadable markdown file with implementation guidance and token appendices
• Includes component inventory and CSS custom properties when available

HOW TO USE
1. Open any website and wait for the page to finish loading
2. Click the Design & Skill Extractor icon in your toolbar
3. Review the output in the preview panel
4. Copy to clipboard or download the file

The default filename is {hostname}-design-system.md (for example, stripe-com-design-system.md).

GREAT FOR
• Developers using Cursor, Claude Code, Codex, or similar AI assistants
• Capturing design tokens from live sites for reference or rebuilds
• Creating structured design documentation from real pages

PRIVACY
All extraction runs locally in your browser. The extension only accesses the active tab when you open the popup or click refresh. No data is sent to external servers.

Made by Vaibhav Koli.