website-to-design-md

To extract a design system from a live website, this Skill reads the DOM structure, computed styles, and CSS variables using browser automation. It outputs a structured markdown design document and a companion HTML preview containing the extracted design tokens.

Yes, you can capture light and dark theme CSS variables from a website when the site supports theme switching. The Skill detects and extracts interaction states and theme modes, documenting them comprehensively within the generated markdown design system documentation.

Yes, you need the agent-browser dependency to extract computed styles and DOM structure. It provides the necessary browser automation capabilities to inspect live websites, read visible text, and extract stylesheet rules for generating the design documentation.

The best way to document website design tokens for AI-assisted design is generating a structured markdown file containing extracted CSS variables and computed styles. This Skill creates a reusable DESIGN.md document that AI tools can reference for consistent design implementation.

To generate an HTML preview from extracted website design elements, this Skill applies the documented design tokens from the markdown output into a companion HTML file. This allows you to visually verify the extracted CSS variables and computed styles directly in a browser.