Code- & wireframegeneratie
Overzicht
Zodra je je afbeelding hebt geannoteerd met begrenzingsvakken en gedrag hebt toegewezen, kun je werkende componentcode of een wireframe-indeling genereren. De AI gebruikt de posities van begrenzingsvakken, elementtypen en gedragsrichtingen om nauwkeurige uitvoer te produceren.
AI-assistent zijbalk
Het AI-assistent-paneel is de rechterzijbalk die wordt gebruikt om code- of wireframegeneratie te configureren en te activeren. Het bevat de volgende bedieningselementen:
Vision-modelselector
Kies welk AI-visiemodel moet worden gebruikt voor het analyseren van je afbeeldingen en het genereren van uitvoer. Verschillende modellen kunnen verschillende niveaus van detail en nauwkeurigheid produceren.
Frameworkselector
Kies het doelframework voor codegeneratie (bijv. React, Vue, Svelte). De gegenereerde code gebruikt de syntaxis en patronen van het geselecteerde framework.
Tabbladen Componenten / Wireframes
Wissel tussen het genereren van componentcode (tabblad Componenten) of wireframe-indelingen (tabblad Wireframes) van je geannoteerde afbeeldingen.
Afbeeldingsgroepen
Toont al je afbeeldingsgroepen voor het huidige reverse-project. Selecteer een groep om de afbeeldingen te bekijken en generatie te configureren. Elke groep toont het aantal afbeeldingen.
Blokken genereren
Klik om het AI-generatieproces te starten. De AI analyseert de afbeeldingen van de geselecteerde groep samen met eventuele begrenzingsvakannotaties en gedrag om uitvoer te produceren.
Uitvoermodi
Code genereren
Converteer de geannoteerde afbeelding naar werkende componentcode voor je doelframework (React, Vue, Svelte, enz.). De gegenereerde code bevat de indeling, styling en eventueel gedrag dat je op de begrenzingsvakken hebt gedefinieerd.
Wireframe genereren
Exporteer de geannoteerde afbeelding als een wireframe-indeling die opent in het Wireframe-tool. Elk begrenzingsvak wordt een wireframe-element dat je verder kunt verfijnen, herschikken en verbinden met andere schermen.
Codegeneratiefuncties
Frameworkselectie
Kies je doelframework voor het genereren. Ondersteunde frameworks zijn onder andere React, Vue, Svelte, SolidJS, Angular en meer.
Gedragsmapping
Gedrag dat aan begrenzingsvakken is toegewezen wordt vertaald naar event handlers, navigatielogica, modale vensters en andere interactieve code in de uitvoer.
Indelingsnauwkeurigheid
De AI gebruikt de posities en afmetingen van begrenzingsvakken uit de afbeelding om een indeling te produceren die nauw aansluit bij het originele visuele ontwerp.
Opslaan in blokken
Gegenereerde componenten kunnen rechtstreeks worden opgeslagen in je Blokbibliotheek voor hergebruik in projecten.
Aan project toevoegen
Voeg de gegenereerde code rechtstreeks in je huidige project in als nieuwe componentbestanden.
Tips
Gebruik voor de beste resultaten afbeeldingen met hoge resolutie en duidelijke UI-elementen. Teken begrenzingsvakken strak rond elk element voor nauwkeurigere codegeneratie. Wijs specifiek gedrag toe in plaats van vage beschrijvingen — "opent aanmeldingsmodaal" werkt beter dan "doet iets." De AI werkt het best met standaard webindelingen en veelvoorkomende UI-patronen.