website-to-design-md

Name: website-to-design-md
Availability: InStock
Author: paidax

Extract design elements from a live website into markdown and HTML preview.

398|34|Updated Apr 18, 2026

Search Tags:#markdown #html #design system #browser automation #website design

Ready to run

npx skills add https://github.com/Paidax01/web-to-design-md --skill website-to-design-md

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: website-to-design-md
Source: https://github.com/Paidax01/web-to-design-md/tree/main
Command: npx skills add https://github.com/Paidax01/web-to-design-md --skill website-to-design-md

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires agent-browser, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill automates the process of generating a reusable design document from a live website, allowing users to easily extract and document design elements without manual work.

Core Features & Use Cases

Website Reading: Reads a live website using agent-browser.
DOM Structure Extraction: Extracts DOM structure, computed styles, CSS variables, stylesheet rules, visible text, and interaction states.
Markdown Documentation: Outputs a detailed DESIGN.md document.
HTML Preview: Generates an HTML preview using the same design tokens documented in the markdown.
Theme Modes: Captures light and dark theme modes when a site supports theme switching.
Use Case: Ideal for creating a design system from a live website for documentation or AI-assisted design and implementation.

Quick Start

Use the website-to-design-md skill to extract https://example.com into design.md and design-preview.html.

Frequently Asked Questions about website-to-design-md

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

FAQPage Schema

How do I extract a design system from a live website?▼

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.

Can I capture both light and dark theme CSS variables from a website?▼

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.

Do I need agent-browser to extract computed styles and DOM structure?▼

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.

What is the best way to document website design tokens for AI-assisted design?▼

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.

How to generate an HTML preview from extracted website design elements?▼

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.