# Awwwards-mcp [Health: Active]

**Category:** 📐 Architecture & Design  
**Repository:** https://github.com/INSANE0777/Awwwards-mcp  
**GitHub Stars:** 355  
**Views:** 0  
**Installs:** 0  
**Upvotes:** 0  
**Directory Page:** https://allmcps.com/mcp/awwwards-mcp

## Description
Free, open-source MCP server that gives AI coding agents (Claude Code, Codex, Cursor, OpenCode, ZCode…) design inspiration from award-winning websites — search with real screenshots, pull design DNA, capture and record live sites. A Mobbin alternative. No API key.

## Tools
Capabilities this server exposes over MCP:

- **search_sites** — Search award-winning websites on Awwwards. Returns site cards with inline screenshots, live URLs, awards and tags.
- **get_site_details** — Get the design DNA of one Awwwards site: color palette, technologies, design elements, awards, description and inline screenshot. compact=true returns a token-diet summary.
- **compare_sites** — Compare the design DNA of 2–3 Awwwards sites: titles, live URLs, palettes, technologies, elements, awards and jury scores. Text only; missing details are fetched and cached. For your own build vs a reference, use verify_build instead.
- **create_design_brief** — Synthesize a cited design direction from 2–5 Awwwards references
- **get_index_status** — Read offline index status: cached site count, progress, last successful finish and error, lock state and freshness. No live requests.
- **get_index_stats** — Aggregate metrics over the LOCAL cache only (zero network). ALL-TIME: site count, element count and technology/tag frequency. WINDOWED by windowDays (default 90, 1-3650): cached details, palette colour frequency and jury score stats from at most the 500 most recently fetched detail rows, plus Motion DNA library frequency. Each metric carries coverage labelled 'locally cached subset'; windowDays/detailsCached/detailParseCap appear only on windowed metrics (sites/elements/technologies are explicitly all-time). top caps each frequency list (default 10, 1-50). Aggregates only - no site slugs or titles. Personal, non-commercial use.
- **get_site_elements** — Get the design-element highlights of one Awwwards site: component-level visuals (3D models, video content, mobile layouts, microcopy) with poster images inline and video URLs.
- **search_elements** — Search Awwwards' curated element gallery — award-grade UI components (footers, menus, loaders, transitions, micro-interactions…). Usage: pass query text and at most one of category/stack; every result links back to its source element page and parent project.
- **get_element** — Get one Awwwards element in full: title, author, built-with stack, media URLs, related elements and the parent award-winning project. Use search_elements first for ids.
- **list_categories** — List the filter taxonomy available on Awwwards: award collections, color hexes, tag/technology slugs usable with search_sites, and the annual winner categories.
- **get_annual_categories** — List the official Awwwards Annual Awards categories (Site of the Year, Agency of the Year, …) with nominee counts. Annual data comes from Awwwards' official public read-only API for personal, non-commercial inspiration use; nominee details are hydrated on request. Media URLs are reference-only — nothing is downloaded.
- **get_annual_nominees** — List nominees in one official Awwwards Annual Awards category, hydrated on demand at 1 request/second (default 10, max 20 per call). Site summaries carry siteSlug and inLocalIndex, so an agent can jump to get_site_details when the daily index has the site. Personal, non-commercial inspiration use only; media URLs are reference-only and are never downloaded.
- **get_annual_nominee** — Get one official Awwwards Annual Awards nominee in full: site entries carry date, description, designBy, country, image/video URLs; agency entries carry location, avatar, award tag counts and featured projects. Pass id (a UUID or full /api/annual/nominees/... path) or category+slug; category+slug may hydrate up to 20 uncached nominees at 1 request/second (~20s worst case), so prefer id when known. Personal, non-commercial inspiration use only; media URLs are reference-only and nothing is downloaded.
- **get_collections** — Browse Awwwards' curated and member collections. Without a slug, lists collections (paginated); with a slug, returns that collection's first page of site cards. Curated slugs look like 'brutalism'; member collections need 'owner/slug'. One page per call, 7-day local cache. Personal, non-commercial inspiration use.
- **search_directory** — Search the Awwwards directory of agencies, studios and freelancers. Filters are path-based, so one of country/category/budget applies per request; query is matched client-side over the fetched page. Returns public profile cards (name, slug, location, website, award counts) — contact details are stripped. One page per call, 7-day local cache. Personal, non-commercial inspiration use.
- **audit_url** — Audit any live page as evidence, not a grade: runtime frame/long-task/layout-thrash measurement via an installed Chrome/Edge over raw CDP (no playwright), plus static animation anti-patterns scanned over the page HTML and up to 8 same-origin CSS/JS assets (bounded: 8 assets, 2MB each, 1 request/second shared limiter, default 10s timeouts). Asset refs resolve against the final post-redirect page URL; asset redirects leaving that origin are rejected. Findings are severity-sorted before the 50-item cap, so `worst` is always present. Degrades honestly - perf carries {error} when no browser is available and the static scan reports its own error; neither suppresses the other. Personal, non-commercial use; audit only URLs you are authorised to inspect.
- **analyze_accessibility** — Collect accessibility EVIDENCE from a live page - not a WCAG pass/fail grade. Samples up to `limit` (default 100, max 200) visible text nodes with computed colour and a background composited bottom-up from the ancestor stack (colour alpha layers), then the contrast ratio (worst pairs with selector paths). Samples under any ancestor opacity group (<1) are excluded from ratios and counted in coverage.skippedOpacityGroups, never approximated; background images, gradients and pseudo-elements are not composited either, so contrast stays heuristic there. Also: image alt coverage; heading ladder (skipped levels, multiple h1); focusable/positive-tabindex counts plus outline:none stylesheet rules; unlabeled form controls; document lang/title. Result carries coverage and heuristic:true. http(s) URLs only; requires the optional playwright dependency and degrades to {error}. Personal, non-commercial use.
- **capture_live_site** — Take a fresh full-page screenshot of a live website URL using a headless browser. Requires the optional playwright dependency.
- **analyze_page_structure** — Extract a page's section band map (tag, label, background color, offset, height per band) via a headless browser. Works on live URLs and file:// paths — use it to compare a reference site's structure against your local build. compare:"mobile" also captures at 390×844 and returns mobileBands + diff {heightDelta, bandsAdded, bandsRemoved, reordered}.
- **record_site_motion** — Record a short motion-through video of a live website — preloader, scroll-triggered and hover/cursor animations — and return an inline filmstrip JPEG plus the .webm path. Requires the optional playwright and ffmpeg-static dependencies. Also writes a Motion Evidence Sheet (keyframes with census-stamped captions, diff masks, cursor-trail overlay, timeline strip) beside the filmstrip.
- **get_motion_dna** — Get the Motion DNA of a website: animation stack, ScrollTrigger/pin/scrub counts, easing vocabulary and duration distribution. Live captures append a `censusSummary` block (per-source scroll-census counts) from the same single launch. Serves the corpus first; live-captures unseen URLs (headless browser required).
- **analyze_scroll_map** — Per-element motion census of a live page: what animates, its CSS properties, duration, delay, easing, and what triggered it (GSAP ScrollTrigger, native CSS scroll()/view() timelines, data attributes, SMIL/SVG). Includes svgStrokes list for stroke draw-in effects. Runs on any URL you give it (builds, references) — does not fetch awwwards.com. Run twice (with reducedMotion) to audit prefers-reduced-motion degradation. Optional scrubProbe drives the page and returns real progress curves per scrubbed trigger. compact=true returns a token-diet summary. Every payload also carries a `choreography` block: stagger hints (hint selector/value/source, groups) distilled from GSAP tween vars and stepped delays across sibling animations.
- **analyze_hover_census** — :hover interaction census of a live page: counts hover rules, samples up to 20 interactive elements, and reports which CSS properties change on hover with transition duration and easing. Use it to reproduce micro-interactions and verify interaction-state coverage. On mobile the hover loop is skipped and a note is returned. compact=true returns a token-diet summary. Runs on any URL — does not fetch awwwards.com.
- **analyze_bundle** — Bundle forensics for a live page: fetch it once, download its script chunks (script tags, inline scripts, and modulepreload/preload-as-script hints; bounded: ≤40 chunks, 10MB, 1 request/second), save them locally, optionally de-obfuscate with webcrack if installed, and grep keywords across the code. Returns chunk paths + match lines so an agent can read the actual animation mechanism instead of guessing. Runs on URLs you are authorized to analyze — does not fetch awwwards.com.
- **build_project** — Convert a single-file exact rebuild (any local .html, e.g. the rebuild flow's full-page-exact.html) into a runnable Vite, Astro or Next.js project: sections become components, CSS splits per section, gsap timelines re-wire in the framework idiom (useEffect + gsap.context on Next), assets carried. Reads a local file and writes the project dir. Pairs with verify_build: build → convert → verify.
- **verify_build** — Compare a built site against a reference (an Awwwards winner, a client's old site, any URL): band-structure match + motion fingerprint similarity, with a pass/warn/fail verdict and evidence lines. Closes the design loop: build → verify → fix → re-verify. Reference can be an award site found via search_sites, compared read-only via compare_sites.
- **capture_component** — Serialize a page component (structure, computed-style tokens, animations) into a portable pack for rebuild tooling. Adds typography usage summaries (families/sizes/weights/line-heights/letter-spacings, top 12 each + sampled node count) and paletteSummary (colour counts from node styles + pack colors, transparent/rgba(0,0,0,0)/none filtered, top 24). compact=true returns a token-diet summary and omits both. Runs on any URL — does not fetch awwwards.com.
- **capture_pose_3d** — Capture a page's WebGL/canvas 3D pose grid: samples the largest canvas (toDataURL, viewport-screenshot fallback) at up to 10 scroll steps with per-step scroll ratios, for reconstructing scroll-driven 3D camera paths. Runs on any URL — does not fetch awwwards.com. Requires the optional playwright dependency.
- **build_pose_stub** — Render a captured pose grid (pose-grid-v1 from capture_pose_3d) as a standalone scroll-scrubbed three.js stub page: frames preloaded inline, camera path interpolated between snapshot scroll ratios, prefers-reduced-motion static fallback, optional census-derived st/pin/ease suggestions. Pure build — no page fetches, no awwwards.com access.
- **analyze_stack** — Fingerprint a page's framework (Next.js/Astro/Nuxt/Remix/SvelteKit/WordPress/Webflow/Framer), CSS framework (Tailwind/Bootstrap), and marker libs from fetched HTML — runs on any URL, one polite request, no browser
- **build_gsap_stub** — Generate a runnable GSAP+ScrollTrigger timeline stub from captured motion evidence (scroll census anims + optional pose grid camera anchors) — pure build from provided JSON, no page fetches
- **build_motion_manifest** — Build a motion.manifest.json scaffold from measured evidence: an analyze_page_structure result (bands) + an analyze_scroll_map census, with optional section overrides. Sections are mapped best-effort from each band's tag + first #id/.class token in its label (or sections[].selector) — no markup is available, so DOM initial-state hints are empty; census triggers still attribute to sections by those tokens. Returns { manifest, measured:false, censusAnims, warnings, note }; manifest.measured stays false when the census has no anims/triggers/curves. Never throws ({ error } on invalid input). Pure/offline — no page fetches.
- **search_motion** — Search captured Motion DNA records: find sites that pin sections, scrub scroll-driven animation, or run a given animation library. Corpus only — live-capture happens via get_motion_dna.
- **new_winners** — Poll today's new Awwwards winners as a delta against the previous poll: new-entrant cards since the last call (first call seeds the baseline and reports no delta). Poll daily for a winners feed; pairs with watch_site for structured monitoring.
- **watch_site** — Longitudinal watchlist over Awwwards listings: track a studio (e.g. 'ToyFight'), a tag/technology slug (e.g. 'webgl'), or a site URL-slug for changes and new entries. add/list/remove; the delta is reported by watch_site list after new_winners or search_sites refreshes the listing.

## Claude Desktop Quick Installation
Install path detected from listing signals. Uses `npx` (confidence: high):

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

## Documentation

## 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.

_Full upstream README: https://allmcps.com/mcp/awwwards-mcp/readme_