Phonebook: El catàleg open source per previsualitzar UI mòbil

La bretxa entre el codi i el disseny

En el món del desenvolupament mòbil, els enginyers compten amb eines robustes per visualitzar interfícies aïlladament, com @Preview a Jetpack Compose o #Preview a SwiftUI. Tanmateix, aquestes eines sovint queden atrapades dins l'IDE. Quan un dissenyador o un Product Manager necessita verificar estats, variants o modes foscos, es troben amb una barrera tècnica innecessària.

Per tancar aquesta bretxa, ha nascut Phonebook, una solució open source dissenyada per transformar aquestes previsualitzacions existents en una galeria web estàtica i autoallotjada, similar al que Storybook representa per al desenvolupament web.

Per què Phonebook canvia les regles?

El principal avantatge d'aquesta eina és que no requereix crear una capa addicional de documentació o un sistema de disseny paral·lel. Simplement "collita" el que ja has construït. En ser una eina basada en JavaScript (executable via npx), s'integra perfectament en fluxos de treball de CI/CD sense necessitat de comptes SaaS o serveis al núvol externs.

Funcionament tècnic

El procés es divideix en dos comandaments simples:

1. phonebook generate: Escaneja el repositori, renderitza les vistes natives i crea un manifest de dades.
2. phonebook build: Transforma aquest manifest en un lloc estàtic (HTML, CSS, JS) que qualsevol pot obrir en un navegador.

Per a Android, utilitza tecnologies com Roborazzi i Robolectric per generar captures sense necessitat d'emuladors, mentre que a iOS aprofita SnapshotPreviews a través de xcodebuild.

Integració amb Agents d'IA

Un dels aspectes més innovadors de Phonebook és el seu suport per al protocol MCP (Model Context Protocol). Això permet que els agents d'IA interactuïn directament amb el teu repositori per gestionar el catàleg. Si t'interessa aprofundir en com aquestes eines estan transformant el sector, pots llegir més sobre els Agents d'IA: El nou repte de seguretat en la programació moderna.

"Phonebook no intenta reemplaçar Figma, però ofereix una visió real, compartible i amigable de la interfície mòbil que ja existeix en la teva base de codi."

Conclusió

El manteniment de catàlegs de components sol fallar quan els desenvolupadors han de duplicar la seva feina. Phonebook aposta per l'automatització basada en la realitat del repositori. En no requerir una infraestructura complexa, és una opció ideal per a equips que busquen eficiència sense afegir capes de burocràcia tècnica.

Per començar, pots instal·lar l'eina globalment mitjançant npm install -g @stag-build/phonebook i començar a compartir els teus components amb tot l'equip avui mateix.