Claude Artifacts: documenten en code maken (2026)

Claude Artifacts zijn interactieve previews die naast je gesprek verschijnen. Vraag Claude om een website, document, diagram of stuk code en je ziet het resultaat direct in een apart paneel - klaar om te gebruiken, bewerken of downloaden.

In het kort

• Artifacts zijn live previews van documenten, code en visualisaties naast je chat
• Claude maakt automatisch een Artifact aan wanneer de output zich daarvoor leent
• Je kunt HTML-websites, React-apps, SVG-graphics, diagrammen en documenten genereren
• Artifacts zijn interactief: klik, scroll en gebruik ze direct
• Beschikbaar voor alle gebruikers van Claude

Hoe werken Artifacts?

Wanneer je Claude vraagt om iets te maken dat meer is dan platte tekst - een website, tabel, diagram of stuk code - opent Claude automatisch een Artifact-paneel rechts van het gesprek. Hierin zie je een live preview van wat Claude heeft gemaakt.

Artifact types

| Type | Voorbeeld | Wat je ziet | |---|---|---| | HTML/CSS/JS | Website, landingspagina | Werkende webpagina | | React | Interactieve component | Klikbare app | | SVG | Logo, icoon, illustratie | Vector afbeelding | | Mermaid | Flowchart, diagram | Visueel diagram | | Markdown | Rapport, handleiding | Opgemaakt document | | Code | Python, JS, etc. | Syntax-highlighted code |

Praktische voorbeelden

Een landingspagina maken

Maak een moderne landingspagina in HTML/CSS voor een fictieve
koffiebar genaamd "De Bonenmaler". Gebruik:
- Hero sectie met achtergrondafbeelding (gebruik een gradient als placeholder)
- Drie USP's met iconen
- Menu sectie met prijzen
- Contactformulier
- Responsive design
Stijl: warm, uitnodigend, aardtinten

Claude genereert de complete HTML en toont een werkende preview in het Artifact-paneel.

Een interactieve calculator

Maak een React component: een BTW-calculator.
- Invoerveld voor bedrag exclusief BTW
- Dropdown voor BTW-tarief (21%, 9%, 0%)
- Toon bedrag inclusief BTW en het BTW-bedrag
- Strak, modern design

Een flowchart

Maak een Mermaid flowchart van het proces van een online bestelling:
bestelling plaatsen -> betaling -> bevestiging -> verzending -> bezorging
Voeg bij elke stap een beslismoment toe (bijv. betaling gelukt? ja/nee)

Een SVG-illustratie

Maak een SVG-illustratie van een simpel dashboard-icoon.
Minimalistisch, twee kleuren (blauw en grijs), geschikt als website-icoon.

Stap voor stap werken met Artifacts

Stap 1: Vraag om wat je nodig hebt

Beschrijf duidelijk wat je wilt. Noem het type (website, diagram, document), de inhoud en de stijl.

Stap 2: Bekijk het resultaat

Het Artifact verschijnt rechts van je chat. Klik erin, scroll, test interactieve elementen.

Stap 3: Vraag om aanpassingen

• "Verander de achtergrondkleur naar donkerblauw"
• "Voeg een vierde kolom toe aan de tabel"
• "Maak de tekst groter op mobiel"

Stap 4: Kopieer of download

Klik op de kopieerknop om de broncode te kopieren, of download het bestand.

Tips voor betere Artifacts

1. Wees specifiek over stijl - "Modern, minimalistisch met blauwe accenten" geeft een beter resultaat dan "maak het mooi"
2. Geef voorbeelden - Verwijs naar websites of stijlen die je bevallen
3. Itereer - De eerste versie is een startpunt. Verfijn met gerichte feedback
4. Combineer met Projects - Upload je huisstijlgids voor consistente output
5. Vraag om responsive design - Noem expliciet dat het op mobiel moet werken

Veelgemaakte fouten

• Te vage beschrijvingen - "Maak een website" levert een generiek resultaat. Beschrijf inhoud, stijl en functionaliteit.
• Te veel tegelijk vragen - Een complete webshop in een Artifact is te complex. Bouw stap voor stap op.
• Niet testen - Klik door het Artifact heen. Test links, formulieren en responsive gedrag.
• Vergeten te kopieren - Als je het gesprek verlaat zonder te kopieren, ben je je werk kwijt. Sla het op.
• Verwachten dat het productie-klaar is - Artifacts zijn prototypes. Voor productie is aanpassing nodig.

Veelgestelde vragen

Wat zijn Claude Artifacts?

Artifacts zijn interactieve documenten die Claude naast het gesprek toont - teksten, code, websites of visualisaties.

Kan ik Artifacts downloaden?

Ja, je kunt de inhoud kopieren of downloaden.

Werken Artifacts in de gratis versie?

Ja, Artifacts zijn beschikbaar voor alle Claude-gebruikers.

Kan ik een Artifact bewerken?

Vraag Claude om aanpassingen en het Artifact wordt bijgewerkt.

Welke soorten Artifacts zijn er?

Tekst, HTML/CSS/JS websites, React componenten, SVG afbeeldingen, Mermaid diagrammen en code.

Meer lezen

• Claude AI voor beginners
• Claude Projects gebruiken
• Claude tips

---

Hulp nodig?

Kom je er niet uit? Neem gerust contact op:

• WhatsApp: Stuur een berichtje
• Email: w.bouwmeester@bouwmeesterconsultancy.nl
• Bel: +31 6 28963636

Ik help je graag verder!