GridProof: MCP Server for Correcting AI UI Design Errors

When AI agents like Claude generate frontends, a phenomenon known as Grid Drift can occur, resulting in spacing outside standard scales (e.g., py-[13px]) or inconsistencies between elements.

GridProof is an MCP (Model Context Protocol) server developed to address these issues by automatically inspecting and correcting design quality within the agent's work loop.

Key Features and Functions:

• Automated Audit Loop: Maintains UI consistency through a 'Generate $\rightarrow$ Audit $\rightarrow$ Fix $\rightarrow$ Re-audit' process.
• Geometric Measurement: Uses Playwright to measure the computed geometry of actually rendered pages and provides structured correction hints.
• Inspection Rules:
  • Deviation from base grid and Tailwind scales
  • Spacing inconsistencies between sibling elements
  • Icon and tab target sizes (sizes under 44px are treated as accessibility violations and flagged as errors)
• Flexible Adaptation: Prioritizes support for Tailwind-based projects, automatically switching to accessibility checks in non-Tailwind environments.

Users can instantly connect to Claude Code via the npx -y gridproof command or generate reports for live sites.