{"_id":"@buyhatke-dev/design-audit-mcp","name":"@buyhatke-dev/design-audit-mcp","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@buyhatke-dev/design-audit-mcp","version":"0.1.0","description":"Design Audit MCP - captures, audits, and scores web page design (Phase 1)","type":"module","license":"MIT","repository":{"type":"git","url":"git+https://github.com/Buyhatke/design-intel.git"},"keywords":["mcp","design","audit","screenshot","playwright","claude"],"bin":{"design-audit-mcp":"dist/server.js"},"engines":{"node":">=18"},"scripts":{"build":"tsc","dev":"tsc --watch","start":"node dist/server.js","prepublishOnly":"npm run build"},"dependencies":{"@modelcontextprotocol/sdk":"^1.0.0","playwright":"^1.49.0","sharp":"^0.35.3","zod":"^3.24.0"},"devDependencies":{"@types/node":"^22.0.0","typescript":"^5.7.0"},"_id":"@buyhatke-dev/design-audit-mcp@0.1.0","gitHead":"07d356f71e5ffdaf9e1fb1c236ca999c95b1fb79","bugs":{"url":"https://github.com/Buyhatke/design-intel/issues"},"homepage":"https://github.com/Buyhatke/design-intel#readme","_nodeVersion":"22.23.1","_npmVersion":"10.9.8","dist":{"integrity":"sha512-Zc8bUianedUg62s3Ewyx3SGDJYNT6EflekafuwQ8N3O+mSZVNFx2Cz7ZuV9wmmK6lA6DNnWgmUbXIhzs783g5g==","shasum":"86ed420aeb42e2b5b7da46edd73982788774190f","tarball":"https://registry.npmjs.org/@buyhatke-dev/design-audit-mcp/-/design-audit-mcp-0.1.0.tgz","fileCount":33,"unpackedSize":205743,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQD9T6bLFIbpQWM1wBlbevSI/ZR2sD05rN6JL5Fg4hDnOQIhAKaRwjJhlezwvytsn0GEtZqhS2DNbn0eaEShg/9M91G2"}]},"_npmUser":{"name":"archie30","email":"archie@onramp.money"},"directories":{},"maintainers":[{"name":"archie30","email":"archie@onramp.money"},{"name":"keshav-kr","email":"keshavk@buyhatke.com"},{"name":"pattahgobhi","email":"aayushmaan@onramp.money"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/design-audit-mcp_0.1.0_1784030548704_0.23782488349313624"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-14T12:02:28.579Z","0.1.0":"2026-07-14T12:02:28.869Z","modified":"2026-07-14T12:02:29.067Z"},"maintainers":[{"name":"archie30","email":"archie@onramp.money"},{"name":"keshav-kr","email":"keshavk@buyhatke.com"},{"name":"pattahgobhi","email":"aayushmaan@onramp.money"}],"description":"Design Audit MCP - captures, audits, and scores web page design (Phase 1)","homepage":"https://github.com/Buyhatke/design-intel#readme","keywords":["mcp","design","audit","screenshot","playwright","claude"],"repository":{"type":"git","url":"git+https://github.com/Buyhatke/design-intel.git"},"bugs":{"url":"https://github.com/Buyhatke/design-intel/issues"},"license":"MIT","readme":"# Design Audit MCP\n\nAn MCP server that captures, audits, and scores web-page design. It acts as a design\nreviewer: it screenshots a page (full-length, including lazy-loaded and scroll-pinned\nsections), judges it against a visual rubric, checks token consistency against a design\nkit, produces a 0–100 score, and renders a self-contained HTML report.\n\n## Tools\n\n| Tool | What it does |\n|------|--------------|\n| `capture_page` | Full-page desktop/mobile screenshots via Playwright (handles lazy-mounted + scroll-pinned sections). |\n| `generate_design_kit` | Extract design tokens from a **URL** (as-rendered) or a **repo path** (declared CSS vars / Tailwind config). Writes JSON + an HTML kit. |\n| `audit_screenshot` | Returns the screenshot + a strict visual rubric (alignment, spacing, typography, hierarchy) for the host model to judge. |\n| `audit_design_consistency` | Diffs a live page's tokens against a design kit; reports color/type/spacing/radius drift. |\n| `calculate_design_score` | Scores findings + violations (0–100, per-bucket), then writes & opens the HTML report. |\n| `annotate_audit` | Draws findings onto the screenshot as numbered pins + legend (sharable PNG). |\n| `check_pr_screenshots` | Flags PRs that change UI files but attach no screenshots (`gh` PR or local `git diff`). |\n\n## Setup\n\nRequires Node 18+.\n\n```bash\ngit clone <your-repo-url> design-audit-mcp\ncd design-audit-mcp\nnpm install\nnpx playwright install chromium   # the browser Playwright drives\nnpm run build                     # compiles src/ -> dist/\n```\n\n## Register with Claude Code\n\nAdd to your MCP config (e.g. `~/.claude.json`, or run `claude mcp add`):\n\n```json\n{\n  \"mcpServers\": {\n    \"design-audit\": {\n      \"command\": \"node\",\n      \"args\": [\"/absolute/path/to/design-audit-mcp/dist/server.js\"]\n    }\n  }\n}\n```\n\nOr via CLI:\n\n```bash\nclaude mcp add design-audit -- node /absolute/path/to/design-audit-mcp/dist/server.js\n```\n\nRestart the MCP server after any rebuild — a reconnect alone does **not** reload `dist/`.\n\n## Output location\n\nScreenshots, reports, and design kits are written to `./artifacts/` in the **current\nworking directory** (i.e. the project you're auditing). Override with:\n\n```bash\nexport DESIGN_AUDIT_DIR=/path/to/output\n```\n\n## Development\n\n```bash\nnpm run dev        # tsc --watch\nnode dist/tools/<tool>.js   # each tool file has a runnable self-check (demo())\n```\n\nEach tool ships one runnable self-check in its `demo()`; run the compiled file directly to\nexercise it.\n\n## Roadmap\n\nSee `DESIGN_AUDIT_MCP_ROADMAP.md`. Phase 1 (audit MVP) is complete; Phases 2–4 (team\nworkflow, design assistant, design intern) are planned.\n","readmeFilename":"README.md","_rev":"1-f12215a210621c6601a18e9aecd62d44"}