firecrawl-website-design-clone

これはレビュー時に保存された抜粋です。完全で最新の内容は外部ソースを確認してください。

---
name: firecrawl-website-design-clone
description: 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 inspired by that design.
license: ISC
metadata:
  author: firecrawl
  version: "0.1.0"
  homepage: https://www.firecrawl.dev
  source: https://github.com/firecrawl/firecrawl-workflows
inputs:
  - name: FIRECRAWL_API_KEY
    description: Firecrawl API key for hosted Firecrawl requests when the workflow runs through the CLI or API.
    required: true
---

# Firecrawl Website Design Clone

Use this when the user wants one URL turned into a practical design system file agents can use immediately.

Default outcome: **extract any website's design system in one line** and format it as `DESIGN.md`.

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.

## Onboarding Interview

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.

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.

Use the host agent's normal prompt or modal UI. Do not name a harness-specific question function.

## Firecrawl Collection Plan

Use Firecrawl through the CLI or equivalent tool surface. Always start with two parallel scrapes of the supplied URL:

1. The `branding` and `images` formats together for structured design tokens and the full set of page images.
2. A full-page screenshot for visual context.

Example:

```bash
firecrawl scrape "https://example.com" --format branding,images -o ".firecrawl/example-branding.json" --pretty &
firecrawl scrape "https://example.com" --full-page-screenshot -o ".firecrawl/example-screenshot.png" &
wait
```

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.

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.

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.

Collect:

- branding data for colors, typography, spacing, buttons, logos, brand imagery, personality, and confidence
- the full `images` list for hero, product, feature, and section imagery beyond the curated brand assets
- a full-page screenshot saved locally in `.firecrawl/` so it can be embedded in `DESIGN.md`
- page markdown for headings, copy hierarchy, CTAs, navigation, and section order when needed
- metadata and links for brand, product, and page-purpose clues when needed
- HTML only when t