Phonebook: The open-source catalog for mobile UI previews

The gap between code and design

In the world of mobile development, engineers have robust tools to visualize interfaces in isolation, such as @Preview in Jetpack Compose or #Preview in SwiftUI. However, these tools often remain trapped inside the IDE. When a designer or Product Manager needs to verify states, variants, or dark modes, they encounter an unnecessary technical barrier.

To bridge this gap, Phonebook was born, an open-source solution designed to transform those existing previews into a static, self-hosted web gallery, similar to what Storybook represents for web development.

Why Phonebook changes the game

The main advantage of this tool is that it does not require creating an additional layer of documentation or a parallel design system. It simply "harvests" what you have already built. As a JavaScript-based tool (executable via npx), it integrates perfectly into CI/CD workflows without the need for SaaS accounts or external cloud services.

Technical operation

The process is divided into two simple commands:

1. phonebook generate: Scans the repository, renders the native views, and creates a data manifest.
2. phonebook build: Transforms that manifest into a static site (HTML, CSS, JS) that anyone can open in a browser.

For Android, it uses technologies like Roborazzi and Robolectric to generate snapshots without the need for emulators, while for iOS, it leverages SnapshotPreviews via xcodebuild.

Integration with AI Agents

One of the most innovative aspects of Phonebook is its support for the MCP (Model Context Protocol). This allows AI agents to interact directly with your repository to manage the catalog. If you are interested in delving deeper into how these tools are transforming the sector, you can read more about AI Agents: The new security challenge in modern programming.

"Phonebook doesn't try to replace Figma, but it offers a real, shareable, and friendly view of the mobile interface that already exists in your codebase."

Conclusion

Maintaining component catalogs often fails when developers have to duplicate their work. Phonebook bets on automation based on the reality of the repository. By not requiring complex infrastructure, it is an ideal option for teams looking for efficiency without adding layers of technical bureaucracy.

To get started, you can install the tool globally via npm install -g @stag-build/phonebook and start sharing your components with the entire team today.