Communitygithub.com

灵感参考

从 VASA.Works 的 Inspiration 库(通过 MCP 服务器)中查找、展示、比较和批评真实设计参考:网站板块、UI 界面、幻灯片、品牌设计、OG 图片、编辑设计、插画、动效、字体和调色板。同时管理用户的灵感面板和导入的 X 书签。当用户需要灵感、模式示例、页面参考、情绪板或类似参考时使用。

灵感参考 是什么?

这是一个针对 AI 代理(如 Claude Code、Cursor、Codex)的技能,用于从 VASA.Works 的 Inspiration 库中检索、分析和比较设计参考。它支持多种设计类别,包括网站板块、UI 界面、幻灯片、品牌设计、OG 图片等。用户可以搜索参考,通过图像进行视觉验证,比较多个选项,并管理灵感面板和 X 书签。关键在于遵循“先看后说”的原则——AI 必须实际打开并检查图像,然后才能进行描述。该技能还提供预算管理,限制免费账户每月 50 次计费调用,并指导如何高效地批量处理请求以节省配额。它适用于需要快速获取真实设计示例的场景,例如构建定价页面、查找品牌灵感或创建情绪板。

兼容平台✓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 书签”。
  • 当用户没有说“灵感”但想要设计模式的真实示例时。
  • 不用于设计和构建页面(使用 inspiration-art-direction)、调色板或字体包(使用 inspiration-brand-kit),或者不涉及参考问题的代码更改。

工具在此以裸名称命名(如 search_inspiration)。在你的客户端中,它们会带有服务器前缀,例如 mcp__plugin_inspiration_inspiration__(Claude Code 插件安装)、mcp__inspiration__ 或连接器名称。

1. 检查设置

查找任何前缀下名为 search_inspiration 的工具。如果主机将工具列为延迟加载,通过主机的工具搜索加载它则视为可用。如果缺少该工具,请阅读 references/setup.md,向用户提供其客户端所需的步骤,然后停止。如果他们无论如何都想继续,请明确说明你无法显示库参考,并基于你自身知识提供一般性指导。切勿凭空捏造 ID、标题、图像 URL 或描述。

2. 翻译需求

提炼出四个要点:内容(类别和子类型)、外观(风格、颜色、主题、字体)、感觉(情绪)、上下文(行业)。将具体、视觉化的词语放入 query,仅将明确的约束条件放入 filters。

search_inspiration(
  query="dark SaaS pricing with a highlighted middle tier",
  category="website-sections",
  filters={"subtype": ["pricing", "pricing-table"], "theme": ["dark"]},
  limit=6)
  • filters 在键之间是 AND 关系,在键内部是任意匹配关系。通常使用一到三个键即可;更多键通常会产生零结果。
  • subtype 对于网站板块指板块类型(hero, pricing, cta, footer...),对于幻灯片指幻灯片角色(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 和元数据,而不是像素。使用一次 get_image,传入 ID 列表(最多 6 个),并在写任何关于图像的内容之前,查看每一张图像。

对于每个参考,提供:

  • ID 和标题(ID 用于面板和后续操作)。
  • 它实际做了什么来符合需求,用一到两行描述,来自图像:布局、层级、字体处理、色彩比例、值得注意的细节。
  • 匹配标签当它不是完全匹配时:“部分匹配:暗色和编辑风格,但没有高亮选项”。诚实的标签胜过填充列表。

然后添加两到三行综合总结:强参考之间共享的模式,以及你会从哪个开始以及原因。除非图像确认,否则不要将标题、标签和过滤器匹配项放入你的描述中。一个通过了 theme: dark 的结果仍然可能是一个浅色页面;将其标记为部分匹配。仅描述可见内容:动效、悬停状态和滚动效果在静态图像中不可见。

4. 更多、更窄或类似的参考

  • 同一搜索的更多结果: 重复搜索,使用 exclude_ids=[已经展示的 ID](最佳)或 offset=6。先检查 has_more。
  • 类似这个: similar_items(id, limit=6),或者当你希望在同一个调用中同时获取种子项的 facets 时,使用 get_inspiration(id, similar=6)。
  • 类似但有所改变(“更亮”、“更有趣”、“用于金融科技”):读取种子的 facets(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
层级
字体
颜色和对比度
密度和间距
值得借鉴的

以结合用户需求的建议结束,并说明应从每个参考中舍弃什么。借鉴原则,而不是像素:切勿建议复制 logo、文案、图片或授权字体。

6. 面板

面板存在于用户在 inspiration.vasa.works 的 Inspiration 账户中。

  • 仅在用户明确要求或对你的提议表示同意时写入。 搜索、查看或点赞结果并非许可。在展示结果后,提供一次:“想让我把这些保存到面板吗?”
  • 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 后备方案)中看到的内容。切勿仅凭标题声称细节。
  • 借鉴原则,而非像素。 参考是启发,不是要复制的模板。
  • 仅提及该库。 称其为 Inspiration 库或 Inspiration by VASA.Works。不要推测项目来源。切勿链接第三方网站作为项目的来源。字体铸造厂或许可页面、用户自己的书签帖子链接以及面板 URL 是可以的。
  • 不要静默写入面板。

Individual skills in this repo

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

相关技能