Turn Any Website into a Reusable Design System with website-to-design-md

Where this fits

You're building an agent that needs to replicate a client's existing web presence—maybe a redesign, a new landing page, or a design handoff. Instead of manually screenshotting and guessing at spacing, colors, and interaction patterns, you hand your agent a URL and ask it to produce a DESIGN.md that captures the site's visual language, layout grid, typography scale, component behaviors, and content tone. This skill turns that request into a structured, reusable artifact that any agent (or human) can follow later.

Why agents benefit

• Deep inspection via agent-browser: The agent navigates the live site, inspects computed styles, DOM structure, and responsive breakpoints—not just screenshots.
• Synthesizes design tokens: Extracts hex codes, font stacks, spacing units, and border radii into a markdown design system that can be fed into Figma-like tools or CSS generators.
• Captures interaction patterns: Documents hover states, transitions, modals, and form behaviors so the recreated site feels identical, not just visually similar.
• Produces a companion HTML preview: Generates a static preview page that demonstrates the extracted design rules, making it easy to validate before implementation.
• Maintains a single source of truth: The DESIGN.md becomes the canonical reference for future agent tasks—no more re-scraping or inconsistent assumptions.

Practical scenarios

Rebuilding a marketing site after a rebrand

Your agent must produce a new homepage consistent with the existing brand. Feed it the old URL, get a DESIGN.md, then instruct the agent to implement the redesign using those tokens.

Creating a design system for a legacy app

A client has a dated internal tool with no documentation. Use this skill to generate a DESIGN.md that documents current patterns, then use it as a baseline for a modernization effort.

Generating style guides for multiple competitor sites

Need to compare UI patterns across competitors? Run the skill on several URLs and diff the resulting DESIGN.md files to spot common layouts, color schemes, and interaction conventions.

Add it to your agent workflow

Install the skill globally or per-project:

npx skills add Paidax01/web-to-design-md --skill website-to-design-md

Then invoke it with a URL: "Analyze https://example.com and create a DESIGN.md with the full design system." The agent will use agent-browser to inspect the site and output the markdown file plus an HTML preview. If agent-browser isn't available, the skill will guide you through installing it—it won't fall back to other browser stacks.

Compare before adopting

Before committing, evaluate how well the generated DESIGN.md reflects the actual site's responsiveness and edge cases. Check whether the skill keeps up with agent-browser updates and whether the extraction logic handles SPAs and dynamic content. Compare against manual inspection or other scraping-based approaches—this skill is documentation‑focused, not a code‑generation tool. Also consider how you'll version and maintain the DESIGN.md as the source site evolves.

Why it is worth tracking

With 408 stars and an active author, this skill shows real community traction. It fills a gap between static screenshots and full design tools, giving agents a structured way to "read" a website's design DNA. If you regularly build agents that need to replicate or extend existing UIs, this is worth adding to your toolkit. For a deeper look, see the skill page on OpenAgentSkill.