Awwwards Inspiration 是一个面向网站设计与前端开发的设计参考技能，依托 awwwards MCP 服务器，把获奖网站整理成可搜索的资料库，其中包含站点截图和逐站点的设计信息。它用来让设计决策建立在真实获奖案例上，避免凭直觉猜测。
主要能力
- 站点搜索：search_sites 支持自由文本，以及颜色（如 #404040）、标签、技术和奖项等过滤条件；计数范围为 1–12，支持分页。
- 站点详情与元素：get_site_details 返回标题、线上 URL、奖项、配色、技术、设计元素、描述和全尺寸截图 URL；get_site_elements 返回带视频 URL 的编号元素列表和海报图，用于研究动效。
- 筛选词表：list_categories 返回全部奖项过滤项、颜色十六进制值、标签与技术 slug。
- 奖项发现：get_annual_categories、get_annual_nominees、get_annual_nominee 覆盖六个官方年度类别；search_sites 支持 sotd、sotm、soty、nominees 及电商、作品集、字体等年度获奖类别。
- 实况捕获与分析：capture_live_site 生成整页 PNG，或在内层滚动容器下生成六张有序视口截图；analyze_page_structure 输出页面分带图，包含标签、背景、偏移、高度和文本开头；record_site_motion 生成动效胶片条。
- 新获奖监控：new_winners 获取当日新晋获奖站点；watch_site 可按工作室、标签或 URL 建立监视，并报告新增变化。
- 设计简报：create_design_brief 根据入围站点和项目目标，汇出共享信号、差异点、构建约束、证据与交互计划。
使用方式
首次使用某台机器时，如果 ~/.awwwards-mcp/preferences.json 不存在，需先运行 awwwards-setup 技能记录偏好。随后按“灵感循环”执行：先把需求转成具体属性（情绪、颜色、技术、行业），再用 list_categories 确认筛选词，执行 1–3 个过滤条件搜索，依据内嵌截图挑选 2–3 个候选；用 create_design_brief 综合设计方向，避免照抄单一参考。如果用户指定了具体的线上站点，应先 capture_live_site 整页捕获后再设计。研究动效时应对元素视频按 1–2 fps 平铺成图后再写动画代码。构建完成后，对参考站与自建站分别运行 analyze_page_structure，逐段比较分带图，而非仅比较总高度。
环境与限制
capture_live_site、analyze_page_structure、record_site_motion 需要可选的 playwright 依赖，录制动效还需 ffmpeg-static；安装后需把 MCP 注册从 npx -y awwwards-mcp 改为已安装的 awwwards-mcp 命令并重启。Awwwards 每个 URL 只应用一个过滤条件，优先级为颜色 > 奖项 > 技术 > 首个标签，其余条件在客户端校验；不支持深度分页。缓存站点截图仅为首屏裁剪，元素海报只是单帧，二者都不能反映真实结构与动效。在 AWWWARDS_MCP_PROFILE=v2 下，部分工具名与调用结构不同（如 search_references、get_reference、browse_awards、monitor_awards、capture_page、inspect_page），映射详见 v2-routing.md。技能中的记忆记录脚本仅存在于仓库检出环境，安装包不包含该开发脚本。
适用场景
在编写 UI 代码前收集设计参考、按风格或技术搜索灵感案例、研究获奖站点的动效与页面结构、构建后对照参考做结构校验，以及跟踪新获奖作品。