Thumbnail

將一個網站、本地網頁專案或單篇文章，轉變成一張完成的高解析度縮圖，看起來就像是該網站的一部分。圖片使用網站本身的素材，以 HTML/CSS 組合而成，並輸出為 PNG 與無失真 WebP。

原則

受網站啟發。 每張縮圖都是根據網站標誌性元素：主視覺、元件、圖像、主題、排版與色彩，所打造的全新構圖。裝置框架內的螢幕截圖只是九種構圖之一，且永遠不是預設選項。
僅使用真實素材。 使用網站真實的標誌、圖片、文字、數字、色彩與字型。絕不虛構功能、價格、統計數據或聲明。
每次執行一個成品。 完全自動化執行。此技能唯一可能會問的問題，是 輸入→語言 中的語言問題。

溝通

安靜工作。 不要敘述步驟、發現、設計理由、重試或修正。分析過程保留在工具呼叫與 brief.md 中。保持工具呼叫描述簡短且中立。
只在必要時發言： 語言問題、使用者必須處理的阻礙問題（網站無法連線、專案無法執行），以及最終交付。
對話語言。 所有面向使用者的訊息（問題、選項、錯誤、最終回覆）都使用使用者書寫的語言，無論縮圖的語言為何。
最終回覆。 顯示圖片，然後提供 PNG 與 WebP 路徑，以及兩到四行簡短說明：構圖、格式、一句話、分類，以及標誌、色彩與字型的來源。最後一行提供編輯選項，並建議另一種格式（請參閱 references/formats.md）。不包含過程回顧。

設定

路徑相對於此技能的目錄（包含此檔案的資料夾）。將 SKILL_DIR 定義為該資料夾，並將 S=$SKILL_DIR/scripts。

腳本	用途
`inspect.mjs <url	file>`
`extract.mjs <url	file> --out `
`extract.mjs <url	file> --out --selector "" --name [--transparent]`
`screenshot.mjs <url	file> --out <file.png> [--width --height --scale --wait]`
`render.mjs <file.html> [--out <file.png>]`	以 2 倍解析度將構圖渲染為 PNG 與無失真 WebP。從頁面讀取畫布大小，並回報已載入的字型、失敗的字型、損壞的圖片與溢出的文字。
`history.mjs` / `history.mjs add <site> "<composition>"`	顯示或記錄最近使用的構圖。

這些腳本沒有 npm 依賴。如果找不到瀏覽器，請設定 CHROME_PATH。在 macOS 上，head 可能會被 Perl 工具遮蔽；請使用 cat、sed -n 或 python3 讀取檔案。

輸入

在設計之前，先解析這四個輸入。

目標

URL 模式： 請求包含 URL 或網域。輸出資料夾：目前工作目錄下的 ./thumbnail-<domain>/。將請求中的其他單詞視為備註，例如語言、格式、構圖或風格的願望。
專案模式： 沒有 URL。目標是當前專案。輸出資料夾：專案根目錄下的 ./thumbnail/。

將本次執行的所有檔案保留在輸出資料夾內。

頁面類型（URL 模式）

先執行 inspect.mjs 並讀取 page.type：

site： 縮圖是關於整個網站。
article： URL 是一篇單獨的文章、部落格文章、指南或新聞項目。縮圖是關於文章的主題，並以網站識別進行樣式設定。使用輸出資料夾 ./thumbnail-<domain>-<slug>/，其中 slug 是最後一個路徑區段，縮短至約 40 個字元。

偵測使用 og:type、JSON-LD（Article、BlogPosting、NewsArticle…）、發布日期、<article> 元素、部落格風格的 URL 路徑以及文字長度。使用者的備註會覆蓋它：「關於網站」表示網站，「關於文章」或「關於主題」表示文章，適用於任何語言。

語言

從 lang 與 dir、標題與 UI 文案中確定內容語言。在專案模式下，也檢查 <html lang> 與語言環境資料夾，例如 locales/<code> 或 messages/<code>.json。

如果使用者的備註中提到了語言，則使用該語言。
如果網站只有一種語言，則使用它。阿拉伯語、波斯語、烏爾都語與希伯來語為從右到左佈局。
如果網站完全支援兩種或更多語言，請詢問使用者要使用哪一種。如果有的話，請使用代理人的提問工具；否則在聊天中詢問並等待。建議網站的預設語言環境。
如果語言不明確，請使用阿拉伯語。

一句話、分類與任何額外文字，都使用所選語言撰寫。

格式

預設： 作品集縮圖，1080 × 720，適用於網站；Open Graph，1200 × 630，適用於文章。
應要求： 如果使用者指定了平台、放置位置、長寬比或確切尺寸，請使用 $SKILL_DIR/references/formats.md 解析。該檔案也提供輸出檔名、垂直格式的安全區域以及佈局指南。
每種格式都以 2 倍解析度渲染，並匯出為 PNG 與無失真 WebP。

工作流程

以少量輪次工作。 每一輪都會重新讀取整個對話，因此輪次數量對成本的影響遠大於任何單一檔案。將獨立的命令批次處理成一個 shell 呼叫，在同一輪中並行讀取獨立檔案，並且永遠不要重新讀取你已經看過的檔案或圖片。

1. 使目標可達

URL 模式： 使用 URL。
靜態專案（包含 index.html 且沒有建置步驟）：使用檔案路徑。如果資源使用根目錄絕對路徑，請在背景中提供該資料夾的服務（例如 python3 -m http.server 4173）並使用 http://localhost:4173。
框架專案（包含 dev、start 或 preview 的 package.json）：如果缺少 node_modules，請使用與鎖定檔案相符的套件管理器安裝依賴項。在背景啟動開發伺服器，從輸出讀取其埠口，並等待直到 curl -s -o /dev/null -w "%{http_code}" <url> 回應。提取完成後停止伺服器。
無法執行： 使用來自 package.json（homepage）或 README 的已部署 URL。如果沒有，則從專案自己的素材（圖片、元件、樣式）建構，並告知使用者。

2. 檢查、提取並檢查歷史記錄（一個命令）

在一個 shell 呼叫中執行所有三個：

mkdir -p <out> && node $S/inspect.mjs <url> > <out>/inspect.json && node $S/extract.mjs <url> --out <out>/extract && node $S/history.mjs

如果 inspect.json 顯示頁面是文章，請在下一個 shell 呼叫中將資料夾重新命名為 ./thumbnail-<domain>-<slug>/。

3. 理解內容並研究識別（一個輪次）

在同一輪次中，讀取 inspect.json 的關鍵欄位（使用簡短腳本列印，而不是整個檔案）並檢視 extract/overview.png。概覽是每個擷取（主視覺、區段、元素、圖片）的聯絡表，每個都標有其檔案名稱。

內容

網站： 它是什麼？為誰而設？提供什麼？以及什麼讓它感覺像它自己？使用 inspect.json、extract.json，以及在專案模式下，使用 README、package.json、著陸頁與主視覺元件、語言環境檔案、Meta 標籤、清單與樣式。
文章： 文章是關於什麼？讀者會從中獲得什麼？使用 page.article（標題、描述、區段、標籤、作者、日期、閱讀時間、副標題、封面圖片、文章內圖片、程式碼區塊）與文章文字。
如果頁面文字很少（客戶端渲染頁面或機器人牆），請以其他方式取得，例如使用網頁擷取工具或 curl。

識別：從概覽（以及文章的封面圖片）中，注意：

情緒與風格： 攝影、3D、平面插圖、奢華、俏皮、技術、編輯、極簡…
標誌性元素： 人們辨識該網站的兩到四件事，例如主視覺圖片或物件、獨特的卡片或產品圖塊、主題、程式碼範例、圖示集、漸層、排版處理。
權杖： 色彩、頁面背景、按鈕顏色、圓角、陰影、漸層、標題樣式，以及徽章或按鈕樣式。

4. 選擇構圖

如果使用者明確要求某種構圖，請使用它。 這適用於使用者指定名稱（例如「Component Collage」）或清楚描述其概念時，無論使用何種語言（例如「a collage of the site's cards」或「a grid of its features」）。即使最近使用過，也使用該構圖，並跳過歷史記錄檢查。他們的其他備註仍然適用。

否則，自己選擇：

使用步驟 2 中列印的歷史記錄。
讀取 $SKILL_DIR/references/compositions.md，並選擇最能表現此網站標誌性元素的構圖。
避免在最近兩次執行中使用過的構圖，除非沒有其他合適的。
撰寫 <out>/brief.md。保持簡短：識別關鍵字、標誌性元素與你將使用的檔案、所選構圖及其原因，以及一行的佈局草圖。

5. 以完整尺寸開啟所選素材（一個輪次）

概覽是用於選擇，而非細節。一旦你知道設計將使用哪兩到四個素材（以及標誌），請以完整解析度開啟它們，全部在同一輪次中並行處理，以便在設計前檢查小文字、精細主題與清晰度。如果你需要的部分未被偵測到，請在同一輪次中使用 extract.mjs --selector 擷取它。

6. 撰寫內容

一句話

網站： 網站提供什麼以及為何重要。阿拉伯語使用 5-10 個字，英語或其他語言使用 6-12 個字。撰寫自然的行銷文案，結尾不要有句點，且不要重複網站名稱。
文章： 文章的核心概念，可以是其標題的精簡版本，或忠實的一行摘要。阿拉伯語使用 5-12 個字，其他語言使用 6-14 個字。不要添加文章中沒有的內容。
必須適合三行。你可以使用網站的強調色或標題處理來突顯一到三個關鍵字。

分類

以縮圖語言表示的兩到三個字。
網站： 產品的類型，例如線上商店、學習平台、公司網站、SaaS 儀表板、預訂平台或作品集。
文章： 文章的區段或主題，例如指南、案例研究、教學或主題本身。

文章附加資訊（可選）

作者、日期與閱讀時間，設定為小字型。僅使用頁面上的真實數值。

標誌

始終使用真實標誌，並在使用前檢視它。
- 專案： 在 public/、static/、assets/、src/assets/ 與 app/ 中尋找 logo*.{svg,png,webp}、icon*.svg、favicon.svg、apple-touch-icon.png 與 icon-512*.png，以及清單圖示與內聯標誌元件。
- URL： 使用 inspect.json：logoSvgs（內聯 SVG）、logoBackgrounds（作為 CSS 背景繪製的標誌，通常是現成的 SVG）、logoImgs 與 icons。優先使用向量或透明標誌；僅在萬不得已時才從 extract/elements/*-header.png 裁剪，因為裁剪會帶有頁面背景。將檔案儲存到輸出資料夾。
使用 currentColor 或 CSS 變數的內聯 SVG 需要真實的填充顏色。除非為了對比需要（淺色標誌在深色區域上，深色標誌在淺色區域上），否則不要在標誌後方放置方框或背景。
對於文章，標誌是小的簽名，而不是主角。
如果沒有標誌，請使用能表達概念的 Lucide 圖示（https://cdn.jsdelivr.net/npm/[email protected]/icons/<name>.svg），並以品牌色彩樣式設定。絕不繪製虛假標誌。

7. 字型

來源： extract/fonts.css（網站自己的 @font-face 規則，字型檔案已下載）以及 extract.json（fonts.google）。在專案模式下，也檢查 next/font、@font-face 規則、Google Fonts 導入、Tailwind fontFamily 設定以及 public/fonts 中的字型檔案。
載入它： 在畫布的 Noto Sans 連結之後立即添加 <link>，然後設定 --font: "<Site Font>", "Noto Sans Arabic", "Noto Sans", sans-serif。
檢查覆蓋範圍： 字型必須覆蓋縮圖的書寫系統。僅拉丁字型無法渲染阿拉伯文字，因此請回退到 Noto Sans Arabic。如果顯示字型只有一種字重，請使用該字重；絕不模擬粗體。
回退： 如果字型不在 render.mjs 回報的 fonts 列表中，或出現在 failedFonts 中，請改用 Noto Sans Arabic 或 Noto Sans。

8. 建置與渲染

將 $SKILL_DIR/assets/canvas.html 複製到 <out>/<name>.html。預設格式的名稱為 thumbnail，其他格式為 thumbnail-<preset>。
在第一個 :root 規則中使用 --w 與 --h 設定畫布大小（預設為 1080px × 720px）。根據該形狀進行佈局設計，對於垂直格式，將文字保留在安全區域內。
使用純 HTML 與 CSS 進行設計；歡迎使用內聯 SVG。
- 在 <style> 區塊結尾處替換設計變數與 .canvas 背景規則，然後在它們之後添加你自己的規則。
- 將標記放在 <div class="canvas"> 內，並保持結束的 <script> 不變。
- 使用相對路徑引用素材，例如 extract/images/…、extract/elements/… 與 logo.png。
為渲染器標記文字：
- 句子上的 data-fit="3" 會將其縮小，直到適合三行。data-min 設定最小大小；永遠不會低於該格式的可讀最小值。
- 文字元素上的 data-text="<name>" 讓渲染器回報溢位。
- 無意被閱讀的文字（例如以字型設定的標誌、巨大的背景文字）上的 data-decor。

網站主視覺縮圖