Agent skill · firecrawl
firecrawl-website-design-clone
Extract any website's design system into an agent-ready DESIGN.md using Firecrawl scrape evidence. Use when the user wants colors, fonts, spacing, components, layout patterns, or brand/UI guidance from a website so AI agents can create new websites, clone a look, or build pages inspired by that design.
What it needs
About 4k tokens when loaded.
What this skill does
Firecrawl Website Design Clone Use this when the user wants one URL turned into a practical design system file agents can use immediately. Default outcome: extract any website's design system in one line and format it as DESIGN.md. The skill should feel like a thin workflow around Firecrawl scrape: gather the page's visible content, structure, metadata, links, and available visual signals, then synthesize those findings into a clean design-system markdown file. Onboarding Interview Infer the source URL, target stack, and whether implementation is requested from context. If the user gives a URL and asks for a design system, proceed immediately. Ask at most 1-3 concise questions only if blocked, such as the website URL, whether to output only DESIGN.md or also implement, or a required target stack. Use the host agent's normal prompt or modal UI. Do not name a harness-specific question function. Firecrawl Collection Plan Use Firecrawl through the CLI or equivalent tool surface. Always start with two parallel scrapes of the supplied URL: 1. The branding and images formats together for structured design tokens and the full set of page images. 2. A full-page screenshot for visual context. Example: Combining branding and images in one call still costs a single credit and is required: the branding block only surfaces curated brand assets (logo, favicon, ogImage, logoHref), so without images the agent will miss the page's actual content imagery (heroes, product shots, carousel slides, feature visuals, illustrations, accessory photos, end-of-page artwork, and similar). On a product page like tesla.com/cybertruck the branding block has no hero — only images returns the main Cybertruck hero (e.g. Cybertruck-Hero-Desktop-NA-SA-APAC.png) and the rest of the page's photography. If the screenshot scrape returns a remote image URL (e.g. signed storage link) instead of a local file, download it to the same .firecrawl/ path so DESIGN.md can reference a stable local asset. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills firecrawl/firecrawl-website-design-clone--318c6c