awwwards-mcp
An MCP server that finds references among Awwwards winning sites and breaks down the motion and structure of any page
- 372 ★ on the repository
- Last commit
- MIT
Broad access
Why this level
- Launches a browser, opens arbitrary links, downloads page scripts and saves them to disk
- The build_project tool writes project files to disk, and the optional auto-update installs new package versions in the background
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add mcp/awwwards-mcpDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewBroad accessThe tool can change data, run commands or handle secrets.
- Launches a browser, opens arbitrary links, downloads page scripts and saves them to disk
- The build_project tool writes project files to disk, and the optional auto-update installs new package versions in the background
This is third-party code. Review the repository files before installing.
What it does
awwwards-mcp gives an agent a reference of Awwwards winning sites. The agent searches for things like "dark 3D portfolios", sees screenshots inline and opens any site's palette, technologies and awards. The create_design_brief tool builds a brief with cited sources from two to five chosen sites. Then comes the development side. Five tools work with any link: they capture the page, break down its sections and record motion on scroll and hover. From this data the agent builds the page section by section. build_project turns the result into a Vite, Astro or Next.js project, and verify_build compares the build with the original and scores it from 0 to 100. The server installs with one npx command and needs no API key. Seven skills ship with it, among them recreate for rebuilding a page and awwwards-motion-study for motion analysis.
Who it is for. For frontend developers and designers who look for visual references or want to study how the animation on a site they like is built.
Good fit when
- Before building a landing page you need references that fit the mood and project type, for example "soft pastel online stores"
- You need to learn what a site is built with and which animation libraries it uses, with analyze_stack and get_motion_dna
- You want to record scroll and hover animation and turn it into GSAP timelines
- You want to compare your layout with a reference page and see a difference score from verify_build
- You follow new Awwwards winners through new_winners and watch_site
Not a fit when
- You need an exact copy of someone else's site to publish: rights to the design and code stay with the owners
- You need search across other galleries such as Dribbble or Behance: the database and design DNA cover Awwwards sites only
- You only want a quick look at a couple of sites: an ordinary browser is enough
Example request
Find three dark-theme 3D portfolio sites on Awwwards, compare their palettes and build a brief for my landing pageMCP
- Transport
- stdio
- Authentication
- not required
Environment variables
AWWWARDS_AUTO_UPDATE- Set to 1 to enable background self-update of the package
Limitations
Node.js 22.13 or newer is required. Page capture, motion recording and build checks need Playwright with Chromium, and motion recording also needs ffmpeg. Without a local index, search reads Awwwards with pauses between requests and sees about 31 sites per filter page. The index is built once with a separate command. The parser depends on awwwards.com markup and can break when it changes, and the awwwards-doctor skill is there to repair it. Once a day the server checks the npm registry for a new version.
How to disable. Run `claude mcp remove awwwards` and delete the skills from ~/.agents/skills or ~/.claude/skills by hand. The ~/.awwwards-mcp folder holds settings and cache and is safe to delete.
FAQ
How do I connect awwwards-mcp to Claude Code?
Run `claude mcp add awwwards -- npx -y awwwards-mcp`. No API key or account is needed, and the server is a plain stdio process. For Codex the command is `codex mcp add awwwards -- npx -y awwwards-mcp`.
Which skills ship with awwwards-mcp?
Seven: awwwards-setup, awwwards-inspiration, awwwards-motion-study, awwwards-doctor, awwwards-section-loop, recreate and motion-authoring. Copy them from node_modules/awwwards-mcp/skills into the agent's skills directory, for example ~/.agents/skills.
Can I use the server on any site beyond Awwwards?
Yes. Page capture, section mapping, scroll and hover analysis, build verification and stack fingerprinting work on any link. Database search and design DNA apply only to Awwwards sites.
What does verify_build do?
It compares your build with the source site by section map and motion fingerprint and returns a 0 to 100 score with a pass, warn or fail verdict. The domDiff parameter adds a DOM structure comparison.
How do I speed up Awwwards search?
Build the local index. With it queries run through FTS5 full-text search with BM25 ranking, and the server is no longer limited to one filter page.
Discussion
No questions or reviews yet.
Related
MCP serversInspo
inspo
An MCP server with a reference of real working sites an agent studies for design before writing an interface. Take techniques and do not copy pages
An MCP server and skill for interfaces: 31 design systems for shadcn/ui, UI and UX principles and accessibility review for agent-written code
21st.dev MCP server and plugin: search ready React/Tailwind components and logos and generate UI from your agent
Anima Agent Grid MCP
Agent Grid MCP Server Guide
Anima Agent Grid MCP server and skill: the agent builds a web app from a prompt, a website or a Figma design and publishes it
A design skill against templated AI interfaces: new pages, audits, redesigns and design extraction from a screenshot or URL
Official Webflow MCP server: CMS, pages and on-canvas elements in the Designer via the Data API
README in short
The page describes the design-inspiration-for-agents idea and a table of tools with parameters. It then covers setup for each client, Playwright installation, the seven skills, the local index and the data stance: metadata and links to the Awwwards CDN, nothing mirrored.