🚀

Je eerste commando's

⏱️20 min|Module 2

Deze instructies zijn voor Claude Desktop (de applicatie met visuele interface).

Je eerste commando's in de desktop app

Nu je Claude Code hebt geïnstalleerd, is het tijd om ermee te werken. De desktop app maakt dit visueel en intuïtief. Je typt wat je wilt, en Claude laat zien wat het doet.

De interface begrijpen

Open Claude Code en kies een project directory (of maak een nieuwe test map aan). Je ziet drie hoofdgebieden:

Links: Zoeken en navigatie

  • Hier start je nieuwe sessies in dezelfde of nieuwe folders (1)
  • Je zoekt door de historie van chats
  • De toegang tot plugins (dat komt later...)

Midden: Je werkblad

  • Het chatvenster waar je de opdrachten geeft en de voortgang bekijken (2)
  • De mogelijkheid om extra bestanden toe te voegen (3)
  • De manier waarop Claude gaat werken voor je, plannen of doen. (4)
  • De map waar je in werkt (5)
  • Tip: Gebruik Cmd+Enter om te versturen (Mac) of Ctrl+Enter (Windows) (6)

Claude Code interface met labels voor de hoofdgebieden

Je eerste opdracht: Bestanden lezen

Laten we beginnen met eenvoudige opdracht. Type in het chatvenster:

Maak een eenvoudige webapplicatie voor me om taken op te slaan. Stel me maximaal 3 vragen om de werking te bepalen.

Zorg vervolgens dat je in de dropdown naar het plus-teken kiest voor "Plan mode".

Wat gebeurt er:

  1. Claude gaat je meerkeuze vragen stellen over je opdracht
  2. De kans is dat je iets andere vragen kijkt dan je in de screenshots ziet. Het blijft AI he...
  3. Krijg je een vraag over het opslaan van de taken, hou het simpel, sla het op in de browser.
  4. Bij een vraag over de techstack, kies voor een vanilla (eenvoudig) HTML/CSS/JS. Als je niet weet wat dat is, kies voor optie 4 "Type something else" en vraag het aan Claude!

Claude Code met de eerste vraag

Claude Code stelt vervolgvragen

Als je de vragen hebt beantwoord gaat Claude aan de slag om een plan te maken. Dat kan een minuutje duren. Je krijgt vervolgens de mogelijkheid om het plan te lezen, om het goed te keuren of het nog wat aan te passen. Scroll het door en je zult bijvoorbeeld zien dat Claude zelf de verificatie van zijn werk gaat doen. Claude zal straks zelf een taak maken, aanvinken, verwijderen, om te kijken of alles goed gaat.

Claude Code Review plan

Ben je tevreden? Klik op "Approve plan" en we gaan door.

Dit is de kern van Claude Code: je vraagt iets, Claude gaat plannen, vraagt of alles akkoord is en gaat voor je aan de slag.

Let op wat er gebeurt:

  1. Claude gaat met de opdracht aan het werk
  2. Je ziet een preview van het nieuwe bestand ontstaan
  3. Je krijgt vragen om goedkeuring te geven voor het maken van bestanden
  4. Claude legt uit wat het heeft gemaakt

Claude Code vraagt toestemming voor het maken van een directory

Bij de toestemming heb je de volgende mogelijkheden

  • Deny. Je geeft geen toestemming
  • Allow Once. Je geeft voor deze specifieke opdracht toestemming
  • Always allow for session. Tijdens deze chat sessie mag Claude altijd het commando uitvoeren.

In bovenstaande screenshot wil Claude een directory maken. Dat is doorgaans OK. Je kunt hier prima Always allow... als antwoord geven. Dan hoef je veelal geen toestemming meer te geven voor volgende directories die Claude wil maken.

Hierna gaat Claude aan de slag en zal een takenapp maken. Na een paar minuten zie je het resultaat in je webbrowser. Je kunt het meteen testen door wat taken toe te voegen, af te vinken en verwijderen. Tevreden? Je hebt je eerste webapp gemaakt! Het HTML bestand bestaat nu echt in je project directory. Je kunt het openen in je browser:

Via de app (mits dat wordt aangeboden):

  • Rechtsklik op het bestand in de file browser
  • Kies "Open in Browser" (of "Reveal in Finder/Explorer")

Handmatig:

  • Open Finder (Mac) of Verkenner (Windows)
  • Navigeer naar je project directory
  • Dubbelklik op het HTML bestand

Je ziet nu de website die Claude heeft gemaakt. Best indrukwekkend voor één simpele opdracht, toch?

Bestanden aanpassen

Laten we de pagina veranderen. Type:

Voeg een header toe met de titel "Mijn takenlijst voor deze week" en maak de achtergrondkleur iets warmer (beige/cream tint). Als ik een taak afvink wil ik dat er confetti uit de linker- en rechteronderhoek omhoog spuit.

Ze de modus voor Claude op "Auto Accept Edits" zodat Claude aan de slag gaat en niet voor alles toestemming vraagt.

Nu gebeurt er iets anders:

  1. Claude laat zien wat wordt aangepast in de bestanden
  2. In het rood zie je de oude code
  3. In groen zie je de nieuwe code
  4. Claude legt uit wat er verandert. Begrijp je het niet? Vraag om meer uitleg!

Claude Code diff viewer toont wijzigingen in rood en groen

De diff viewer:

  • Rode regels = verwijderd
  • Groene regels = toegevoegd
  • Grijze regels = onveranderd (context)

Dit is superhandig. Je ziet precies wat Claude wil aanpassen voordat het gebeurt.

Omdat we Auto accept aan hebben staan, krijg je nu niet de vraag om de wijzigingen goed te keuren. Als je de modus "Ask permission" aanzet, kun je eerst door de wijzigingen lopen voor je akkoord geeft

Claude Code toestemming geven voor bestandswijzigingen

Meerdere bestanden tegelijk

Claude kan ook met meerdere bestanden werken. Probeer:

Maak een apart CSS bestand voor de styling en link het in de HTML. Voeg ook een JavaScript bestand toe met een simpele alert bij het afvinken van een taak.

Wat zie je nu:

  1. Claude maakt drie wijzigingen:
  • Nieuwe styles.css (groen, compleet nieuw bestand. Kan ook een andere naam krijgen.)
  • Aangepaste index.html (diff, link naar CSS toegevoegd)
  • Nieuwe app.js (groen, compleet nieuw bestand. Kan ook een andere naam krijgen.)
  1. Je kunt elke wijziging apart accepteren of afwijzen
  2. Klik "Accept All" om alle wijzigingen in één keer toe te passen

Ververs je browser. De pagina ziet er hetzelfde uit, maar de code is nu netter georganiseerd. En je krijgt een alert melding bij het afvinken van een taak.

Vragen stellen over code

Je hoeft niet alleen maar code te laten maken. Je kunt ook vragen stellen:

Leg uit hoe de CSS in styles.css werkt

Claude leest het bestand en legt in begrijpelijk Nederlands uit hoe CSS werkt, met verwijzingen naar de specifieke regels in jouw code.

Dit is perfect voor leren. Je bouwt iets, en Claude helpt je begrijpen hoe het werkt.

De sessions geschiedenis

In de chat zie je je hele gesprek met Claude. Dit blijft bewaard zolang je dezelfde sessie hebt. Dat zie je links in de lijst met sessies

Waarom dit handig is:

  • Claude onthoudt context van eerdere opdrachten
  • Je kunt terugscrollen naar eerdere uitleg
  • Je ziet je vooruitgang

Nieuwe sessie starten:

  • Cmd+Shift+O (Mac) of Ctrl+Shift+O (Windows)
  • Of klik het "+" icoon linksboven
  • Je begint met een schone lei (vorige context is weg) en kiest een nieuwe directory voor een ander project.

Shortcuts die je tijd besparen

De desktop app heeft handige keyboard shortcuts:

  • Cmd/Ctrl + Enter - Verstuur je chat-opdracht
  • Cmd/Ctrl + Shift + O - Nieuwe chat sessie
  • Cmd/Ctrl + , - Open settings
  • @ - als je een apenstaart typt in je chat kun je een specifiek bestand toevoegen aan je gesprek.

Gebruik vooral Cmd/Ctrl+Enter vaak. Je handen blijven op het keyboard, geen muis nodig.

Wat je nu hebt geleerd

Je weet nu hoe je:

  • Bestanden laat lezen door Claude
  • Nieuwe bestanden laat maken
  • Wijzigingen bekijkt via de diff viewer
  • Wijzigingen accepteert of afwijst
  • Met meerdere bestanden tegelijk werkt
  • Vragen stelt over je code
  • De interface efficiënt gebruikt

In de volgende module bouw je een compleet project van A tot Z. Je leert hoe je complexere opdrachten geeft, hoe je iteratief werkt, en hoe je Claude stuurt naar het resultaat dat je wilt.

Tips voor effectieve opdrachten

Wees specifiek:

  • ❌ "Maak een website"
  • ✅ "Maak een eenvoudige webapplicatie voor me om taken op te slaan. Stel me maximaal 3 vragen om de werking te bepalen. "

Geef context:

  • ❌ "Voeg een knop toe"
  • ✅ "Voeg een header toe met de titel "Mijn takenlijst voor deze week" en maak de achtergrondkleur iets warmer (beige/cream tint). Als ik een taak afvink wil ik dat er confetti uit de linker- en rechteronderhoek omhoog spuit"

Vraag om uitleg:

  • ❌ "Fix de bug"
  • ✅ "Er verschijnt geen alert meer. Leg uit waarom en fix het"

Itereer stap voor stap:

  • Niet alles tegelijk vragen
  • Kleine wijzigingen, kijk naar resultaat, volgende stap
  • Claude leert van je feedback in dezelfde sessie

Dus begin simpel, bouw op, en wees niet bang om vragen te stellen. Claude is er om te helpen én om uit te leggen.