Skip to main content
Screenshot 2026 05 06 At 14 19 49
Kun olet valmis jakamaan tai luovuttamaan suunnitelman, Flowstep antaa sinun viedä sen staattisena kuvana — joko JPG- tai PNG-muodossa. Molemmat muodot ovat laajalti tuettuja suunnitteluohjelmistoissa, esityssoftwaressa ja selaimissa, joten voit ottaa AI-generoitujen suunnitelmasi mihin tahansa tarvitset.

​
Kuinka viet suunnitelmasi

1

Avaa suunnitelmasi

Siirry Flowstepin sisällä viettävään suunnitelmaan.
2

Avaa vientivalikko

Etsi vientivalinta työkaluriviltä tai suunnittelupaneelista. Valitse se avaamaan vientiasetukset.
3

Valitse muotosi

Valitse joko JPG tai PNG käyttöaiheesi mukaan (katso alla oleva vertailu).
4

Lataa tiedosto

Vahvista valintasi ja lataa viety kuva laitteeseesi.
Screenshot 2026 05 06 At 14 19 39

​
JPG vs PNG: mitä muotoa sinun pitäisi käyttää?

Jos liität suunnitelmasi esityskansion kalvoon tai lähetät nopean esikatselun asiakkaalle, JPG on yleensä oikea valinta. Jos tarvitset terävät reunat tai läpinäkyvän taustan — esimerkiksi suunnitelman päällelaittamiseen toiselle kuvalle — käytä PNG:tä.

​
Koodin vienti

Kuvien lisäksi Code-painike vie suunnitelmasi React + Tailwind -koodina — kopioi lyhennelmän tai lataa koko nippu ZIP-tiedostona. Voit viedä yhden näytön, useita valittuja näyttöjä tai kokonaisen tiedoston kerralla. Kun viet useamman kuin yhden näytön, jokaista näyttöä vastaa oma komponenttitiedosto ja mahdollisesti näyttöjen välille määrittämäsi navigaatio kytketään generoituun koodiin, joten viety sovellus on klikkautuva päästä päähän. Niput ovat itsenäisiä: kuvat, joita käytit suunnittelussa (myös ne, jotka liitit chat-paneeliin), sisällytetään public/assets/-kansioon siten, että koodi viittaa niihin paikallisilla poluilla, joten vienti toimii sellaisenaan. Ladatut tiedostot — sekä kuvat että koodiniput — nimetään niiden näytön mukaan (tiedoston nimen perusteella, jos näyttö on nimetön), mikä pitää viennit helposti tunnistettavissa, kun työskentelet useiden näyttöjen kanssa.

​
Lähetä suunnitelmat koodausagenttillesi

Sen sijaan, että lataisit tiedoston, voit toimittaa suunnitelman suoraan tekoälyn koodausavustajalle. Napsauta Send to your coding agent -painiketta työkalurivissä — tai avaa vientivalintaikkuna ja valitse sama vaihtoehto — kopioida valmiiksi liitettävä kehotesi agentillesi:
Agentissasi lukee nämä näytöt MCP:n yli ja rakentaa ne repositoriossasi. Liitä tämä kehotus Claudeen, Cursoriin tai suosikiisi agenttiisi.
Kehotus kertoo agentillesi noutaa näytöt Flowstepin MCP-palvelimen yli ja rakentaa ne uudelleen koodikantaan. Voit luovuttaa yhden näytön, useita valittuja näyttöjä tai kokonaisen tiedoston kerralla — kehotus sopeutuu valitsemiesi näyttöjen mukaan. Tämä käyttää Flowstepin MCP-palvelinta, joten yhdistä MCP-asiakas ensin. Katso MCP-palvelimen yleiskatsaus tuettujen asiakkaiden osalta ja Pika-aloitus yhdistääksesi yhden.
Jos sinun on otettava suunnitelmasi vektorimuokkaustyönkulkuun, kopioi se suoraan Figmaan. Katso Kopioi Flowstep-suunnitelmat Figmaan välittömästi.