Creëren met Claude

Je gaat je gekozen idee samen met Claude uitwerken. Eerst denken in woorden en een schema, dan pas een klikbare mockup. Niet meteen bouwen, want een goed gesprek vooraf levert een veel beter resultaat.

Je kunt niets stukmaken. Claude begint gewoon opnieuw als iets niet bevalt. Praat in je eigen woorden, je hoeft geen technische termen te kennen.

Tijd 60 minuten
Vorm In je groepje van drie, op een scherm
Je levert op Een klikbare mockup

De route in acht stappen

Vraag eerst een globaal systeemontwerp, nog geen details en vormgeving. Geef context en vraag om een beschrijving in gewone woorden plus een eenvoudig schema.
Haal koffie. Laat Claude werken en neem even afstand.
Bekijk samen het ontwerp en bespreek wat je anders wilt. Hou het op hoofdlijnen.
Geef je punten terug en vraag een tweede versie in tekst en schema.
Haal koffie. Herhaal tot je best wel tevreden bent.
Vraag om een klikbare mockup als HTML, in de huisstijl van VIS.
Loop samen door de eerste mockup. Verzamel jullie opmerkingen en geef ze in één keer terug aan Claude. Zeg vooral ook wat je goed vindt en wat zeker moet blijven. Herhaal tot het staat.
De presentatie bereid je hierna voor, dus richt je dit uur op stap 1 tot en met 7.

Zo bouw je een goede prompt op

Geef context

Hoe beter Claude snapt voor wie en waarvoor je iets maakt, hoe beter het meedenkt. Vertel daarom wie de gebruiker is en wanneer die de tool gebruikt, welk probleem je oplost, en hoe het er in de praktijk aan toegaat.

Een concreet voorbeeld helpt het meest.

Zo bijvoorbeeld

Een voorbeeld uit de praktijk: iemand heeft net een training over feedback geven gehad. Twee weken later staat er een lastig gesprek op de planning. Dan opent hij onze tool en wil in vijf minuten weer scherp hebben wat hij had geleerd. Ontwerp het zo dat dit moment soepel verloopt.

Zeg ook wat het niet moet zijn.

En dit erbij

Het hoeft geen uitgebreide cursus te worden. Het gaat puur om korte ondersteuning tussen twee sessies door.

Zeg wat je anders wilt

Wees concreet en zeg er kort bij waarom. Dan lost Claude het beter op dan wanneer je alleen maak het beter zegt.

Niet zo

Maak het wat overzichtelijker.

Wel zo

De gebruiker moet niet meteen een lange vragenlijst zien, maar eerst een simpele vraag. Dat voelt laagdrempeliger. Pas het schema daarop aan.

Verwijzen naar wat er al staat maakt het makkelijker.

Bijvoorbeeld

In stap 3 van jouw schema slaat de tool het antwoord op. Wij willen dat de gebruiker daar eerst nog iets kan aanpassen voordat het wordt opgeslagen.

Houd het bij een paar punten per keer, niet tien tegelijk.

Zeg ook wat je goed vindt

Dit vergeten mensen vaak, en het is juist belangrijk. Als je alleen zegt wat er mis is, verandert Claude soms ook de dingen die al goed waren. Dat geldt extra bij de mockup, want daar zitten veel details in die je niet wilt kwijtraken. Benoem daarom altijd wat je wilt houden.

Zo dus

Het idee van een korte dagelijkse herinnering vinden we sterk, dat houden we precies zo. Verander alleen de manier waarop de gebruiker reageert.

Nog drie handige tips

Laat Claude terugkoppelen. Vraag: vat eerst in je eigen woorden samen wat je gaat maken. Zo check je of het je goed begrepen heeft voordat het aan de slag gaat.

Zeg gewoon wat je ziet. Klopt iets niet, beschrijf het dan zoals je het ziet. Dat is genoeg om bij te sturen.

Beslis samen voordat je iets terugstuurt. Even overleggen in je groepje voorkomt dat je Claude tegenstrijdige dingen vraagt.

Samen door de mockup lopen

Zodra de eerste mockup er staat, ga je er met je groepje doorheen. Klik alle schermen langs en let op twee dingen tegelijk: wat werkt goed en moet zo blijven, en wat mist er, klopt er niet, of kan mooier?

Verzamel je opmerkingen eerst samen op papier. Geef ze daarna in een keer terug aan Claude, en begin met wat je wilt houden. Zo raak je de sterke delen niet kwijt bij het aanpassen. Herhaal dit rondje tot de mockup staat.

Laat het zien in plaats van uitleggen. Ziet iets er niet goed uit, maak dan een schermafbeelding van dat scherm en geef die aan Claude in het gesprek. Op een Mac doe je dat met Cmd, Shift en 4, waarna je een stuk selecteert. Claude ziet dan precies wat jij ziet, en dat werkt vaak sneller dan het in woorden beschrijven. Zet er in je bericht bij wat er op die plek anders moet.

Vier voorbeeldprompts

Dit zijn suggesties, geen recepten. Ze laten zien welke kant het op kan, maar Claude reageert het best op jouw eigen woorden en jouw eigen voorbeelden. Gebruik ze dus als houvast en schrijf er vooral omheen wat jullie echt bedoelen.

De paarse stukken vul je zelf in.

1. Het ontwerp

Hiermee begin je. Nog geen details, alleen denken.

We werken voor VIS Trainingen, een bureau voor trainingen en teamcoaching.
Veel waarde moet ontstaan in de periode dat VIS er niet is, tussen de sessies door.

Ons idee: [idee in een paar zinnen].
Het vraagstuk dat dit oplost: [vraagstuk].
De gebruiker: [wie gebruikt het, en wanneer].

Geef eerst een globaal systeemontwerp, nog geen details en vormgeving.
Beschrijf in gewone woorden hoe het werkt, en teken een eenvoudig schema
van de stappen: input, opslag, AI-verwerking, eventueel research, en wat de
gebruiker ziet. Houd het op hoofdlijnen.

2. Ontwerp bijsturen

Zo vaak als nodig, tot het ontwerp klopt.

Wat we willen houden: [wat je goed vindt].
Wat we anders willen: [jullie punten, met kort waarom].
Geef een tweede versie van de beschrijving en het schema.

3. De mockup

Pas als je tevreden bent over het ontwerp. Het volledige huisstijlblok zit er al in.

Maak nu een klikbare mockup als een HTML-bestand.
Laat de belangrijkste schermen zien en maak de knoppen klikbaar, zodat we
door de tool kunnen lopen. Het hoeft nog niet echt te werken, het gaat om
het beeld en de flow.

Gebruik de huisstijl van VIS Trainingen:
- Hoofdkleur warm oranje/oker (#D98A2C) als vlakkleur voor knoppen, cirkels en
  accenten, met donkere tekst (#1A1A1A) erop. Gebruik oranje niet als tekstkleur
  op wit, dat haalt het contrast niet. Voor links en accenttekst het donkerdere
  #A5671E.
- Tweede kleur paars (#6B3FA2) voor accenten, ook bruikbaar als tekst.
- Zwarte tekst (#1A1A1A) op veel wit, eventueel een grijsgroen vlak (#3F4A45)
  met witte tekst voor een donkere sectie.
- Lettertype: een lichte, ronde schreefloze sans zoals Quicksand of Poppins,
  met dunne, grote koppen.
- Vormtaal: rond en organisch. Ronde knoppen, cirkels en zachte
  tekstballon-vormen. Geen scherpe hoeken.
- Sfeer: informeel, warm en nuchter, met een knipoog.
- WCAG 2.1 AA op alle tekst: minimaal 4,5 op 1 contrast, zichtbare focus,
  bedienbaar met het toetsenbord.

4. De mockup bijsturen

Na het samen doorlopen. Werkt een schermafbeelding beter dan uitleg? Voeg die dan bij dit bericht.

We zijn samen door de mockup gelopen.
Wat we goed vinden en zeker willen houden: [punten].
Wat we willen aanpassen: [punten, met kort waarom].
Pas de mockup daarop aan en laat de rest zoals die was.