skills.rest
leonardoacosta
leonardoacostaCOMMUNITY
Explore all skills by this author →
GitHub

firecrawl-website-design-clone

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

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

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: Captures colors, typography, spacing, layout, components, and imagery from Firecrawl branding, images, and full-page screenshot output. - Agent-Ready DESIGN.md Output: Produces a structured markdown file with design tokens, component specs, page patterns, and build instructions, embedding a local screenshot for visual reference. - Use Case: Point the Skill at a site like a product landing page, receive a DESIGN.md describing its design language, then hand that file to a coding agent to build a new site in the same style. ## Quick Start Ask the agent to extract the design system from a given website URL into a DESIGN.md file using this Skill.

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.

What does the DESIGN.md output file contain?▼

DESIGN.md includes the source URL and evidence, an embedded full-page screenshot, design tokens for colors, typography, and spacing, component and page pattern descriptions, content style notes, and concrete build instructions for an AI coding agent.

Does this Skill require a Firecrawl API key?▼

Yes, a FIRECRAWL_API_KEY is required when the workflow runs through the Firecrawl CLI or hosted API. The key must be available in the environment before running the scrape commands.

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

The branding block only surfaces curated assets like logo, favicon, and ogImage, so it misses hero and content imagery. Adding the images format in the same call captures the full 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. It extracts design tokens and patterns for inspiration, and you should create original assets rather than copying protected material.

Related Skills

Explore More Design & Creative Skills→
LuisSambranoLuisSambrano
7

firecrawl

Scrape dynamic web pages, capture screenshots, parse PDFs, and crawl URLs via the Firecrawl API.

Community
Intermediate
AradotsoAradotso
3

design-md-chrome-extractor

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

Official
Intermediate
rampstackcorampstackco
523

design-standards

Validate UI tokens, contrast, spacing, typography, and responsive rules against design standards.

Official
Advanced
AradotsoAradotso
3

figma-mcp-bridge

Stream live Figma document data to AI tools via MCP.

Official
Intermediate