Drift Detector

• 

  Dark Thumbnail

• 

  Light Thumbnail

Inspiration

Drift Detector was inspired by the slow, subjective way designers and developers catch small mismatches between a Figma design and the built product, usually through screenshots in chat and feedback like “feels off.” It lays the Figma frame over each Deployxa preview build, flags every spacing, type and colour mismatch as a numbered pin with exact expected → actual values, and turns each one into a fix ticket.

What it does

Drift Detector is a visual QA tool that overlays a Figma frame on each Deployxa preview build and automatically flags every spacing, type and colour mismatch as a numbered pin with exact expected → actual values. Each flagged drift becomes a fix ticket on the pull request, and the next preview re-checks it until the designer signs off.

How I built it

In buiding the project, I used Next.js 15 (App Router) with React 19 and strict TypeScript. Styling is plain CSS with design tokens and CSS Modules. Data is in Postgres through Drizzle ORM. Playwright captures builds, and pixelmatch with pngjs diffs them. The Figma REST API supplies frame images, and the Figma MCP pulled variables into code. Claude Code built it phase by phase, with a dedicated a11y-reviewer subagent. It is deployed on Deployxa, with managed Postgres and encrypted env vars. Architecture: Figma frames and Deployxa preview URLs go into a capture worker. The worker screenshots each route at 375, 768 and 1440 px in light and dark. A diff step clusters changed pixels into numbered pins, and Postgres stores everything. Why: Preview deploys are the natural input for QA. Tokens-only CSS keeps both themes consistent and accessible. Server code is separated in src/server/, so the capture worker can later move into its own service. Work followed a written spec and phased plan.

Challenges we ran into

The main challenges were Figma API rate limits, noisy pixel diffs, matching design fonts and themes exactly, and running Chromium in a hosted runtime. Each one was anticipated in the plan so none of them derailed us: Figma rate limits: I cached exported frames and added clear messages explaining the limits. Noisy diffs: I improved the clustering so pixel changes become meaningful pins. Design fidelity: I enabled optical sizing on Bricolage Grotesque to match the Figma design. Hosting: The capture worker is isolated, so it can run as its own container if needed. The phased plan and clean separation of concerns meant every issue was a contained fix, and the same structure leaves room to scale.

Accomplishments that we're proud of

Firstly, I completed the project and solved the problem stated in my original plan. Secondly, I integrated Figma tooling (REST API and MCP) with Deployxa preview builds. I'd like to acknowledge that I built a solution for Deployxa’s platform right after using it for the first time. Accessibility is built in: every pin has a text-list twin, and both themes meet WCAG AA.

What we learned

Deployxa: This was my first time using Deployxa and I've learned how pull-request previews, managed Postgres and encrypted env vars fit into one Git-push workflow, and how easy it is to deploy and iterate. Planning: A clear spec and phased plan make AI-assisted building fast and reliable. Design systems: Tokens-first design keeps themes consistent. Accessibility: It is cheaper to build it in from the start than to fix later.

What's next for Drift Detector

Short term: Win the hackathon. Longer term: Scale by adding more integrations and use cases: Automatic capture from Deployxa deploy events. Matching each drift to an exact style value or design token. Ticket sync with GitHub and issue trackers. Team workspaces and saved per-user themes.

Built With

• css
• deployxa
• figma
• javascript
• nextjs
• typescript