ClaudeMap

awwwards-mcp

一个免费的 MCP 服务器,把 Awwwards 案例库变成 agent 的设计灵感来源——按颜色、标签、技术栈搜索,内联看截图,抽取任意站点的设计 DNA。

MCP 服务器mcpdesigninspirationscreenshotsplaywright

awwwards-mcp 给编程 agent 接上一条 Mobbin 式的视觉参考回路,素材是获奖网站。四个核心工具覆盖搜索与拆解:search_sites(按颜色、标签、技术、奖项类型或自由文本查询,走本地 FTS5 索引加 BM25 排序——porter 词干化、前缀匹配、多词 AND 语义)、get_site_details(色板、技术栈、设计元素、获奖史)、get_site_elements(组件级视觉与内联海报图)与 list_categories(200+ 标签、27 种颜色)。另有一个可选的 Playwright 三件套抓取活网页面:整页截图(桌面 1440×900 或移动 390×844)、任意页面的区块分布图、滚动与悬停动画的连续帧。npm 包 awwwards-mcp v1.0.0(Node ≥ 22.13,免 API key、免账号);本地索引用自带的索引器自己建(每个筛选项约 31 个站点),索引超过 7 天会在后台自动重建。MIT。

它做什么

  • 对获奖网站做自然语言设计搜索:「dark 3D portfolio sites」直接内联返回真实截图,按本地 FTS5 索引的 BM25 排序
  • 每个站点的设计 DNA:色板、技术栈、设计元素与获奖史;每个元素还有组件级视觉图
  • 可选的活体抓取三件套(Playwright):整页截图、区块分布图、动画连续帧——桌面或移动视口都行
  • 零成本上手:npm 包安装,免 API key 免账号;每天检查一次更新,可选用 AWWWARDS_AUTO_UPDATE=1 打开后台自更新

什么时候用

一切从「做成世界级网站的样子」开始的前端工作:改版前收集参考、抽竞品的色板与区块结构,或让 agent 把你页面的区块分布图与获奖参照逐段对比。

如何上手

claude mcp add awwwards -- npx -y awwwards-mcp

# 需要 Node ≥ 22.13;先用自带索引器建一次本地索引:
npx -y -p awwwards-mcp awwwards-index
# 可选的活体抓取工具需要 Playwright(录制动画另需 ffmpeg-static)

注意事项

索引要自己建:它刮削 Awwwards 的筛选页(每页约 31 个站点),首次建索引需要时间,索引超过 7 天后会在后台自动重刷。可选的活体抓取工具要另装 Playwright(录制动画另需 ffmpeg-static)——不属于基础服务器。截图与设计 DNA 是参考素材,不等于可以整体照搬别人的设计。MIT。

代码仓库

INSANE0777/Awwards-mcp

收录日期

地图上的相关资源

  • Blitz Strike

    MCP 服务器

    把渗透测试方法论装进一个 MCP server:BLITZ 摸清攻击面,EAGLE-EYE 追 source-to-sink,STRIKE 对每条发现先实测再上报。

    • mcp-server
    • security
    • pentest
    • methodology
  • Ripwire

    MCP 服务器

    Red Hat 出品的「AI 上下文版 ripgrep」——C++23 零依赖 CLI,同时讲 MCP。

    • mcp
    • code-context
    • cli
    • red-hat
  • Deja Vu

    MCP 服务器

    让 25+ 个编码 agent 共享同一份会话记忆——Claude Code、Codex、Cursor 终于记得同一个项目。

    • mcp
    • memory
    • cross-agent
    • context