Wireframes
Welkom
Het Wireframes-gebied stelt je in staat om je interface-layouts visueel te ontwerpen en te prototypen. Maak wireframes om de structuur van je applicatie te plannen voordat je gaat programmeren. Wanneer je Wireframes voor het eerst opent, zie je het welkomstscherm met een Wireframe Maken-kaart om te beginnen, of gebruik de + Nieuw Wireframe-knop in de rechterbovenhoek.
Belangrijkste functies
Handmatig ontwerp
Bouw wireframes met de hand met de visuele canvas-editor — sleep en drop componenten om je schermen te ontwerpen.
AI-aangedreven generatie
Beschrijf wat je wilt en laat AI automatisch wireframedocumentatie en frames voor je genereren.
Spraakinvoer
Gebruik de ingebouwde microfoonknop of middelklik om je wireframebeschrijving met spraak te dicteren.
Wireframe naar code
Zodra je wireframe klaar is, stuur je het rechtstreeks naar codegeneratie — van ontwerp naar werkende code in één naadloze workflow.
Een wireframe maken
Klik op Wireframe Maken of + Nieuw Wireframe om het aanmaakvenster te openen. Je voert een titel in, selecteert het doelplatform (Mobiel, Desktop of Web), schrijft een beschrijving van je wireframe en kiest tussen de Handmatige of AI-gestuurde modus.
Projectinstelveldon
Titel
Geef je wireframeproject een naam zodat je het later in de wireframelijst kunt identificeren.
Platform
Selecteer het doelplatform — Mobiel, Desktop of Web — om de wireframe-indeling en beperkingen aan te passen.
Beschrijving
Beschrijf wat je wilt bouwen. Dit wordt gebruikt door de AI-aangedreven modus om documentatie en frames te genereren. Ondersteunt spraakinvoer via de microfoonknop.
Modus
Kies Handmatig om direct naar de canvas-editor te gaan, of AI-aangedreven om AI documentatie en frames voor je te laten genereren.
Handmatige modus
Wanneer je het tabblad Handmatig selecteert en op Maken klikt, word je direct naar de wireframe canvas-editor gebracht waar je meteen kunt beginnen met het bouwen van je schermen. Dit is de beste optie wanneer je al een duidelijk beeld hebt van je ontwerp en vanaf het begin volledige controle wilt.
Wanneer handmatig te gebruiken
Je hebt een specifiek ontwerp in gedachten en wilt het zelf bouwen.
Je wilt snel een voorlopig ontwerp schetsen voordat je het verfijnt.
Je geeft de voorkeur aan volledige controle over elk element vanaf het begin.
AI-aangedreven modus
Wanneer je het tabblad AI-gestuurd selecteert, verschijnen er extra opties. Je kunt je beschrijving typen of dicteren, optioneel individuele frames definiëren, je voorkeurs-AI-model selecteren uit het dropdown-menu bovenaan en vervolgens op Genereren klikken om de AI de wireframe-documentatie voor je te laten maken.
Hoe het werkt
Details invoeren
Vul de titel in, selecteer een platform en schrijf een beschrijving van je project.
Frames definiëren (optioneel)
Schakel over naar het tabblad Frames definiëren om individuele schermen of weergaven te specificeren die je door de AI wilt laten genereren.
AI-model selecteren
Kies je favoriete AI-model uit de dropdown (bijv. Claude Code, Opus 4.6).
Genereren
Klik op Genereren om AI-documentatiegeneratie te starten. Het wireframeproject verschijnt in je lijst terwijl de documentatie wordt aangemaakt.
Frames bouwen
Zodra de documentatie is voltooid, kun je beginnen met het genereren van elk individueel frame vanuit de wireframe-editor.
Verbeteren met AI
In de AI-gestuurde modus opent het klikken op de Verbeteren met AI-knop een venster waarmee je je beschrijving kunt verbeteren met behulp van AI. Dit neemt wat je in het beschrijvingsveld hebt geschreven en verbetert het op basis van je instructies — het gedetailleerder, gestructureerder of vollediger maken voordat het wireframe wordt gegenereerd.
Verbeteringsopties
AI-model
Selecteer het AI-model om je beschrijving te verbeteren (bijv. Claude Code, Opus 4.6).
Verbeteringsinstructies
Geef optioneel specifieke instructies voor hoe de AI de beschrijving moet verbeteren. Ondersteunt spraakinvoer.
Beschrijving verbeteren
Klik om de verbetering uit te voeren. De AI herschrijft en verbetert je beschrijving op basis van je invoer en instructies.
Documentatiegeneratie
Na het klikken op Genereren in de AI-gestuurde modus verschijnt je wireframe-project in de wireframelijst met de status Documentatie Genereren.... De AI maakt gestructureerde documentatie voor je project op basis van de titel, het platform, de beschrijving en de frames die je hebt gedefinieerd.
Wat er daarna gebeurt
Documentatiegeneratie
De AI maakt een gestructureerd document dat elk scherm, component en indeling definieert op basis van je beschrijving.
Framegeneratie
Zodra de documentatie is voltooid, kun je de wireframe openen en beginnen met het genereren van elk individueel frame vanuit de editor.
Verfijning
Nadat frames zijn gegenereerd, kun je handmatig componenten aanpassen, toevoegen of verwijderen in de canvas-editor om het ontwerp te verfijnen.