Saltar al contingut principal
Flowstep genera pantalles d’interfície d’usuari a partir de prompts en llenguatge natural, i et permet passar de la idea al disseny visual en qüestió de segons. Tant si necessites una sola pantalla per validar un concepte com un conjunt complet de pantalles que cobreixi tot un recorregut d’usuari, només cal un prompt ben escrit per començar.

​
Genera un disseny

1

Obre un projecte nou

Des del tauler de Flowstep, crea un projecte nou o obre’n un d’existent on vulguis afegir pantalles.
2

Escriu el teu prompt

Escriu una descripció de la pantalla o les pantalles que vols. Sigues concret sobre el tipus d’aplicació, l’objectiu de l’usuari i el contingut que esperes veure.
3

Indica quantes pantalles vols

Per defecte, Flowstep genera una sola pantalla. Si en vols diverses, indica-ho explícitament al teu prompt: Flowstep pot generar fins a 6 pantalles a partir d’un sol prompt.
4

Genera

Envia el teu prompt. Flowstep crea les pantalles i les mostra a l’editor, a punt per revisar-les o refinar-les.
Quan crees un fitxer nou i n’envies el primer prompt, Flowstep li posa un nom segons aquest prompt perquè sigui fàcil de trobar més endavant. Un fitxer que ja té nom, o que té prompts anteriors, conserva el seu nom, i tu pots canviar el nom de qualsevol fitxer en qualsevol moment.

​
Atura una generació

Mentre Flowstep respon, el botó d’enviament es converteix en un botó d’aturada (Stop Flowstep response). Fes clic per aturar la generació. En una sol·licitud de diverses pantalles, les pantalles que ja han acabat es mantenen al llenç i les que no han acabat s’eliminen. Si aturs la generació després que Flowstep hagi començat a construir pantalles, igualment es consumeix el missatge: consulta missatges i límits.

​
Una pantalla o diverses pantalles

Pots generar una pantalla o fins a 6 pantalles a partir d’un sol prompt. Els dos enfocaments s’adapten a diferents etapes del treball de disseny.
  • Una pantalla — ideal per explorar un estat concret de la interfície, un component o un concepte puntual.
  • Diverses pantalles — ideal per dibuixar fluxos, comparar opcions de disposició o cobrir ràpidament un recorregut d’usuari complet.
Quan vulguis diverses pantalles, sigues explícit al teu prompt. Flowstep fa servir la redacció del prompt per decidir quantes pantalles produeix, de manera que els prompts vagues solen retornar una sola pantalla. Les pantalles generades s’anomenen Screen 1, Screen 2, etc. Fes servir aquests noms per referir-te a una pantalla concreta en els prompts de seguiment.

​
Més maneres de fer prompts

El text no és l’única entrada. També pots:
  • Adjuntar fitxers — afegeix al prompt imatges (JPG, PNG, WEBP) o documents (PDF, MD, TXT) de fins a 3 MB cadascun, arrossegant-los, amb el selector de fitxers o enganxant-los. Fes referència a una imatge adjunta al prompt i Flowstep la incorpora a les pantalles generades. Consulta Utilitza referències.
  • Dictar el prompt — fes clic al botó del micròfon de la barra de prompts (o prem Cmd+Shift+V a Mac, Ctrl+Shift+V a Windows) i parla durant fins a 60 segons. La transcripció s’afegeix al text que ja hagis escrit.
  • Deixar que Flowstep investigui la web — quan el teu prompt ho demani (per exemple, «clona la pàgina de preus de Stripe»), Flowstep pot cercar a la web i llegir la identitat visual d’una pàgina (colors, tipografies, logotip i components de la interfície) i fer-la servir a les pantalles generades. Flowstep decideix per si mateix si fa la investigació, de manera que no s’activarà necessàriament en cada prompt. Tingues en compte que els llocs web recreats fan servir imatges i navegació diferents de l’original.
  • Definir directrius de disseny — estableix regles d’estil permanents que s’apliquen a totes les generacions del fitxer. Consulta Directrius de disseny.

​
Escriure prompts efectius

Exemple de prompt per a una sola pantalla: «Dissenya una pantalla d’inici de sessió per a mòbil per a una aplicació de seguiment d’exercici físic, amb camps de correu electrònic i contrasenya, un botó per iniciar sessió i un enllaç per recuperar la contrasenya.»
Exemple de prompt per a diverses pantalles: «Genera diverses pantalles per al flux de benvinguda d’una aplicació de lliurament de menjar: cobreix la selecció de preferències de cuina, la introducció d’una adreça de lliurament i la confirmació de la primera comanda.»
Exemple de prompt per a un recorregut complet: «Cobreix tot el recorregut de l’usuari en una aplicació d’informes de despeses, des d’enviar un rebut fins a l’aprovació del responsable.»
Té en compte aquests principis quan escriguis prompts:
  • Indica la plataforma (mòbil, escriptori, tauleta) perquè Flowstep dimensioni bé les pantalles.
  • Descriu l’objectiu de l’usuari, no només els elements de la interfície: Flowstep infereix la disposició a partir de la intenció.
  • Inclou el contingut clau, com ara etiquetes, accions o dades, si és important per al disseny.
  • Fes servir frases com «genera diverses pantalles» o «cobreix tot el recorregut de l’usuari» per activar la sortida de diverses pantalles.