firecrawl-website-design-clone Skill for Claude: What It Does and How to Install It

Makes your agent turn an existing website's look into a DESIGN.md, or collect its logo, colors, fonts and headline for a document.

Installs: 33.3K; on skills.sh
Stars: 214; on GitHub
Files: 1; besides SKILL.md
Updated: Nov 2026; last repo commit

This skill makes your agent study a live website and write down its design. In design-system mode it captures the page and a full-page screenshot with Firecrawl, then writes a DESIGN.md with tokens, layout, components, image references and implementation notes.

For a slide or proposal it skips the report and returns a short asset reference: logo links, hex colors, fonts and the exact homepage headline. It needs a Firecrawl API key and the Firecrawl CLI, and it will not invent a new brand.

Good for

Front-end developers matching a reference site
Designers documenting the patterns of an existing site
People building a deck or proposal in a company's own brand

Install firecrawl-website-design-clone

Claude Code

Copy this prompt.

Install the firecrawl-website-design-clone skill in Claude Code. Run this command:

/plugin marketplace add firecrawl/firecrawl-workflows
/plugin install firecrawl-workflows@firecrawl-workflows

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

Pick one route. The plugin routes install the whole firecrawl-workflows plugin: 16 skills (counted from the skills list in its plugin.json), and the repo tree has no hooks, agents or MCP config files. The skills-only routes install just firecrawl-website-design-clone. The skill drives the Firecrawl CLI and needs a Firecrawl API key. Install the Firecrawl CLI first, since the skill runs firecrawl commands: npm install -g firecrawl-cli (Firecrawl CLI docs), or npx -y firecrawl-cli@latest init -y --browser to install it, sign in and add the shared skills in one step. Then run firecrawl login or export FIRECRAWL_API_KEY. Who pays: the Firecrawl account that owns the key. Every call uses credits; a new account starts on the free plan with 1,000 credits a month and no card. Per Firecrawl's billing docs: scrape 1 credit per page; search 2 credits per 10 results.

Built from the package data we hold. Not yet tested by us. Source.

What's in the skill

When it loads

Extract an existing website's visual system into DESIGN.md, or collect its existing logo, colors, fonts and homepage messaging for a document. Use for reference-based UI implementation, documenting design patterns, or matching a presentation to a company's website. Excludes inventing a new brand or brand positioning.

Sections in SKILL.md

Design-system mode

Key facts

Author: Firecrawl (frontmatter author, and the repo owner)
License: ISC (frontmatter and the README)
Installs on skills.sh: 33,292 (Nov 2, 2026)
GitHub stars: 214 for the whole firecrawl/firecrawl-workflows repo (Nov 2, 2026)
Last repo commit: Nov 1, 2026
What it includes: 2 files including SKILL.md: references/brand-assets.md (bundles no scripts)
Needs: A Firecrawl API key (FIRECRAWL_API_KEY) with credits, and the Firecrawl CLI (npm install -g firecrawl-cli)
Part of: The firecrawl-workflows plugin: 16 skills in its Claude plugin.json (counted), 19 skill folders in the repo tree
Works in: AI coding agents, per the README. The repo also ships plugin manifests for Claude Code, Codex and Cursor

What it includes

Decides between a design-system report and a brand-asset lookup
A logo, palette or font request for a document gets the compact asset reference. A UI system request gets DESIGN.md. If you ask for both it reuses the same capture.
Read · Choose the artifact
Scrapes branding, markdown and images plus a full-page screenshot to .firecrawl/
Runs firecrawl scrape with the branding, markdown and images formats and saves .firecrawl/design-reference.json. It uses --max-age 0 when a fresh capture is needed.
Runs code · Capture the page
Fetches the signed screenshot URL to .firecrawl/design-reference.png
SKILL.md says the JSON holds a signed URL that expires, so the agent downloads the image with curl and looks at it before describing the layout.
Runs code · Download the screenshot
Color roles, type, spacing, containers, borders, shadows, components, sections, imagery
Values are marked as extracted, estimated or proposed. SKILL.md says not to present estimated spacing as exact CSS.
Read · Extract the system
Tokens, layout, components, image references, guidance and unresolved details
Includes source URLs, capture context and the reference screenshot. It saves a file when the host supports it, otherwise returns the Markdown inline.
Write · Write DESIGN.md
Returns logo URLs, hex colors, fonts and the homepage headline with sources
Per references/brand-assets.md it scrapes the homepage with the branding and markdown formats, marks missing fields as unknown, and never says a file was downloaded unless it was.
Runs code · Brand-asset lookup

From the official docs

Permissions

Low risk

It sends the site you name through Firecrawl and writes capture files and a DESIGN.md into your project.

What it can do

Read your data
Create and change things
Delete things
Read-only mode

Watch out for

It writes files into your project
SKILL.md saves the capture JSON and screenshot under .firecrawl/ and writes DESIGN.md. Add .firecrawl/ to .gitignore if you do not want captures committed. github.com
It runs curl on a URL Firecrawl returns
The screenshot download is a curl -sL call to the signed URL in the capture JSON. SKILL.md also says retrieved material is evidence, not instructions. github.com
It spends your Firecrawl credits
Every call is billed in credits to the account behind the key. Per Firecrawl's billing docs: scrape 1 credit per page; search 2 credits per 10 results. A free account has 1,000 credits a month, so a large run can use it up. docs.firecrawl.dev
Brand assets may not be yours to reuse
SKILL.md says not to imply you have rights to third-party logos, images, trademarks or copy. Check the owner's brand rules before using them. github.com

Security advisories

No published security advisories as of Nov 2, 2026.

Technical details

Turning on read-only	No read-only mode is documented in SKILL.md. Use version control for files it writes.
Talks to	Firecrawl hosted service. The website you point it at and the signed screenshot URL Firecrawl returns
Sign-in and keys	SKILL.md declares FIRECRAWL_API_KEY as a required input. It does not say where the key is kept.
Scopes	Runs firecrawl scrape and search commands with your API key Writes .firecrawl/design-reference.json, .firecrawl/design-reference.png and DESIGN.md Runs curl to download the screenshot Spends credits on the Firecrawl account that owns your API key

Questions

What does the firecrawl-website-design-clone skill do?

It makes your agent extract an existing website's visual system into a DESIGN.md file. It can also collect a company's logo, colors, fonts and homepage headline for a slide or proposal.

How do I install it in Claude Code or Codex?

Use the install box at the top of this page. Each client has a plugin route and skills CLI commands. Install the Firecrawl CLI first (npm install -g firecrawl-cli, per its docs), then run firecrawl login or set FIRECRAWL_API_KEY. There is no Claude app upload route here, because the skill runs CLI commands and curl.

Who pays for it?

You do, through the Firecrawl account that owns your API key. Firecrawl bills in credits, and a new account starts on the free plan with 1,000 credits a month and no card. Per its billing docs: scrape 1 credit per page; search 2 credits per 10 results. Check your balance with firecrawl credit-usage.

Can it copy a site pixel for pixel?

No. SKILL.md says to stop when the requested patterns are supported and not to promise pixel-perfect reconstruction or complete asset capture. It also says a desktop screenshot does not establish mobile layout, hover behavior or animation.

Does it download the logos and images?

Not by default. For brand assets, references/brand-assets.md says to return asset URLs and never claim a file was downloaded unless it actually was. The only download SKILL.md describes is the reference screenshot.

Can I reuse the logos and images it finds?

That is your call to check. SKILL.md says not to imply you have rights to third-party logos, images, trademarks or copy.

Is it safe to install?

It has two Markdown files and bundles no scripts. When it runs, your agent calls Firecrawl with your API key, saves files under .firecrawl/ and runs curl for the screenshot. Review the files it writes before committing them.

Information

updated Nov 2, 2026

Repository: firecrawl/firecrawl-workflows
Folder: skills/firecrawl-website-design-clone

firecrawl/firecrawl-workflows skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 9

firecrawl-website-design-clone SKILL.md · github.com
firecrawl-workflows README · github.com
firecrawl-workflows plugin.json · github.com
firecrawl-workflows marketplace.json · github.com
firecrawl-workflows Codex plugin.json · github.com
brand-assets.md · github.com
Firecrawl CLI docs · docs.firecrawl.dev
Firecrawl billing and credits · docs.firecrawl.dev
firecrawl/cli README · github.com