藝術指導與靈感啟發

將簡短的需求轉化為經過深思熟慮的頁面，透過使用 Inspiration 資料庫中的真實參考案例，而非預設範本。此流程會在使用者的專案中產出三項成果：

.inspiration/references.md：樣本表（5 到 8 個已檢視的參考案例，以及每個案例提供的元素）。
.inspiration/direction.md：設計方向，每個決策都需追溯到某個樣本。
建置成果，以及位於 .inspiration-out/ 目錄下的截圖和檢查報告。如果專案已有 .gitignore 檔案，請在首次寫入 .inspiration-out/ 之前將其加入。

使用時機

當需求類似「設計一個登陸頁面...」、「為這個網站打造一個風格」、「英雄區塊應該長怎樣？」、「尋找參考資料並建置」、「為這個簡報進行藝術指導」。
使用者希望在建置前有書面的設計方向，或者表示輸出結果看起來很普通、模板化或「像 AI 產的」，並希望感覺更高級、有編輯感、大膽或獨特。
不適用於單純的參考資料查詢（請使用 inspiration-references）、單純的調色盤與字型工具（請使用 inspiration-brand-kit），或是與視覺設計無關的程式碼變更（例如 CSS 錯誤、重構）。

嚴格規則

忠實度。 僅描述你實際從開啟的圖片中看到的內容（透過 get_image，或其 image_url 備援方案）。標題、why 字串和面向是線索，而非證據。絕對不要引用你未曾檢視過的參考資料。
絕不抄襲。 學習其原則，而非像素。不要完全照搬版面配置，也絕不重複使用參考資料中的文案、圖片、插圖、標誌或授權字型。每個樣本都必須明確說明你留下了什麼。
預算控管。 規劃約 12 次計量工具呼叫（請參閱下方的預算表）。計算你進行的每次計量呼叫，包含那些返回錯誤的。批次處理：get_image 最多可接受 6 個 ID，get_inspiration 則接受一個清單。
面板為選用功能。 除非使用者要求，否則絕不呼叫 save_to_board、create_board 或 add_to_board。
命名規範。 將資料來源稱為「Inspiration 資料庫」或「Inspiration by VASA.Works」。以 https://inspiration.vasa.works/item/<id> 及工具回傳的 image_url 值作為連結。絕不連結第三方網站作為項目的來源。字型供應商或授權頁面以及面板網址則不在此限。

步驟 0：設定檢查

檢查是否有名為 search_inspiration 的工具可用於任何伺服器前綴下（若是 Claude Code 插件安裝，則為 mcp__plugin_inspiration_inspiration__、mcp__inspiration__、mcp__Inspiration__、連接器名稱，或不加前綴）。如果主機將工具列為「延遲載入」，則透過主機的工具搜尋載入它即視為可用。此技能中的工具名稱皆不帶前綴。

可用： 繼續。
缺失： 閱讀 references/setup.md 並一次性向使用者提供其用戶端的單一設定步驟。然後以「無資料庫模式」繼續（如下所述），除非使用者表示他們想先進行連線。
呼叫若返回 {"error": "subscription_required"} 表示伺服器已連線但未登入：請提供 references/setup.md 中的登入步驟。

步驟 1：簡報與主題盤點

在搜尋之前，先記錄下來（僅詢問你無法從儲存庫或對話中推斷的資訊）：

這是什麼： 用一句話說明產品或主題，以及訪客必須理解的一件事。
目標受眾： 誰是目標對象、他們已經知道什麼、什麼會讓他們產生信任。
必須承載的內容： 真正的標題、佐證資料（使用者實際擁有的數字、標誌、推薦語）、可用的產品視覺素材、行動呼籲按鈕、法律或定價內容。列出這些項目；這將決定頁面區段劃分。
限制條件： 技術堆疊、現有元件、品牌資產（標誌、顏色、已授權的字型）、無障礙需求、截止日期、偏好淺色或深色模式。
現有品牌？ 如果存在 .inspiration/brand-kit.md 或 .inspiration/tokens.css，則應將其視為現有品牌。如果有的話，設計方向必須延伸而非取代它。注意與品牌相符的 website-styles 字段，以便進行品牌內排名（brand 參數）。
頁面結構： 頁面所需的區段順序（例如：英雄區塊、標誌牆、功能介紹、運作方式、定價、常見問題、行動呼籲、頁尾）。標記出 2 到 4 個承載主要論點的區段；這些區段需要有各自的搜尋。

如果提示中未提供任何內容（一行的簡短指示，無佐證資料、定價或視覺素材），不要停下來詢問：直接在簡報中將缺失的項目列為明確標記的佔位符，然後繼續。

將此內容作為 .inspiration/direction.md 的第一個區塊寫入，以便使用者能及早修正。

步驟 2：研究計畫

閱讀 references/research.md 以了解各頁面類型的查詢配方、篩選範例及預算表。預設計畫如下：

#	呼叫	是否計量	目的
a	`list_facets(category="website-sections")`	否	取得 `subtype`、`style`、`mood`、`layout`、`typography` 的實際詞彙
b	1 到 2 次情緒搜尋	是	找出整體感覺，跨類別搜尋（不指定 `category` 或 `website-sections`）
c	2 到 3 次區段搜尋	是	針對每個關鍵區段進行搜尋，`category="website-sections"`，搭配 `filters={"subtype": ["hero"]}` 等
d	1 次跨類別搜尋	是	質感相關：`fonts`、`website-styles`、`branding` 或 `editorial-print`，視簡報需求而定
e	選用 1 次 `similar_items(id)`，在第一次 `get_image` 批次之後	是	擴大範圍並從你實際看過的最強候選項目中發散；如果第一批次已經有足夠多樣性則跳過
f	2 次 `get_image([...6 ids])`	是	檢視候選清單
g	1 次 `get_inspiration([kept ids])`	是	取得保留項目的調色盤十六進位碼、字型註記與完整描述
h	選用 `analyze_palette` 或 `generate_palette`	是	檢查或擴展調色盤

這總共是 7 到 11 次計量呼叫（b 到 h），因此約 12 次的預算足以應付一次重試。如果使用者表示他們使用 Pro 方案，你可以增加區段搜尋或第三次圖片批次，但保留的集合仍維持在 5 到 8 個。

搜尋衛生：

將查詢表述為可視的內容，例如「帶有超大字型襯線標題和產品截圖的深色英雄區塊」，而不是「好的英雄區塊」。
將可控的值放入 filters（不同鍵之間為 AND 關係，同一鍵內為任一符合）。將查詢用於 filters 無法表達的內容。
傳遞 exclude_ids 參數，包含已看過的 ID，以避免後續搜尋重複出現。保持 diversify 設定為開啟。
零結果時會回傳 suggestions：使用其中一個建議重試一次，然後繼續。
如果 list_facets 回報錯誤，則繼續使用 references/research.md 中列出的常見值（特別是 subtype）作為 filters；僅在該搜尋回傳零結果時才移除某個篩選條件。

從搜尋結果中建立一個最多 12 個 ID 的候選清單。選擇時應考慮多樣性（不同的結構和情緒），而不是挑選 12 個相同風格的版本。

步驟 3：檢視與篩選

呼叫 get_image，每次最多傳入 6 個候選 ID，最多呼叫 2 次。回覆會以一個清單（order、errors）開始；根據該順序將每個圖片對應到其 ID，並刪除列在 errors 中的 ID。在兩個批次之間，可以選擇性地對你已看過的最強圖片執行 similar_items（步驟 2，第 e 行），並將其最佳結果放入第二個批次。 如果 get_image 失敗， 則透過 references/library-rules.md 中的圖片備援方案（公開的 image_url，不計量）來檢視候選項目。
仔細觀察每張圖片：結構、字型（分類、比例對比、大小寫、字距）、顏色場域與重點、密度、圖像、一個不尋常的作法。
保留 5 到 8 個。每個保留的參考都必須有一個明確的角色：情緒、英雄區塊、某個已命名的區段、字型、調色盤或質感。刪除接近重複的項目，以及任何你無法給出具體評論的項目。
使用保留的 ID 清單呼叫一次 get_inspiration，以取得調色盤十六進位碼和字型註記。將其文字視為輔助細節；若與你自己的觀察有出入，則以你自己的觀察為準。如果它回報錯誤，不要重試：從你開啟的圖片中取樣十六進位碼（例如使用 magick <n>.png -resize 200x200 -colors 6 -format %c histogram:info:-，這需要 ImageMagick；如果沒有，則根據你看到的內容進行估計並說明），在樣本表中說明十六進位碼是取樣得來的，並從像素中判斷字型。

步驟 4：樣本表

使用 references/specimen-sheet.md 中的精確格式撰寫 .inspiration/references.md。對於每個保留的參考：

id、標題、角色、連結 https://inspiration.vasa.works/item/<id>，以及 image_url。
所見： 2 到 4 個具體可見的事實。
借鏡： 你借用的原則，需陳述為可以應用於不同主題的抽象原則。
留下： 你刻意不使用的部分（其版面配置、文案、圖像、品牌標記、字型，或任何不適合此簡報的內容）。
轉化： 這個原則在這個頁面上具體轉化成了什麼。

在樣本表結尾，用一句話說明這組參考資料的共同點，以及一個你將解決的張力點。

步驟 5：設計方向

從樣本中推導出設計方向。不要套用預設的風格。在 .inspiration/direction.md（在簡報區塊之後）中，使用以下標題，並在每個決策後用方括號引用樣本 ID：

概念主軸。 一句話，設計師可以對此提出異議，例如「這是一本田野指南，而非儀表板」。
反目標。 3 到 5 項此頁面「絕對不能像」的東西（包括你原本會產生的通用預設值：置中英雄區塊、紫色漸層、三個圖示卡片等，如果它們不符合簡報需求）。
字型系統。 字型家族與角色（顯示、文字、UI、可選的等寬字型）、尺寸比例（含 1440px 與 390px 寬度的 px 值）、行高、字距、大小寫。使用專案可以合法載入的字型（開放授權的字型家族或使用者已授權的字型）。資料庫中的字型項目有助於分類和配對；但它不授予使用許可。如果預算允許，suggest_pairing 搭配字型 ID 會有所幫助。
調色盤。 十六進位碼及其角色（底色、表面、文字、淡化文字、強調色、狀態色），以及每個文字配對的對比度。可以選擇性地執行 analyze_palette(hexes) 或 generate_palette(color) 以取得漸層。
版面與網格。 欄數、最大內容寬度、間距、區段間距節奏、對齊規則、斷點。
區段。 有序的頁面結構，每個區段有其任務、從盤點中取得的內容，以及其參考的樣本。
圖像與圖形。 存在哪些視覺素材、你將製作什麼（圖表、裁切、插圖風格）、應避免什麼。
動態效果。 何處需要動態效果來幫助理解、持續時間與緩動函數，以及減少動態效果的備援方案。預設為少量。
簽名細節。 一個令人難忘、可實際建置的作法，它源自某個樣本並經過重新詮釋，而非直接複製。

用一則簡短訊息向使用者展示概念主軸、反目標和簽名細節。除非他們反對或要求先批准，否則繼續進行。

步驟 6：建置

使用專案的技術堆疊和元件。如果沒有專案，則建置一個靜態的 index.html，搭配內聯 CSS（以及最少量的 JS）。
從 Tokens 開始：根據設計方向，使用 CSS 自訂屬性定義字型比例、間距、顏色和圓角半徑。然後依照頁面順序建置各個區段。
使用盤點中的真實內容。如果內容缺失，則使用明確標記的佔位符；絕不要虛構客戶標誌、推薦語、指標或獎項，並將其呈現為真實資料。
語意化 HTML：一個 h1、有序的標題、每個有意義的圖片都加上 alt 屬性、可見的焦點狀態、輸入欄位需有標籤。
同時建置手機版與桌機版；邊做邊檢查 390px 寬度的情況，而不是留到最後。

步驟 7：檢視與修正循環

閱讀 references/critique.md 以了解評分標準。然後，最多進行 3 輪：

渲染。 從此技能的資料夾（包含此 SKILL.md 的資料夾）執行檢查工具： node <skill-folder>/scripts/inspect.mjs <url-or-html-path> --out .inspiration-out/round-<n> 它會寫出 page-1440.png、page-390.png 和 report.json（使用的字型、文字和背景顏色、標題大小、行長、溢位、缺少 alt、低對比度樣本）。如果缺少 Playwright，它會印出一行修復指令（npx -y -p [email protected] node <skill-folder>/scripts/inspect.mjs ...）。如果主機有自己的瀏覽器或截圖工具，也可以使用。
檢視。 開啟截圖並閱讀報告。將每個區段與其引用的樣本進行比較，並將整個頁面與概念主軸和反目標進行比較。
評分。 為評分標準的每一行評分 0 到 2 分，並列出 3 個最大的問題，以最明顯的優先。將兩者都寫入 .inspiration/direction.md 的「第輪」之下。
修正這 3 個問題，然後重新渲染。

當每個評分標準行都得到 2 分、第三輪結束，或某一輪沒有帶來實質性改變時，停止。如果完全無法執行任何瀏覽器，則根據評分標準審查程式碼，如果使用者可以提供截圖則向他們請求，並清楚說明未進行視覺檢查。

步驟 8：交接

簡短告知使用者：

建置了什麼及其位置，以及概念主軸。
使用的參考資料：ID、標題和連結 https://inspiration.vasa.works/item/<id>，每個參考資料附上其貢獻的一件事。
最後一輪檢查工具仍標記了什麼（如果有的話）。
本次執行大約使用了多少計量呼叫，以及任何被跳過或降級的步驟（伺服器錯誤、image_url 備援方案、額度限制）。
詢問：「要我將這些參考資料儲存到 Inspiration 面板嗎？」只有在使用者回答「是」時，才呼叫 save_to_board(title, ids=[...]) 並分享它回傳的面板網址。

額度限制與錯誤

在工具首次回報錯誤、quota_exhausted 或 capped 時，閱讀 references/library-rules.md。簡短說明：quota_exhausted 會停止所有計量呼叫（連結 https://inspiration.vasa.works/pricing，用現有資源完成工作），`capped` 表示沒有更多頁面，subscription_required 表示需要登入（步驟 0），而同一伺服器錯誤發生在兩個不同工具上則表示降級模式。發生錯誤的呼叫仍會計入預算。

無資料庫模式

當 MCP 未連線時（在提供一次設定步驟後）且使用者未要求先連線：

清楚地說一次：「在未連接 Inspiration 資料庫的情況下繼續，因此此設計方向並非基於參考資料。」
跳過步驟 2 到 4。不要虛構參考資料 ID、標題、連結或描述，也不要聲稱某種外觀來自於參考資料。
僅根據簡報撰寫 .inspiration/direction.md，並在頂部加上「未使用參考資料」。保留反目標和簽名細節區塊，但從概念主軸和文字中推導它們。
使用步驟 6 到 8 進行建置和交接，不使用步驟 7 中的檢查工具（因為沒有瀏覽器可用；要求使用者提供一個，並說明你已根據評分標準審查了程式碼）。

Inspiration Art Direction：從真實參考做出站點與簡報