Awwwards MCP Skill 技能

技能简介

Awwwards MCP 是一款免费、开源的 MCP（Model Context Protocol）服务器，为 AI 编程助手提供 Awwwards 获奖网站设计灵感搜索能力。它让 AI Agent 可以在自然语言查询后看到真实截图、内联设计 DNA（配色、字体、技术栈、奖项历史），是 Mobbin 风格视觉参考循环的开源替代方案，无需任何 API Key 或账号即可使用。

核心能力

• 自然语言搜索：用「深色 3D 作品集网站」「柔和粉彩电商」等自然语言查询获奖网站，支持多词 AND 语义搜索
• 真实截图内联显示：搜索结果直接展示网站截图，无需 Agent 自行访问
• 设计 DNA 提取：获取任意网站的完整设计基因：配色板、技术栈、设计元素、奖项历史和详细描述
• 组件级视觉：提取网站每个组件的视觉元素（3D 模型、视频内容、移动端布局、微文案等）
• 200+ 标签分类：200+ 标签和 27 种颜色分类，支持精细化筛选
• 可选截图与动效录制：capture_live_site（新鲜全页截图）、analyze_page_structure（页面结构分析）、record_site_motion（滚动/悬停动效录制）
• 无 API Key：所有数据来自 Awwwards 公开页面，无需注册或付费

安装配置

Claude Code

'''bash claude mcp add awwwards -- npx -y awwwards-mcp '''

Codex CLI

'''bash codex mcp add awwwards -- npx -y awwwards-mcp '''

OpenCode

'''json { "$schema": "https://opencode.ai/config.json", "mcp": { "awwwards": { "type": "local", "command": ["npx", "-y", "awwwards-mcp"] } } } '''

其他 MCP 兼容客户端

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

可选依赖（用于截图和动效录制）：

'''bash npm install -g playwright && npx playwright install chromium '''

使用步骤

1. 安装 MCP 服务器：根据上方的安装配置，选择对应 AI 工具的命令执行
2. 自然语言搜索：向 AI 助手描述你需要的网站风格，如「找深色 3D 作品集网站」
3. 查看截图与设计 DNA：Agent 返回带真实截图的网站列表，可进一步查询任意网站的设计 DNA
4. 提取组件级视觉：对感兴趣的网站调用 get_site_elements 获取组件级视觉素材
5. 可选：录制动效：对目标网站调用 record_site_motion 获取滚动/悬停动效视频

适用场景

• UI/UX 设计参考：在做新功能设计时搜索同类型优秀案例
• 前端开发参考：了解当前行业主流技术栈和交互模式
• 品牌视觉调研：分析竞品或行业标杆的配色和视觉语言
• 设计走查：用 award-winning 网站结构对照检查自己的产品页面

适用人群

• UI/UX 设计师和产品经理
• 前端开发者
• 需要设计灵感的 AI 编程助手（通过 MCP 集成）

工作原理

Awwwards MCP 在 npm 注册表发布，每次启动时检查是否有新版本（每天最多一次）。服务器维护一个本地索引，包含 Awwwards 网站的截图、配色、标签和技术栈数据。查询时，服务器在本地 FTS5 索引上执行 BM25 语义排序，返回匹配网站的截图和元数据。需要新鲜截图或动效时，才调用 Playwright 访问目标网站。

官方链接

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