skills.rest
webdevarif
webdevarifCOMMUNITY
Explore all skills by this author →
Website𝕏@webdevarifGitHub

firecrawl-website-design-clone

Extract a website's design system into a DESIGN.md file using Firecrawl scrape data.

Updated Apr 18, 2026
Search Tags:#branding#design system#firecrawl#design tokens#web scraping#ui extraction#website clone
One-click install
npx skills add https://github.com/webdevarif/claude-skills --skill firecrawl-website-design-clone-webdevarif
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: firecrawl-website-design-clone
Source: https://github.com/webdevarif/claude-skills/tree/main/firecrawl-website-design-clone
Command: npx skills add https://github.com/webdevarif/claude-skills --skill firecrawl-website-design-clone-webdevarif

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Recreating a website's visual style normally requires manually inspecting colors, fonts, spacing, and components. This Skill automates that by scraping a URL with Firecrawl and synthesizing the evidence into a structured DESIGN.md that AI coding agents can build from directly. ## Core Features & Use Cases - Design Token Extraction: Pulls colors, typography, spacing, and component patterns from Firecrawl's branding format, images list, and full-page screenshots. - Agent-Ready Output: Produces a DESIGN.md with design tokens, component specs, page patterns, and build instructions, plus an embedded reference screenshot. - Use Case: Give the Skill a URL like a product landing page, and receive a DESIGN.md documenting its color palette, type scale, button styles, and layout rhythm so an AI agent can build a new site in the same style. ## Quick Start Ask the agent to extract the design system from https://example.com into a DESIGN.md file using your Firecrawl API key.

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 website's design system with Firecrawl?▼

Run two parallel Firecrawl scrapes of the target URL: one with the branding and images formats for design tokens and imagery, and one full-page screenshot for visual context. The Skill then synthesizes these into a structured DESIGN.md file.

What is DESIGN.md and how do AI agents use it?▼

DESIGN.md is a markdown file documenting a site's colors, typography, spacing, components, page patterns, and content style, plus an embedded reference screenshot. AI coding agents read it as the source of truth when building new pages in that visual style.

Does Firecrawl design extraction require an API key?▼

Yes, a FIRECRAWL_API_KEY is required when the workflow runs through the Firecrawl CLI or API. The key authenticates hosted scrape requests for branding data, images, and screenshots.

Why combine the branding and images formats in one Firecrawl scrape?▼

The branding block only returns curated assets like logo, favicon, and ogImage, missing hero and product photography. Adding the images format in the same call captures all page imagery at no extra credit cost.

Can I legally reuse assets extracted from another website?▼

The Skill does not grant rights to third-party logos, images, trademarks, or copy. Use extracted design tokens as inspiration for original work rather than copying protected brand assets directly.

Related Skills

Explore More Design & Creative Skills→
iamasters-academyiamasters-academy
20

tool-firecrawl-scraper

Scrape web pages and extract text and HTML content via the Firecrawl API.

Official
Intermediate
AradotsoAradotso
3

design-md-chrome-extractor

Extract computed design tokens from websites into TypeUI-compliant DESIGN.md or SKILL.md.

Official
Intermediate
Bad-RobotsBad-Robots

browser-automation

Validate web applications in real browsers and capture behavior evidence.

Official
Advanced
CliffValeCliffVale
1

firecrawl-website-design-clone

Extract a website's design system into a DESIGN.md file using Firecrawl scrape data.

Community
Intermediate