Awwwards-mcp Skill 技能

技能简介

Awwwards-mcp 是一个免费开源的 MCP 服务器，为 AI 编程助手提供 Awwwards 获奖网站的设计灵感检索能力。集成该服务器后，Claude Code、Cursor 等 Agent 可以用自然语言搜索 Awwwards 上的获奖网站（如「深色 3D 作品集网站」「柔和粉彩色电商网站」），实时获取网站截图、设计 DNA（配色方案、技术栈、设计元素）和动效特征，构建起 Mobbin 风格的可视化参考闭环。无需任何 API Key，无需注册账号，完全免费使用。

核心能力

• 自然语言搜索获奖网站：支持自由文本查询，底层基于 Porter 词干算法和 BM25 排序，多词查询为 AND 语义（每个词都必须命中同一网站）
• 实时截图内联显示：搜索结果直接返回网站真实截图，无需跳出浏览器
• 设计 DNA 提取：获取任意网站的设计基因——配色方案、技术栈（React、Next.js、Tailwind 等）、设计元素（图标、字体、动效库）、获奖历史
• 页面结构分析：analyze_page_structure 工具将页面按区域（Hero、Features、Pricing 等）拆解，输出每段的高度、背景色和标签
• 动效指纹分析：get_motion_dna 捕获网站使用的动画库、ScrollTrigger 配置（触发次数、 scrub 比例）、缓动曲线和滚动模型
• 每日新获奖追踪：new_winners 工具可轮询当日新晋 SOTD（当日最佳）、Developer Award 和 Honorable Mention 站点
• 元素灵感库搜索：搜索 Awwwards 的组件灵感库（Footer、Hero、Pricing、404 等），按设计类型找参考
• 直播截图与动效录制：可选的 Playwright 截图和动效录制工具，支持桌面端和移动端视口

安装配置

环境要求

• Node.js ≥ 22.13
• 可选：Playwright（用于截图和动效录制功能）

方式一：MCP 配置文件（推荐）

在项目 .mcp.json 或 Claude Code 的 MCP 配置中添加：

{
  "mcpServers": {
    "awwwards": {
      "command": "npx",
      "args": ["-y", "awwwards-mcp"]
    }
  }
}

方式二：全局安装

npm install -g awwwards-mcp
# 然后在 MCP 配置中指向全局路径

可选依赖安装（截图/动效功能）

npx playwright install chromium

使用步骤

第一步：配置并启动 MCP 服务器

重启 Claude Code 或对应 Agent，确保 awwwards-mcp 已加载。首次使用建议先查询索引状态：

get_index_status

确认本地索引已就绪（index_count > 0）。

第二步：自然语言搜索设计灵感

在对话中描述你需要的网站类型，让 Agent 调用搜索：

search_sites:  深色 3D 作品集网站，带有玻璃拟态效果
search_sites:  柔和粉彩色电商网站，移动端优先
search_sites:  极简科技公司落地页，深色主题

第三步：获取设计 DNA

找到心仪网站后，获取完整设计 DNA：

get_site_details:  https://某网站.com

返回配色板、技术栈、设计元素列表和获奖信息。

第四步：分析页面结构或动效

对比参考站点与自身产品：

analyze_page_structure:  https://参考网站.com
record_site_motion:  https://参考网站.com

第五步：追踪每日新获奖网站

定期调用：new_winners，首次调用建立基线，后续调用报告新增站点。新晋获奖站的元素会被自动补充到元素搜索库中。

适用场景

• UI/UX 设计灵感收集：为新功能页面或品牌改版寻找设计参考
• 竞品动效分析：捕获竞品网站的动效特征（用了什么库、参数怎么配）
• 页面结构参考：分析高转化率落地页的区域布局和内容层次
• 设计系统调研：通过配色板和技术栈了解业界主流选择
• 每日灵感订阅：追踪 Awwwards 每日新获奖，保持设计视野更新

适用人群

• 前端开发者和 UI 设计师
• 使用 Claude Code、Cursor 等 Agent 进行页面开发或品牌设计的工程师
• 需要大量设计参考来构建高质量 Web 产品的团队
• 对动效细节有要求的专业交互设计师

工作原理

awwwards-mcp 维护一个本地 FTS5 全文索引（基于 SQLite），索引 Awwwards 网站的名称、标签、技术栈和描述字段。搜索时通过 BM25 算法对索引进行评分排序，返回匹配结果。对于截图和动效等富媒体功能，通过集成 Playwright 对目标页面进行实时渲染和截图。两个功能相互独立——基础搜索和 DNA 查询不依赖 Playwright，截图功能按需启用。

官方链接

• GitHub：https://github.com/INSANE0777/Awwwards-mcp
• npm：https://www.npmjs.com/package/awwwards-mcp