Website Analyzer

Turn any website into a reusable design system.

Reverse-engineer live pages into structured design tokens and docs your AI coding agent can use — colors, typography, spacing, components, layout, and responsive behavior.

Built withMCP·Playwright·TypeScript

Free and open source. This server doesnotcall paid LLM APIs. It returns structured JSON (and optional template markdown) to your own Claude / Cursor / VS Code / Gemini / Ollama client.

AI agents are great at writing UI — but they usually guess at design systems. Website Analyzer MCP inspects a real page and hands your agent:

- Design tokens (color, type, spacing, radius, shadow)
- Component and layout signals
- Responsive viewport analysis + screenshots
- Deterministic markdown docs (design.md,rule.md, …)

Use it to clone a look, audit a site, or bootstrap a design system from production.

- Page inspection (DOM, landmarks, headings, links, forms)
- Color / typography / spacing extraction
- Border radius & shadow detection
- Layout and component signals
- Responsive analysis (mobile / tablet / desktop)
- Screenshot capture (up to 5 viewports)
- Design system tokens as structured JSON
- Deterministic markdown documentation
- SSRF protection + optional robots.txt respect

You donotneed to clone this repo — the package is on npm.
- Install Playwright’s Chromium once:

npx playwright install chromium

Cursor(Settings → MCPor~/.cursor/mcp.json):

{ "mcpServers": { "website-analyzer": { "command": "npx", "args": ["-y", "website-analyzer-mcp"] } } }

Claude Desktop(claude_desktop_config.json):

{ "mcpServers": { "website-analyzer": { "command": "npx", "args": ["-y", "website-analyzer-mcp"] } } }

Analyze https://example.com and create design.md

npx -ydownloads the package from npm automatically.

Claude Code · Cursor · VS Code · Claude Desktop · any MCP-compatible client

Analyze https://example.com Create: - design.md - rule.md - component.md - layout.md - README.md

- inspect_page/analyze_design/analyze_responsive→ JSON for the LLM
- orgenerate_docs→ deterministic files underdocs/<host>/

Copy.env.exampleor set environment variables:

{ "mcpServers": { "website-analyzer": { "command": "npx", "args": ["-y", "website-analyzer-mcp"], "env": { "REQUEST_TIMEOUT": "45000", "RESPECT_ROBOTS_TXT": "true" } } } }

git clone https://github.com/bigy2012/website-analyzer.git cd website-analyzer npm install npx playwright install chromium npm run build

Point your MCP client at the built entrypoint:

{ "mcpServers": { "website-analyzer": { "command": "node", "args": ["/absolute/path/to/website-analyzer/dist/index.js"] } } }

npm run typecheck npm test npm run smoke npm run build npm run demo:gif # regenerates assets/demo.gif

docker compose build docker compose run --rm website-analyzer-mcp

Published images (on tagged releases):ghcr.io/<owner>/website-analyzer

- Blocks localhost / private IP / link-local / cloud metadata SSRF targets
- Optional robots.txt enforcement (RESPECT_ROBOTS_TXT=true)
- Timeouts and size caps via env

Website Analyzer MCP is forlegitimate website analysisonly — for example learning layout patterns, auditing your own sites, or extracting structured signals your AI agent can reason about.

Using this tool doesnotgrant permission to copy or reuse another site’s design, content, images, logos, or other assets without authorization.

You are responsible for how you use analysis output. When in doubt, analyze sites you own or have permission to study, and get legal advice for commercial reuse.

- Single URL / single page (multi-page crawler planned)
- Template docs are deterministic heuristics, not LLM-authored prose
- Cross-origin stylesheets may be incomplete

- ci.yml— typecheck, build, and test on PR/push
- release.yml— onv*tags, publishes to npm, GHCR, and GitHub Releases

Issues and PRs are welcome. Please keep changes focused, add/adjust tests when touching security or analyzers, and runnpm run typecheck && npm testbefore opening a PR.

An MCP (Model Context Protocol) server providing fast, local full-text search and complete OpenAPI JSON schemas for all Webex Developer APIs & RoomOS xAPI.

Local-first documentation for AI agents. Indexes docs from any git repo into SQLite for offline, instant, private access to up-to-date library documentation.

Local stdio MCP server that lets AI coding agents read and maintain structured architecture, rules, and decisions directly from your repository.

Extentos is a multi-vendor development platform for adding smart-glasses capabilities to existing iOS and Android apps. The simplest analogy is Stripe for smart glasses

An MCP server tailored for React Native–first development using Gluestack UI

Create and read feature flags, review experiments, generate flag types, search docs, and interact with GrowthBook's feature flagging and experimentation platform.

Gives AI agents public URLs (tunnels) for localhost, live HTTP traffic inspection, snapshot publishing, and access control.

Understand, develop, and debug authorization policies in Oso Cloud.

Up-to-date documentation for your coding agent. Covers 1000s of public repos and sites. Built by ref.tools