Inspect every pixel of the sites you build with AI.

PixelSpec is a free, open-source design inspector for any live website. Measure padding, margins, gaps and distances, check type, color and contrast, then click any element to send precise feedback to Claude Code, Cursor or your AI agent. A sharper alternative to Agentation.

$ npm i -D pixelspec

Or press Alt Shift I anywhere on this page.

Design feedback your AI agent can act on.

Designers now build straight in code with Claude Code, Cursor or v0, but the browser doesn't show design specs the way design tools do. Feedback turns vague ("make it a bit more spacious") and the agent guesses. PixelSpec shows the exact spacing, type and color values on the real page and attaches them, with the element's selector, to every note. Design QA without the back-and-forth.

Install

Install PixelSpec in your dev build.

Works with React, Next.js, Vite, Vue, Svelte and plain HTML. No dependencies, and it only loads in development.

// npm i -D pixelspec
import { PixelSpec } from 'pixelspec/react';

export default function App() {
  return (
    <>
      <YourApp />
      {process.env.NODE_ENV === 'development' && <PixelSpec />}
    </>
  );
}

// npm i -D pixelspec, then in main.ts
if (import.meta.env.DEV) {
  import('pixelspec').then(({ init }) => init());
}

<!-- Before </body> -->
<script src="https://unpkg.com/pixelspec"></script>