Promptgids

Begin in projectchat. Open de chat voor het project dat je wilt wijzigen en kies vervolgens of spreek de agent aan wiens rol past bij het werk. Als je niet zeker weet welke agent geschikt is, vraag het team dan om dit te verduidelijken voordat je gaat bouwen.

Deze gids verzamelt de technieken die consequent betere resultaten opleveren van je agentteam. Geen daarvan vereist speciale vaardigheden. Het gaat om wat je zegt, niet om hoe je het opmaakt. Of je nu je allereerste verzoek schrijft of een volwassen project verfijnt, dezelfde principes gelden: helder denken erin, heldere resultaten eruit.

Laat het team vragen stellen voordat het bouwt

Een van de meest effectieve manieren om een beter resultaat te krijgen: wanneer een verzoek groot of vaag is, nodig dan uit tot vragen in plaats van te hopen dat het team het goed raadt. Zeg wat je wilt en voeg dan één regel toe aan het einde:

Vraag me alles wat je nodig hebt om volledig te begrijpen wat ik wil voordat je begint.

Je krijgt vaak vragen waarvan je zelf niet had bedacht dat je ze moest beantwoorden, of het nu gaat om randgevallen, doelgroepen of afwegingen. Die vooraf oplossen kost een minuut; ze pas na een build ontdekken kost herwerk. Het resultaat ligt bij de eerste poging veel dichter bij je bedoeling.

Stap 1: Beslis voordat je typt

Weet wat je bouwt

Een paar minuten vooraf nadenken kan later veel opnieuw prompten besparen. Zorg er voordat je begint voor dat je vier eenvoudige vragen kunt beantwoorden: wat bouw je, voor wie is het, waarom zouden zij het gebruiken en wat is de belangrijkste actie die je wilt dat ze ondernemen.

Die belangrijkste actie wordt vaak de CTA genoemd, kort voor call to action. Het is de knop, link of volgende stap waarvan je het meest wilt dat gebruikers die kiezen, zoals Sign Up, Book a Demo, Start Free of Buy Now.

Je hoeft geen volledige specificatie te schrijven. Het doel is simpelweg om het project een duidelijke richting te geven. Hoe specifieker je startpunt is, hoe makkelijker het is om een resultaat te genereren dat overeenkomt met wat je in gedachten hebt.

Bouw een one-page site voor een budgetteringsapp gericht op freelancers. De belangrijkste CTA is “Start Saving Smarter.” Gebruik een gedurfde, expressieve uitstraling met grote lettertypes en krachtige kleuren.

Schets de reis, niet alleen de schermen

Goed ontwerp leeft net zo goed tussen schermen als erop. Loop het pad van je gebruiker na: wat zien ze eerst, wat wekt vertrouwen, wat geeft hen vertrouwen om te handelen en waar leidt die actie naartoe? Zelfs een schets in drie stappen, hero, bewijs, call to action, maakt je verzoeken aanzienlijk effectiever, omdat elke sectie nu een reden heeft om te bestaan en een reden om naar de volgende te leiden.

Bepaal vroeg de visuele richting

Stijl is veel makkelijker vast te leggen dan achteraf in te passen. Kies een richting: rustig en elegant, gedurfd en ontwrichtend, premium en strak, en noem die in je eerste verzoek met toonwoorden waar het team iets mee kan: minimal, playful, cinematic, developer focused. Deze woorden zijn meer dan decoratie: ze bepalen typografie, spacing, kleur, schaduw en hoekradius vanaf het allereerste component. Hergebruik dezelfde stijlregel in latere verzoeken om alles samenhangend te houden.

Gebruik een rustig, op wellness geïnspireerd ontwerp: zachte verlopen, gedempte aardetinten, afgeronde hoeken, royale padding. Algehele toon zacht en geruststellend.

Stap 2: Schrijf verzoeken die aankomen

Beschrijf uitkomsten, geen implementaties

Beschrijf het resultaat dat je wilt, niet de stappen om het te bouwen. Bijvoorbeeld: “Voeg een prijssectie toe met drie opties en laat de middelste opvallen” is nuttiger dan precies uitleggen hoe de pagina moet worden opgebouwd. Richt je op wat er moet verschijnen en waarom het belangrijk is; het team kan beslissen hoe het dat bouwt.

Werk in delen, niet in pagina's

Verzoeken die zijn afgebakend tot één component — een hero, een featuregrid, een testimonialrij, een prijstabel — geven je duidelijkheid en controle. Als een onderdeel de plank misslaat, pas je dat onderdeel aan in plaats van alles eromheen opnieuw te genereren. Bouw een blok, beoordeel het, verfijn het en ga dan door naar het volgende. Een verzoek voor een volledige pagina produceert ruis; een componentverzoek produceert signaal.

Maak een featuresectie: gecentreerde kop, daarna drie kaarten naast elkaar, elk met een pictogram, een titel en één regel beschrijving. Zachte schaduwen, lichte lift bij hover.

Gebruik echte woorden

Plaatshoudertekst verbergt problemen; echte copy onthult ze. Een echte kop heeft misschien twee regels nodig; een echte CTA werkt misschien beter als werkwoord. Schrijf wat een gebruiker daadwerkelijk zou lezen, ook al is het een concept; lay-outs, spacing en ontwerpbeslissingen worden allemaal beter wanneer de content echt is.

Hero-kop: “Design Calmly.” Subtekst: “Turn stress into structure.” CTA: “Start Building Free.” Op copy gerichte lay-out met royale verticale spacing.

Benoem echte elementen

Gebruik duidelijke, specifieke woorden om te beschrijven wat je op de pagina wilt. Je hoeft geen ontwerpterminologie te kennen—noem gewoon de dingen die gebruikers moeten zien of waarmee ze moeten kunnen interageren, zoals een profielkaart, een knop of een formulier.

Specifieke verzoeken zijn makkelijker te bouwen dan brede. Begin met het basiselement dat je nodig hebt en voeg daarna één voor één details toe.

Maak een profielkaart met een foto, naam en volgknop. Voeg een klein label “Verified” toe naast de naam en toon een korte uitleg wanneer iemand erover hovert.

Stap 3: Wijzig met precisie

Baken elke wijziging af: wat verandert, wat blijft

Wanneer je bestaand werk aanpast, wees dan aan beide kanten expliciet: wat moet veranderen en wat absoluut niet. Gebruik richtinggevende woorden zoals “replace”, “update” en “adjust” in plaats van “make this better”, en scherm de onderdelen af die je goed vindt. Precisie hier is wat voorkomt dat iteratie regressie wordt.

Wijzig de CTA-tekst naar “Get Started” en vergroot de horizontale padding. Behoud de huidige kleuren, het lettertype en verder alles in deze sectie ongewijzigd.

Eén betekenisvolle wijziging tegelijk

Werk eerst de copy bij, daarna de lay-out, daarna de interacties en controleer elk resultaat vóór het volgende verzoek. Kleine, doelbewuste stappen stapelen zich op tot een gepolijst product; tien wijzigingen in één bericht stapelen zich op tot dubbelzinnigheid, en als er iets misgaat weet je niet welke wijziging het veroorzaakte.

Correcties tijdens een taak gebeuren in chat. Wanneer Prompt Queue beschikbaar is in je chat en Agent-werk actief is, worden vervolgberichten in de wachtrij geplaatst achter het lopende werk. Controleer of je bericht in de wachtrij verschijnt voordat je nog een kopie verstuurt. Als wachtrijbediening niet zichtbaar is, verstuur het dan niet opnieuw: wacht tot het huidige werk is voltooid, of gebruik een onderbrekingsoptie als je chat die biedt, en controleer daarna de taakstatus voordat je een vervolgbericht stuurt. Zie Project chat voor details.

Denk één stap vooruit ten opzichte van de UI

Als je project meer moet doen dan er gepolijst uitzien, definieer dan gedrag naast uiterlijk. Specificeer wat gebruikers zien wanneer ze zijn ingelogd of uitgelogd, waar dynamische content vandaan komt en hoe de interface omgaat met lege, laad- en foutstatussen. Je hebt geen werkende backend nodig om rond deze scenario's te ontwerpen—er vroeg voor plannen helpt later grote UI-herwerkingen te voorkomen.

Als de gebruiker is ingelogd, toon dan zijn avatar en naam rechtsboven. Zo niet, toon dan een knop “Log In” die routeert naar het auth-scherm.

FAQ

Hoe schrijf ik een effectieve prompt voor de AI-agent?

Structureer je prompt met deze kernelementen:

1. Context — Schets de situatie. Leg uit wat je bouwt en waar de zaken momenteel staan.

2. Doel — Wees specifiek over de exacte uitkomst of feature die je wilt.

3. Vereisten & Beperkingen — Som duidelijk op wat moet veranderen en wat onaangeroerd moet blijven.

4. Verwacht resultaat — Definieer hoe succes eruitziet (bijv. UI-gedrag, foutafhandeling, statuspersistentie).

5. Referenties — Voeg waar mogelijk screenshots, links, workflowstappen of codevoorbeelden toe. Verwijder wachtwoorden, verificatiecodes, API-sleutels, cookies, persoonlijke gegevens en betaalgegevens voordat je iets deelt.

Voorbeeld: "Ik bouw een dashboard met een zijbalk. Voeg een uitlogknop toe onderaan de zijbalk. Deze moet de sessie wissen en doorsturen naar /login. Wijzig de lay-out van de zijbalk of de navigatielinks niet. Na het klikken moet de gebruiker binnen 1 seconde de inlogpagina zien."

Hoe moet ik omgaan met complexe verzoeken die meerdere features omvatten?

Splits complexe verzoeken op in kleinere taken:

1. Benoem het huidige probleem en het einddoel.

2. Som elke subtaak afzonderlijk op (taak 1, taak 2, taak 3).

3. Verifieer elke taak voordat je doorgaat naar de volgende.

4. Test de volledige flow aan het einde.

Deze aanpak vermindert onverwachte wijzigingen doordat je de Agent vraagt te veel tegelijk te doen. Elke prompt moet zich richten op één enkele, verifieerbare uitkomst.

Hoe schrijf ik een prompt om een bug op te lossen?

Een nuttige prompt voor het oplossen van bugs moet bevatten:

• De pagina, feature, omgeving en getroffen gebruikers
• Exacte stappen om het probleem te reproduceren
• Werkelijk gedrag en verwacht gedrag
• De volledige fouttekst en wanneer die optrad
• Relevante screenshots of logs, waarbij wachtwoorden, tokens, cookies, persoonlijke gegevens en betaalgegevens zijn verwijderd
• Wat ongewijzigd moet blijven
• Hoe je de oplossing verifieert en welke regressiecontroles je moet uitvoeren

Voorbeeld: “Op de checkoutpagina in Preview geeft het selecteren van Submit een 500-fout. Verwacht: de bestelling wordt bevestigd en de gebruiker komt op de bedankpagina. Reproductie: [stappen]. Los de oorzaak op zonder de winkelwagentotalen of de betaalflow te wijzigen, en verifieer daarna één succesvolle en één geweigerde betaling. Ik heb alle geheime waarden uit de bijgevoegde log verwijderd.”

Hoe schrijf ik een prompt om de paginalay-out of styling aan te passen?

Neem bij verzoeken om paginawijzigingen het volgende op:

1. De specifieke pagina, module en het element dat moet worden aangepast.

2. Huidige status en beoogd resultaat.

3. Referentielinks of screenshots.

4. Features die ongewijzigd moeten blijven.

5. Acceptatiecriteria (bijv. moet werken op zowel desktop als mobiel).

Voorbeeld: "Wijzig op de pagina /pricing het raster van plankaarten van 2 kolommen naar 3 kolommen op desktop. Behoud de mobiele lay-out als één enkele kolom. Gebruik deze screenshot als referentie [bijvoegen]. Wijzig de kaartinhoud of knopstijlen niet."

Wat moet ik doen als de agent ondanks correcties steeds de verkeerde wijzigingen blijft maken?

Wanneer de Agent herhaaldelijk de plank misslaat, kan het toevoegen van meer instructies soms juist meer verwarring veroorzaken. In plaats daarvan:

1. Behoud de huidige status — Stop met het sturen van overlappende correcties. Als je chat een Revert-optie toont, lees dan eerst de bevestigingstekst voordat je die gebruikt, noteer eventuele latere wijzigingen die je wilt behouden en controleer daarna het project. Als de scope onduidelijk is, ga dan niet verder; gebruik de richtlijnen in Project chat of neem contact op met Support met een opgeschoonde Chat Link en screenshot.

2. Ruim de ruis op — In plaats van extra instructies erbovenop te stapelen, formuleer je het kernprobleem opnieuw en helder vanaf nul.

3. Eén taak tegelijk — Richt je op het oplossen van één enkel probleem voordat je verdergaat.

Een stap terug doen en wijzigingen stapsgewijs aanpakken lost problemen meestal veel sneller op dan proberen meerdere overlappende problemen in één prompt op te lossen.