Paidax01/web-to-design-md automates the extraction of website design systems into structured documentation. It converts live websites into design.md files and interactive HTML previews, targeting AI coding agents and developers seeking to capture and reuse design tokens efficiently. The primary benefit is data-driven design system documentation without manual processes or reliance on screenshot analysis.

How It Works

The skill leverages agent-browser to meticulously read live websites. It employs agent-browser's eval capabilities to extract detailed information: DOM structure, computed styles, CSS variables, stylesheet rules, visible text, and interaction states. This data produces a Stitch-style DESIGN.md and a corresponding HTML preview using the documented design tokens. A key advantage is its avoidance of screenshot-first extraction, prioritizing direct DOM/CSS analysis, and its ability to capture distinct light/dark theme modes when supported.

Quick Start & Requirements

Installation is achieved by providing the GitHub URL to a compatible skill installer. For Codex-style installers: python3 ~/.codex/skills/.system/skill-installer/scripts/install-skill-from-github.py --repo Paidax01/web-to-design-md --path . Restart the AI coding application post-installation. The primary requirement is agent-browser; the skill assists with its installation/exposure if missing and avoids silent fallbacks unless user-directed.

Highlighted Details

• Generates reusable design.md / DESIGN.md from live websites.
• Produces a sibling HTML preview for reviewing the extracted design system.
• Captures light and dark theme modes when a site supports theme switching.
• Prioritizes DOM and CSS extraction, avoiding screenshot-first analysis.

Maintenance & Community

No specific details regarding maintainers, community channels (e.g., Discord, Slack), sponsorships, or roadmap are provided in the README.

Licensing & Compatibility

The project explicitly states an open-source license (e.g., MIT, Apache-2.0) should be chosen and added before public release, indicating no license is currently defined. Compatibility is geared towards AI skill installer frameworks.

Limitations & Caveats

The skill's functionality is tightly coupled to agent-browser, with limited fallback options. The absence of a defined license is a significant adoption consideration. Accuracy depends on the target website's structure and agent-browser capabilities.