Awwwards-mcp
by INSANE0777
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.
633stars
40forks
TypeScript
Added 9/28/2026
From $49 · 30 days · terms & refunds
⚠️ Third-Party Software Notice
This skill is third-party open-source software developed and hosted independently on GitHub. SkillsLLM is an informational directory and does not control or maintain the underlying repository.
Any security checks, ratings, or warnings displayed by SkillsLLM are automated and limited in scope. They do not constitute a security certification or guarantee that the software is safe, error-free, or free from malicious code, vulnerabilities, compromised dependencies, or prompt-injection risks.
Review the source code, permissions, dependencies, and configuration before installing or running any third-party skill. Use is at your own risk. To the maximum extent permitted by applicable law, SkillsLLM is not liable for losses arising from third-party software.
AI Agentsai-agentsawwwardsclaude-codecodexcoding-agentcursordesign-inspirationmcpmcp-serveropencodeweb-design
Maintainer of this skill?
Automated security scan — not a certification.
Installation
# Add to your Claude Code skills
git clone https://github.com/INSANE0777/Awwwards-mcpGetting Started
Guides for using ai agents skills like Awwwards-mcp.
- Caveman: Cut Claude Token Use by 65%How agent-side prompt compression works, when to use it, and when not to.
- How to Test an AI Skill: A Practical Guide to EvalsEvaluate skills with realistic fixtures, a baseline, and repeatable checks.
- Getting Started with AI SkillsFirst-time install walkthrough for Claude Code, Codex CLI, and ChatGPT.
Security ReportVerified
Last scanned: 9/29/2026
{
"issues": [
{
"type": "npm-audit",
"message": "@vitest/mocker: Vitest: Path Traversal / Arbitrary File Read via @vitest/mocker Redirect Mock",
"severity": "medium"
},
{
"type": "npm-audit",
"message": "vitest: Vulnerability found",
"severity": "medium"
}
],
"status": "PASSED",
"scannedAt": "2026-09-29T10:25:40.122Z",
"npmAuditRan": true,
"pipAuditRan": true,
"promptInjectionRan": true
}Compare with similar skills
See how Awwwards-mcp compares with popular alternatives.
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.
Project site: https://awwwards-mcp.vercel.app
Your agent searches in natural language ("dark 3D portfolio sites", "soft pastel
e-commerce"), sees real screenshots inline, and pulls the design DNA of any
site: color palette, tech stack, design elements, award history. Then it goes past
inspiration: point it at any link and it band-maps the page, censuses scroll and
hover motion (keyframes, measured scrub curves), fingerprints the framework, captures
canvas pose grids, and reads the site's bundles when a mechanism is unclear. From that
evidence it recreates the page section by section, then converts the build into a
runnable Vite, Astro or Next.js project with a measured motion manifest and
per-section hooks. Close the loop with verify_build (band + motion scoring,
measured perf) and generate GSAP timelines from the captured motion.
And it's not just Awwwards websites — every capture, census, and verification tool runs on any URL. Just give it any site link and tell it to recreate: band-map it, study its motion, rebuild section by section, and score your build against the original.
Free-text queries run on a porter-stemmed, prefix-matching FTS5 index with BM25 ranking — "magazines" now finds Magazine-tagged sites (68 on the live index), best matches first, where the old substring path returned zero. Multi-word queries keep AND semantics: every token must hit the same site.
Tools
| Tool | What it does |
|---|---|
search_sites |
Search by color, tags, technology, award type or free-text query; e.g. award: "soty", award: "nominees", award: "ecommerce" (winners), or a technology alias like technology: "nextjs" which canonicalizes to the live slug. Multi-word queries match against the local FTS5 index and rank BM25 (title hits lead); zero results come with loose-match and taxonomy-tag hints. Default full results include each site's screenshot; use responseMode: "compact" for concise cards and inline previews of only the first two results on the requested page. |
get_site_details |
Design DNA for one site: palette, technologies, elements, awards, description. Batch (slugs, up to 10) is compact enrichment for a shortlist — compactSiteDetails per slug (lists as counts, ≤500-char description, awards), cached/fetched/error status, no inline images. |
compare_sites |
Compare 2–3 sites' design DNA and jury scores as text-only JSON. Uses cached details or fetches missing detail pages. |
create_design_brief |
Turn 2–5 selected site slugs plus a required project goal into a deterministic, cited build brief. Uses cached detail/element evidence and cached Motion DNA first, fetches only missing details, returns Markdown plus versioned JSON, and runs browser band analysis only with includeStructure: true. |
get_index_status |
Read local index count, crawl progress, last success/error, lock state and freshness without network requests. |
get_index_stats |
Aggregate metrics over the local cache only (zero network). All-time: site count, gallery element count (elements.total) and technology/tag frequency (items[].tag); elements.corpus discloses the whole locally cached element set — total, gallery, site, categorized/uncategorized, builtWithKnown and oldest/newest fetch timestamps (aggregates only, no titles or slugs). Windowed by windowDays (default 90, 1–3650): cached details, palette colour frequency and jury score stats (n/avg/median) from at most the 500 most recently fetched detail rows, plus Motion DNA library frequency. Coverage is labelled "locally cached subset" on every metric; windowDays/detailsCached/detailParseCap appear only on the windowed metrics, while 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 |
Component-level visuals for one site: each element's poster image inline (3D models, video content, mobile layouts, microcopy…) + video URLs. |
list_categories |
Every filter the agent can search by (200+ tags, 27 colors). A legacy cache without technology facets is refreshed on read; if that refresh fails the response sets taxonomyStale: true with a taxonomyWarning. |
get_collections |
Browse Awwwards' curated and member collections. No slug lists collections (paginated, ~32 per page, owner/ref on every row); a slug returns one page of that collection's site cards (curated e.g. brutalism, or owner/slug for member collections; page works for collections too). Results expose siteCards separately from items (all collectables), so element-only collections return empty sites rather than a parser error. 7-day local cache. Personal, non-commercial inspiration use. |
search_directory |
Browse the Awwwards directory of agencies, studios and freelancers: name, profile slug, location, website and award counts. Filters are path-based (country, category, budget; one per request — e.g. budget over_hundred_thousand). Country must be canonical and case-sensitive (United States, not united states). Results carry applied/ignored filter arrays; free-text query is matched client-side over the one fetched page. Contact details are stripped. 7-day local cache. Personal, non-commercial inspiration use. |
get_annual_categories |
Official Annual Awards categories (Site of the Year, Agency of the Year, …) with nominee counts from Awwwards' public read-only API. Nominee details hydrate on request. Personal, non-commercial inspiration use; media URLs are reference-only. |
get_annual_nominees |
Nominees in one Annual Awards category, hydrated on demand at 1 request/second (default 10, max 20). Site summaries include siteSlug and inLocalIndex so agents can jump to get_site_details when the daily index has the site. |
get_annual_nominee |
One Annual Awards nominee in full — site: date, description, designBy, country, images/videos; agency: location, avatar, award tag counts, featured projects. Accepts a UUID, a full /api/annual/nominees/... path, or category+slug; the slug form may hydrate up to 20 uncached nominees at 1 req/s (~20s worst case), so prefer an id when known. Media URLs are reference-only (mediaNote: "reference-only"); nothing is downloaded. |
capture_live_site |
Optional: fresh full-page screenshot of any live URL. Waits for load + a settle window with a pre-scroll capped at 80 × 450px steps / 8 s (step- and time-capped so a growing page cannot stall it), so heavy sites work (waitStrategy: "networkidle" available). After the scroll it waits up to 10 s for a full-screen fixed preloader (≥90% viewport, z-index ≥100) to clear, so the site — not its loader — is captured; waitForOverlay: false skips that wait. Pass viewport: "mobile" for the 390×844 iPhone-class render ("desktop" 1440×900 default). On inner-scroller pages (body pinned, an inner container scrolls) it returns mode: "anchors" — six ordered viewport screenshots down that container as JSON anchors[].scrollTop/file paths, with no inline image and no top-level file; scrollCapture: "viewport" forces one explicit viewport shot instead. Document-scrolling pages keep the single full-page capture. Inline previews are capped at 2.5 MB of base64; inline: false keeps only the saved file. (needs playwright). |
analyze_page_structure |
Section band map of any page (live URL or local file:// build): tag, background, offset, height per band. Detects the real scroll container when the page pins body and scrolls an inner element (overflow-y: auto/scroll), reports it as scrollRoot (tag#id.class), and measures every band and landmark in that scroller's coordinates; the pre-scroll drives the same container. Compare a reference site's structure against your build. Same heavy-site-friendly wait (waitStrategy: "networkidle" available); viewport: "mobile" analyzes the phone-class layout ("desktop" default). compare: "mobile" adds a second 390×844 capture and returns mobileBands + diff: {heightDelta, bandsAdded, bandsRemoved, reordered} (label-matched); if the mobile capture fails you still get the desktop result plus mobileError. Absent, the response is unchanged. cdpEndpoint instead attaches to a browser you started (loopback only, requires AWWWARDS_MCP_ATTACH=1) and scans the already-open matching page — it never navigates, scrolls, clicks or creates tabs, and disconnects without closing yours. (needs playwright). |
record_site_motion |
Op |
Frequently Asked Questions
What is Awwwards-mcp?
Awwwards-mcp is an open-source ai agents skill for AI coding assistants such as Claude Code, Codex CLI, and ChatGPT, built by INSANE0777. 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. It has 633 GitHub stars.
Is Awwwards-mcp safe to use?
Yes. Awwwards-mcp passed SkillsLLM's automated security scan — a dependency vulnerability audit plus prompt-injection heuristics — with no high-severity issues. You can read the full report in the Security Report section on this page.
How do I install Awwwards-mcp?
Clone the repository with "git clone https://github.com/INSANE0777/Awwwards-mcp" and add it to your Claude Code skills directory (see the Installation section above).
What programming language is Awwwards-mcp written in?
Awwwards-mcp is primarily written in TypeScript. It is open-source under INSANE0777 on GitHub, so you can review or fork the full source.
Are there alternatives to Awwwards-mcp?
Yes. SkillsLLM lists many other AI Agents skills you can browse and compare side by side. Open the AI Agents category from the badge at the top of this page, or use the Related Skills and comparison links further down to weigh Awwwards-mcp against similar tools.
Comments (0)
to leave a comment.
No comments yet. Be the first to share your thoughts!
Related Skills
Reverse engineer anything with agents, from app behavior down to native binaries.
453,914
111,553
TypeScript
AI Agentsagent-skillsai
The agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond.
301,625
44,496
JavaScript
AI Agentsai-agentsanthropic
Skills for Real Engineers. Straight from my .agents directory.
250,518
21,171
Shell
AI Agents
An agentic skills framework & software development methodology that works.
234,966
20,863
Shell
AI Agentsaibrainstorming