Firecrawl Website Design Clone
Turn one reference URL into an agent-ready DESIGN.md with colors, typography, spacing, and component patterns so you can clone or match a site’s look in new pages.
Overview
Firecrawl Website Design Clone is an agent skill most often used in Build (also Validate, Launch) that scrapes a site with Firecrawl and outputs a DESIGN.md design system for cloning or inspired UI work.
Install
npx skills add https://github.com/firecrawl/firecrawl-workflows --skill firecrawl-website-design-cloneWhat is this skill?
- Default outcome: one URL → practical DESIGN.md from Firecrawl scrape evidence
- Captures visible content, structure, metadata, links, and available visual signals
- Thin workflow around Firecrawl scrape—not manual screenshot guesswork
- Onboarding asks at most 1–3 questions when URL, output-only vs implement, or stack is unclear
- Supports inspiration and look-clone workflows for AI-generated sites
- Default deliverable: one DESIGN.md design-system file per source URL
- Onboarding capped at 1–3 concise questions when context is incomplete
Adoption & trust: 11.7k installs on skills.sh; 29 GitHub stars; 1/3 security scanners passed (skills.sh audits).
What problem does it solve?
You want a site’s look systematized for your agent, but eyeballing CSS in devtools does not produce reusable brand and component guidance.
Who is it for?
Indie builders shipping landing pages or SaaS UIs who have a reference URL and Firecrawl access and want a portable design spec before coding.
Skip if: Full legal brand cloning of trademarked sites, offline-only design work without scraping, or projects with no FIRECRAWL_API_KEY when using hosted Firecrawl.
When should I use this skill?
User wants colors, fonts, spacing, components, layout patterns, or brand/UI guidance from a website to clone a look, build inspired pages, or create new sites with agent-ready design docs.
What do I get? / Deliverables
You receive a DESIGN.md design system derived from scrape evidence that agents can use to build or restyle pages consistently.
- DESIGN.md with design-system guidance (colors, typography, spacing, components, layout)
- Optional implementation pass when user requests build after extraction
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Canonical shelf is Build because the primary deliverable is a design-system artifact agents use to implement UI, not early market research. Frontend subphase matches extracting layout, components, and visual tokens from live pages for immediate build or clone workflows.
Where it fits
Scrape a product marketing site and hand DESIGN.md to the agent before implementing your dashboard shell.
Lock visual direction for a clickable prototype by extracting tokens from a reference you admire.
Align a launch landing page with a high-converting reference layout documented in DESIGN.md.
How it compares
Use instead of vague “copy this website’s style” prompts without a structured design-system file.
Common Questions / FAQ
Who is firecrawl-website-design-clone for?
Solo builders and agent users who need colors, fonts, spacing, and component patterns from a live URL formatted as DESIGN.md for immediate implementation.
When should I use firecrawl-website-design-clone?
In Build frontend when starting a new UI from a reference; in Validate prototype when defining visual direction; in Launch landing when matching a proven marketing page layout.
Is firecrawl-website-design-clone safe to install?
It scrapes third-party URLs and uses your Firecrawl API key; check the Security Audits panel on this page and respect site terms and robots constraints on targets you choose.
SKILL.md
READMESKILL.md - Firecrawl Website Design Clone
# 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` format for structured design tokens. 2. A full-page screenshot for visual context. Example: ```bash firecrawl scrape "https://example.com" --format branding -o ".firecrawl/example-branding.json" --pretty & firecrawl scrape "https://example.com" --full-page-screenshot -o ".firecrawl/example-screenshot.png" & wait ``` 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. Use the structured `branding` output as the primary source for colors, typography, components, imagery, personality, and confidence notes. Use the screenshot as the primary visual reference for layout, hierarchy, and overall feel. Add supplemental formats only when these two are insufficient for the final artifact. Collect: - branding data for colors, typography, spacing, buttons, logos, imagery, personality, and confidence - a full-page screenshot saved locally in `.firecrawl/` so it can be embedded in `DESIGN.md` - page markdown for headings, copy hierarchy, CTAs, navigation, and section order when needed - metadata and links for brand, product, and page-purpose clues when needed - HTML only when the branding output and screenshot are insufficient to infer classes, font names, CSS variables, or component structure - related pages only when the user asks for a broader site system Do not over-crawl by default. The first version should be useful from a single representative page. ## What To Extract Infer and document the site's design language: - colors: primary, secondary, accents, backgrounds, borders, text, states - typography: font families if detectable, type scale, weights, line heights, heading/body treatment - spacing: container widths, section rhythm, grid gaps, padding scale, density - layout: page structure, hero patterns, cards, grids, nav, footer, responsive assumptions - components: buttons, inputs, cards, badges, nav items, pricing blocks, testimonials, feature rows, forms - imagery and icons: style, shape language, illustration/photo treatment, logo constraints - motion and interaction: hover states, transitions, animation style when observable or