> ## Documentation Index
> Fetch the complete documentation index at: https://docs.flowstep.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Edita i itera els dissenys de Flowstep per xat o llenç

> Refina qualsevol pantalla generada per Flowstep mitjançant edició visual manual o prompts basats en xat — itera tantes vegades com calgui fins que el disseny sigui correcte.

<Frame>
  <img src="https://mintcdn.com/flowstep/iVYFuG-E2bJvmdDE/images/Screenshot-2026-05-06-at-14.25.48.png?fit=max&auto=format&n=iVYFuG-E2bJvmdDE&q=85&s=0a67045dde91f73cae39afde3d359269" alt="Screenshot 2026 05 06 At 14 25 48" width="2338" height="1510" data-path="images/Screenshot-2026-05-06-at-14.25.48.png" />
</Frame>

Els dissenys de Flowstep són totalment editables després de la generació. No estàs limitat a allò que la IA produeix inicialment, pots ajustar els visuals directament a l'editor, usa xat per descriure els canvis en llenguatge natural, o demana a Flowstep que generi variacions i noves pantalles. Usa el mètode que millor s'adapti al canvi que vols fer.

## Dues formes d'editar

<Tabs>
  <Tab title="Edició visual manual">
    Fes canvis directament al llenç seleccionant i modificant elements. Aquest mètode funciona millor per a ajustos precisos: moure un component, canviar un color, actualitzar una etiqueta o ajustar l'espaiat.

    <Steps>
      <Step title="Selecciona l'element que vols canviar">
        Fes clic en qualsevol component o capa del teu disseny per seleccionar-lo.
      </Step>

      <Step title="Fes els teus canvis">
        Utilitza els controls de l'editor per ajustar propietats com color, mida, posició o contingut de text.
      </Step>

      <Step title="Revisa el resultat">
        Els teus canvis s'apliquen immediatament al llenç. Continua editant o passa a la pantalla següent.
      </Step>
    </Steps>
  </Tab>

  <Tab title="Edició basada en xat">
    Descriu el canvi que vols en llenguatge natural i Flowstep actualitza el disseny per a tu. Aquest mètode és més ràpid per a canvis generals o estructurals: ajustar la disposició, repensar una secció o aplicar una direcció d'estil.

    <Steps>
      <Step title="Obrir el panell de xat">
        Selecciona la pantalla que vols editar, després obrir l'entrada de xat.
      </Step>

      <Step title="Descriu el teu canvi">
        Escriu allò que vols que Flowstep actualitzi. Sigues específic sobre allò que hauria de canviar i per què, si ajuda.
      </Step>

      <Step title="Revisa el disseny actualitzat">
        Flowstep aplica el canvi i et mostra el resultat. Si no és del tot correcte, envia un missatge de seguiment per refinar més.
      </Step>
    </Steps>

    Les edicions i regeneracions actualitzen la pantalla seleccionada **in place** en lloc d'afegir una pantalla nova, mentre Flowstep transmet el canvi, l'element en el qual està treballant s'il·lumina amb una vora discontínua verda. Generar sense una pantalla seleccionada afegeix una pantalla nova en el seu lloc.
  </Tab>
</Tabs>

## Edita només una part d'una pantalla

No has d'editar pantalles senceres. Selecciona un subelement — una targeta, un botó, una etiqueta de text — i el teu prompt de xat s'aplica només a aquest, deixant la resta de la pantalla sense tocar.

* Canvia al mode **Direct selection** amb **Shift+V** (o la llista desplegable del botó de la barra d'eines **Select**) per seleccionar l'element més profund sota el teu clic. Prem **V** per a la selecció normal, o mantén **Cmd** (Mac) / **Ctrl** (Windows) per usar la selecció directa temporalment. **Escape** surt de la selecció directa.
* Selecciona subelements en múltiples pantalles amb **Cmd+Shift** — un únic prompt pot editar fins a 6 pantalles per missatge.

Quan se selecciona un element d'imatge (fora del mode estructura de filferro), apareix un panell **Image** al panell de propietats: visualitza la imatge, canvia-la arrossegant un fitxer d'imatge nou a la visualització prèvia o fent clic a **Pick image**, o guarda-la amb **Download image**.

## Restaura una versió anterior

Cada generació IA a l'historial de xat guarda el seu resultat original. Si una pantalla ha estat editada o suprimida des que va ser generada, el seu missatge de xat mostra un botó **Restore** — **Restore original** per revertir edicions, o **Restore** / **Restore all** per recuperar pantalles suprimides. Utilitza-ho per tornar a un estat conegut i correcte després que una edició vagi en la direcció equivocada.

## Accions d'un sol clic

<Frame>
  <img src="https://mintcdn.com/flowstep/iVYFuG-E2bJvmdDE/images/Screenshot-2026-05-06-at-14.29.34.png?fit=max&auto=format&n=iVYFuG-E2bJvmdDE&q=85&s=52e0f38e4c4506adbecdccc7a95be652" alt="Screenshot 2026 05 06 At 14 29 34" width="2436" height="1528" data-path="images/Screenshot-2026-05-06-at-14.29.34.png" />
</Frame>

Més allà de les edicions directes, pots demanar a Flowstep que explori alternatives:

* **Intenta de nou des de zero** — demana a Flowstep que produeixi una versió nova de la pantalla actual amb una disposició diferent o una direcció visual diferent.
* **Mostra la pantalla següent** — demana a Flowstep que generi allò que ve lògicament a continuació al flux de l'usuari.
* **Fes que es vegi bé** — ajusta l'espaiat, l'alineació i els colors en el disseny. La disposició es manté igual.

Aquestes opcions et permeten iterar ràpidament sense haver d'escriure un prompt cada vegada.

## Iterar per refinar

El disseny rarament és perfecte en el primer intent. Usa l'edició basada en xat per a cada ronda de retroalimentació: descriu allò que funciona i allò que no, i Flowstep s'ajusta a partir d'aquí. No hi ha límit en el nombre de vegades que pots iterar en una pantalla.

<Tip>
  Quan iteris per xat, referencia elements específics pel seu nom o ubicació per obtenir resultats més precisos. Per exemple: "Mou el botó de cridada a l'acció a la part inferior de la pantalla i fes-lo ample complet" és més efectiu que "arregla el botó."
</Tip>
