ClaudeMap

awwwards-mcp

A free MCP server that hands your agent the Awwwards archive as design inspiration — search by color, tag or tech, see screenshots inline, pull any site's design DNA.

MCP Serversmcpdesigninspirationscreenshotsplaywright
Visit projectINSANE0777/Awwards-mcp

awwwards-mcp gives coding agents a Mobbin-style visual reference loop over award-winning websites. Four core tools cover search and inspection: search_sites (color, tags, technology, award type or free text over a local FTS5 index with BM25 ranking — porter-stemmed, prefix-matching, multi-word AND semantics), get_site_details (palette, technologies, elements, awards), get_site_elements (component-level visuals with inline posters) and list_categories (200+ tags, 27 colors). Three optional Playwright-powered tools capture the live web: full-page screenshots (desktop 1440×900 or mobile 390×844), a section band map of any page, and a motion filmstrip of scroll and hover animations. Ships as npm package awwwards-mcp v1.0.0 (Node ≥ 22.13, no API key, no account); you build the local index yourself with the bundled indexer (~31 sites per filter page) and it re-indexes in the background once older than 7 days. MIT.

What it does

  • Natural-language design search over Awwwards winners: “dark 3D portfolio sites” returns real screenshots inline, ranked by BM25 on a local FTS5 index
  • Design DNA per site: palette, tech stack, design elements and award history; component-level visuals per element
  • Optional live-capture trio (Playwright): full-page screenshots, section band maps, and motion filmstrips of animations — desktop or mobile viewport
  • Zero-cost setup: npm package, no API key or account; daily update check with opt-in background self-update (AWWWARDS_AUTO_UPDATE=1)

When to use it

Front-end work that starts from “make it look like the best of the web”: collecting references before a redesign, pulling a competitor's palette and section structure, or letting the agent compare your build's band map against an award-winning reference.

Getting started

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

# needs Node >= 22.13; build the local index once (bundled indexer):
npx -y -p awwwards-mcp awwwards-index
# optional live-capture tools need Playwright (+ ffmpeg-static for motion)

Things to know

The index is yours to build: it scrapes Awwwards filter pages (~31 sites per page), so first indexing takes a while and re-indexes run in the background when the index is older than 7 days. The optional live-capture tools need Playwright installed (plus ffmpeg-static for motion recording) — they are not part of the base server. Screenshots and design DNA are reference material, not license to copy someone's design wholesale. MIT.

Repository

INSANE0777/Awwards-mcp

Charted

Related on the map

  • Blitz Strike

    MCP Server

    A penetration-testing methodology delivered as one MCP server: BLITZ maps the attack surface, EAGLE-EYE traces source-to-sink, STRIKE live-verifies every finding before it is reported.

    • mcp-server
    • security
    • pentest
    • methodology
    View

  • Ripwire

    MCP Server

    Red Hat's "ripgrep for AI context" — a C++23 zero-dependency CLI that also speaks MCP.

    • mcp
    • code-context
    • cli
    • red-hat
    View

  • Deja Vu

    MCP Server

    One shared session memory for 25+ coding agents — Claude Code, Codex, and Cursor finally remember the same project.

    • mcp
    • memory
    • cross-agent
    • context
    View