Design systems break silently. Ghost makes the drift visible.
Ghost is a Design System Reality Scanner. It compares what a design system intends — the Figma source of truth — against what's actually rendering in production, and surfaces every deviation visually. The hero interaction is a comparison slider: drag left for production reality, drag right for design spec. The gap between them is the drift. I built Ghost as a self-initiated concept after running into this exact problem indirectly at LexisNexis — the token pipeline I shipped there solved how tokens get defined, but not how to verify that production actually uses them the way the spec intends.
Nobody checks if production matches the spec.
A developer hardcodes a padding value instead of using a token. A color shifts by one hex digit during a refactor. Border radius rounds down from 8px to 6px because someone eyeballed it. None of these are bugs. All of them pass code review. And after six months of compounding, your product looks like three different products wearing the same logo.
The tools that exist — Chromatic, Percy, Applitools — catch regressions against previous code. They answer "did this component change since last week?" They don't answer the question designers actually care about: does our live product match our design system?
Designers check work by holding the spec next to the output.
The comparison slider became the centerpiece because it mirrors how designers actually check work — they hold the spec next to the output and look for differences. Ghost automates that comparison and makes the drift tangible. When you drag the handle and watch a button shift from indigo to purple, or padding collapse by 4 pixels, you don't need a report to understand the problem. You can see it.
I mapped every tool in the space before designing Ghost. Chromatic captures Storybook snapshots but never compares against Figma. Knapsack manages the system but doesn't verify production follows it. Applitools is the closest — but their interface is a QA test results dashboard, not a design investigation tool. Ghost's position: the design-first tool for understanding and fixing design system drift.
Drag to reveal. Detect, diagnose, remediate.
The Comparison Slider is the first thing you see on the dashboard. Design spec on the left, production reality on the right. Drag to reveal. Deviation markers overlay the production side — red for breaking changes, amber for drift, blue for undocumented variants. Measurement annotations show the exact values: "Expected: padding 16px. Found: padding 12px. Delta: -4px."
The AI Fix Flow is what makes Ghost unique. Select a deviation. See the AI recommendation. Click "Apply Fix to Figma." Watch a three-step progress animation — connecting to the Figma API, locating the component, updating the property. The marker transitions from red to green. No competitor offers detection-to-remediation in one workflow.
Four view modes for different investigation needs.
Slider is the dramatic reveal — the demo moment. Side-by-Side shows both panels at full scale for detailed comparison. Overlay with opacity control blends layers for precise alignment. Timeline shows the same page at four points in time, revealing how drift accumulated gradually — a view no competitor offers.
Component Health Tracking goes beyond point-in-time snapshots. Each component has a health ring, sparkline trend, deviation count, and instance gallery. WCAG compliance is integrated directly into the drift narrative — "This color deviation is also a WCAG contrast failure: found 2.8:1, required 4.5:1." Accessibility isn't an afterthought; it's a core signal.
Five iterations shaped by building, testing, and direct feedback.
Iteration 1: The Monitoring Console. A standard dashboard — fidelity score donut, stat cards, trend chart. The comparison slider existed but was buried behind three clicks. Expert feedback was blunt: "It's not bad, but it's not interesting." Then the reviewer found the comparison slider. "That's brilliant. That's a very nice solution." It should be "front and center," "pushed more," "so the user is incentivized to click on it."
Iteration 2: Slider as Hero. The comparison slider became the first thing you see — interactive on the homepage, pre-loaded with the most deviation-heavy scan. The monitoring elements got demoted below the fold.
Iteration 3: Investigation UX. The same feedback drew a parallel to my LexisNexis work: "The people that use the tools are people that investigate. So they need the UX to be built for investigation." I added Quick Investigation search, restructured scan detail as an investigation workspace.
Iteration 4: AI Remediation. The strongest suggestion from that feedback loop: "You can take the findings of the issue and tell it, go and fix something. That makes the tool a lot better." The analogy that came up — an AI agent managing templates via API — reframed Ghost entirely. This led to the AI Fix flow: a three-stage animated sequence where Ghost connects to Figma, locates the component, updates the property, and confirms the change. No competitor offers this. It transforms Ghost from detection to remediation.
Iteration 5: UX Friction Audit. I recorded myself using Ghost and analyzed the mouse movements. The slider handle was too small. The primary CTA was in the wrong corner. The deviation markers were so large they turned the production side into a solid red wash. Each became a targeted fix.
Clinical precision as the visual identity.
Ghost uses Clash Display for headings, DM Sans for body, and JetBrains Mono for data values. The color system is restrained — deep indigo accent, clean whites, severity colors only where they carry meaning. The tone is surgical: "Deviation detected" not "violation found." "Recommendation available" not "fix required." Drift isn't anyone's fault, and the tool shouldn't assign blame.
The slider as theatrical interaction. A side-by-side diff would have been simpler. But the comparison slider creates a moment of discovery. Dragging the handle and watching a button change color, padding shift, a divider disappear — that's visceral. The reviewer used the word "brilliant" when he first dragged it.
Component-level, not page-level scanning. Design systems are built from components, not pages. Ghost maps every deviation to a specific component so teams can fix systemically rather than page-by-page.
A concept that earned its place.
Ghost is a prototype with mock data. But the investigation workflow it embodies is real, informed by competitive analysis of $15M+ funded tools (Chromatic, Knapsack, Applitools, Zeroheight) and direct external feedback that tore apart my first version. Here's what I built:
A drag-to-reveal comparison slider that makes design drift tangible in three seconds. No competitor offers this interaction — the closest tools (Chromatic, Applitools) show diffs as side-by-side image panels or pass/fail tables.
21 components tracked for drift with individual health rings, sparkline trends, and instance galleries showing where each component appears across pages.
Four view modes — Slider, Side-by-Side, Overlay, Timeline — each serving a different investigation need. Timeline in particular, showing how drift accumulated over four points in time, is a view no competitor offers.
An AI Fix flow that connects to Figma, locates the drifting component, and updates the property — detection, diagnosis, and remediation in one workflow. The feature that turned Ghost from an audit tool into a remediation tool.
What I'd do differently. I'd start with the comparison slider on day one instead of building a monitoring dashboard first. Five iterations taught me that the signature interaction should have been the first thing I built, not the third — the dashboard was conventional, and conventional is invisible.
Built with: Next.js 14, Tailwind, Recharts, Framer Motion, Lucide React. Fully interactive prototype with mock data; no backend.
