Afgrænsningsbokse
Oversigt
Afgrænsningsbokse er den centrale interaktionsmodel i omvendt udvikling. Efter at have uploadet et billede tegner du rektangulære bokse omkring individuelle UI-elementer for at isolere dem. Hver afgrænsningsboks bliver et valgbart område, som du kan tildele adfærd, konvertere til kode eller eksportere som en wireframe-komponent.
Skærmflow og -grupper
Vælg en boks, og definer, hvad elementet skal gøre – for eksempel "åbner en modal", "navigerer til /om" eller "skifter en rullemenu".
Manuel afgrænsning
AI-assistent-sidebjælke
Outputtilstande
Funktioner til kodegenerering
Klik og træk på billedet for at tegne en rektangulær boks omkring et UI-element – en knap, et kort, en navigationslinje, en hero-sektion eller en hvilken som helst komponent.
Ændr størrelse og juster
AI-assistentpanelet i den højre sidebjælke bruges til at konfigurere og udløse kodegenerering eller wireframe-generering. Det indeholder følgende kontroller:
Tildel adfærd
Vision-modelvælger
AI-automatisk afgrænsning
I stedet for at tegne hver boks manuelt kan du bruge AI-automatisk afgrænsning, så Kaiju Hub AI automatisk registrerer og skitserer UI-elementer i dit billede. AI'en analyserer det visuelle layout og opretter afgrænsningsbokse omkring registrerede komponenter som overskrifter, knapper, kort, inputfelter, billeder og navigationsgenstande.
Detektion med ét klik
Klik på knappen Auto-boks, og AI scanner hele billedet og opretter afgrænsningsbokse omkring hvert registreret UI-element.
Rediger efter detektion
Automatisk registrerede bokse kan redigeres fuldt ud. Flyt, ændr størrelse, slet eller tilføj nye bokse for at forfine resultaterne.
Selektiv genregistrering
Kør automatisk registrering på et bestemt område af billedet, hvis du kun har brug for bokse til en del af layoutet.
Styring af adfærd
Kraften i afgrænsningsbokse ligger i at styre, hvad hvert element gør. Efter at have afgrænset et element kan du tildele det interaktive adfærd, som afspejles i den genererede kode eller wireframe:
Åbner modal
Når du klikker på elementet, åbnes en modal/dialog. Angiv, hvilket indhold modalen skal vise.
Navigerer til sektion
Elementet fungerer som et link eller en knap, der navigerer til en anden side eller sektion af appen.
Skifter indhold
Elementet viser eller skjuler relateret indhold – rullemenuer, accordeoner, udvidelige paneler.
Formularindsendelse
Elementet udløser formularvalidering og -indsendelseslogik.
Brugerdefineret handling
Definer en hvilken som helst brugerdefineret beskrivelse af handling, og AI genererer den passende hændelseshåndtering og logik.