Communitygithub.com

靈感參考資料

從 VASA.Works 的靈感資料庫(透過其 MCP 伺服器)尋找、展示、比較和評論真實的設計參考資料:網站區段、UI 畫面、簡報、品牌設計、OG 圖片、編輯設計、插畫、動態、字型和調色板。同時管理使用者的靈感看板和已匯入的 X 書籤。

靈感參考資料 是什麼?

這個技能讓 AI 代理能夠直接存取 VASA.Works 的靈感資料庫,這是一個精選的真實設計參考資料集合。它不僅僅是搜尋圖片,而是提供一個結構化的工作流程,將模糊的設計需求轉化為精確的查詢條件,使用類別、子類別、風格和主題等篩選器。技能強調「先看再說」的原則,要求代理實際擷取並檢視圖片,然後再提供誠實的評估,包括部分匹配的標籤。它支援 Claude Code、Cursor 和 Codex 等主要代理平台,並透過其 MCP 伺服器進行通訊。主要功能包括進階搜尋(包含重新排名和排除功能)、並排比較參考資料(使用結構化表格)、管理靈感看板(建立、檢視、新增),以及搜尋使用者已匯入的 X 書籤。該技能還包含預算管理(典型請求使用 3-5 次計費呼叫)、錯誤處理(配額、速率限制)和嚴格的忠實度規則,確保代理只描述他們實際見過的圖片,絕不虛構細節。

相容平台✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/huseyingayiran/inspiration-skills/tree/HEAD/skills/inspiration-references

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

靈感參考資料 是做什麼的?

將一個簡要需求轉化為一組精簡、誠實的真實參考資料:搜尋資料庫,查看實際圖片,說明每個參考資料如何符合需求,並幫助使用者縮小範圍。一個好的答案是 4 到 6 個使用者可以據以行動的參考資料,而不是傾倒 12 個連結。

使用時機

  • 當請求類似「尋找…的靈感」、「展示好的定價頁面」、「什麼是優秀的新手引導流程」、「金融科技英雄區塊的參考資料」、「建立心情板」、「更多像這樣的」、「比較這兩個」、「將這些儲存到看板」、「我的看板上有什麼」、「搜尋我的 X 書籤」。
  • 也適用於使用者從未提及「靈感」但想要某個設計模式的實際例子時。
  • 不適用於設計和建置頁面(請使用靈感-藝術指導)、調色板或字型套件(請使用靈感-品牌套件),或沒有參考問題的程式碼變更。

工具在此處以裸名稱命名(search_inspiration)。在您的用戶端中,它們會帶有伺服器前綴,例如 mcp__plugin_inspiration_inspiration__(Claude Code 插件安裝)、mcp__inspiration__ 或連接器名稱。

1. 檢查設定

尋找任何前綴下名為 search_inspiration 的工具。如果主機將工具列為延遲載入,則透過主機的工具搜尋載入它即視為可用。如果找不到,請閱讀 references/setup.md,為使用者提供適合其用戶端的單一步驟,然後停止。如果他們無論如何都想繼續,請明確說明您無法顯示資料庫參考資料,並根據您自己的知識提供一般性建議。切勿憑空捏造 ID、標題、圖片 URL 或描述。

2. 轉譯簡要需求

提取四個要素:什麼(類別和子類別)、外觀(風格、顏色、主題、字體)、感覺(情緒)、情境(產業)。將具體、視覺化的詞語放入 query,僅將明確的限制條件放入 filters。

search_inspiration(
  query="深色 SaaS 定價,並有突出顯示的中間層",
  category="website-sections",
  filters={"subtype": ["pricing", "pricing-table"], "theme": ["dark"]},
  limit=6)
  • filters 在不同鍵之間是 AND 關係,在同一個鍵內是任意符合(any-of)關係。通常使用一到三個鍵就足夠;更多鍵大多會產生零個結果。
  • subtype 對 website-sections 表示區段類型(hero、pricing、cta、footer...),對 slide-decks 表示投影片角色(cover、traction、the-ask...),對其他類別則表示資產類型(logo、poster、dashboard...)。各類別的值和配方:請見 references/search-recipes.md。
  • 當簡要需求模糊或您不確定某個值時,請呼叫 list_facets(category=..., top=25)。此呼叫不計費。如果它回傳錯誤,請繼續使用 references/search-recipes.md 中的值作為 filters;僅在該搜尋回傳零個結果時,才移除一個篩選器。
  • 如果使用者提到他們想要其外觀的品牌,請傳遞 brand="<website-styles slug>" 以重新排名趨向該品牌,或傳遞一個設定檔字典(palette、style、mood、typography、industry、tags、theme)。
  • 零個結果會回傳 suggestions。根據建議重試一次,或移除一個篩選器後重試;告訴使用者您放寬了哪個條件。

使用 limit=6,以便整組結果適合一次圖片呼叫。limit=1 適用於「只要一個」的情況,並會加上 alternates。

3. 先看再說

搜尋會回傳 URL 和中繼資料,而非像素。請一次性使用 id 列表(最多 6 個)呼叫 get_image,並在撰寫任何相關描述之前,檢視每一張圖片。

對於每個參考資料,請提供:

  • Id 和標題(id 是用於看板和後續動作的依據)。
  • 它實際做了什麼以符合簡要需求,用一兩行說明,根據圖片描述:佈局、層級、字體處理、色彩比例、一個顯著的細節。
  • 匹配度標籤,當它不是完全匹配時:「部分匹配:深色且編輯風格,但沒有突出顯示的層級」。誠實的標籤勝過填充列表。

然後加上兩三行的綜合分析:強烈匹配的參考資料共有的模式,以及您會從哪一個開始以及原因。除非圖片確認,否則不要在您的描述中包含標題、標籤和篩選器匹配項。一個通過 theme: dark 篩選器的結果仍然可能是一個淺色頁面;將其標記為部分匹配。僅描述可見的內容:動態、懸停效果和滾動效果在靜止圖片中是不可見的。

4. 更多、更窄或相似

  • 更多相同搜尋的結果: 使用 exclude_ids=[已顯示的 ids](最佳)或 offset=6 重複搜尋。請先檢查 has_more。
  • 更多像這個的: similar_items(id, limit=6),或者當您想在同一次呼叫中也取得種子參考資料的分面時,使用 get_inspiration(id, similar=6)。
  • 像這個,但已更改(「更淺」、「更有趣」、「用於金融科技」):讀取種子參考資料的分面(get_inspiration(id))並查看種子圖片,然後使用其子類別和更改後的約束條件作為篩選器或查詢詞進行搜尋,排除種子參考資料。如果 get_inspiration 錯誤,請使用簡單的 search_inspiration(query="<從 slug 中取的詞>", category="<種子類別>", limit=3)(不使用 verbose,不使用 brand)找到種子參考資料的列,打開其 image_url,然後從像素中獲取外觀。註明與種子參考資料相比改變了什麼。
  • 幾個參考資料的詳細資訊: 在一次呼叫中使用 get_inspiration([ids], detail="standard")。detail="full" 內容龐大;僅在您需要的欄位缺失時使用。

5. 比較參考資料

當使用者詢問哪個更好或它們有何不同時,根據您已擷取的圖片(一次性擷取任何缺失的圖片)將候選參考資料並排比較:

參考 A參考 B
層級結構
字體
顏色與對比
密度與間距
可學習之處

最後提出與使用者簡要需求相關的建議,以及應從每個參考資料中保留什麼。學習原則,而非像素:切勿建議複製標誌、文案、圖像或授權字型。

6. 看板

看板位於使用者在 inspiration.vasa.works 的靈感帳戶中。

  • 僅在明確要求或您提議後獲得肯定答覆時才進行寫入操作。 搜尋、檢視或按讚結果不代表獲得許可。在顯示結果後,提議一次:「要我將這些儲存到看板嗎?」
  • save_to_board(title, ids=[...]) 會建立看板,如果具有該標題的看板已存在,則會附加。它會回傳 board_url、item_count、added 和 already_in_board。分享該 URL。
  • save_to_board(title, query=..., filters=..., category=..., limit=...) 會在一次呼叫中執行搜尋並儲存;僅在使用者要求儲存「你找到的任何東西」且未事先審閱時使用。
  • 使用 list_my_boards() 列出「我的看板」。使用 get_board(board)(id 或 slug)顯示一個看板;然後如果使用者想查看,可對其最多 6 個項目 id 呼叫 get_image。
  • 使用 add_to_board(board, item_ids) 新增到特定的現有看板;使用 create_board(title, item_ids) 建立一個新的空看板或帶有種子項目的看板。
  • 錯誤:board_limit 或 item_limit(告訴使用者,建議一個現有看板),rate_limited(等待,重試一次),nothing_to_save(傳遞 ids)。

7. 使用者的 X 書籤

如果使用者提及他們自己的書籤或已儲存的貼文,請呼叫 search_x_bookmarks(query, limit=10)。它僅搜尋他們已匯入的書籤。狀態為 "status": "not_connected" 的結果會包含 connect_url;請將其傳遞給使用者。結果會包含推文文字、圖片 URL 和貼文連結。僅在您確實可以查看圖片時才描述它;否則請引用已儲存的文字,並說明您尚未看到圖片。

預算

免費帳戶每個 UTC 月有 50 次計費呼叫。一個典型請求需要 3 到 5 次:

步驟呼叫次數
list_facets(僅在模糊時)0,不計費
search_inspiration1(含一次重試為 2)
get_image,一批最多 6 個1
一次後續動作(更多、相似、比較、儲存)1 或 2

批次處理一切:get_image 最多接受 6 個 id,get_inspiration 接受一個列表。切勿為每個項目單獨循環呼叫一次。

配額和錯誤

當工具首次回傳錯誤、quota_exhausted 或 capped 時,或者當 get_image 失敗時(它有透過公開 image_url 的圖片後備方案,不計費),請閱讀 references/library-rules.md。簡要版本:quota_exhausted 會停止所有計費呼叫(連結 https://inspiration.vasa.works/pricing,用現有資訊完成),`capped` 表示沒有更多頁面,not_found 表示重新搜尋(切勿猜測 id),subscription_required 表示需要登入,而兩個不同工具上出現相同的伺服器錯誤表示降級模式。錯誤的呼叫仍計入預算。看板錯誤在第 6 節中。

規則

  • 忠實度。 僅描述您實際打開的圖片(透過 get_image 或 image_url 後備方案)中看到的內容。切勿僅根據標題聲稱細節。
  • 學習原則,而非像素。 參考資料提供資訊;它們不是要複製的模板。
  • 僅提資料庫名稱。 稱之為靈感資料庫或 VASA.Works 靈感。不要推測項目的來源。切勿連結第三方網站作為項目的原始來源。字型鑄造廠或授權頁面、使用者自己的書籤貼文連結和看板 URL 則是可以的。
  • 無聲寫入看板。

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

相關技能