Firecrawl 網站設計克隆
當使用者想要將一個 URL 轉換成代理可以立即使用的實用設計系統檔案時使用。
預設結果：一行命令提取任何網站的設計系統，並格式化為 DESIGN.md。
這個技能應該感覺像是 Firecrawl 爬取的一個輕量工作流程：收集頁面的可見內容、結構、後設資料、連結以及可用的視覺訊號，然後將這些發現綜合整理成一個乾淨的設計系統 markdown 檔案。
入職訪談
根據上下文推斷來源 URL、目標技術棧，以及是否請求實作。如果使用者提供了 URL 並要求設計系統，則立即進行。
只有在卡住時才最多提出 1-3 個簡潔的問題，例如網站 URL、是否只輸出 DESIGN.md 或也要實作，或是所需的目標技術棧。
使用主機代理的正常提示或模態 UI。不要指明特定於 harness 的提問函式。
Firecrawl 收集計劃
透過 CLI 或等效工具面使用 Firecrawl。始終從對提供的 URL 進行兩次平行爬取開始：
- 同時使用
branding和images格式，以取得結構化設計標記和完整的頁面圖片集。 - 取得全頁截圖以提供視覺上下文。
範例：
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）和頁面的其他照片。
如果截圖爬取回傳的是遠端圖片 URL（例如簽章儲存連結）而不是本地檔案，請將其下載到相同的 .firecrawl/ 路徑，以便 DESIGN.md 可以引用穩定的本地資產。
使用結構化的 branding 輸出作為顏色、排版、元件、品牌資產（標誌、favicon、ogImage）、個性和信心備註的主要來源。使用 images 列表作為頁面內容圖片——英雄攝影、產品圖、輪播、功能視覺素材、插圖和裝飾圖形的真相來源。使用截圖作為佈局、層次和整體感覺的主要視覺參考。僅當這些不足以產出最終成品時，才補充其他格式。
收集：
- 關於顏色、排版、間距、按鈕、標誌、品牌圖片、個性和信心的品牌資料
- 完整的
images列表，用於取得精選品牌資產之外的英雄圖、產品圖、功能圖和章節圖片 - 在
.firecrawl/中本地儲存的全頁截圖，以便嵌入DESIGN.md - 需要時的頁面 markdown，用於標題、文案層級、呼籲行動、導覽和章節順序
- 需要時的後設資料和連結，用於品牌、產品和頁面目的的線索
- 僅當品牌輸出、圖片列表和截圖不足以推斷類別、字型名稱、CSS 變數或元件結構時才擷取 HTML
- 僅當使用者要求更廣泛的網站系統時才擷取相關頁面
預設情況下不要過度爬取。第一個版本應該從一個代表性頁面就能提供有用資訊。
要提取什麼
推斷並記錄網站的設計語言：
- 顏色：主色、輔助色、強調色、背景色、邊框色、文字色、狀態色
- 排版：可檢測到的字型家族、字型級別、字重、行高、標題/正文處理方式
- 間距：容器寬度、章節節奏、網格間隙、內距級別、密度
- 佈局：頁面結構、英雄區模式、卡片、網格、導覽、頁尾、響應式假設
- 元件：按鈕、輸入框、卡片、徽章、導覽項目、定價區塊、推薦區、功能列、表單
- 圖片和圖示：風格、形狀語言、插圖/照片處理方式、標誌限制；從完整的
images列表中提取代表性的英雄圖、產品圖、功能圖和章節圖片，而不是依賴branding.images，後者僅包含logo、favicon、ogImage和logoHref - 動態和互動：懸停狀態、過渡效果、可觀察或可推斷的動畫風格
- 語調和內容模式：呼籲行動用語、標題風格、產品文案節奏
當無法從爬取輸出中精確測量某個值時，將其標記為推論值並給出實用的近似值。
平行作業
如果合適，使用子代理或等效的平行任務執行器。對於多頁面網站，自然的拆分方式包括每個研究人員負責一個頁面，或每個審查人員分別負責顏色、排版、間距和元件。
每個平行研究人員應回傳來源 URL、提取的證據、推論出的設計標記以及信心備註。
最終交付物
建立或回傳一個具有以下結構的 DESIGN.md。將全頁截圖嵌入頂部附近，以便編碼代理在獲取標記的同時得到視覺上下文。
# DESIGN.md：[來源網站]
## 來源
- URL：[來源 URL]
- 擷取日期：[日期]
- 證據：[使用的爬取/截圖/HTML/連結]
## 參考截圖
使用此截圖作為佈局、層級、密度和感覺的視覺真相來源。下面的標記以機器可讀的形式描述了同一個頁面。
## 設計摘要
[視覺語言的簡短描述，以及代理應重建的內容]
## 設計標記
### 顏色
[命名的顏色角色及其十六進位值（如果已知）；清楚標記推論值]
### 排版
[字型、備用建議、字型級別、字重、標題/正文規則]
### 間距和佈局
[間距級別、容器、網格、圓角、陰影、邊框]
## 元件
[按鈕、卡片、導覽、表單、英雄區、功能區塊、定價區塊、頁尾等]
## 頁面模式
[章節順序、常見佈局、響應式行為]
## 內容風格
[語調、呼籲行動風格、標題模式、文案密度]
## 代理建置指示
[AI 編碼代理可以遵循的具體指示，以此風格建立新網站]
## 重新執行輸入項
workflow: firecrawl-website-design-clone
source_url：[url]
target_stack：[stack]
output：DESIGN.md
如果使用者要求實作，請先產生或更新 DESIGN.md，然後將其用作建置的真相來源。
品質標準
- 不要暗示使用者擁有第三方標誌、圖片、商標或副本的權利。
- 偏好可重複使用的設計標記，而不是一次性觀察。
- 區分觀察到的事實與推論出的近似值。
- 保持輸出簡潔，以便另一個代理可以將其貼入上下文並從中建置。
- 保存來源 URL 和爬取工件以供審查。