Awwwards MCP: how to search for references and check web design

When a designer asks an AI agent to land “in the spirit of a good digital portfolio,” the agent often starts with too general associations. It can produce a recognizable grid, fashionable gradient, and set of decorative effects, but it can’t explain where the decisions came from, how they behave on a mobile screen, or what parts can be translated into a particular product. </ p. >>

Awwwards MCP is a new independent open-source project that connects the search layer using Awwwards public materials to the agent. It is not a product of Awwwards and does not give the right to copy other sites. Its value lies in another: making the study of references an observable part of the work, rather than a hidden background for the first prompt. >

What does the project do?

>

The server is run locally through a standard MCP channel. According to README, it needs Node.js 22.13 or later; basic search does not require an API key and an account. The agent receives several tools: a search for sites, a card with a palette, technologies, elements and rewards, as well as a selection of visual elements of the page.

>

>
• search sites searches by tags, colors, technologies, reward type and free query. For a local index, the author uses FTS5 and BM25 ranking, so a multi-word query should find pages where the entire wording matches, rather than a random one word.
• get site details returns "design DNA": the palette, technologies, elements, description and rewards of the selected site.
• get site elements provides individual visual snippets such as mobile layout, 3D model, video or microcopywriting. >
• capture live site, analyze page structure and record site motion work with arbitrary live URLs. They need local Playwright and ffmpeg to record motion. > </ >>

  Basic SERPs are based on Awwwards public pages; README describes a limit of one request per second and local caching. A separate index of tags can be assembled: the author states that it runs about 200 pages in a few minutes, saves the SQLite cache and updates it in the background when it is older than seven days. This speeds up the research, but does not make the data instantaneous and does not negate manual verification of a particular site. </ p. >>

  Practical scenario: from reference to solution

  >

  The most useful use of Awwwards MCP is not as a “do like this site” generator, but as a short research cycle with clear checkpoints.

  >

  >

• Describe the direction. Instead of “make a premium” set the observed parameters: for example, “editorial catalog for the architectural bureau, calm grid, light background, large grotesque, without a constant scroll effect”. So the agent is not looking for a style label, but a set of verifiable features. >
• Find 5-8 different candidates. Requests like editorial architecture light typography or minimal ecommerce mobile layout are more useful than one name. Do not limit yourself to the first place of issue: matching tags does not prove that the site is suitable for the product. >
• View visual evidence. The designer needs to check the screenshot, mobile layout, motion and long text behavior. The palette and technology of the site are auxiliary data, not the basis for copying the interface. >
• Translate observations into your own rules. For example: “on the first screen one semantic accent”, “cards have no shadow”, “in the mobile version, navigation is folded into one column”, “in motion there is no critical information”. This is a brief for the project, not a list of other people's effects. >
• Create and check your screen. analyze page structure can help to compare the sequence of semantic bands in the reference and prototype, and the motion record - to notice too sharp transitions. The result should still pass the usual UX, accessibility and performance review. > >

  This process is particularly useful for portfolios, promotional pages, brand campaigns, and early visual research. In the product team, it helps to negotiate composition more quickly, but does not replace the study of audience, content, analytics and design systems. </ p. >>

  What to check before installation>

  The project has an MIT license, but this applies to its source code, not to the materials of the sites it shows. README itself separately says that the screenshots and content belong to Awwwards and the authors of the works, and commercial use should be checked against the rules of the site. You can not turn the selection of references into unlimited scraping, reposting screenshots or the task of “recreate the site one by one”. </ p. >>

  There is a common supply chain risk. The command that runs npx -y awwwards-mcp executes a third-party packet. For a constant workflow, it is more reasonable to fix a specific version, study package. json and dependencies, and Playwright and ffmpeg install only where it is really needed. README explicitly states that motion recording and page capture are optional features.

  >

  Another frontier is privacy. The tool can open any transmitted URL in the browser. Do not send it to closed admins, client offices or pages with personal data until the team has separately determined where screenshots, videos and local cache will be stored. >

  What it doesn't decide

  >
  > Does not choose the art directorate for the designer and does not know the business context of the product. > Does not verify the rights to use illustrations, fonts, videos and brand reference solutions. > Does not prove the availability or performance of the final site: the bar structure and screenshot do not replace tests with a keyboard, screen reader, real devices and a slow network. > Does not guarantee stability: Public pages and their HTML may change, and the index may lag behind the source. > </ >>

  Minimum Command Regulations

  >

  To prevent a tool from becoming a visual copying machine, three rules are enough. First, to each collection, add a written explanation: what properties of the reference we take and why. Second, keep only those screenshots and recordings that are necessary for internal discussion, with the source specified. Third, before transferring to development, turn observations into their own tokens, grids, states and acceptance criteria - without someone else's code, logos and visual assets. >

  In this framework, Awwwards MCP looks like a useful tool for the research phase: it reduces manual search, gives the agent real visual evidence and leaves the solution to the person. But you need to release the result according to the same rules as any interface: check the content, rights, availability, speed and compliance with the product. </ p. >>

  Sources

  >
  >
  • INSANE0777/Awwards-mcp - README, source code and MIT License, retrieved September 20, 2026. >
  • Awwwards Terms of Service. > </ >>

    The editors did not install or launch Awwwards MCP in the production circuit. The description of opportunities is based on the public README and the project repository. p. >>