claude-pixel-perfect-agent
Audit a live web app's CSS against Figma, brand guidelines, or another design reference.
Audit a live web app's CSS against Figma, brand guidelines, or another design reference.
This Claude Code skill measures typography, colors, spacing, borders, shadows, and interactive states in a live or staging site through Chrome DevTools, then compares them with Figma, a PDF brandbook, a reference site, screenshots, or manual specifications. It cross-checks suspected deviations, filters false positives, and produces a structured Excel or Markdown report with severity and current versus expected values. A target URL, at least one design reference, and the Chrome MCP extension are required.
Resource types
Use cases
Platforms
Turns one idea into a clean peanut-led concept illustration.
Keeps generated UI aligned with explicit design rules.
Protocols & integrations
Capabilities
Public GitHub facts last synced Jul 10, 2026.
Route a design brief through color, effects, typography, and icon skills in a coherent order.
Plan product design projects in Claude with reusable PRCSS workflows.