Phonebook: El catálogo open source para previsualizar UI móvil

La brecha entre el código y el diseño

En el mundo del desarrollo móvil, los ingenieros cuentan con herramientas robustas para visualizar interfaces en aislamiento, como @Preview en Jetpack Compose o #Preview en SwiftUI. Sin embargo, estas herramientas suelen quedar atrapadas dentro del IDE. Cuando un diseñador o un Product Manager necesita verificar estados, variantes o modos oscuros, se encuentran con una barrera técnica innecesaria.

Para cerrar esta brecha, ha nacido Phonebook, una solución open source diseñada para transformar esas previsualizaciones existentes en una galería web estática y autoalojada, similar a lo que Storybook representa para el desarrollo web.

¿Por qué Phonebook cambia las reglas?

La principal ventaja de esta herramienta es que no requiere crear una capa adicional de documentación o un sistema de diseño paralelo. Simplemente "cosecha" lo que ya has construido. Al ser una herramienta basada en JavaScript (ejecutable vía npx), se integra perfectamente en flujos de trabajo de CI/CD sin necesidad de cuentas SaaS o servicios en la nube externos.

Funcionamiento técnico

El proceso se divide en dos comandos simples:

1. phonebook generate: Escanea el repositorio, renderiza las vistas nativas y crea un manifiesto de datos.
2. phonebook build: Transforma ese manifiesto en un sitio estático (HTML, CSS, JS) que cualquiera puede abrir en un navegador.

Para Android, utiliza tecnologías como Roborazzi y Robolectric para generar capturas sin necesidad de emuladores, mientras que en iOS aprovecha SnapshotPreviews a través de xcodebuild.

Integración con Agentes de IA

Uno de los aspectos más innovadores de Phonebook es su soporte para el protocolo MCP (Model Context Protocol). Esto permite que los agentes de IA interactúen directamente con tu repositorio para gestionar el catálogo. Si te interesa profundizar en cómo estas herramientas están transformando el sector, puedes leer más sobre los Agentes de IA: El nuevo reto de seguridad en la programación moderna.

"Phonebook no intenta reemplazar a Figma, pero ofrece una visión real, compartible y amigable de la interfaz móvil que ya existe en tu código base."

Conclusión

El mantenimiento de catálogos de componentes suele fallar cuando los desarrolladores deben duplicar su trabajo. Phonebook apuesta por la automatización basada en la realidad del repositorio. Al no requerir una infraestructura compleja, es una opción ideal para equipos que buscan eficiencia sin añadir capas de burocracia técnica.

Para comenzar, puedes instalar la herramienta globalmente mediante npm install -g @stag-build/phonebook y empezar a compartir tus componentes con todo el equipo hoy mismo.