awwwards-inspiration

Awwwards 灵感

你可以使用 awwwards MCP 服务：一个可搜索的获奖网站库，提供内嵌截图和各站点的设计特征。参考真实、经验证的案例来指导设计决策，而不是凭空猜测。

**配置文件说明：**此技能的工具包括 search_sites、get_site_details、 get_site_elements、list_categories、get_annual_categories、 get_annual_nominees、get_annual_nominee、get_collections、 search_directory、new_winners、watch_site、capture_live_site、 analyze_page_structure、record_site_motion 以及保留的 create_design_brief。以下示例使用 1.x 名称（默认 full）。在 AWWWARDS_MCP_PROFILE=v2 下，使用 search_references {request:{kind:"sites", ...}}、 get_reference {request:{kind:"site_details", slug}} 或 get_reference {request:{kind:"site_details", slugs}} 批量查询 1 到 10 个站点、 get_reference {request:{kind:"site_elements", slug}}、 browse_awards {request:{kind:"filters"}}、 browse_awards {request:{kind:"annual_categories"}}（也可使用 kind:"annual_nominees" 和 category，以及 kind:"annual_nominee" 和 id 或 category + slug）、 search_references {request:{kind:"collections"}}（或使用 get_reference {request:{kind:"collection", slug}} 查询单个合集）、 search_references {request:{kind:"directory", ...}}、 monitor_awards {request:{action:"poll_winners"}}、 monitor_awards {request:{action:"add_watch", kind, pattern}}、 monitor_awards {request:{action:"list_watches"}}、 monitor_awards {request:{action:"remove_watch", kind, pattern}}、 capture_page {request:{kind:"screenshot", url}}、 inspect_page {request:{kind:"structure", url}} 和 capture_page {request:{kind:"recording", url}}；create_design_brief 仍采用 扁平参数。完整映射见：v2-routing.md。

何时使用此技能

0. **第一次在此设备上使用？**如果 ~/.awwwards-mcp/preferences.json 尚不存在，请先运行 awwwards-setup 技能——它会询问一次用户偏好（结果密度、视口、截图、索引、 监控项），之后本技能会应用这些偏好。
1. 构建网站期间——编写任何 UI 代码之前，先收集参考案例并说明设计方向。
2. 独立调研——用户想了解灵感、趋势或案例（例如“给我看看深色 3D 作品集网站”）。
3. 索引与截图操作——构建本地搜索索引，或为线上 URL 获取最新截图。

灵感循环

在构建任何视觉内容之前，先执行此循环：

1. 将目标重述为具体属性。 将用户的请求转化为氛围、颜色、技术和行业术语。“营造高级感”可以转化为“深色、优雅、WebGL、代理公司作品集”等。
2. 以词汇表为依据。 如果不确定有哪些筛选条件，先调用 list_categories——它会返回所有颜色色值、奖项筛选条件（sotd、soty、nominees、获奖类别等），以及可用于搜索的标签和技术分类标识。若要浏览发现内容，get_collections 会列出精选／成员收藏集（将返回的 ref 作为 slug 传入，以获取某个收藏集的卡片），而 search_directory 会列出代理公司和工作室，并支持按国家／地区、类别和预算筛选。对于年度“年度最佳”相关问题，get_annual_* 工具涵盖六个官方年度类别（参见下文“奖项发现”）。
3. 搜索。 使用 1–3 个筛选条件调用 search_sites（例如 { color: "#404040", tags: ["3d", "portfolio"] }）。根据内嵌截图评判结果，不要只看标题。将 2–3 个候选项列入短名单。自由文本查询采用 Porter 词干提取、前缀匹配和 BM25 排序（搜索 "magazines" 会找到带有 Magazine 标签的网站，并按匹配度从高到低排列）；多词查询采用 AND 语义——两个词都必须在同一个网站中匹配。 3b. 技术库： _memory/techniques.json 按领域收录经过研究的操作方法（视频理解、运动检测、UI 结构、微交互、图像）。某个步骤需要方法时，请查阅此文件；它会通过飞轮不断扩充。
4. 综合设计方向。 选出 2–5 个候选 slug 后，使用这些 slug 和用户非空白的项目目标调用 create_design_brief。也可以附上 audience 和具体的 constraints。根据返回的共通信号、刻意选取的差异项、构建限制、证据、局限性和 交互计划，定义原创方向——不要照搬任何单一参考。只采用有证据支持的光标／悬停、滚动／固定／擦动、进入／揭示、缓动和时长提示。若交互字段为空或为 null，则视为缺少证据：不要臆造效果、时序或滚动行为。遵守计划中的 prefers-reduced-motion、内容访问和键盘访问防护要求。仅在需要可选页面分区证据时将 includeStructure: true；这可能会对具有可用实时 URL 的来源运行浏览器分析。如果有缓存的 Motion DNA，会一并纳入，但设计简报不会自动记录动态效果。
5. 如果用户指定了实时参考 URL，先对其进行整页截取。（之后也要用同样的方式截取自己的构建——比较两者）如果用户指定了某个实时网站（例如“重建 cerebrium.ai”），请先对该 URL 调用 capture_live_site，再进行其他操作，并根据整页 PNG 进行设计——从上到下查看每个区块。如果 analyze_page_structure 报告了 scrollRoot（内部滚动容器），则截取结果会改为 mode:"anchors"：返回该容器中按顺序排列的六张视口 PNG 的 JSON 路径（不包含内嵌图像）；请读取这六个文件。缓存的 Awwwards 截图只截取首屏区域（约 880×660），会隐藏首屏以下的所有内容：那些使网站结构独具特色的区块（价格、功能布局、对比区块、页脚）在截图中都不可见。对于移动端表现出色的参考网站，请传入 viewport: "mobile"；如果桌面版和移动版设计不同，则两种视口都要截取。
6. 通过后续证据获取设计 DNA。 如果设计简报提示细节证据缺失或不足，或者需要深入检查某个特定来源，请对首选项调用 get_site_details。如果返回布局漂移错误，请改为评估候选截图、使用 get_site_elements（它采用不同的解析器），或对该网站的 URL 调用 capture_live_site 进行第一手截取。对于候选短名单，get_site_details { slugs } 可提供有上限的补充信息：一次调用最多处理 10 个网站，详情精简且不含图像。
7. 构建前研究动态效果（元素视频，而非海报帧）。 对候选网站调用 get_site_elements——它会返回各元素的视频 URL（预加载器、页面转场、案例研究、关于页面等）。在编写任何动画代码之前，先下载这些视频并以每秒 1–2 帧拼成平铺图： curl -o e.mp4 <video-url> && ffmpeg -i e.mp4 -vf "fps=2,scale=480:-1,tile=6x4" -frames:v 1 tile-e.jpg， 然后读取平铺图。（完整的截取→审查→构建流程——包括需要记录什么、跳过什么、动态效果清单和构建验证——见 awwwards-motion-study 技能。）元素海报帧是单张画面——它展示布局，而不是动态效果；3D 轮播在海报帧中看起来就像漂浮的静态卡片（确实发生过这种错误复刻）。每个元素拼成一张平铺图，就能看到完整的动画过程（缓动、重叠、进入顺序）。若需要更细致地研究跑马灯动画，请用更高帧率重新平铺该视频。动态效果本身就是设计：你实现的每个参考动画都必须对应到你实际研究过的画面，且参考视频应通过 showcase/ref-motion/ 保留，作为设计的证据链。
8. 编写代码前，先说明设计方向。 用文字说明：调色板（参考中的十六进制色值）、字体氛围、布局模式、页面架构（单页还是分开的横向区块——根据步骤 4–6 研究过的参考片段来判断，不要凭习惯决定），以及技术选择；每项都应能追溯到某个参考。然后开始构建。对于网站自身的跑马灯前端功能，优先采用经过验证的模式（横向滚动章节使用 GSAP ScrollTrigger，平滑滚动使用 Lenis），而不是手写滚动计算逻辑。
9. 先验证结构，再做润色。 构建完成后，使用 capture_live_site 截取自己的构建（通过其 file:// 或提供服务的 URL），并对参考和构建都运行 analyze_page_structure。逐区块比较分区图（数量、顺序、背景和高度）。比较时使用与参考相同的视口：对于移动端表现出色的参考网站，请传入 viewport: "mobile"；如果设计存在差异，则两种视口都要截取。先修复页面分布不匹配的问题——某个区块的高度是参考的 3 倍，这是结构性错误，再怎么做像素级润色也无法弥补。匹配参考的分区结构，而不只是总高度。
10. **闭合飞轮：**在 awwwards-skills 仓库的检出副本中（已安装的技能副本不包含此开发脚本），每轮循环结束时，都要记录验证发现的问题 - node scripts/skill-memory.mjs record --skill awwwards-inspiration --phase <phase> --symptom "..." --rule "..." [--evidence path]。“没有新的发现”也是一条记录。然后，distill 会将出现 ≥2 次的规则整合到已安装副本的托管部分；recall 会在循环开始时打印这些规则。将确认的规则加入随产品发布的副本时（通过人工 PR），promote --skill awwwards-inspiration 会打印去除了本机证据路径的规则。

奖项发现

除了每日列表检索外，Awwwards 还提供年度奖项层级和更细致的获奖者筛选：

• 年度奖项（官方 API） — 对于“年度最佳网站”这类问题，先调用 get_annual_categories，然后调用 get_annual_nominees（按类别获取，以 1 req/s 的速率加载详细信息），再调用 get_annual_nominee 获取完整的结构化提名详情。这些接口涵盖六个官方年度类别。
• 每日／每月／每年／提名筛选 — 使用 search_sites，并设置 award: "sotd" | "sotm" | "soty" | "nominees"（还可设置 developer／honorable）。
• 年度获奖类别 — 使用 search_sites，并设置 award: "ecommerce" | "portfolio" | "product" | "typography" | "businessServices" | "noCode"。
• 不确定 slug？ 先调用 list_categories — 它会返回每个奖项筛选项及其标签，以及当前的技术 slug。

反模式

• 搜索词含糊且只有一个词（“现代”“好看”）— 改用具体的颜色／标签／技术／奖项筛选条件。
• 未说明设计方向就直接写代码 — 如果没有从参考中提炼出方向，这些参考就毫无价值。
• 向用户倾倒原始工具输出 — 应进行筛选：展示候选列表、选定的方向，以及原因。
• 根据缩略图或元素海报进行设计 — 缩略图仅截取 Hero 区域，海报只是视频中的单帧，两者都无法展示真实结构或动态效果。已知参考网址时，应截取整页（步骤 4）；元素带有动态效果时，应拼接该元素的视频帧（步骤 6）——切勿根据海报制作动画。
• 所有内容只用一张胶片式缩略图 — 将整段录制内容切成单张 N×N 瓷砖，会让后面的瓷砖变得很小，也难以看清动画变化轨迹。应按元素／片段分别切片，帧率设为 1–2 fps；当缓动或重叠效果很重要时，再对较短片段以更高帧率重新切片。
• 填充空白区域以匹配总高度 — 如果你的构建结果总高度与参考相同，但某个间隔／背景区域远高于参考中的对应区域，说明高度是从实际内容区块中挤出来的。比较各区域高度图，而非总高度。间隔和装饰元素应与参考中的对应区域进行度量，切勿凭空添加以消化高度。

工具参考

工具	关键参数	返回内容	注意事项
search_sites	query（自由文本搜索或按标题／标签搜索）、color（十六进制值，如 #404040）、tags（slug 数组）、technology（slug）、award（sotd|sotm|soty|nominees|developer|honorable|ecommerce|portfolio|product|typography|businessServices|noCode）、count（1–12，默认 6）、page（默认 1）、responseMode（默认 "full" 或 "compact"）	完整模式：文本网站卡片 + 每个结果的内嵌 JPEG 截图。精简模式：简洁卡片 + 请求页面中最多两张内嵌预览图。	Awwwards 只应用一个 URL 筛选条件，优先级为颜色 > 奖项 > 技术 > 第一个标签；其余条件在客户端检查（nextjs／three.js 等常见技术名称会规范化为当前有效的 slug）。获奖类别筛选仅通过 URL 验证，且始终重新抓取；提名筛选通过已持久化的提名标记验证，缓存仍新鲜时直接使用缓存。颜色搜索始终实时抓取（从不使用缓存）。按设计不提供深度分页（robots.txt）。实时请求失败时，如果有缓存则返回过期缓存。精简模式需主动启用，适用于广泛探索；评估截图时请使用默认的完整结果，筛选出候选网站后再使用详情和动效工具。
get_site_details	slug（来自 search_sites，例如 l-i-s-a）	标题、实时 URL、奖项、配色、技术、设计元素、描述、完整尺寸截图 URL；有可用截图时会内嵌显示	缓存 7 天；如果解析结果全部为空，会报错，而不是静默返回空结果。
get_site_elements	slug	带编号的元素列表（图片或视频，含视频 URL）+ 最多 8 张内嵌海报 JPEG	视频为 mp4 URL（仅内嵌显示海报）。元素数据与 get_site_details 来自同一次抓取。
list_categories	无	JSON：奖项筛选条件（含标签）、所有颜色十六进制值及筛选／标签 slug、技术 slug，以及使用指南	缓存 30 天。筛选词汇不确定时请调用此工具，包括奖项和技术 slug。
capture_live_site	url（绝对 URL）、viewport（默认 "desktop" 或 "mobile"）、scrollCapture（默认 "auto"、"anchors" 或 "viewport"）	文档滚动器：完整页面 PNG 保存至磁盘 + 内嵌图片。内部滚动器（scrollRoot）：六张按顺序排列的视口截图，以 JSON anchors[].scrollTop／file 返回，不内嵌图片；scrollCapture:"viewport" 会生成一张指定视口截图	需要可选的 playwright 依赖项（npm install -g awwwards-mcp playwright ffmpeg-static && npm exec --global -- playwright install chromium）。安装后，将 MCP 注册从 npx -y awwwards-mcp 切换为已安装的 awwwards-mcp 命令，并重启，这样截图才能从服务端自身的安装目录解析 Playwright。
analyze_page_structure	url（绝对 URL 或 file:// 路径）、maxBands（返回区段数上限，默认 40）	JSON：title、totalHeight，以及有序的区段映射（每个区段包含 index、tag、label、background、offsetTop、height、textStart（区段文本开头约 60 个字符））	需要 playwright。请对参考页面和你的构建版本都运行此工具（步骤 8），并比较区段映射，包括数量、顺序、背景和高度，切勿只比较总高度。
record_site_motion	url（绝对 URL）、frames（胶片条缩略图数量，4–36，默认 16 → 4x4 网格）	动效浏览过程的内嵌胶片条 JPEG（包含预加载停留、慢速滚动、悬停／光标交互）+ 以文本形式返回保存的 .webm 路径	需要 playwright + ffmpeg-static。运行约 30 秒的脚本化浏览流程，比截图更耗资源；仅在动效重要时使用（在静态截图基础上进一步执行）。
new_winners	award（默认 sotd，或 developer／honorable）	自上次轮询以来，当天新公布的获奖网站，以网站卡片形式返回；首次调用会建立基线并返回完整列表	按 UTC 天精确统计。每个首次发现的获奖网站，其 Elements 区块都会自动回填到 source:"site" 元素库中，无需建立图库索引，新获奖网站即可立即按元素搜索。长期监控：在会话期间定期调用，以发现刚公布的 SOTD。
watch_site	action（add|list|remove）、kind（studio|tag|url）、pattern、可选的 award、note	list：每个监控条件匹配的网站 + NEW since last check 增量；add／remove：确认信息	不会抓取内容，而是根据最新缓存的网站列表进行匹配，因此请先运行 new_winners 或 search_sites（首次 list 仅建立基线；加载列表后再次运行 list 才会报告增量）。url 监控条件使用网站 slug（例如 l-i-s-a）；studio 监控条件使用不区分大小写的子字符串。
所有图像结果都会以 MCP 图像内容块的形式返回——请查看图像，不要只阅读文本块。

在 AWWWARDS_MCP_PROFILE=v2 下，watch_site 行会变为 monitor_awards： 添加为 {request:{action:"add_watch", kind, pattern}}，列出为 {request:{action:"list_watches"}}，移除为 {request:{action:"remove_watch", kind, pattern}}——两种变更操作都需要 kind 和 pattern（v2-routing.md）。

保持最新

对于应反映当下获奖趋势的研究（趋势问题、任何关于“最新”的问题），请用 new_winners 开启会话——它会报告今日新近加冕的 SOTD/Developer/Honorable 获奖作品，并悄悄将每个获奖作品的元素纳入可搜索语料库。若要长期追踪某个工作室、 标签或特定网站，请在首次检索后添加监视项（watch_site，action: "add"， kind: studio|tag|url）；之后每次运行 new_winners / search_sites 都会刷新数据池，而 watch_site list 会报告每个监视项的新内容。 监视项不会自行抓取——它们依赖检索结果来更新。

索引与抓取操作

本地索引。 search_sites 开箱即用，但未建立索引时，受礼貌抓取限制，可搜索的深度 有限（每个筛选页面约 31 个网站）。只需构建一次索引，即可搜索数千个网站：

npx -y -p awwwards-mcp awwwards-index      # from the published package
npm run index                              # from the awwwards-mcp checkout root

• 以每秒 1 个请求的速度抓取全部约 200 个标签页面（约需 4 分钟），并写入 ~/.awwwards-mcp/ 下的 SQLite 缓存。
• 可恢复：中断后重新运行即可；已完成的页面会跳过。
• MCP 服务会在索引过期时自动在后台重新建立索引——你很少需要手动运行此操作。

实时捕获。 capture_live_site 需要先安装 playwright（见上表）。有两种用途： (1) 用户想要获取非 Awwwards 网站的截图，或想查看比缓存缩略图更新的画面；以及 (2)—— 更重要的一种——用户将某个实时网站指定为构建项目的设计参考：先捕获完整页面， 再根据图像推导页面结构（见工作流的第 4 步）。

动态捕获。 静态图像无法展示预加载器、滚动驱动的动画或转场——而大多数获奖网站 的设计恰恰围绕这些动态效果构建。当参考网站包含动态效果时，请录制下来：使用 recordVideo 启动 Playwright，等待预加载器结束（约 7 秒），然后以小步幅缓慢向下滚动 至页面底部，让摄像机捕捉每个滚动触发的动画；接着用 ffmpeg 提取帧序列 （npm i -D ffmpeg-static，约每 3 秒一帧），并读取这些帧——或者直接调用 record_site_motion：帧序列会以内联形式返回，.webm 路径则以文本形式返回。

帧序列是备用方案，不是默认方案。 首先尝试直接读取视频文件——如果你的模型支持视频输入， 观看滚动过程可以了解帧图无法体现的时序、缓动和转场效果。如果读取结果显示媒体已省略，或提示 “model does not support video input”，请提取帧序列并改为读取各帧。现成的录制脚本位于 awwwards-mcp 源码检出目录 （github.com/INSANE0777/Awwwards-mcp）， 而非此 skills 仓库，路径为 scripts/record-scrollthrough.mjs——请从该检出目录的 根目录运行（其中 playwright 和 ffmpeg-static 是开发依赖）。 已安装或通过 npx 使用的用户不会获得此脚本；请使用 record_site_motion。