Log inSubmit server
A

Awwwards MCP

Search award-winning sites, inspect their design DNA, study live-page motion, and compare or verify recreated builds.

InstallRepositoryWebsite
Full README Compare alternatives Embed widget Claim this listing

Install Awwwards MCP

Pick your client, then add it in one click or paste the config.

STDIONode.js
~/Library/Application Support/Claude/claude_desktop_config.json
claude_desktop_config.json
{
  "mcpServers": {
    "awwwards-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "awwwards-mcp"
      ]
    }
  }
}

Settings → Developer → Edit Config, merge this into mcpServers, then fully quit and reopen Claude Desktop.

Install not yet sandbox-tested— we haven't run this command through our automated sandbox yet. Not a red flag; we're working through the catalog.

Overview

Awwwards-mcp connects AI coding agents to Awwwards for visual research, site metadata, screenshots, and design references. Its tools search a local FTS5 index, retrieve palettes and technology stacks, compare sites, and generate cited design briefs. Browser-based tools can capture any live URL, map page sections, record motion, inspect scroll behavior, and analyze a build against a reference. Reach for it when an agent needs concrete visual evidence or measured interaction details rather than text-only design guidance.

Use cases

  • Search award-winning references for a design direction
  • Compare site palettes, technologies, elements, and jury scores
  • Generate a cited build brief from selected examples
  • Capture a live site's structure and interaction behavior
  • Verify a recreated page against its reference

Key features

  • Natural-language Awwwards site search with screenshots
  • Design DNA, element, collection, and nominee lookup
  • Any-URL screenshots, section maps, and motion recording
  • Scroll-motion and animation-library fingerprinting
  • Vite, Astro, and Next.js recreation workflow
  • Build verification with band, motion, and performance scoring

Tools35

What Awwwards MCP lets your agent do. Expand a tool for its parameters.

Self-reported~2.3k tokens of context

Security & health

What it can reach and how reliably it runs — from our own checks, not the maintainer’s claims.

ActiveLast checked Today

Recent health check succeeded.

Adoption & maintenance

Factual signals from GitHub, npm, and our automated checks — not a rating.

GitHub stars355Stargazers on the source repository.
Last commit1d agoMost recent push to the default branch.
Tools exposed35Callable tools this server registers over MCP.

How Awwwards MCP works

What Awwwards-mcp does

Awwwards-mcp gives coding agents a searchable source of visual references from award-winning websites. Agents can query by natural language, color, tag, technology, or award type and receive site cards with screenshots. Individual site records expose design details such as color palettes, technologies, visual elements, descriptions, and award history.

The server also covers Awwwards collections, inspiration elements, agencies, annual award categories, and nominees. Element searches can locate examples such as hero sections, pricing layouts, footers, or 404 pages. Selected site data can be turned into a cited design brief for a specified project goal.

How it works

Free-text searches use a local FTS5 index with porter stemming, prefix matching, AND semantics across multiple terms, and BM25 ranking. Technology aliases can be translated to the live taxonomy slug. Cached site details and motion data are reused where available, while some tools fetch missing records from Awwwards.

Browser tools extend the workflow beyond the Awwwards catalog. Given any live URL, the server can capture a full-page screenshot, map structural page bands, record scroll and hover motion, fingerprint animation behavior, and inspect canvas states. It can also analyze a local file:// build and compare desktop or mobile structure against a reference. Motion analysis can return trigger sources, animated properties, easing, duration, scrub and pin behavior, and other details useful for rebuilding interactions.

The workflow can continue from research to implementation: agents can use the captured evidence to recreate pages section by section, produce Vite, Astro, or Next.js projects, generate GSAP timelines, and run verify_build for band, motion, and performance scoring.

Tools and capabilities

  • search_sites searches by free text, color, tag, technology, or award type, with full or compact responses.
  • get_site_details returns a site's design DNA, including palette, stack, elements, awards, and description.
  • compare_sites compares two or three sites using design DNA and jury scores.
  • create_design_brief produces Markdown and versioned JSON from selected site slugs and a project goal.
  • get_site_elements, search_elements, and get_element expose component-level visual references and media URLs.
  • get_collections, search_directory, get_annual_categories, get_annual_nominees, and get_annual_nominee browse related Awwwards data.
  • capture_live_site creates desktop or mobile screenshots of any URL.
  • analyze_page_structure maps page sections and can report desktop/mobile differences.
  • record_site_motion, get_motion_dna, and analyze_scroll_map document animation behavior and scrolling mechanics.
  • get_index_status and get_index_stats report local cache state and aggregate metrics.

Limitations and notes

The catalog and aggregate statistics rely on local cached data, with coverage labeled as a cached subset for windowed metrics. Collection, directory, and annual-award data are intended for personal, non-commercial inspiration use. Annual-award media URLs are reference-only, and nominee retrieval may be rate-limited.

Screenshot, structure, and motion features require Playwright. Motion recording also requires ffmpeg-static. Heavy pages use load and settling behavior, with an optional network-idle strategy. Capture tools operate on supplied URLs, while structure analysis also accepts local files. Awwwards search and metadata access do not require an API key.

Read the full README View source on GitHub

Reviews

No reviews yet — be the first to share how it worked for you.

Frequently Asked Questions about Awwwards MCP

Awwwards-mcp is an MCP server that connects AI coding agents to Awwwards and live websites. Its main tools search award-winning sites, retrieve screenshots and design DNA, capture page structure, record motion, analyze scroll behavior, create design briefs, and verify recreated builds.

Installation details are not included here. The server's browser-based capture features require Playwright, and motion recording additionally requires ffmpeg-static.

Yes, Cursor is named as a supported AI coding client. The server provides Cursor with tools for Awwwards search, visual references, live-site capture, motion analysis, and build verification.

Yes, its capture, structure, motion, and verification tools accept any URL. Agents can screenshot a live page, map its sections, census its motion, inspect scroll behavior, and compare a recreation with the original.

Related MCP servers

All in Architecture & Design All alternatives
Add a badge to your READMEShow it’s listed — live SVG, Markdown or HTML.

AllMCPs Directory Badge

Full Badge Customizer

Showcase your server listing on GitHub or your project documentation. Embed this dynamic SVG badge to highlight official listing status and live engagement.

Badge Style:
Live Dynamic SVG PreviewAwwwards MCP AllMCPs Directory Badge
Markdown (GitHub README)
[![AllMCPs](https://allmcps.com/api/badge/awwwards-mcp?style=directory)](https://allmcps.com/mcp/awwwards-mcp)
HTML Embed
<a href="https://allmcps.com/mcp/awwwards-mcp"><img src="https://allmcps.com/api/badge/awwwards-mcp?style=directory" alt="Awwwards MCP on AllMCPs" /></a>