Spyglass

•
16
•

Render Compose UI @Preview functions to PNG and compare them against design mocks without an IDE, emulator, or build modifications.

Spyglass provides automated visual feedback for Jetpack Compose and Compose Multiplatform without needing Android Studio or an emulator. It inspects compiled classes, renders @Preview functions into cropped PNG images via an offscreen Skia canvas on the project's own classpath, and compares them against target design mockups. Designed specifically to close the feedback loop for AI coding agents, developers, and CI pipelines, it reports structural similarity scores, visual diff heatmaps, and bounding-box coordinates in pixels and density-independent pixels (dp), enabling automated or manual visual correction with zero permanent modifications to the build configuration.

주요 기능

01Automated perceptual visual diffing against design mocks with similarity scores and heatmap generation
02Comprehensive Compose feature support including @PreviewParameter, dark/light modes, font scaling, and multi-previews
03Native MCP server support to return compact JSON summaries and visual image strips directly to coding agents
04Detailed region-of-difference breakdown providing bounding boxes in both px and dp coordinates
0516 GitHub stars
06IDE-free offscreen preview rendering using an embedded Gradle plugin and an offscreen ImageComposeScene

사용 사례

01Empowering AI coding agents to visually inspect generated Compose code and iterate toward pixel-perfect design alignment
02Verifying UI component states, dynamic themes, and localized parameters directly from the terminal or CLI scripts
03Automating headless visual regression and design-compliance checks in CI/CD pipelines without running heavy emulators