skills.rest
CliffVale
CliffValeCOMMUNITY
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 data.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Recreating a website's visual style normally requires manual inspection of 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, with inferred values clearly labeled. - Visual Evidence Capture: Saves a full-page screenshot and the complete image list locally so DESIGN.md references stable visual assets. - Agent-Ready Output: Produces a standardized DESIGN.md with design tokens, components, page patterns, content style, and concrete build instructions. - Use Case: Point it at a product page like tesla.com/cybertruck to capture its hero imagery, color palette, and layout rhythm, then hand the resulting DESIGN.md to a coding agent to build a new site in that style. ## Quick Start Ask the agent to extract the design system from a specific 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 file.

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 patterns, page layout rules, content style notes, and concrete build instructions for an AI coding agent.

Do I need a Firecrawl API key to clone a website design?▼

Yes, a FIRECRAWL_API_KEY is required when the workflow runs through the Firecrawl CLI or API. The key is declared as a required input in the skill's frontmatter.

Why does the branding format alone miss page images?▼

The branding block only surfaces curated brand assets like logo, favicon, ogImage, and logoHref. Combining it with the images format in one scrape returns the full content imagery such as heroes, product shots, and feature visuals at no extra credit cost.

Can I use the extracted design for commercial projects?▼

The skill explicitly does not grant rights to third-party logos, images, trademarks, or copy. It extracts reusable design tokens and patterns, but you must ensure you have rights to any branded assets you reuse.

Related Skills

Explore More Design & Creative Skills→
TheGoat395TheGoat395
117

premium-visual-reference-library

Access curated visual references for website design inspiration.

Community
Advanced
AradotsoAradotso
3

design-md-chrome-extractor

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

Official
Intermediate
fiftynotaififtynotai
10

ui-design

Generate accessible UI component specifications with WCAG 2.1 AA contrast ratios.

Community
Intermediate
BestLemoonBestLemoon
6

seo-firecrawl

Crawl and map websites using Firecrawl MCP tools.

Community
Advanced