Wireframes
Velkommen
Klik på knappen + øverst i sidebjælken for at åbne dialogboksen Opret ny blokgruppe. Giv din gruppe et navn, og vælg en aktivertype for at kategorisere den type indhold, den skal indeholde.
Nøglefunktioner
Manuelt design
Opret wireframes manuelt ved hjælp af den visuelle lærredredigeringsprogram – træk og slip komponenter for at designe dine skærme.
AI-drevet generering
Beskriv, hvad du ønsker, og lad AI generere wireframe-dokumentation og -skitser automatisk.
Hvad der pakkes
Brug knappen til den indbyggede mikrofon, eller klik med mellemknappen for at diktere din wireframe-beskrivelse med stemmen.
Wireframe til kode
Når din wireframe er klar, kan du sende den direkte til kodegenerering – gå fra design til fungerende kode i en problemfri proces.
Oprettelse af en wireframe
Klik på Vis for at åbne detaljemodalvinduet. Modalvinduets overskrift viser bloknavnet og dens badge med aktivertype. Indeni kan du skifte mellem to faner:
Felter til projektopsætning
Titel
Giv dit wireframe-projekt et navn, så du kan identificere det senere i wireframe-listen.
Platform
Vælg målplatformen – Mobil, Desktop eller Web – for at tilpasse wireframe-layoutet og -begrænsningerne.
Beskrivelse
Beskriv, hvad du vil opbygge. Dette bruges af AI-drevet tilstand til at generere dokumentation og skitser. Understøtter stemmeinput via mikrofonknappen.
Tilstand
Vælg Manuel for at gå direkte til lærredredigeringsprogrammet, eller AI-drevet for at lade AI generere dokumentation og skitser for dig.
Manuel tilstand
Dobbeltklik på en hvilken som helst gruppe i sidebjælken for at åbne Creator-visningen, et fuldt redigeringsmiljø, hvor du kan opbygge og redigere blokke med AI-hjælp. Se afsnittet Creator-visning for at få flere oplysninger.
Hvornår skal manuel tilstand bruges
Klik på knappen + Nyt omvendt projekt for at oprette et nyt projekt. Giv det et navn og en beskrivelse for at holde styr på dit arbejde med omvendt udvikling.
AI-genererede skærme er som standard låste – elementer kan ikke flyttes eller ændres størrelse, før de låses op. Tryk på Ctrl + D for at låse alle elementer på den aktuelle skærm op, hvilket giver dig fuld kontrol over at omarrangere og redigere dem.
Dobbeltklik på et hvilket som helst element på lærredet for at åbne det og åbne dets egenskabspanel i den højre sidebjælke. Panelet har tre faner: Egenskaber, Strøm og Farver. Her kan du redigere position, størrelse, stil og adfærd for hvert element.
AI-drevet tilstand
Skærmflow-lærredet giver dig mulighed for at organisere dit arbejde med omvendt udvikling i grupper. Hver gruppe kan indeholde flere skærmbilleder og kan være af typen Skærm (hovedsider, sektioner eller visninger) eller Modal (overlays, dialoger, pop-ups, skuffer). Dobbeltklik på en gruppe for at åbne den og arbejde med dens billeder.
CRUD for implementering
Indtast detaljer
Definer skitser (valgfrit)
Definer frames (valgfrit)
Vælg AI-model
Vælg AI-model
Klik på Generer for at starte AI-dokumentationsgenerering. Wireframe-projektet vises i din liste, mens dokumentationen oprettes.
Generer
Opret skitser
Byg frames
Du kan redigere forskellige aspekter af en skits, før du genererer den. Klik på knappen Rediger ved siden af sektionerne Formål eller vigtigste funktioner for at ændre skærmens beskrivelse, funktioner og instruktioner. Når du er tilfreds med detaljerne, skal du klikke på Generer skits for at oprette skitsen eller justere og generere den igen efter behov.
Forbedr med AI
Teknisk stak
Muligheder for forbedring
AI-model
Vælg den AI-model, der skal bruges til at forbedre din beskrivelse (f.eks. Claude Code, Opus 4.6).
Instruktioner til forbedring
Angiv eventuelt specifikke instruktioner om, hvordan AI skal forbedre beskrivelsen. Understøtter stemmeinput.
Forbedr beskrivelse
Klik for at køre forbedringen. AI vil omskrive og forbedre din beskrivelse baseret på dit input og dine instruktioner.
Generering af dokumentation
Efter at have klikket på Generer i AI-drevet tilstand, vises dit wireframe-projekt i wireframe-listen med en status på Genererer dokumentation.... AI'en opretter struktureret dokumentation for dit projekt baseret på titlen, platformen, beskrivelsen og eventuelle frames, du har defineret.
Hvad sker der derefter
Generering af dokumentation
Når en skits genereres, ændres skærmens statusbadge i den venstre sidebjælke til "genereres..." og en fremskridtsindikator vises nederst til højre (f.eks. "Genererer skits... (10%)"). Knappen Generer skits erstattes af knappen Stop generering, så du kan annullere, hvis det er nødvendigt.
Frame-generering
Blokforbindelser giver dig mulighed for at tilknytte blokke fra blokbiblioteket direkte til wireframe-elementer. Når du dobbeltklikker på et element og ruller ned i egenskabspanelet, finder du sektionen Blokforbindelser. Klik på + Tilføj blok for at tilknytte en blok (HTML, komponent eller skabelon) til elementet. Tilknyttede blokke refereres, når der genereres kode med AI, hvilket gør det nemt at tilknytte specifik HTML- eller komponentkode til wireframe-elementer.
Forfinelse
Wireframes kan eksporteres, importeres eller bruges direkte, når der oprettes projekter eller i selve Projekt-hubben. Dette gør det nemt at gå fra wireframe-design til et fungerende projekt uden manuelt at genskabe layouts.