firecrawl-website-design-clone

Name: firecrawl-website-design-clone
Author: firecrawl

30kinstalls18forks

How to install firecrawl-website-design-clone?

firecrawl/firecrawl-workflows/firecrawl-website-design-clone

$npx -y skills add firecrawl/firecrawl-workflows --skill firecrawl-website-design-clone

Installs into the current project.

Summary

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 i

Files · 1

View on GitHub

SKILL.md

1	# Firecrawl Website Design Clone
2
3	Use this when the user wants one URL turned into a practical design system file agents can use immediately.
4
5	Default outcome: extract any website's design system in one line and format it as `DESIGN.md`.
6
7	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.
8
9	## Onboarding Interview
10
11	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.
12
13	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.
14
15	Use the host agent's normal prompt or modal UI. Do not name a harness-specific question function.
16
17	## Firecrawl Collection Plan
18
19	Use Firecrawl through the CLI or equivalent tool surface. Always start with two parallel scrapes of the supplied URL:
20
21	1. The `branding` and `images` formats together for structured design tokens and the full set of page images.
22	2. A full-page screenshot for visual context.
23
24	Example:
25
26	```bash
27	firecrawl scrape "https://example.com" --format branding,images -o ".firecrawl/example-branding.json" --pretty &
28	firecrawl scrape "https://example.com" --full-page-screenshot -o ".firecrawl/example-screenshot.png" &
29	wait
30	```
31
32	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.
33
34	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.
35
36	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.
37
38	Collect:
39
40	- branding data for colors, typography, spacing, buttons, logos, brand imagery, personality, and confidence
41	- the full `images` list for hero, product, feature, and section imagery beyond the curated brand assets
42	- a full-page screenshot saved locally in `.firecrawl/` so it can be embedded in `DESIGN.md`
43	- page markdown for headings, copy hierarchy, CTAs, navigation, and section order when needed
44	- metadata and links for brand, product, and page-purpose clues when needed
45	- HTML only when the branding output, images list, and screenshot are insufficient to infer classes, font names, CSS variables, or component structure
46	- related pages only when the user asks for a broader site system
47
48	Do not over-crawl by default. The first version should be useful from a single representative page.
49
50	## What To Extract
51
52	Infer and document the site's design language:
53
54	- colors: primary, secondary, accents, backgrounds, borders, text, states
55	- typography: font families if detectable, type scale, weights, line heights, heading/body treatment
56	- spacing: container widths, section rhythm, grid gaps, padding scale, density
57	- layout: page structure, hero patterns, cards, grids, nav, footer, responsive assumptions
58	- components: buttons, inputs, cards, badges, nav items, pricing blocks, testimonials, feature rows, forms
59	- imagery and icons: style, shape language, illustration/photo treatment, logo constraints; pull representative hero, product, feature, and section images from the full `images` l

People who liked this also viewed

6 picks

Type

firecrawl-website-design-clone

30kinstalls18forks

View on GitHub

How to install firecrawl-website-design-clone?

firecrawl/firecrawl-workflows/firecrawl-website-design-clone

$npx -y skills add firecrawl/firecrawl-workflows --skill firecrawl-website-design-clone

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Firecrawl Website Design Clone
2
3	Use this when the user wants one URL turned into a practical design system file agents can use immediately.
4
5	Default outcome: extract any website's design system in one line and format it as `DESIGN.md`.
6
7	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.
8
9	## Onboarding Interview
10
11	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.
12
13	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.
14
15	Use the host agent's normal prompt or modal UI. Do not name a harness-specific question function.
16
17	## Firecrawl Collection Plan
18
19	Use Firecrawl through the CLI or equivalent tool surface. Always start with two parallel scrapes of the supplied URL:
20
21	1. The `branding` and `images` formats together for structured design tokens and the full set of page images.
22	2. A full-page screenshot for visual context.
23
24	Example:
25
26	```bash
27	firecrawl scrape "https://example.com" --format branding,images -o ".firecrawl/example-branding.json" --pretty &
28	firecrawl scrape "https://example.com" --full-page-screenshot -o ".firecrawl/example-screenshot.png" &
29	wait
30	```
31
32	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.
33
34	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.
35
36	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.
37
38	Collect:
39
40	- branding data for colors, typography, spacing, buttons, logos, brand imagery, personality, and confidence
41	- the full `images` list for hero, product, feature, and section imagery beyond the curated brand assets
42	- a full-page screenshot saved locally in `.firecrawl/` so it can be embedded in `DESIGN.md`
43	- page markdown for headings, copy hierarchy, CTAs, navigation, and section order when needed
44	- metadata and links for brand, product, and page-purpose clues when needed
45	- HTML only when the branding output, images list, and screenshot are insufficient to infer classes, font names, CSS variables, or component structure
46	- related pages only when the user asks for a broader site system
47
48	Do not over-crawl by default. The first version should be useful from a single representative page.
49
50	## What To Extract
51
52	Infer and document the site's design language:
53
54	- colors: primary, secondary, accents, backgrounds, borders, text, states
55	- typography: font families if detectable, type scale, weights, line heights, heading/body treatment
56	- spacing: container widths, section rhythm, grid gaps, padding scale, density
57	- layout: page structure, hero patterns, cards, grids, nav, footer, responsive assumptions
58	- components: buttons, inputs, cards, badges, nav items, pricing blocks, testimonials, feature rows, forms
59	- imagery and icons: style, shape language, illustration/photo treatment, logo constraints; pull representative hero, product, feature, and section images from the full `images` l

People who liked this also viewed

6 picks

Type