What is the Firecrawl website design clone skill?
The firecrawl-website-design-clone skill is a SKILL.md in Firecrawl's firecrawl-workflows repo. It runs two Firecrawl scrapes of one URL, branding data with images plus a full-page screenshot, then has your agent write a DESIGN.md of tokens, components and build instructions. It needs a Firecrawl API key.
It is one of the workflow skills in Firecrawl's firecrawl-workflows repository, which the README describes as outcome-focused skills for AI coding agents. This one has a single job: turn one website URL into a practical design system file.
The default outcome is a DESIGN.md. Firecrawl's scrape supplies the evidence, and the agent synthesizes it into tokens and guidance that another agent can paste into context and build from.
What changes in your agent's output
- Instead of eyeballing a site, the agent runs two Firecrawl scrapes in parallel: structured branding data with the full image list, and a full-page screenshot.
- The screenshot is saved locally in a .firecrawl folder and embedded near the top of DESIGN.md as the visual source of truth.
- Colors, typography, spacing, layout, components, imagery, motion and voice are documented as reusable tokens rather than one-off observations.
- Values that cannot be measured from the scrape are labeled as inferred, with a practical approximation.
- If you ask for a build, the agent writes or updates DESIGN.md first, then builds from it.
Who the design clone skill is for
Best for
- Capturing a reference site's look as a file an agent can follow, before you build something inspired by it.
- Teams that keep a DESIGN.md in the repo so every agent session starts with the same visual rules. To write one from your own code, see create-design-md.
- Quick brand audits of a competitor or a client's current site from one representative page.
Not for
- Sites you cannot scrape or have no rights to copy. The skill's quality bar says not to imply you own third-party logos, images, trademarks or copy.
- Exact pixel recreation. Several values are inferred from branding output and a screenshot.
- Free, keyless use. The skill lists FIRECRAWL_API_KEY as a required input. For a browser-based alternative that needs no scrape service, see designlang or Dembrandt.
Use it with UiChemy
DESIGN.md gives an agent the rules; it does not give you a WordPress page. When the build has to live in WordPress, UiChemy AI to WordPress imports an AI build, and Composer edits it in Elementor or Gutenberg. Click Get Started on uichemy.com.
How to install Firecrawl Website Design Clone Skill: URL to DESIGN.md
git clone https://github.com/firecrawl/firecrawl-workflows.gitClone the repository
Run
git clone https://github.com/firecrawl/firecrawl-workflows.git. The skill is the skills/firecrawl-website-design-clone folder.Copy the skill folder
Copy skills/firecrawl-website-design-clone into the folder where your agent loads skills, for the project or globally.
Give it a Firecrawl key
SKILL.md declares FIRECRAWL_API_KEY as a required input, and its examples call the firecrawl CLI. Set the key in your environment before the first run.
Ask for a design system
Give your agent a URL and ask it to extract the design system into DESIGN.md. If you also want a build, say so in the same request.
Check that it loaded
Run the skill on one public page. You should get a DESIGN.md with a Reference Screenshot section and a screenshot file in the .firecrawl folder.
Key features
- Two parallel scrapesSKILL.md always starts with the branding and images formats together, plus a full-page screenshot. Combining branding with images costs a single credit, according to the skill.
- Full image listThe branding block only carries the logo, favicon, og image and logo link. The images format adds the hero, product shots, carousel slides and feature visuals.
- Screenshot embedded locallyIf the scrape returns a remote image URL, the agent downloads it to the .firecrawl folder so DESIGN.md points at a stable local file.
- Design language extractionThe skill lists what to document: colors, typography, spacing, layout, components, imagery and icons, motion and interaction, and voice and content patterns.
- Inferred versus observedWhen a value cannot be measured exactly, the agent labels it inferred and gives a practical approximation instead of presenting a guess as fact.
- Fixed DESIGN.md templateThe output has set sections: Source, Reference Screenshot, Design Summary, Design Tokens, Components, Page Patterns, Content Style, Agent Build Instructions and Rerun Inputs.
- Minimal interviewThe agent infers the URL and target stack from context and asks at most 1 to 3 short questions, only when blocked.
- No over-crawlingThe first version should be useful from a single representative page. Related pages are scraped only when you ask for a broader site system.
- Optional parallel reviewIf your agent supports sub-agents, the skill suggests splitting work by page or by colors, typography, spacing and components, each returning sources and confidence notes.
Frequently asked questions
What is the firecrawl-website-design-clone skill?
It is a workflow skill in Firecrawl's firecrawl-workflows repository. It turns one URL into a DESIGN.md by scraping the page's branding data, images and a full-page screenshot, then writing colors, typography, spacing, components and build instructions that an AI coding agent can follow.
How do I install the Firecrawl website design clone skill?
Clone firecrawl/firecrawl-workflows and copy the skills/firecrawl-website-design-clone folder into your agent's skills folder. Set FIRECRAWL_API_KEY, since the skill lists it as a required input. Then ask your agent to extract a site's design system into DESIGN.md.
Does the skill need a Firecrawl account?
SKILL.md lists FIRECRAWL_API_KEY as a required input for hosted Firecrawl requests through the CLI or API. The README does not describe pricing, so check Firecrawl's own site for plan details before running it at volume.
What does the generated DESIGN.md contain?
A Source block, an embedded Reference Screenshot, a Design Summary, color, typography and spacing tokens, components, page patterns, content style, agent build instructions and rerun inputs. Inferred values are marked as inferred. The same file works as context for any later build.
Can it clone a whole site?
By default it works from a single representative page and does not over-crawl. SKILL.md says related pages are added only when you ask for a broader site system, and it suggests one researcher per page for multi-page sites.
Which AI agents does the skill work with?
The skill is written for AI coding agents in general and tells the agent to use its normal prompt UI without naming a harness-specific function. The README does not publish a per-agent matrix, so check how your agent loads skill folders.
Does the skill copy a site's logo and images?
It records them as evidence in DESIGN.md, but its quality bar says not to imply you have rights to third-party logos, images, trademarks or copy. Treat the output as reference for your own design, and check rights before reusing any asset.
How is it different from extracting tokens in a browser?
This skill relies on Firecrawl's hosted scrape for branding data and screenshots. Browser-based tools such as designlang read computed styles from a live page directly. Both end in tokens an agent can use, so pick by whether you already use Firecrawl.