skills.rest
firecrawl
firecrawlOFFICIAL
Explore all skills by this author →
Website𝕏@firecrawl_devGitHub

firecrawl-website-design-clone

Extract design tokens and layout patterns from a website URL into a DESIGN.md file.

121|25|Updated May 14, 2026
Search Tags:#documentation#design system#AI design#website design#design extraction
One-click install
npx skills add https://github.com/firecrawl/firecrawl-workflows --skill firecrawl-website-design-clone-firecrawl
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: firecrawl-website-design-clone
Source: https://github.com/firecrawl/firecrawl-workflows/tree/main/skills/firecrawl-website-design-clone
Command: npx skills add https://github.com/firecrawl/firecrawl-workflows --skill firecrawl-website-design-clone-firecrawl

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill enables the transformation of website design elements into a structured and agent-ready documentation format, allowing AI agents to understand and recreate website designs.

Core Features & Use Cases

  • Design System Extraction: Automatically extract colors, typography, spacing, components, layout patterns, and brand/UI guidance from any website.
  • Agent-Ready Documentation: Output a DESIGN.md file with the design system ready for use by AI agents to create new websites or clone designs.
  • Use Case: When a user needs to understand the design system of a website to either create a similar site or extract specific design elements.

Quick Start

Run the firecrawl-website-design-clone skill with the URL of the website you want to clone its design system.

Frequently Asked Questions about firecrawl-website-design-clone

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I extract a design system from a website URL?▼

To extract a design system from a website URL, this Skill scrapes the site to capture branding data, typography, spacing, layout patterns, and components. It outputs a comprehensive DESIGN.md file containing the structured design tokens.

Can I generate agent-ready documentation for website design cloning?▼

Yes, you can generate agent-ready documentation for website design cloning by extracting design tokens and layout patterns from a source URL. The resulting DESIGN.md file provides AI agents with structured brand and UI guidance needed to recreate the site.

What is the best way to copy a website's layout patterns and typography?▼

The best way to copy a website's layout patterns and typography is to use an automated extraction tool that parses the live URL. This Skill captures typography, spacing, and layout structures, formatting them into a structured documentation file.

Does website design extraction work without setting up scraping capabilities?▼

No, website design extraction requires scraping capabilities to gather the necessary data from the source website. The Skill is designed for use with Firecrawl, which provides the underlying scraping functions needed to analyze the target URL.

What components are included when extracting design tokens from a website?▼

When extracting design tokens from a website, the output includes branding data, typography, spacing, layout patterns, components, imagery, and content style. These elements are compiled into a comprehensive markdown file for AI recreation.

Related Skills

Explore More Design & Creative Skills→
LuminairPrimeLuminairPrime

mcp-firecrawl

Scrape web pages and extract structured content using Firecrawl.

Community
Advanced
lucasromanhlucasromanh

design-md

Extract design tokens from Stitch projects and generate a DESIGN.md file.

Community
Advanced
mofa-orgmofa-org
11

mofa-firecrawl

Crawl websites with Firecrawl CLI and generate analysis reports.

Official
Advanced
johnlindquistjohnlindquist
24

design

Manage design tokens and export them to CSS, JSON, and Tailwind config.

Community
Advanced