mcpField
G
gather

gather

github.com/playful-design设计与 UI1685 次安装1 周前更新
代码仓库

关于 gather

gather 是一项设计调研技能,用于在构建或改版界面前收集视觉参考。它并行搜索已连接的来源,将参考整理到同一看板,并注明每项可借鉴的部分。

主要功能

  1. 01并行搜索已连接来源
  2. 02基于图像搜索参考
  3. 03在单一看板整理带链接的参考
  4. 04记录可借鉴的界面部分
  5. 05保存所选参考并避免重复

适用场景

  1. 01为界面改版收集灵感
  2. 02比较不同来源的界面模式
  3. 03将选定参考保存到资料库

安装

复制下面的命令,在终端中运行。

$npx skills add https://github.com/playful-design/router --skill gather

安装后在 Claude Code 中输入/gather确认已加载。

包含的文件

除 SKILL.md 外,安装时一起下载的参考资料和脚本。

board.html
collect.mjs
LICENSE
sources.md
agents/
openai.yaml

详细介绍

收集

这项技能会在设计创建或重做之前收集灵感。它会同时搜索所有来源,随着结果陆续到达填充同一块画板,并将每条参考资料链接回其出处,同时注明值得借鉴的部分。

为选择提供依据,而非照搬风格

一条参考资料展示的是某个部分可以如何运作。用户要的是顶栏,却拿整个应用的视觉风格当参考,这就是一次失误。如果用户没有指定数量,至少从三个来源收集 20 条参考资料。

当用户要求灵感、参考资料或“灵感参考”,或者说某个界面看起来很糟并询问如何改进时,使用此技能。根据画板制作多个变体属于 prototype。逐项复刻某条参考资料则属于 match。

1. 明确需求

用一行说明界面、平台以及要关注的方面:布局、导航、信息密度、字体、颜色、动效或整体风格。没有明确目标的搜索属于 gather-name-the-brief。

将需求拆分为若干部分,例如“顶栏”“空状态”和“行密度”,并为每个部分提供两三个同义词。查询词应来自这些部分,每条查询包含两三个词。用一条很长的查询概括整个需求属于 gather-split-the-brief。

在与设计相同的平台上搜索。桌面或 Web 应用应参考 Web 和桌面界面。为桌面应用寻找移动端界面属于 gather-same-platform。

2. 先查看用户提供的内容

开始搜索前,先打开当前对话中已有的标签页、截图、链接和设计文件。它们会为第 4 步的图片搜索提供线索。用户的截图还在浏览器里打开,却先去搜索模式库,这属于 gather-start-with-given。

3. 提出连接缺失来源

检查 Pond、marked.dev、Are.na、Cosmos、Pinterest 和 Mobbin 中哪些已连接。只询问一次,将每个未连接的来源分别列为选项,并说明可以先用其他来源继续。遗漏未连接来源的提问,或未询问便跳过某个来源继续搜索,都属于 gather-offer-to-connect。

如果没有任何来源已连接,请等待用户答复。各来源的连接方法见 sources.md。

4. 同时搜索所有来源

为每个已连接的来源启动一个 Agent;如果无法使用 Agent,则并行调用各来源进行搜索。每个来源都要按 sources.md 所示的格式写入 candidates/<source>.json。按顺序逐个搜索来源属于 gather-parallel-sources。

如果 Mobbin 提示月度用量较高,请停止调用它,告知用户,并继续搜索其他来源。只有用户明确提到 Mobbin 并要求搜索时,才再次搜索 Mobbin。在收到该提示后仍再次调用 Mobbin,属于 gather-stop-at-usage-limit。

每组都优先纳入用户自己收藏的内容。如果 Pond 或 marked.dev 中有匹配项,画板却没有收录其中任何内容,就属于 gather-own-library-first。

至少从三个来源收集。模式库展示流程和界面,精选图库展示完成品,画板则体现风格偏好。画板只取自一个应用,属于 gather-go-wide。

根据用户提供的内容和最相近的收藏,通过 Pond visual 和 Cosmos 开展图片搜索。用户分享了截图却只用文本查询,属于 gather-search-by-image。

如果最佳参考资料来自已发布的产品,请打开其线上页面并截取相关部分。只需点击一次就能打开的网站,却只使用图库缩略图,属于 gather-capture-live。

先收集用户所需数量的大约两倍,再筛选。用户要求更多时,不要重复画板上已有的任何 URL。用户说“再来 50 个”时却给出重复项,属于 gather-enough-to-choose。

5. 收集到一个看板中

首批候选内容到达后,运行一次收集器并立即打开看板。它会复制看板页面、下载每张图片和视频,并在 Agent 完成时实时填充看板。

node <skill>/collect.mjs .gather/<brief> --serve

.gather/ 不纳入版本控制。按照 sources.md 中的说明,将标题、简介和分组顺序写入 .gather/<brief>/board.json。在聊天中粘贴链接而不是放到看板中,属于 gather-one-board。

收集器和看板随技能一同提供,因此运行时只会写入数据。手写看板页面,或编写每次运行时下载或构建内容的脚本,属于 gather-shipped-collector。

6. 查看每个参考内容

打开每个下载的文件,查看简介中指定的部分。只看标题、元数据或预览就保留参考内容,属于 gather-look-at-every-image。

只剔除明显不合适的内容,并将其 URL 添加到 board.json 的 cut 中。如果两个参考内容都比较合适,就都保留,由用户决定。由 Agent 裁定难分高下的内容,属于 gather-cut-clear-misses。

每个参考内容都要添加一条备注,说明要借鉴的部分,例如“顶部栏”。没有备注的参考内容,属于 gather-name-the-part。每个参考内容都要保留其来源链接。没有链接的图片,属于 gather-link-every-reference。

在每个参考内容的 details 中,将 Kind 标记为 Shipped 或 Concept。将概念图展示成已发布产品,属于 gather-concept-or-shipped。

每个分组的名称用两到三个词,以标题式大小写书写,例如“Agent Activity”,并将详细信息放在分组描述中。用句子作为分组名称,属于 gather-short-group-names。

完成筛选后,再运行一次带 --done 的收集器,让看板停止重新加载。

7. 根据反馈采取行动

看板会复制三个提示词。“Copy Picks”会返回用户的选择及备注,这些内容将作为下一步的简介。“More Like This”会返回一个参考内容。“Save Picks”会返回要保存的选择。

使用“More Like This”时,以该参考内容为种子进行图片搜索,并限定在其所属分组,同时排除看板上的所有 URL。根据参考内容标题进行文本搜索,属于 gather-more-from-the-pick。

8. 保存用户保留的内容

将用户指定的选择发送到其资料库、频道或看板。先查看目标位置的命名方式,并保持一致。在 fashion / inspiration / 2026 / fall winter 旁边新建名为“FW 26 🔥”的频道,属于 gather-match-the-naming。

添加每项内容前都要检查是否已存在。重复保存同一项内容,属于 gather-no-duplicates。如果来源需要登录或 CAPTCHA,就停止操作并说明是哪一种。绕过登录,属于 gather-ask-at-login。

对比

每项检查都以对比的形式呈现。错误做法旁边就是替代做法。

规则错误做法替代做法
gather-name-the-brief“正在搜索设置页面”“桌面设置页面,查找分组和紧凑布局”
gather-split-the-briefquery: "desktop settings page with grouped dense options""settings groups"、"preferences list"、"dense settings"
gather-same-platform为桌面应用查找 iOS 屏幕platform: "web" 和桌面应用
gather-start-with-given用户的标签页已打开,却去搜索模式库先阅读已打开的标签页
gather-offer-to-connect单独搜索 Pond,未连接 marked.dev 和 Mobbin“连接 marked.dev 或 Mobbin,还是继续使用 Pond?”
gather-parallel-sources先 Pond,再 Mobbin,再 Cosmos,依次搜索每个来源分配一个 Agent,同时启动
gather-stop-at-usage-limitMobbin 提示“您的月度用量较高”后仍再次搜索“Mobbin 提示月度用量较高,因此我已停止搜索”
gather-own-library-firstPond 中已有匹配项,却把 Mobbin 屏幕放在画板上每个分组都优先展示用户保存的内容
gather-go-wide从一个应用中找出 20 个屏幕用户保存的内容、画板和模式库
gather-search-by-image用户的截图就在对话中,却使用文本查询使用 search_library,并以该截图作为 visual 的起始内容
gather-capture-live一张 Land-book 上 linear.app 的缩略图实时顶栏截图,并链接到 linear.app
gather-enough-to-choose“再来 50 个”却再次返回最初的 20 个找出 50 个新参考,排除之前的 URL
gather-one-board在聊天中粘贴 20 个链接提供并打开 .gather/settings/,按想法分组
gather-shipped-collector为本次运行编写 build.mjsnode collect.mjs .gather/settings --serve
gather-look-at-every-image只看屏幕的标题或预览打开下载的文件并查看顶栏
gather-cut-clear-misses两个相近的参考中,一个被 Agent 删除两个都放在画板上,供用户选择
gather-name-the-part没有说明的截图“选用分组列表,不要选这些颜色”
gather-link-every-reference没有来源的图片图片链接到原始来源
gather-concept-or-shipped把 Dribbble 概念图当作已发布产品展示details: { Kind: "Concept" }
gather-short-group-names“活动:思考、工具调用和步骤”“Agent 活动”
gather-more-from-the-pick将 More Like This 搜索为“Linear settings”以选中的屏幕为起始内容进行图片搜索
gather-match-the-naming新建名为“FW 26 🔥”的频道fashion / inspiration / 2026 / fall winter
gather-no-duplicates同一 Pin 添加两次检查现有条目并跳过重复项
gather-ask-at-login绕过登录流程“Pinterest 需要你登录”

报告

严重程度。 HIGH 表示用户只要求某个部分,却复制了整体外观;或条目被重复保存或使用了错误名称。

MEDIUM 表示平台错误、只用一个来源、依次搜索来源、画板上没有链接,或手动编写画板或构建脚本。跳过连接询问或用户自己的已保存内容进行搜索,也属于此类。参考资料未经查看、由 Agent 自行决定是否采用相近选项,或把概念图当作已发布产品展示,也属于此类。Mobbin 发出用量警告后仍继续调用,同样属于此类。

LOW 表示查询过长、适合用图片搜索却使用了文本搜索,或用图库缩略图展示实时网站。参考资料没有备注、分组名称过长、“更多”结果中有重复项,或按标题搜索 More Like This,也属于此类。

格式。 每个根本原因列出一项发现;如果不涉及文件,则引用请求:

file:line - [rule-id] what is wrong
request 2 - [rule-id] what is wrong

然后提供 Rule | Count | Severity 汇总。存在任何 HIGH 时标记为 Block,否则标记为 Approve。将所有无法访问的来源标记为 Not verified。

评论

支持 Markdown