Pagbuo ng Code at Wireframe
Pangkalahatang-ideya
Kapag mayroon ka nang anotadong imahe na may mga bounding box at itinalagang pag-uugali, maaari kang bumuo ng alinman sa gumaganang code ng component o isang layout ng wireframe. Ginagamit ng AI ang mga posisyon ng bounding box, mga uri ng elemento, at mga direksyon ng pag-uugali upang makagawa ng tumpak na output.
Sidebar ng AI Assistant
Ang AI Assistant panel ay ang sidebar sa kanang bahagi na ginagamit upang i-configure at i-trigger ang pagbuo ng code o wireframe. Naglalaman ito ng mga sumusunod na kontrol:
Tagapili ng Modelo ng Paningin
Piliin ang AI vision model na gagamitin para sa pagsusuri ng iyong mga imahe at pagbuo ng output. Ang iba't ibang mga modelo ay maaaring makagawa ng iba't ibang mga antas ng detalye at katumpakan.
Tagapili ng Framework
Piliin ang target na framework para sa pagbuo ng code (hal., React, Vue, Svelte). Ang nabuong code ay gagamit ng syntax at mga pattern ng napiling framework.
Mga Tab ng Mga Component / Wireframe
Lumipat sa pagitan ng pagbuo ng code ng component (Mga Component tab) o mga layout ng wireframe (Mga Wireframe tab) mula sa iyong anotadong mga imahe.
Mga Grupo ng Imahe
Ipinapakita ang lahat ng iyong mga grupo ng imahe para sa kasalukuyang reverse project. Piliin ang isang grupo upang i-preview ang mga imahe nito at i-configure ang pagbuo. Ipinapakita ng bawat grupo ang bilang ng imahe nito.
Bumuo ng mga Block
I-click upang simulan ang pagbuo ng AI. Sinusuri ng AI ang napiling mga imahe ng grupo kasama ang anumang mga anotasyon ng bounding box at mga pag-uugali upang makagawa ng output.
Mga Mode ng Output
Bumuo ng Code
I-convert ang anotadong imahe sa gumaganang code ng component para sa iyong target na framework. Kasama sa nabuong code ang layout, istilo, at anumang mga pag-uugali na iyong tinukoy sa mga bounding box.
Bumuo ng Wireframe
I-export ang anotadong imahe bilang isang layout ng wireframe na bubuksan sa tool ng Wireframe. Ang bawat bounding box ay nagiging isang elemento ng wireframe na maaari mong pinuhin, muling ayusin, at ikonekta sa iba pang mga screen.
Mga Feature ng Pagbuo ng Code
Pagpili ng Framework
Piliin ang iyong target na framework bago bumuo. Kasama sa mga sinusuportahang framework ang React, Vue, Svelte, SolidJS, Angular, at higit pa.
Pagmamapa ng Pag-uugali
Ang mga pag-uugali na itinalaga sa mga bounding box ay isinalin sa mga handler ng kaganapan, lohika ng pag-navigate, mga modal, at iba pang interactive na code sa output.
Katumpakan ng Layout
Ginagamit ng AI ang mga posisyon at laki ng bounding box mula sa imahe upang makagawa ng isang layout na malapit na tumutugma sa orihinal na visual na disenyo.
I-save sa Mga Block
Ang nabuong mga component ay maaaring i-save nang direkta sa iyong Block Library para sa muling paggamit sa mga proyekto.
Idagdag sa Proyekto
Ipasok ang nabuong code nang direkta sa iyong kasalukuyang proyekto bilang mga bagong file ng component.
Mga Tip
Para sa pinakamahusay na mga resulta, gumamit ng mga imahe na may mataas na resolusyon na may malinaw na mga elemento ng UI. Gumuhit ng mga bounding box na mahigpit na nakapalibot sa bawat elemento para sa mas tumpak na pagbuo ng code. Magtalaga ng mga partikular na pag-uugali sa halip na malabo na mga paglalarawan — "nagbubukas ng isang signup modal" ay gumagana nang mas mahusay kaysa sa "gumagawa ng isang bagay." Ang AI ay pinakamahusay na gumagana sa mga karaniwang layout ng web at mga karaniwang pattern ng UI.