Kod- och wireframegenerering
Oversikt
Nar du har annoterat din bild med avgransningsrutor och tilldelat beteenden kan du generera antingen fungerande komponentkod eller en wireframe-layout. AI:n anvander avgransningsrutornas positioner, elementtyper och beteenderiktningar for att producera exakt utdata.
AI-assistentsidofalt
AI-assistentpanelen ar det hogra sidofaltet som anvands for att konfigurera och utlosa kod- eller wireframegenerering. Den innehaller foljande kontroller:
Visionmodellvaljare
Valj vilken AI-visionmodell som ska anvandas for att analysera dina bilder och generera utdata. Olika modeller kan producera olika detaljniva och precision.
Ramverksvaljare
Valj malramverket for kodgenerering (t.ex. React, Vue, Svelte). Den genererade koden kommer att anvanda det valda ramverkets syntax och monster.
Komponenter / Wireframes-flikar
Vaxla mellan att generera komponentkod (fliken Komponenter) eller wireframe-layouter (fliken Wireframes) fran dina annoterade bilder.
Bildgrupper
Listar alla dina bildgrupper for det aktuella reverse-projektet. Valj en grupp for att forhandsgranska dess bilder och konfigurera generering. Varje grupp visar sitt bildantal.
Generera block
Klicka for att starta AI-genereringsprocessen. AI:n analyserar den valda gruppens bilder tillsammans med eventuella avgransningsrute-annoteringar och beteenden for att producera utdata.
Utdatalage
Generera kod
Konvertera den annoterade bilden till fungerande komponentkod for ditt malramverk (React, Vue, Svelte, etc.). Den genererade koden inkluderar layouten, stilsattningen och eventuella beteenden du definierade pa avgransningsrutorna.
Generera wireframe
Exportera den annoterade bilden som en wireframe-layout som oppnas i Wireframe-verktyget. Varje avgransningsruta blir ett wireframe-element som du kan forfina ytterligare, omarrangera och koppla till andra skarmar.
Kodgenereringsfunktioner
Ramverksval
Valj ditt malramverk fore generering. Ramverk som stods inkluderar React, Vue, Svelte, SolidJS, Angular och fler.
Beteendemappning
Beteenden tilldelade till avgransningsrutor oversatts till handelsehanterare, navigeringslogik, modaler och annan interaktiv kod i utdatan.
Layoutnoggrannhet
AI:n anvander avgransningsrutornas positioner och storlekar fran bilden for att producera en layout som noggrant matchar den ursprungliga visuella designen.
Spara till block
Genererade komponenter kan sparas direkt till ditt Blockbibliotek for ateranvandning over projekt.
Lagg till i projekt
Infoga den genererade koden direkt i ditt aktuella projekt som nya komponentfiler.
Tips
For basta resultat, anvand hogupplosta bilder med tydliga UI-element. Rita avgransningsrutor tatt runt varje element for mer exakt kodgenerering. Tilldela specifika beteenden istallet for vaga beskrivningar — "oppnar registreringsmodal" fungerar battre an "gor nagot". AI:n fungerar bast med vanliga webblayouter och vanliga UI-monster.