Open source scanner available now

Your AI ships fast.
subpixel catches drift.

AI tools generate code that works but doesn't match your design system. subpixel detects drift at every layer — from tokens to product decisions.

npx subpixel init --detect

One platform, two layers.

Catch drift at the code level today. Catch it at the product level next.

The Scanner

Available now

Static analysis for design system drift. Catches hardcoded tokens, reinvented components, and accessibility gaps in AI-generated code.

  • Detects hardcoded colors, spacing, and breakpoints
  • Matches generated DOM against your component library
  • CI integration via GitHub Actions
  • Interactive fix mode with suggested replacements
View on GitHub

Signal Engine

Coming soon

Code drift is a symptom. Product drift is the disease. The Signal Engine connects customer feedback to product decisions.

  • Ingests signals from Gong, Slack, Zendesk, Notion
  • Maps feedback against what you're actually building
  • Surfaces evidence-backed problem statements
  • Generates plans your team can execute
Join the waitlist

Three steps to your first scan.

Point subpixel at your token config and component library. It handles the rest.

  1. Initialize

    Auto-detects your tokens from JSON, CSS custom properties, Tailwind theme, or Figma token export. Ingests your component library from Storybook metadata or TypeScript types.

    $ npx subpixel init
    Found design-tokens.json
    Found .storybook/ → 64 components
    Config written to .subpixelrc.yml
  2. Scan

    Run against your full repo or a PR diff. Rule-based checks catch token violations instantly. The AI layer identifies component reinvention with confidence scores.

    $ npx subpixel scan ./src
    Checking tokens… done
    Matching components… done
    6 violations 2 matches
  3. Fix & enforce

    Interactive fix mode suggests replacements. Add to CI as a GitHub Action to block drift before it merges. Track violations over time as your system evolves.

    $ subpixel fix --interactive
    Replace #1a1a2e with --color-surface-primary?
    ✓ Applied 4 of 6 fixes
    2 require manual review

AI writes code that works.
subpixel makes sure it matches.

Every AI tool — Cursor, Copilot, Claude Code — generates UI that compiles but drifts from your system. subpixel catches what linters miss.

Hardcoded tokens

Raw hex colors, pixel spacing, and font sizes that should be semantic tokens from your design system.

#1a1a2e --color-surface-primary

Reinvented components

AI loves to build from scratch. subpixel recognizes when generated DOM matches an existing component in your library.

div.toggle <Switch size="md">

Magic breakpoints

Hardcoded media queries that don't align with your responsive system. Fragile and inconsistent across surfaces.

@media 768px --breakpoint-md

Prop misuse

Components used with incorrect or deprecated prop combinations that your system discourages.

variant="outline" variant="ghost"

Accessibility gaps

Missing ARIA patterns, focus management, and keyboard nav that your design system already solves.

no aria-label use <IconButton>

Token aliasing

Using the right token value but wrong semantic name — like a background color applied to text.

--color-bg-primary --color-text-primary

Code drift is a symptom.
Product drift is the disease.

The Signal Engine ingests what your customers actually say, maps it against what your product actually does, and surfaces what to build next.

Gong

Sales and CS call transcripts, objections, churn signals

Slack

Internal escalations, customer-facing channels, team signals

Zendesk

Support tickets, resolution patterns, recurring pain points

Notion

Product docs, retro notes, internal knowledge bases

Linear

Issue backlog, prioritization signals, team velocity context

GitHub

Issues, PR discussions, contributor feedback, repo activity


Frequently asked questions.

What is subpixel?

subpixel is an open-source scanner that detects design system drift in AI-generated code. It catches hardcoded tokens, reinvented components, accessibility gaps, and other patterns that break consistency.

Which AI tools does it work with?

subpixel is tool-agnostic. It scans the output, not the source. Code generated by Cursor, Copilot, Claude Code, or hand-written code — if it drifts from your system, subpixel catches it.

Is subpixel open source?

Yes. The scanner CLI is fully open source and free to use. The Pro tier adds CI integration and drift tracking. The Signal Engine is a separate commercial product currently in development.

Does my code leave my machine?

No. The scanner runs entirely locally. Your code never leaves your machine. The AI component matching uses local models — no code is sent to external APIs.

What's the difference between subpixel and a linter?

Linters check syntax and code quality. subpixel checks design system compliance — whether your code uses the right tokens, components, and patterns instead of hardcoded values or reinvented wheels.

What is the Signal Engine?

The Signal Engine is an upcoming product that detects product-level drift — when your team ships features that don't match what customers actually need. It ingests signals from Gong, Slack, Zendesk, and Notion to surface evidence-backed problem statements.

Ready to catch drift?

Open source. Built for teams that ship with AI. Start scanning in three minutes.