Kode- og wireframe-generering
Oversigt
Når du har annoteret dit billede med afgrænsningsbokse og tildelt adfærd, kan du generere enten fungerende komponentkode eller et wireframe-layout. AI'en bruger afgrænsningsboksens positioner, elementtyper og adfærdsdefinitioner til at producere nøjagtigt output.
AI-assistent-sidebjælke
AI-assistentpanelet i den højre sidebjælke bruges til at konfigurere og udløse kodegenerering eller wireframe-generering. Det indeholder følgende kontroller:
Vision-modelvælger
Vælg, hvilken AI-visionsmodel der skal bruges til at analysere dine billeder og generere output. Forskellige modeller kan producere forskellige detaljerings- og nøjagtighedsniveauer.
Framework-vælger
Vælg målframeworket til kodegenerering (f.eks. React, Vue, Svelte). Den genererede kode vil bruge det valgte frameworks syntaks og mønstre.
Komponenter/Wireframe-faner
Skift mellem generering af komponentkode (Komponenter-fanen) eller wireframe-layouts (Wireframe-fanen) fra dine annoterede billeder.
Billedgrupper
Viser alle dine billedgrupper for det aktuelle omvendte projekt. Vælg en gruppe for at se dens billeder og konfigurere generering. Hver gruppe viser sit billedantal.
Generer blokke
Klik for at starte AI-genereringsprocessen. AI'en analyserer de valgte gruppers billeder sammen med eventuelle afgrænsningsboksannoteringer og adfærd for at producere output.
Outputtilstande
Generer kode
Konverter det annoterede billede til fungerende komponentkode til dit målframework (React, Vue, Svelte osv.). Den genererede kode indeholder layoutet, styling og eventuel adfærd, du har defineret på afgrænsningsboksene.
Generer wireframe
Eksporter det annoterede billede som et wireframe-layout, der kan åbnes i wireframe-værktøjet. Hver afgrænsningsboks bliver et wireframe-element, som du kan forfine, omarrangere og forbinde med andre skærme.
Funktioner til kodegenerering
Framework-valg
Vælg dit målframework, før du genererer. Understøttede frameworks omfatter React, Vue, Svelte, SolidJS, Angular og flere.
Adfærdsmapping
Adfærd, der er tildelt afgrænsningsbokse, oversættes til hændelseshåndteringer, navigationslogik, modaler og anden interaktiv kode i outputtet.
Layoutnøjagtighed
AI'en bruger afgrænsningsboksens positioner og størrelser fra billedet til at producere et layout, der nøje matcher det originale visuelle design.
Gem til blokke
Genererede komponenter kan gemmes direkte i dit blokbibliotek til genbrug på tværs af projekter.
Tilføj til projekt
Indsæt den genererede kode direkte i dit aktuelle projekt som nye komponentfiler.
Tips
For de bedste resultater skal du bruge billeder med høj opløsning med klare UI-elementer. Tegn afgrænsningsbokse tæt omkring hvert element for at få mere nøjagtig kodegenerering. Tildel specifikke adfærd i stedet for vage beskrivelser – "åbner tilmeldingsmodalen" fungerer bedre end "gør noget". AI fungerer bedst med standard weblayouts og almindelige UI-mønstre.