关于 gather
gather 是一项设计调研技能,用于在构建或改版界面前收集视觉参考。它并行搜索已连接的来源,将参考整理到同一看板,并注明每项可借鉴的部分。
主要功能
- 01并行搜索已连接来源
- 02基于图像搜索参考
- 03在单一看板整理带链接的参考
- 04记录可借鉴的界面部分
- 05保存所选参考并避免重复
适用场景
- 01为界面改版收集灵感
- 02比较不同来源的界面模式
- 03将选定参考保存到资料库
安装
复制下面的命令,在终端中运行。
npx skills add https:/ / github.com/ playful-design/ router --skill gather安装后在 Claude Code 中输入/gather确认已加载。
包含的文件
除 SKILL.md 外,安装时一起下载的参考资料和脚本。
board.htmlcollect.mjsLICENSEsources.mdagents/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-brief | query: "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-limit | Mobbin 提示“您的月度用量较高”后仍再次搜索 | “Mobbin 提示月度用量较高,因此我已停止搜索” |
gather-own-library-first | Pond 中已有匹配项,却把 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.mjs | node 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。