Comparison
Windcraft vs Chromatic
Chromatic snapshots your stories and flags pixel changes between commits, so unintended visual diffs get caught in review. Windcraft works a step earlier and on different signal: it gives AI tools the real values to generate from and statically flags code that left the system, before anything renders.
Chromatic detects visual change after the fact, by comparing rendered screenshots of your components. Windcraft prevents design drift before render, by serving tokens to AI as it writes and analyzing the code against your system. One answers "did this look different than last time"; the other answers "is this on the design system at all". They catch different failures at different moments, which is why they coexist comfortably.
How they compare
| Aspect | Chromatic | Windcraft |
|---|---|---|
| Mechanism | Screenshot diffs of rendered stories | Static analysis of code against tokens |
| When it acts | After render, in review | At generation, pre-commit, and in CI |
| What it needs | Stories plus CI snapshots | Your tokens and a CLI check |
| What it catches | Any visual change, including intended | Off-system values specifically |
When Chromatic is the right call
Chromatic wins for catching unintended visual changes across a component library and for review workflows where a human approves diffs — it is excellent at "this pixel moved and nobody meant it to". Windcraft does not diff pixels. It wins at the prevention end: stopping off-token values from being written in the first place, especially by AI. Run Chromatic to catch regressions in rendered components; run Windcraft to keep the code on-system before it ever renders.
FAQ
- Does Windcraft do visual regression testing?
- No. It does not render or screenshot anything. Windcraft analyzes code statically against your tokens and contracts. For pixel-level regression diffs, a tool like Chromatic is the right one — and they complement each other.
- Why catch drift in code if Chromatic catches it visually?
- Because catching it in code is earlier and cheaper. A static check flags p-[18px] or an off-brand hex the moment it is written, with no render, no story, and no snapshot baseline. Visual diffing catches what slips past, after the component renders.
- Can I use both?
- Yes. Windcraft prevents off-system code at write time; Chromatic catches unintended visual changes at render time. Together they cover prevention and detection.