All stories
awwwards-mcp Ecosystem Community reports

Turn a website into DESIGN.md: awwwards-mcp adds guarded capture

The new community release pairs public-only browser capture with a separate skill that writes a cited design document and an evidence sidecar from one page.

Sources (3)

Why now Version 1.18.0 was published November 4 at 03:30 UTC, adding guarded captures and provenance fields for the new DESIGN.md workflow.

Point an agent at one public website and ask for a design document with receipts. That is the concrete workflow behind awwwards-mcp 1.18.0 and its companion awwwards-design-md skill. The community release adds guarded browser captures and capture provenance; the separate skill composes existing tools into DESIGN.md and design-evidence.json.

The distinction matters: this is an MCP server plus instructions for an existing agent, not a new model or a dedicated design-document MCP tool. Nor is the result the website’s official brand system. The skill calls for a cited subset of observed colors, typography, spacing, structure and up to three components, with observations separated from inferences and proposals.

Evidence first, then the document

The documented sequence exports computed-style tokens, analyzes section structure, captures a screenshot and inspects selected components. Its evidence sidecar binds claims to saved tool responses and records their provenance. One URL and one viewport are covered per run; mobile, hover, dark-mode and other unobserved states must remain explicit gaps.

The release says publicOnly refuses private, loopback, metadata and reserved destinations, routes browser requests through a pinned public-address proxy, and fails when a redirect or subresource is blocked. It also refuses CDP attachment in this mode. These are the project’s implementation claims, not an independent security audit. The skill requires the guarded capability and tells the agent to stop when it is unavailable.

Installation has a practical catch. The server requires Node 22.13 or later and documents Claude Code, Codex and other MCP clients. Its core npx route does not include the browser dependencies. The README instead prescribes a side-by-side server, Playwright and Chromium installation for capture tools; the companion skill lives in the separate awwwards-skills repository. The project says no API key or account is required for the server, while the agent’s model costs remain separate.

The November 4 release therefore offers a useful bridge from reference browsing to a reviewable design brief. It does not establish original token names, asset reuse rights, accessibility compliance or a pixel-perfect reconstruction.