firecrawl-website-design-clone

Firecrawl 網站設計複製工具

當使用者想要將一個網址轉換成代理可立即使用的實用設計系統檔案時使用。

預設結果：一行指令提取任何網站的設計系統，並格式化為 DESIGN.md。

這個技能應像一個輕量化的 Firecrawl 抓取工作流程：收集頁面的可見內容、結構、元資料、連結以及可用的視覺訊號，然後將這些發現綜合整理成一份乾淨的設計系統 Markdown 檔案。

入門訪談

根據上下文推斷來源網址、目標技術棧，以及是否需要實作。如果使用者提供網址並要求設計系統，則直接開始。

只有在卡關時才問 1-3 個簡潔的問題，例如網站網址、是否只輸出 DESIGN.md 或也要實作，或所需的目標技術棧。

使用主機代理的正常提示或模態 UI。不要指定特定於 harness 的提問函式。

Firecrawl 收集計畫

透過 CLI 或等效工具介面使用 Firecrawl。始終從對提供的網址進行兩個平行抓取開始：

1. 同時使用 branding 和 images 格式，以取得結構化的設計 token 和完整的頁面圖片集。
2. 全頁截圖以取得視覺上下文。

範例：

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

將 branding 和 images 合併在一個呼叫中仍然只消耗一個額度，而且是必要的：branding 區塊只會提供精選的品牌資產（logo、favicon、ogImage、logoHref），因此沒有 images 的話，代理會錯過頁面實際的內容圖片（主視覺、產品照、輪播投影片、功能視覺、插圖、配件照片、頁尾藝術等）。在像 tesla.com/cybertruck 這樣的產品頁面上，branding 區塊沒有主視覺——只有 images 會回傳主要的 Cybertruck 主視覺（例如 Cybertruck-Hero-Desktop-NA-SA-APAC.png）以及頁面上的其他照片。

如果截圖抓取回傳的是遠端圖片網址（例如簽署的儲存連結）而非本地檔案，請將其下載到相同的 .firecrawl/ 路徑，以便 DESIGN.md 可以引用穩定的本地資產。

使用結構化的 branding 輸出作為顏色、字型、元件、品牌資產（logo、favicon、ogImage）、風格和信心註記的主要來源。使用 images 列表作為頁面內容圖片的真相來源——主視覺照片、產品照、輪播、功能視覺、插圖和裝飾圖形。使用截圖作為佈局、層級和整體感覺的主要視覺參考。僅在這些不足以產出最終成品時才補充其他格式。

收集：

• branding 資料：顏色、字型、間距、按鈕、標誌、品牌圖像、風格和信心
• 完整的 images 列表：主視覺、產品、功能和區塊圖片（超越精選品牌資產）
• 全頁截圖：儲存在 .firecrawl/ 中，以便嵌入 DESIGN.md
• 頁面 Markdown：標題、文案層級、CTA、導覽和區塊順序（需要時）
• 元資料和連結：品牌、產品和頁面目的線索（需要時）
• HTML：僅在 branding 輸出、images 列表和截圖不足以推斷類別、字型名稱、CSS 變數或元件結構時
• 相關頁面：僅在使用者要求更廣泛的網站系統時

預設情況下不要過度抓取。第一個版本應從單一代表性頁面就能產生有用的結果。

要提取的內容

推斷並記錄網站的設計語言：

• 顏色：主色、輔助色、強調色、背景、邊框、文字、狀態
• 字型：可偵測的字型家族、字型級別、字重、行高、標題/正文處理方式
• 間距：容器寬度、區塊節奏、網格間距、內距級別、密度
• 佈局：頁面結構、主視覺模式、卡片、網格、導覽、頁尾、響應式假設
• 元件：按鈕、輸入框、卡片、徽章、導覽項目、定價區塊、推薦區、功能列、表單
• 圖像和圖示：風格、形狀語言、插圖/照片處理方式、標誌限制；從完整的 images 列表中提取代表性的主視覺、產品、功能和區塊圖片，而不是依賴 branding.images（它只包含 logo、favicon、ogImage 和 logoHref）
• 動態和互動：懸停狀態、轉場、動畫風格（可觀察或推斷時）
• 語調和內容模式：CTA 用語、標題風格、產品文案節奏

當無法從抓取輸出中精確測量某個值時，將其標記為推斷並給出實用的近似值。

平行工作

如果合適，使用子代理或等效的平行任務執行器。自然的拆分方式包括：多頁面網站每個頁面一個研究員，或顏色、字型、間距和元件各一個審查員。

每個平行研究員應回傳來源網址、提取的證據、推斷的設計 token 和信心註記。

最終交付物

建立或回傳一個具有以下結構的 DESIGN.md。將全頁截圖嵌入在頂部附近，以便編碼代理在取得 token 的同時也能獲得視覺上下文。

# DESIGN.md：[來源網站]

## 來源
- 網址：[來源網址]
- 擷取日期：[日期]
- 證據：[使用的抓取/截圖/HTML/連結]

## 參考截圖
![來源網站全頁截圖](./.firecrawl/[來源]-screenshot.png)

使用此截圖作為佈局、層級、密度和感覺的視覺真相來源。下方的 token 以機器可讀的形式描述同一頁面。

## 設計摘要
[視覺語言的簡短描述，以及代理應重現的內容]

## 設計 Token

### 顏色
[具名顏色角色及其十六進位值（已知時）；清楚標記推斷值]

### 字型
[字型、備用建議、級別、字重、標題/正文規則]

### 間距與佈局
[間距級別、容器、網格、圓角、陰影、邊框]

## 元件
[按鈕、卡片、導覽、表單、主視覺、功能區塊、定價、頁尾等]

## 頁面模式
[區塊順序、常見佈局、響應式行為]

## 內容風格
[語調、CTA 風格、標題模式、文案密度]

## 代理建置指示
[AI 編碼代理可用來以此風格建立新網站的具體指示]

## 重新執行輸入
workflow: firecrawl-website-design-clone
source_url: [網址]
target_stack: [技術棧]
output: DESIGN.md

如果使用者要求實作，請先產生或更新 DESIGN.md，然後將其作為建置的真相來源。

品質標準

• 不要暗示使用者擁有第三方標誌、圖片、商標或複製內容的權利。
• 偏好可重複使用的設計 token，而非一次性觀察。
• 區分觀察到的事實與推斷的近似值。
• 保持輸出精簡，以便其他代理可以將其貼入上下文並據以建置。
• 保留來源網址和抓取成品以供審查。