New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Firecrawl Website Design Clone

by firecrawl in firecrawl/skills

Extract any website's design system into an agent-ready DESIGN.md using Firecrawl scrape evidence.

ISCAuto-check passedData & Analytics

Install Firecrawl Website Design Clone

skills CLI
$ npx skills add firecrawl/skills --skill firecrawl-website-design-clone -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install firecrawl/skills firecrawl-website-design-clone --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/firecrawl/skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/workflows/firecrawl-website-design-clone .claude/skills/firecrawl-website-design-clone && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
firecrawl-website-design-clone
GitHub stars
116
Token cost
~1.9k tokens
SKILL.md length
787 words
Files
1
Skills in repo
29
Repo updated
First seen
Licence
ISC

At a glance

Extract any website's design system into an agent-ready DESIGN.md using Firecrawl scrape evidence.

  • Works in 2 steps: The branding and images formats together… → A full-page screenshot for visual context.
  • The user wants colors
  • SKILL.md covers Onboarding Interview, Firecrawl Collection Plan, What To Extract and Parallel Work, plus 2 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Firecrawl Website Design Clone is an agent skill from firecrawl/skills. 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.

Its SKILL.md is about 1.9k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Data & Analytics, covering Web scraping and Design tokens. It works with Firecrawl. The licence is ISC.

When your agent uses it

  • The user wants colors
  • Layout patterns
  • Brand/UI guidance from a website so AI agents can create new websites
  • Build pages inspired by that design

Example prompts

  • “/firecrawl-website-design-clone”

Requirements

  • A credential in FIRECRAWL_API_KEY

Workflow steps

2 steps, taken from the first numbered list in SKILL.md.

  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.

What it can do on your machine

Read from SKILL.md and the folder at commit d0ffd7c. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are bash and markdown).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Firecrawl Website Design Clone loads about 1.9k tokens when it runs. Until then it costs about 84 tokens; SKILL.md has 787 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~84
When it runs · the whole SKILL.md, loaded when a task matches
~1.9k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from firecrawl/skills at commit d0ffd7c, republished under its ISC licence (© firecrawl). 787 words, ~1,917 tokens.

Download SKILL.mdSave it as .claude/skills/firecrawl-website-design-clone/SKILL.md (or your agent's skills folder).
name
firecrawl-website-design-clone
description
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.
license
ISC
metadata.author
firecrawl
metadata.version
0.1.0
metadata.homepage
https://www.firecrawl.dev
metadata.source
https://github.com/firecrawl/firecrawl-workflows

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:

bash
firecrawl scrape "https://example.com" --format branding,images -o ".firecrawl/example-branding.json" --pretty &
firecrawl scrape "https://example.com" --full-page-screenshot -o ".firecrawl/example-screenshot.png" &
wait

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.

Use the structured branding output as the primary source for colors, typography, components, brand assets (logo, favicon, ogImage), personality, and confidence notes. Use the images list as the source of truth for the page's content imagery — hero photography, product shots, carousels, feature visuals, illustrations, and decorative graphics. Use the screenshot as the primary visual reference for layout, hierarchy, and overall feel. Add supplemental formats only when these are insufficient for the final artifact.

Collect:

  • branding data for colors, typography, spacing, buttons, logos, brand imagery, personality, and confidence
  • the full images list for hero, product, feature, and section imagery beyond the curated brand assets
  • 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, images list, 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.

Show full SKILL.md (291 more words)Show less

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; pull representative hero, product, feature, and section images from the full images list rather than relying on branding.images, which only carries logo, favicon, ogImage, and logoHref
  • motion and interaction: hover states, transitions, animation style when observable or inferable
  • voice and content patterns: CTA wording, heading style, product copy rhythm

When a value cannot be measured exactly from scrape output, label it as inferred and give a practical approximation.

Parallel Work

If appropriate, use sub-agents or equivalent parallel task runners. Natural splits include one page per researcher for multi-page sites, or one reviewer each for colors, typography, spacing, and components.

Each parallel researcher should return source URLs, extracted evidence, inferred design tokens, and confidence notes.

Final Deliverable

Create or return a DESIGN.md with this structure. Embed the full-page screenshot near the top so a coding agent gets visual context alongside the tokens.

markdown
# DESIGN.md: [Source Site]

## Source
- URL: [source URL]
- Capture date: [date]
- Evidence: [scrape/screenshot/html/links used]

## Reference Screenshot
![Full-page screenshot of [Source Site]](./.firecrawl/[source]-screenshot.png)

Use this screenshot as the visual source of truth for layout, hierarchy, density, and feel. Tokens below describe the same page in machine-readable form.

## Design Summary
[Short description of the visual language and what an agent should recreate]

## Design Tokens

### Colors
[Named color roles with hex values when known; mark inferred values clearly]

### Typography
[Fonts, fallback recommendations, scale, weights, heading/body rules]

### Spacing And Layout
[Spacing scale, containers, grids, radius, shadows, borders]

## Components
[Buttons, cards, nav, forms, hero, feature sections, pricing, footer, etc.]

## Page Patterns
[Section order, common layouts, responsive behavior]

## Content Style
[Voice, CTA style, heading patterns, copy density]

## Agent Build Instructions
[Concrete instructions an AI coding agent can follow to create a new site in this style]

## Rerun Inputs
workflow: firecrawl-website-design-clone
source_url: [url]
target_stack: [stack]
output: DESIGN.md

If the user asks to implement, first produce or update DESIGN.md, then use it as the source of truth for the build.

Quality Bar

  • Do not imply the user has rights to third-party logos, images, trademarks, or copy.
  • Prefer reusable design tokens over one-off observations.
  • Distinguish observed facts from inferred approximations.
  • Keep the output compact enough that another agent can paste it into context and build from it.
  • Preserve source URLs and scrape artifacts for review.

© firecrawl, ISC. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in skills/workflows/firecrawl-website-design-clone of firecrawl/skills.

Open the folder on GitHubat commit d0ffd7c

Compare with similar skills

Firecrawl Website Design Clone next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Firecrawl Website Design Clone compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Firecrawl Website Design Clone this skillfirecrawl/skills116—~1.9kAutomated safety check: PassISC
SEO Firecrawlseranking/seo-skills160—~2.3kAutomated safety check: PassMIT
Firecrawl Scraperdavila7/claude-code-templates32k8 repos~253Automated safety check: PassMIT
Keirouter Web Fetchmydisha/keirouter147—~741Automated safety check: PassMIT
Firecrawlzapier/connectors176—~4.2kAutomated safety check: PassElastic-2.0
Firecrawl Scraperynulihao/AgentSkillOS6171 repos~4.1kAutomated safety check: NotesMIT

Similar skills

  • SEO Firecrawl

    seranking/seo-skills

    Ad-hoc web scraping, site mapping, and full-site crawling via Firecrawl MCP.

    160 GitHub stars~2.3k tokensUpdated 3 mo ago
    Data & AnalyticsAuto-check passed

  • Firecrawl Scraper

    davila7/claude-code-templates

    Deep web scraping, screenshots, PDF parsing, and website crawling using Firecrawl API

    32k GitHub starsUsed in 8 repos~253 tokens
    Data & AnalyticsAuto-check passed

  • Keirouter Web Fetch

    mydisha/keirouter

    Fetch URL → markdown / text / HTML via KeiRouter /v1/web/fetch using Firecrawl / Jina Reader / Tavily Extract / Exa Contents.

    147 GitHub stars~741 tokensUpdated 27 days ago
    Data & AnalyticsAuto-check passed

  • Firecrawl

    zapier/connectors

    Official

    Agent-callable Firecrawl tools — scrape a URL to clean Markdown, crawl a site, search the web, map site URLs, and extract structured data.

    176 GitHub stars~4.2k tokensUpdated 1 mo ago
    Data & AnalyticsAuto-check passed

  • Firecrawl Scraper

    ynulihao/AgentSkillOS

    Complete knowledge domain for Firecrawl v2 API - web scraping and crawling that converts websites into LLM-ready markdown or structured data.

    617 GitHub starsUsed in 1 repo~4.1k tokens
    Data & AnalyticsAuto-check: notes

  • Firecrawl

    Prism-Shadow/penguin-harness

    Search the web and scrape pages into clean markdown with the Firecrawl API — query-based discovery, single-URL extraction including public PDFs, driven by curl with a vault-stored API key.

    2.5k GitHub stars~902 tokensUpdated yesterday
    Data & AnalyticsAuto-check passed

More from firecrawl/skills

All 29 skills in this repo

  • Firecrawl Scrape

    firecrawl/skills

    Read a known webpage or execute a discovered workflow or data-provider capability.

    116 GitHub stars~1.8k tokensUpdated yesterday
    Auto-check passed

  • Firecrawl Agent

    firecrawl/skills

    Autonomously navigate websites and extract structured data across pages.

    116 GitHub stars~1.2k tokensUpdated yesterday
    Auto-check passed

  • Firecrawl Company Directories

    firecrawl/skills

    Extract structured company lists from directories with Firecrawl.

    116 GitHub stars~557 tokensUpdated yesterday
    Auto-check passed

  • Firecrawl Competitive Intel

    firecrawl/skills

    Monitor competitor pricing, features, changelogs, dashboards, and product changes with Firecrawl.

    116 GitHub stars~604 tokensUpdated yesterday
    Auto-check passed

  • Firecrawl Crawl

    firecrawl/skills

    Bulk-extract many pages from one site or section. An agent skill from firecrawl/skills.

    116 GitHub stars~467 tokensUpdated yesterday
    Auto-check passed

  • Firecrawl Dashboard Reporting

    firecrawl/skills

    Pull metrics from analytics dashboards and internal web tools with Firecrawl browser.

    116 GitHub stars~590 tokensUpdated yesterday
    Auto-check passed

Works with

Categories

Questions about Firecrawl Website Design Clone

What does Firecrawl Website Design Clone do?

Extract any website's design system into an agent-ready DESIGN.md using Firecrawl scrape evidence. Firecrawl Website Design Clone is an agent skill from firecrawl/skills.md using Firecrawl scrape evidence.

When should I use Firecrawl Website Design Clone?

Firecrawl Website Design Clone fits situations like: the user wants colors; layout patterns; brand/UI guidance from a website so AI agents can create new websites; build pages inspired by that design.

How do I install Firecrawl Website Design Clone in Claude Code?

Run `npx skills add firecrawl/skills --skill firecrawl-website-design-clone -a claude-code`. Or copy the skill folder (skills/workflows/firecrawl-website-design-clone in firecrawl/skills) into .claude/skills/firecrawl-website-design-clone in your project. Claude Code loads it when a task matches its description.

How do I install Firecrawl Website Design Clone in Codex?

Run `npx skills add firecrawl/skills --skill firecrawl-website-design-clone -a codex`. Or copy the skill folder (skills/workflows/firecrawl-website-design-clone in firecrawl/skills) into .agents/skills/firecrawl-website-design-clone in your project. Codex loads it when a task matches its description.

Can I use Firecrawl Website Design Clone in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add firecrawl/skills --skill firecrawl-website-design-clone -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/firecrawl-website-design-clone, .gemini/skills/firecrawl-website-design-clone, .github/skills/firecrawl-website-design-clone and .opencode/skills/firecrawl-website-design-clone in your project.

What does Firecrawl Website Design Clone need to run?

SKILL.md names no scripts, command-line tools or credentials: Firecrawl Website Design Clone is instructions for the agent only. Our summary lists: A credential in FIRECRAWL_API_KEY.

Does Firecrawl Website Design Clone access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Firecrawl Website Design Clone safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Firecrawl Website Design Clone use?

Firecrawl Website Design Clone is published under the ISC licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Firecrawl Website Design Clone use?

About 1.9k tokens (SKILL.md is roughly 7.7k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Firecrawl Website Design Clone?

Skills that share tags, products or a category with Firecrawl Website Design Clone: SEO Firecrawl (seranking/seo-skills, 160 stars), Firecrawl Scraper (davila7/claude-code-templates, 32k stars), Keirouter Web Fetch (mydisha/keirouter, 147 stars) and Firecrawl (zapier/connectors, 176 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Firecrawl Website Design Clone?

firecrawl (a GitHub organization) maintains it in firecrawl/skills, which has 116 GitHub stars. The repository holds 29 skills in this directory. The repository was last updated on October 6, 2026.

Source: firecrawl/skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.