Skip to main content
Screenshot 2026 05 06 At 14 19 49
Quan estàs preparat per a compartir o lliurar un disseny, Flowstep et permet exportar-lo com a imatge estàtica — JPG o PNG. Ambdós formats són àmpliament compatibles en les eines de disseny, programari de presentació i navegadors, de manera que pots portar els teus dissenys generats per IA a qualsevol lloc on els necessitis.

​
Com exportar el teu disseny

1

Obrir el teu disseny

Navega cap al disseny que vols exportar dins de Flowstep.
2

Obrir el menú d'exportació

Localitza l’opció d’exportació a la barra d’eines o al panell de disseny. Selecciona-la per obrir els paràmetres d’exportació.
3

Triar el format

Selecciona JPG o PNG segons el teu cas d’ús (consulta la comparació a continuació).
4

Descarregar el fitxer

Confirma la teva selecció i descarrega la imatge exportada al teu dispositiu.
Screenshot 2026 05 06 At 14 19 39

​
JPG vs PNG: quin format hauries d’utilitzar?

Si estàs copiant el teu disseny en una presentació de diapositives o enviant una vista prèvia ràpida a un client, JPG és normalment la millor opció. Si necessites vores nítides o un fons transparent — per exemple, per superposar el disseny sobre una altra imatge — utilitza PNG.

​
Exportar codi

A més d’imatges, el botó Code exporta el teu disseny com a codi React + Tailwind — copia un fragment o descarrega el paquet complet com a ZIP. Pots exportar una pantalla única, diverses pantalles seleccionades o un fitxer sencer alhora. Quan exportes més d’una pantalla, cadascuna es converteix en el seu propi fitxer de component i qualsevol navegació que hagis configurat entre pantalles es connecta al codi generat, de manera que l’aplicació exportada és clicable d’una punta a l’altra. Els paquets són autònoms: les imatges utilitzades en el disseny (incloses les que has adjuntat en el panell de xat) s’inclouen en una carpeta public/assets/ amb el codi que hi fa referència per ruta local, de manera que l’exportació s’executa tal qual. Els fitxers descarregats — tant les imatges com els paquets de codi — es nomen segons la pantalla a la qual pertanyen (tornant al nom del fitxer si la pantalla no té nom), la qual cosa facilita identificar les exportacions quan estàs treballant amb moltes pantalles.

​
Enviació de dissenys a l’agent de codificació

En lloc de descarregar un fitxer, pots passar un disseny directament a un assistent de codificació per IA. Fes clic a Send to your coding agent a la barra d’eines — o obri el diàleg d’exportació i triii la mateixa opció — per copiar un prompt llest per pegar per a l’agent:
L’agent llegeix aquestes pantalles a través d’MCP i les crea al teu repositori. Enganxa aquest prompt a Claude, Cursor o l’agent preferit.
El prompt diu a l’agent que obti les pantalles del servidor Flowstep MCP i les reconstrueixi a la teva base de codi. Pots passar una pantalla única, diverses pantalles seleccionades o un fitxer complet d’una vegada — el prompt s’adapta al que has seleccionat. Això utilitza el servidor Flowstep MCP, per tant, connecta primer un client MCP. Consulta la descripció general del servidor MCP pels clients compatibles i la Guia ràpida per connectar-ne un.
Si necessites portar el teu disseny a un flux de treball d’edició vectorial, copia’l directament a Figma. Consulta Copiar dissenys de Flowstep a Figma instantàniament.