awwwards-mcp: Let AI Agents Find Design Inspiration from Award-Winning Websites

Who It's For

• Developers or designers who want their AI coding assistant (Claude Code, Cursor, Codex, OpenCode, ZCode, etc.) to pull design inspiration directly from Awwwards award-winning sites: search sites by color, tags, tech stack, award type, or free text, complete with real screenshots — a viable alternative to tools like Mobbin.
• Prerequisite: Node ≥ 22.13 (check with node -v). No API key and no account registration required.
• When it's not a fit: the evidence does not cover deployment beyond Windows/macOS/Linux or offline usage; these conditions are unconfirmed. It's also not suitable if your environment disallows pulling and running third-party npm packages via npx.

First Try in 3 Minutes

Recommended main path: run this stdio MCP server via npx — no separate installation needed.

1. Confirm node -v is ≥ 22.13.
2. If you use Claude Code, just run:

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

1. If your client reads a generic mcpServers JSON config (e.g., Claude Desktop, Cursor, Windsurf, Gemini CLI, Cline, Continue), add the following to your config:

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

1. After restarting or refreshing your client, call the low-risk read-only tool search_sites once, e.g., have it search a few sites by color or award type. Observable success signal: search results for award-winning sites are returned with inline screenshots.

For your first attempt, stick to query-type tools like search_sites, get_site_details, get_site_elements, and list_categories. Read-only only means no write operations are executed — it does not mean zero risk, nor that nothing goes online: the search itself accesses Awwwards data. The three dynamic capture tools (capture_live_site, analyze_page_structure, record_site_motion) have explicit local side effects: they require installing Playwright first (npm install -g playwright && npx playwright install chromium), and record_site_motion additionally resolves the ffmpeg-static package. Don't run these on your first attempt.

Use Cases

Use case 1: Find visual references for a project. Scenario: you're building a dark-themed landing page and want to see similar award-winning designs. How: in a connected client, call search_sites with a color or free-text query. Expected result: a list of matching award-winning sites with inline screenshots; you can then use get_site_details to inspect a specific site.

Use case 2: Break down a site's design structure. Scenario: you want to study the layout and component approach of an award-winning site. How: first find the site with search_sites, then call get_site_elements to extract its design elements; call list_categories if you need more category information. Outputs up to this point are confirmed by evidence; if you need full-page screenshots or structure analysis, Playwright must be installed first — that's an extra step with local writes.

Limits of Use

• The tools fall into two groups: search_sites, get_site_details, get_site_elements, and list_categories are query-type; capture_live_site, analyze_page_structure, and record_site_motion are Playwright-based dynamic capture tools that require an extra global installation and write to your local environment (installing Chromium, resolving ffmpeg-static).
• The server runs a third-party npm package via npx; the first run downloads the package code — evaluate this yourself.
• Not covered by the evidence: whether there is authentication, rate limiting, where screenshots are stored, and the impact of the dynamic capture tools on target sites. All of these are unconfirmed — which does not mean they don't exist.
• Officially stated: no API key or account needed; minimum Node version is 22.13.