pixelpact

Coding & DevelopmentTesting & QAFree
Visit website ↗
FreeStarting price
0Popularity
pixelpact featured image

About pixelpact

pixelpact records precise rendered values from a reference page or Figma design and compares them against an implementation. It outputs deviations per property with expected, actual, and delta values, enabling autonomous agents to verify UI correctness without human approval. The tool captures geometry, colors, typography, hover states, design tokens, and keyframes, storing them in a plain JSON contract file that can be reviewed in pull requests. Measurement runs locally using Playwright’s Chromium engine, producing exit codes for CI integration. It supports interactive states by only recording properties that change during hover or focus, and handles design systems through custom properties and named animations. pixelpact does not require a baseline approval step, as the reference itself serves as the contract. It is framework-agnostic, measuring rendered DOM regardless of the underlying stack.

Key features

  • Extracts contracts from reference pages or Figma via REST API
  • Compares geometry, colors, typography, and layout properties
  • Records only changed properties during hover and focus states
  • Handles design tokens and named animation keyframes
  • Generates plain JSON contracts for version control and PR review
  • Runs pull request checks with a single updated comment
  • Supports desktop and mobile viewports
  • Provides exit codes for CI integration

Use cases

  • Autonomous verification of UI code generated by coding agents
  • Enforcing design system consistency in pull requests
  • Validating responsive layouts against reference designs

Pros

  • Records precise rendered values instead of screenshots
  • Outputs deviations with expected, actual, and delta values
  • Supports interactive states (hover, focus) without manual review
  • Framework-agnostic, works with React, Vue, Svelte, Astro, and handwritten HTML
  • Integrates with MCP clients, GitHub Actions, and Playwright

Cons

  • Requires Playwright as a peer dependency
  • No built-in visual regression comparison without a reference
  • Limited to property-level measurement; pixel-level diffs require additional tools
  • No cloud service or dashboard; all operations run locally

Frequently asked questions about pixelpact

What does pixelpact do?

pixelpact records precise rendered values from a reference page or Figma design and compares them against an implementation, outputting deviations per property with expected, actual, and delta values for autonomous agents to verify UI correctness.

Who is pixelpact designed for?

pixelpact is designed for coding agents and developers building UI, enabling autonomous verification of UI correctness without human approval by measuring rendered DOM properties.

How does pixelpact integrate with coding agents?

pixelpact provides an MCP server that exposes tools like extract_contract, check_implementation, and diff_pixels, allowing coding agents to measure and verify UI implementations programmatically.

Does pixelpact require a baseline approval step?

No, pixelpact does not require a baseline approval step. The reference itself serves as the contract, and measurements are compared directly against it.

What types of properties does pixelpact measure?

pixelpact measures geometry, colors, typography, hover states, design tokens, and keyframes, storing them in a plain JSON contract file for review.

Can pixelpact work with Figma designs as references?

Yes, pixelpact can read a Figma URL through its REST API and bind the contract to markup using data-contract attributes, enabling measurement against Figma designs.

pixelpact compared

Reviews

Best pixelpact Alternatives

Finding the closest matches…