Koodin ja kehysasettelun luonti
Yleiskatsaus
Kun olet lisännyt kuvasi rajalaatikoilla ja määrittänyt käyttäytymismalleja, voit luoda joko toimivan komponenttikoodin tai kehysasettelun. Tekoäly käyttää rajalaatikoiden sijainteja, elementtien tyyppejä ja käyttäytymismäärityksiä tuottaakseen tarkan tuloksen.
Tekoälyavustajan sivupalkki
Tekoälyavustajan paneeli on oikeanpuoleinen sivupalkki, jota käytetään koodin tai kehysasettelun luonnin määrittämiseen ja käynnistämiseen. Se sisältää seuraavat ohjaimet:
Visuaalisen mallin valitsin
Valitse, mitä tekoälypohjaista visuaalista mallia käytetään kuvien analysointiin ja tulosten luontiin. Eri mallit voivat tuottaa eri tasoisia yksityiskohtia ja tarkkuutta.
Kehysvalitsin
Valitse kohdekehys koodin luontia varten (esim. React, Vue, Svelte). Luotu koodi käyttää valitun kehyksen syntaksia ja malleja.
Komponentit/Kehykset-välilehdet
Vaihda komponenttikoodin (Komponentit-välilehti) tai kehysasettelujen (Kehykset-välilehti) luomisen välillä lisätyistä kuvista.
Kuvaryhmät
Luettelee kaikki kuvaryhmät, jotka liittyvät nykyiseen käänteiseen suunnitteluprojektiin. Valitse ryhmä esikatsellaksesi sen kuvia ja määrittääksesi luontiasetukset. Jokainen ryhmä näyttää kuvien määrän.
Luo lohkoja
Napsauta aloittaaksesi tekoälypohjaisen luontiprosessin. Tekoäly analysoi valitun ryhmän kuvat sekä kaikki rajalaatikoiden merkinnät ja käyttäytymismallit tuottaakseen tuloksen.
Tulostustilat
Luo koodi
Muunna lisätty kuva toimivaksi komponenttikoodiksi kohdekehyksellesi (React, Vue, Svelte jne.). Luotu koodi sisältää asettelun, tyylin ja kaikki rajalaatikoihin määritetyt käyttäytymismallit.
Luo kehys
Vie lisätty kuva kehysasetteluna, joka avautuu kehystyökalussa. Jokaisesta rajalaatikosta tulee kehysasettelun elementti, jota voit edelleen tarkentaa, järjestää uudelleen ja yhdistää muihin näkymiin.
Koodin luontitoiminnot
Kehyksen valinta
Valitse kohdekehys ennen luontia. Tuetut kehykset ovat React, Vue, Svelte, SolidJS, Angular ja muut.
Käyttäytymisen kartoitus
Rajalaatikoihin määritetyt käyttäytymismallit muunnetaan tapahtumakäsittelijöiksi, navigointilogiikaksi, modaali-ikkunoiksi ja muuksi interaktiiviseksi koodiksi tulosteessa.
Asettelun tarkkuus
Tekoäly käyttää rajalaatikoiden sijainteja ja kokoja kuvassa luodakseen asettelun, joka vastaa läheisesti alkuperäistä visuaalista suunnittelua.
Tallenna lohkoihin
Luodut komponentit voidaan tallentaa suoraan lohkokirjastoon, jotta niitä voidaan käyttää uudelleen eri projekteissa.
Lisää projektiin
Lisää luotu koodi suoraan nykyiseen projektiisi uusina komponenttitiedostoina.
Vinkkejä
Parhaiden tulosten saavuttamiseksi käytä korkearesoluutioisia kuvia, joissa on selkeät käyttöliittymäelementit. Piirrä rajalaatikot tiukasti jokaisen elementin ympärille, jotta koodin luonti olisi tarkempaa. Määritä erityisiä käyttäytymismalleja sen sijaan, että käyttäisit epämääräisiä kuvauksia – "avaa rekisteröitymismodaali" toimii paremmin kuin "tekee jotain". Tekoäly toimii parhaiten tavallisten verkkosivuasettelujen ja yleisten käyttöliittymämallien kanssa.