Designprompt-template
Een prompt die je AI-designtool de keuzes geeft die hij anders zelf maakt. Kopieer hem, of download hem als bestand.
Deze prompt geeft een AI-designtool de keuzes die hij anders zelf maakt, en dan kiest hij wat hij het vaakst zag. Vul de plekken tussen blokhaken in, plak de prompt in Claude Design, Google Stitch, Figma Make, Lovable of v0, en voeg je logo toe als bijlage. De verboden patronen staan er al in, elk met wat het model in plaats daarvan doet.
# Designprompt
Ontwerp [welke pagina, bijvoorbeeld: de homepage] voor de website hieronder.
Maak alleen de keuzes die in deze prompt staan. Ontbreekt er iets, vraag het dan in plaats van het zelf in te vullen.
## Merk
- Naam: [bedrijfsnaam]
- Wat we doen: [in één zin, bijvoorbeeld: we repareren en vervangen cv-ketels]
- Voor wie en waar: [klanten en werkgebied]
- Wat ons anders maakt, in feiten: [bijvoorbeeld: eigen monteurs, prijs vooraf, sinds welk jaar]
- Logo en huisstijl: [bestand in de bijlage, of: nog geen logo]
## Doelgroep
- Wie opent de pagina: [bijvoorbeeld: huiseigenaar met een kapotte ketel]
- Op welk apparaat: [telefoon of laptop]
- Wat die persoon binnen tien seconden wil weten: [bijvoorbeeld: kunnen jullie vandaag komen, en wat kost het]
- Wat die persoon daarna doet: [bellen, een formulier invullen, een offerte aanvragen]
## Toon
- Schrijf zoals: [een persoon in een situatie, bijvoorbeeld: een monteur die in de keuken uitlegt wat er stuk is]
- Aanspreekvorm: [je of u], overal hetzelfde
- Twee zinnen uit onze eigen teksten als voorbeeld:
- "[zin 1]"
- "[zin 2]"
- Woorden die we nooit gebruiken: [bijvoorbeeld: oplossingen, kwaliteit, ontzorgen, superlatieven]
- Koppen krijgen alleen een hoofdletter op het eerste woord.
## Layout
Volgorde van de secties, van boven naar beneden:
1. [sectie 1: wat erin staat, wat links en wat rechts]
2. [sectie 2]
3. [sectie 3]
4. [sectie 4]
- Koppen staan links uitgelijnd, niet gecentreerd.
- Staat er iets naast elkaar, gebruik dan twee kolommen van ongelijke breedte. De brede kolom draagt het belangrijkste.
- Wat bij elkaar hoort, staat dicht op elkaar. Een nieuw onderwerp krijgt veel ruimte erboven.
- Op een telefoon komt alles onder elkaar, in de volgorde hierboven.
## Typografie
- Koppen: [naam van de letter], gewicht [bijvoorbeeld 700 of 800], [hoofdletters of gewone letters]
- Tekst: [naam van de letter], gewicht 400, 18 px, regelhoogte 1,6
- Hoofdkop: [grootte] op een laptop, [grootte] op een telefoon
- Geen andere letters dan deze twee.
## Kleur
- Achtergrond: [kleurcode]
- Tekst en koppen: [kleurcode]
- Alleen voor knoppen en links: [kleurcode]
- [Eventueel een tweede vlakkleur]: [kleurcode], alleen voor [taak]
- Geen andere kleuren en geen tinten ertussen.
## Content
- Gebruik alleen de teksten hieronder, letterlijk.
- Ontbreekt er tekst, zet dan [TEKST] neer. Ontbreekt er een foto, zet dan [FOTO: wat erop moet] neer.
- Verzin geen klanten, logo's, reviews, cijfers of jaartallen.
[Plak hier per sectie de tekst, met het nummer van de sectie uit Layout erboven.]
## Verboden patronen, en wat ervoor in de plaats komt
- Niet: Inter of Poppins als enige letter. Wel: de twee letters uit Typografie.
- Niet: paarse, indigo of andere verlopen, ook niet in tekst. Wel: effen vlakken in de kleuren uit Kleur.
- Niet: drie kaarten met een icoon naast elkaar. Wel: een lijst met een dunne lijn tussen de regels, met zoveel regels als er inhoud is.
- Niet: een glaseffect, blur of doorschijnende vlakken. Wel: een effen achtergrond.
- Niet: ronde pilknoppen of een pijl in de knop. Wel: rechthoekige knoppen met een kleine hoek van [bijvoorbeeld 6 px] en een tekst die zegt wat er gebeurt.
- Niet: een gecentreerde kop met een klein label of badge erboven. Wel: de kop als eerste element, links uitgelijnd.
- Niet: één woord in de kop in een andere kleur, cursief of met een verloop. Wel: de hele kop in dezelfde kleur en letter.
- Niet: een strook met logo's, reviews of cijfers die niet in Content staan. Wel: alleen wat in Content staat, of een lege plek met [REVIEW].
- Niet: schaduwen, kaarten die omhoog komen als je eroverheen beweegt, secties die bij het scrollen invliegen. Wel: geen beweging, behalve [eventueel één beweging met een reden].
- Niet: gegenereerde foto's van mensen, gebouwen of producten. Wel: [FOTO]-plekken die wij zelf vullen.
Begin met een plan in woorden: beschrijf in tien regels wat je gaat bouwen. Wacht op akkoord voordat je ontwerpt.
Waarom elk onderdeel erin staat
Acht blokken, elk met een taak. Laat je er één weg, dan vult het model hem in met wat het het vaakst zag.
- Merk
- Feiten over je bedrijf geven het model iets om omheen te ontwerpen. Een omschrijving als “modern installatiebedrijf” geeft het alleen het gemiddelde van alle installatiebedrijven.
- Doelgroep
- Wie de pagina opent en wat die persoon wil weten, bepaalt wat bovenaan staat. Noem één bezoeker met één vraag, niet iedereen.
- Toon
- Twee echte zinnen uit je eigen teksten zeggen meer over je toon dan een rij bijvoeglijke naamwoorden. De lijst met woorden die je nooit gebruikt, houdt gegenereerde zinnen uit je koppen.
- Layout
- Een vaste volgorde van secties, met wat waar staat, voorkomt de gecentreerde standaardopbouw. Zet het belangrijkste in de brede kolom, en het bewijs in de smalle.
- Typografie
- Noem de letters bij naam, met gewicht en grootte. Laat je dit open, dan neemt het model de letter die het het vaakst zag, en dat is vaak Inter.
- Kleur
- Geef elke kleurcode een taak. Dan staat je accentkleur alleen op de plekken waar hij iets betekent, en niet op elk icoon en elke rand.
- Content
- Met je echte teksten erin ontwerpt het model rond wat jij te zeggen hebt. De plekken met [TEKST] en [FOTO] laten zien wat nog ontbreekt, in plaats van dat het model iets verzint.
- Verboden patronen
- Dit zijn de patronen waaraan je een AI-site herkent, elk met een alternatief. Een verbod zonder alternatief laat een gat waar het volgende standaardpatroon in valt.