Visual Diff Analyzer
Microsoft · Fluent Design Studio
Design tooling
Making icon changes visible, comparable, and part of the release process.
Tooling built to give designers at Microsoft a visual representation of changes in updated icons across the fluentui-system-icons repo. What started as a standalone website is now a Python script embedded directly in the CI pipeline — automatically generating diff reports on every bi-weekly icon push.
My contribution
- generates overlaid images of old and new icons, using color and transparency to highlight exactly which pixels changed
- uses ImageMagick to produce a numerical diff score alongside the visual, giving designers and engineers a shared language for "how different is this?"
- evolved from a manually-updated website to a script that runs automatically as part of the bi-weekly icon release process, so the team always has a diff report without anyone having to think about it
Image analysisCIDesigner workflows
