awwwards-mcp
Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@awwwards-mcpFind dark 3D portfolio sites and summarize their design DNA."
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
awwwards-mcp
Free, open-source MCP server that gives AI agents design inspiration from Awwwards — the Mobbin-style visual reference loop, sourced from the web's best award-winning websites.
Your agent searches in natural language ("dark 3D portfolio sites", "soft pastel e-commerce"), sees real screenshots inline, and can pull the design DNA of any site: color palette, tech stack, design elements, award history.
Tools
Tool | What it does |
| Search by color, tags, technology or award type. Returns site cards with inline screenshots. |
| Full design DNA for one site: palette, technologies, elements, awards, description. |
| Component-level visuals for one site: each element's poster image inline (3D models, video content, mobile layouts, microcopy…) + video URLs. |
| Every filter the agent can search by (200+ tags, 27 colors). |
| Optional: fresh full-page screenshot of any live URL. Waits for |
| Section band map of any page (live URL or local file:// build): tag, background, offset, height per band. Compare a reference site's structure against your build. Same heavy-site-friendly wait ( |
| Optional: short motion-through video of a live URL — preloader, scroll-triggered and hover/cursor animations. Returns an inline filmstrip JPEG plus the saved .webm path. (needs playwright + ffmpeg-static). |
Related MCP server: A1 Gallery MCP Server
Setup
Any MCP-compatible coding agent can use awwwards-mcp — no API key, no account.
Requires Node ≥ 22.13 (node -v to check). Pick your agent:
Claude Code
claude mcp add awwwards -- npx -y awwwards-mcpCodex CLI (ChatGPT desktop app and the IDE extension share this config)
codex mcp add awwwards -- npx -y awwwards-mcpor in ~/.codex/config.toml (project-scoped: .codex/config.toml):
[mcp_servers.awwwards]
command = "npx"
args = ["-y", "awwwards-mcp"]OpenCode (opencode.json — note the command is an array)
{
"$schema": "https://opencode.ai/config.json",
"mcp": {
"awwwards": {
"type": "local",
"command": ["npx", "-y", "awwwards-mcp"]
}
}
}ZCode (~/.zcode/cli/config.json — note servers nest under "mcp": { "servers": ... })
{
"mcp": {
"servers": {
"awwwards": { "command": "npx", "args": ["-y", "awwwards-mcp"], "env": {} }
}
}
}Claude Desktop / Cursor / Windsurf / Gemini CLI / Cline / Continue — anything
reading the common mcpServers JSON shape (e.g. ~/.claude/claude_desktop_config.json
or ~/.gemini/settings.json):
{
"mcpServers": {
"awwwards": { "command": "npx", "args": ["-y", "awwwards-mcp"] }
}
}Anything else — awwwards-mcp is a plain stdio MCP server: point your client
at npx -y awwwards-mcp and it works. To pin a version, use
npx -y awwwards-mcp@1.0.0.
pi coding agent has no built-in MCP by design — it uses skills and extensions instead. Two options:
Install the awwwards-inspiration skill (below). pi reads skills from
~/.pi/agent/skills/or~/.agents/skills/(the latter is shared across agents following the Agent Skills standard). The skill teaches the workflow; for it to reach the live data, add an MCP-supporting pi extension, or run the queries in another agent and paste results.Skip MCP entirely: ask pi to build you a small CLI wrapper around awwwards.com, or use a shared skills directory (
~/.agents/skills/) so the same skill file serves pi and every other agent.
Optional full-page captures (needed by capture_live_site,
analyze_page_structure, record_site_motion):
npm install -g playwright && npx playwright install chromiumrecord_site_motion additionally uses ffmpeg; it resolves the ffmpeg-static
package automatically if present.
Skills
This package ships an agent skill that teaches the inspiration workflow — search, judge from screenshots, pull design DNA, state a design direction — using the awwwards MCP tools. Any agent that follows the Agent Skills standard can load it; copy it into your agent's skills directory:
npm install awwwards-mcp
mkdir -p ~/.agents/skills && cp -r node_modules/awwwards-mcp/skills/awwwards-inspiration ~/.agents/skills/Agent | Skills directory |
Claude Code |
|
pi |
|
ZCode |
|
Agent Skills-standard agents |
|
Windows: run this from Git Bash, or copy
node_modules\awwwards-mcp\skills\awwwards-inspiration manually.
Indexing (recommended)
search_sites works out of the box, but its depth is limited by polite live
scraping (~31 sites per filter page). Build a local index once and searches
draw from thousands of award-winning sites instantly:
npx -y -p awwwards-mcp awwwards-index # once published
# or, from a local checkout of this repo:
npm run indexCrawls all ~200 tag pages at 1 request/second (~4 minutes) into the local SQLite cache at
~/.awwwards-mcp/.Resumable: interrupt it and re-run — completed pages are skipped.
The MCP server re-indexes automatically in the background whenever the index is older than 7 days (never blocking your session).
Site details (palettes, tech stacks) are still fetched on demand and cached for 7 days.
How it works
Live, polite scraping of awwwards.com public pages (max 1 request/second, robots.txt-compliant paths only, cached 7 days in SQLite at
~/.awwwards-mcp/).Screenshots are served from Awwwards' own CDN (880×660), cached on disk.
No API key, no account, no cost.
Ethics & terms
This tool fetches publicly available pages for personal design-inspiration use, at human-ish request rates, honoring robots.txt. Awwwards' screenshots and content remain the property of Awwwards and the credited creators — don't bulk-scrape, redistribute, or republish them. If you use this commercially, review awwwards.com's terms yourself.
Built with awwwards-mcp: a real portfolio
This project's own showcase — showcase/afjal-portfolio, open it locally — is a personal portfolio built through the full inspiration loop this MCP enables, using nothing but the server's tools. View it raw at github.com/INSANE0777/Awwards-mcp/tree/main/showcase/afjal-portfolio.
The loop, as it ran (skill used: awwwards-inspiration, shipped in this
package — its 8-step structure-before-pixels doctrine drove every step):
list_categoriesgrounded the filter vocabulary (two combined-filter searches came back empty first — that's what step 2 of the skill is for).search_sites{ award: "sotd", tags: ["portfolio", "typography"] }returned 25 proven portfolios with inline screenshots — shortlist judged from the images, not titles.get_site_detailson the pick, Gionatan Nese '26 (SOTD, jury 7.32) — design DNA: palette#000/#FFF, serif statement-over-canvas, tiny metadata rhythm.get_site_elementspulled component-level anatomy: the About, Creative Space and 404 posters defined the hero statement, floating-card cluster, and black footer inversion the build previews.capture_live_sitecaught the live reference's scattered-card layout first-hand, and later caught two real bugs in the build: invisible.revealcontent in full-page captures (fixed with progressive enhancement — content visible without JS), and a cache gotcha (re-captures of the samefile://URL return the cached PNG; append?v=2).analyze_page_structureran on BOTH the reference and the build — band maps compared, never just total height.record_site_motionfilmed the finished build: the work-index hover inversion and backdrop parallax are on camera in the returned filmstrip.
Prompt count: 1 — the user's ask to "use our mcp and take inspiration, build a portfolio". Every step after that was the skill + tools driving autonomously. Six MCP calls powered the whole design phase; zero design decisions trace to nothing.
What the verification loop caught — proof the structure-before-pixels doctrine is load-bearing:
Full-page captures initially showed three blank sections:
.revealanimation state vs capture's no-scroll reality (a tooling interplay worth a post-merge capture wait, noted in the backlog). The build now ships content-visible-without-JS progressive enhancement — one lesson from the loop feeding back into every future build.Band-map compare kept the reference's white-canvas → cluster → index → statement → black-band rhythm instead of drifting on section heights.
Contributing
PRs welcome! The project especially needs parser-drift fixes — when live awwwards.com markup changes, a fresh HTML snapshot attached to an issue often becomes the new test fixture and the fastest merged PR. See CONTRIBUTING.md for the full guide:
Development setup & project layout (offline fixture-tested, no network in tests)
How to create a PR: fork →
fix//feat//docs/branch → typecheck + tests → PR templateThe politeness constraints new code must keep (1 req/s, robots.txt paths, light runtime deps)
Bugs and feature ideas start as issues with templates. Security problems go privately — see SECURITY.md. By participating you agree to the Code of Conduct.
Development
npm install
npm test # offline unit tests against committed HTML fixtures
npm run smoke # manual live smoke test against awwwards.com
npm run build # compile to dist/MIT — see LICENSE.
Available Tools
7 toolsanalyze_page_structureA
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.
| Name | Required | Description | Default |
|---|---|---|---|
| url | Yes | Absolute URL (https:// or file://) of the page to analyze | |
| maxBands | No | Cap on returned bands | |
| waitStrategy | No | 'load' + settle works on heavy sites; 'networkidle' waits for total quiet | load |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries the full behavioral burden. It does disclose the execution mechanism (headless browser), supported URL schemes, and output shape, but it omits side effects, failure behavior, and any caution about hitting live URLs.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Two sentences with no filler: the first defines what the tool extracts and how, the second gives scope and purpose. Key information is front-loaded and every sentence earns its place.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
The schema fully documents all parameters, the description names the output fields, and the use case is explicit, so an agent has enough to invoke it correctly. Missing boundary conditions, such as when to prefer another sibling or known limitations, prevent a perfect score.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, so the schema already documents url, maxBands, and waitStrategy, including the file:// option. The description repeats some of that context and adds the comparison use case, but adds no parameter-level meaning beyond the schema.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly names the action and resource: 'Extract a page's section band map' and lists the specific fields returned (tag, label, background color, offset, height). It does not explicitly differentiate this from siblings like capture_live_site or get_site_elements, so it misses the top score.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
It gives a concrete use case — comparing a reference site's structure against a local build — and notes it works on both live URLs and file:// paths. It does not state when to avoid this tool or name an alternative, but the context is clear enough for basic routing.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
capture_live_siteA
Take a fresh full-page screenshot of a live website URL using a headless browser. Requires the optional playwright dependency.
| Name | Required | Description | Default |
|---|---|---|---|
| url | Yes | Absolute URL of the site to capture | |
| waitStrategy | No | 'load' + settle works on heavy sites; 'networkidle' waits for total quiet | load |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the full burden. It usefully discloses the Playwright dependency and that the capture is live and fresh, but it does not state whether the operation is read-only, how failures surface, or what the tool returns.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
A single front-loaded sentence states the action, target, and mechanism, plus the necessary dependency warning. There is no filler or redundant restatement of the tool name.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a simple two-parameter screenshot tool, the description covers the action, prerequisite, and target adequately. The main missing detail is the return format, but given the low complexity and no output schema, this is a minor gap.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Both parameters have full schema descriptions, so the baseline is 3. The description's 'full-page screenshot' aligns with the url parameter but adds no extra meaning beyond the schema, and waitStrategy is not discussed in the description.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
States a specific verb ('Take') and resource ('fresh full-page screenshot of a live website URL') and names the mechanism (headless browser). This clearly distinguishes it from sibling tools that retrieve metadata, analyze structure, or record motion.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description implies use when an up-to-date visual capture is needed, but it does not explicitly state when to use this tool versus alternatives. No comparison is made to sibling tools such as analyze_page_structure or record_site_motion.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
get_site_detailsB
Get the design DNA of one Awwwards site: color palette, technologies, design elements, awards, description and inline screenshot.
| Name | Required | Description | Default |
|---|---|---|---|
| slug | Yes | Site slug from search_sites, e.g. 'l-i-s-a' |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations, the description must carry behavioral disclosure. It lists the expected response fields (color palette, technologies, etc.), which informs the agent of the output scope, and 'inline screenshot' suggests an embedded image. However, it does not state side effects (likely read-only but not explicit), authentication requirements, rate limits, or error behavior. This is moderate transparency for a read-oriented tool.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single sentence that front-loads the core concept ('Get the design DNA') then enumerates contents efficiently. There is no fluff or repetition. The phrase 'design DNA' is slightly stylistic but not verbose. It earns its place, and the structure is clean.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a one-parameter read tool, listing the expected fields provides basic sufficiency. However, the description does not clarify how it differs from get_site_elements (which likely returns design elements specifically), nor does it describe the response format (e.g., whether the screenshot is a URL or base64). Given the sibling overlap and absence of an output schema, more contextual guidance would improve completeness.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The schema description fully covers the slug parameter, including a pattern and an example ('l-i-s-a'). The tool description adds no extra semantics beyond what the schema provides—it only says 'one Awwwards site,' which duplicates the schema's context. Since schema coverage is 100%, baseline 3 is appropriate.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description specifies a clear verb ('Get') and a resource ('design DNA' of one Awwwards site), then enumerates the included content (color palette, technologies, design elements, awards, description, inline screenshot). This is distinct from search_sites (which lists sites) and capture_live_site (which captures a live site), but the overlap with get_site_elements is not explicitly addressed. The term 'design DNA' is a bit stylized, but the clarification of contents makes the purpose understandable.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description implies usage for retrieving details of a specific site after obtaining a slug, as the parameter example references search_sites. However, it does not explicitly state when to prefer this over get_site_elements or other siblings, nor does it mention conditions or exclusions. The agent must infer the usage context from the parameter and the phrase 'one Awwwards site.'
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
get_site_elementsA
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.
| Name | Required | Description | Default |
|---|---|---|---|
| slug | Yes | Site slug from search_sites, e.g. 'l-i-s-a' |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
There are no annotations, so the description carries the behavioral burden. It does disclose what the output contains (poster images inline, video URLs) and implies a read-only fetch via 'Get.' But it does not mention data freshness, error behavior, empty results, or any access constraints.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single, well-structured sentence that front-loads the core purpose, then uses a colon-delimited list to specify the output categories. Every phrase earns its place without padding or repetition.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a simple one-parameter read tool with no output schema, this description is largely complete: it names the input source (slug from search_sites via schema), scopes to one site, and enumerates the returned content types. It only lacks explicit note on absent or malformed slugs, but that is a minor gap given the schema constraints.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, and the single slug parameter is already documented with a pattern and example. The description adds no additional meaning about the parameter, so the baseline score of 3 applies.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description states a specific verb and resource: 'Get the design-element highlights of one Awwwards site.' It then enumerates the exact content types (3D models, video content, mobile layouts, microcopy), making it clearly distinct from siblings like get_site_details or search_sites.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Usage is implied from the description: if someone wants component-level design highlights, this tool fits. However, it provides no explicit when-to-use vs alternatives, no exclusion criteria, and does not mention any sibling tools or edge conditions where this tool would be the wrong choice.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
list_categoriesA
List the filter taxonomy available on Awwwards: color hexes and tag/technology slugs usable with search_sites.
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the behavioral burden. 'List' signals read-only intent and the description discloses what will be returned. It lacks explicit safety wording, but for a zero-argument listing there is little ambiguity.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single, efficient sentence with no filler. The core purpose and the connection to search_sites are immediately clear.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a zero-parameter list tool with no output schema, this description provides sufficient context: what is listed, in what form (hexes and slugs), and where it applies. Nothing needed to invoke the tool correctly is missing.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The tool has zero parameters, so the empty schema fully covers parameter handling; baseline is 4. The description adds meaning by explaining what the returned taxonomy represents and how it connects to search_sites.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description states a specific verb ('List') and resource ('filter taxonomy'), and spells out the contents: color hexes and tag/technology slugs. It is clearly distinguishable from siblings like search_sites or get_site_details.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description explains the taxonomy is 'usable with search_sites', which tells an agent when to call this tool: before constructing filter-based searches. It does not name exclusions, but no sibling is a close alternative for retrieving filter vocabulary.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
record_site_motionA
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.
| Name | Required | Description | Default |
|---|---|---|---|
| url | Yes | Absolute URL of the site to record | |
| frames | No | Filmstrip tile count (default 16 → a 4x4 grid) | |
| waitStrategy | No | 'load' + settle works on heavy sites; 'networkidle' waits for total quiet | load |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries the full behavioral disclosure burden. It usefully discloses the return payload (inline filmstrip JPEG and .webm path) and the requirement for optional playwright and ffmpeg-static dependencies, but it does not mention potential side effects, failure modes if dependencies are missing, or operational details like recording duration.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is two concise sentences with no filler. It front-loads the primary action and resource, then efficiently covers output format and dependency requirements.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a tool with no output schema and no annotations, the description covers the essential return values and dependency caveat, while the input schema fully covers all three parameters. Some minor operational details (e.g., recording duration or behavior on heavy sites) are left out, but the combination of description and schema is sufficient for an agent to invoke it correctly.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, so the parameters are already well documented in the schema. The description adds no additional parameter-level meaning beyond the schema, so the baseline score of 3 applies.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description uses a specific verb ('Record') and a clear resource ('short motion-through video of a live website'), with concrete examples like preloader, scroll-triggered, and hover/cursor animations. It does not explicitly distinguish itself from the sibling 'capture_live_site', but the motion-video focus makes the purpose reasonably clear.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description implies the tool is for capturing dynamic motion and animations on a live site, which signals when it would be appropriate. It does not explicitly state when to prefer it over sibling tools like 'capture_live_site' or 'analyze_page_structure', so the usage guidance is only implicit.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
search_sitesA
Search award-winning websites on Awwwards. Returns site cards with inline screenshots, live URLs, awards and tags.
| Name | Required | Description | Default |
|---|---|---|---|
| page | No | ||
| tags | No | Tag slugs, e.g. ['3d', 'portfolio'] | |
| award | No | ||
| color | No | Dominant color hex, e.g. '#404040' | |
| count | No | ||
| query | No | Free text matched against site titles and tags | |
| sortBy | No | Sort results: by Awwwards jury score (details previously fetched) or newest first | newest |
| technology | No | Technology slug, e.g. 'webgl', 'gsap', 'astro' |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries the full burden. It discloses the return shape (site cards with screenshots, URLs, awards, tags) and implies a read-only search operation. However, it does not disclose pagination behavior, rate limits, whether results are live or cached, or what happens when no results match. The description adds some behavioral context but leaves meaningful gaps.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single, front-loaded sentence that states the core purpose and the return value. It is efficient and free of filler. It could earn a 5 by also naming a sibling alternative, but as written it is appropriately sized and structured.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a search tool with 8 parameters and no output schema, the description gives the essential purpose and return shape but does not explain how the parameters interact, what the default behavior is, or what the site cards contain beyond the listed fields. The sibling tools suggest a broader workflow, but the description does not position this tool within it. It is adequate but not complete.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 63%, so the schema already documents several parameters (tags, color, query, sortBy, technology). The description adds the high-level context that these parameters filter the search results, but it does not add meaning beyond what the schema provides for the undocumented parameters (page, award, count). Baseline 3 is appropriate given the partial schema coverage.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description states a specific verb ('Search'), a specific resource ('award-winning websites on Awwwards'), and the key output ('site cards with inline screenshots, live URLs, awards and tags'). This clearly distinguishes it from siblings like get_site_details or capture_live_site, which target individual sites or capture actions.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description implies this is the tool for searching/browsing the Awwwards site collection, and the sibling names suggest alternatives for detail, capture, or analysis. However, it does not explicitly state when to use this tool versus get_site_details or analyze_page_structure, nor does it mention any exclusions or prerequisites. The usage context is clear but not fully articulated.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Tool Schema Changelog
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
7 tool updates
v1.0.0- First observed
analyze_page_structure - First observed
capture_live_site - First observed
get_site_details - First observed
get_site_elements - First observed
list_categories - First observed
record_site_motion - First observed
search_sites
TDQS
Scored across 7 tools
Most tools target distinct resources: search, site details, elements, categories, and three browser actions. The only potential confusion is get_site_details vs get_site_elements, but their descriptions clearly separate site-level design DNA from component-level highlights.
All tools follow a consistent verb_noun pattern (get_site_details, search_sites, list_categories, capture_live_site, analyze_page_structure, record_site_motion). No mixing of conventions or vague verbs.
Seven tools is well-scoped for an Awwwards-focused server that covers search, lookup, taxonomy, and live-site inspection. Each tool has a clear role without redundancy.
The surface covers the full workflow: discover sites via search and categories, inspect site details and elements, then capture/analyze/record live sites for comparison. No obvious gaps for the stated inspiration and design-analysis purpose.
Maintenance
Related MCP Connectors
A design-style library for AI agents: search real styles, fetch a ready-to-apply design spec.
UI design from prompts, screenshots, and URLs for AI coding agents and theme tokens.
Give your AI agents a design superpower. Generate, edit, and publish publication-grade decks, reports, landing pages, resumes, and marketing visuals directly within your agent workflow. Delivering frontier-level design quality at 3× the speed and 53× lower cost -from conversational prompt to live link or vector PDF in minutes.
- miromiroOAuthapp.miromiro
Turn any live website into brand colors, fonts, design tokens, SVGs, Lottie and paste-ready code.
Related MCP Servers
- AlicenseNot gradedqualityDmaintenanceEnables AI agents to see, analyze, and visually verify web page changes through pixel-perfect diffing, theme extraction, layout analysis, and interactive element detection.19 npmMIT
- AlicenseNot gradedqualityCmaintenanceProvides curated real website design references with structured JSON data on type, spacing, palette, and layout. Enables AI agents to search, browse, and analyze over 1,000 sites and their sections.1MIT
- AlicenseNot gradedqualityCmaintenanceEnables coding agents to turn CollectUI links or any image/GIF/video URL into a detailed design and motion brief with measured timings, easing curves, displacement, palette, and opt-in keyframes.3 npm1MIT
- AlicenseAqualityBmaintenanceEnables coding agents to capture and inspect running projects, resolve real assets from free sources, and check source for design tells, providing an evidence loop for improving websites, games, and motion.101MIT