Webpage Design Extractor
Get a DESIGN.md file inspired by any website
Design Extractor
Step 1: Get the URL
Step 2: Pick Your Capture Method
Tier 1 — Headless browser with scripting (best)
Install once (Codex sandbox or local)
Tier 2 — HTTP fetch only (fallback)
Network access caveat
Which pages to visit (any tier)
--- **Name:** design-extractor **Description:** Crawl a website and produce a detailed DESIGN.md file documenting its visual design system for replication. Use this skill whenever the user wants to "copy the design of," "replicate the look of," "extract the design system from," "study the styling of," or "make something that looks like" a specific website. Trigger on phrases like "I want my site to look like X," "analyze the design of [URL]," "rebuild [site] visually," "what's [site]'s design system," or "create a DESIGN.md for [URL]." Also trigger when the user provides a URL and asks for design inspiration, brand analysis, or style breakdown. --- # Design Extractor Crawl a target website and produce a comprehensive `DESIGN.md` file that another designer or AI could use to replicate the visual design closely. The output is a concrete, token-level breakdown, not a marketing critique. --- ## Step 1: Get the URL If the user hasn't provided a URL, ask in plain text: > Which website…
By @butter - License: CC0
Raw markdown