Claude Artifacts Prompt: Maak Professionele SVG Iconen en Web Illustraties

1. Het Incident op de Zuidas

Gisteren om kwart voor vijf zaten we met het volledige team in een strak glazen vergaderruimte op de Zuidas in Amsterdam. We stonden op het punt om een nieuwe interne workflow-chatbot te lanceren voor onze fintech-klanten. Alles stond klaar, behလ dat de tool abrupt faalde zodra gebruikers onverwachte invoer gaven. We misten een robuuste set visuele elementen en duidelijke iconografie in de interface om uitzonderingen en foutmeldingen begrijpelijk te maken voor de eindgebruiker.

De ontwerpers waren al naar huis en we hadden geen tijd meer om handmatig complexe SVG-iconen te coderen of Illustrator op te starten. We hadden direct een reeks unieke, schaalbare web illustraties en statusiconen nodig voor onze Claude Artifacts omgeving. Mijn eerste generieke poging leverde slechts willekeurige, rommelige code op die niet paste bij onze strakke huisstijl en bovendien direct crashte in de browser.

Praktische Notitie: Zonder een gestructureerde prompt mist Claude de context van jouw visuele identiteit, waardoor je vastzit aan generieke plaatjes die niet functioneel zijn in een productieomgeving.

Claude Artifacts Prompt to Create Custom SVG Icons and Web Illustrations Prompt Guide

2. Waarom Standaard Prompts Falen

Wanneer je aan Claude vraagt om “maak een icoon voor een foutmelding”, krijg je vaak een geïmproviseerde SVG met hardcoded kleuren en missende viewBox-attributen. Dit komt doordat het model geen strakke technische beperkingen meekrijgt over de semantische opbouw van Scalable Vector Graphics.

Voor een professionele toepassing op de Zuidas of binnen een agile innovatiehub heb je schone, responsieve en toegankelijke code nodig. De oplossing ligt in het definiëren van een Master Prompt die Claude dwingt om te werken binnen een geïsoleerde Artifacts-omgeving, met specifieke instructies over lagen, stijlen, kleurenschema’s en responsiviteit.

3. Master Prompt Template

Kopieer onderstaande prompt en pas de variabelen tussen de haken aan naar jouw projectbehoefte. Voer dit direct in bij Claude met Artifacts ingeschakeld.

Acteer als een senior UI/UX designer en SVG-expert. Genereer een schaalbaar, productie-klaar SVG icoon/illustratie binnen een Claude Artifacts venster.

Project Context: [Voeg hier je projectdoel toe, bijv. fintech workflow bot]
Iconografische Stijl: [Bijv. minimalistisch, matte black stealth, zakelijk, modern]
Onderwerp/Functie: [Bijv. een uitzondering/error state voor gebruikersinvoer]
Technische Eisen:
- Gebruik een viewBox van '0 0 24 24' of '0 0 512 512'.
- Geef schone, semantische SVG tags zonder onnodige nesting of externe afhankelijkheden.
- Gebruik CSS variabelen of inline fill/stroke attributen voor eenvoudige kleuraanpassing.
- Zorg dat het ontwerp volledig schaalbaar en responsive is.

Lever uitsluitend de werkende code binnen een Artifacts container op, vergezeld van een korte technische toelichting.

4. Praktische Variaties en Veiligheidstips

Om te voorkomen dat je tijd verspilt aan herhalingen, kun je deze extra regels toepassen in je Systeeminstructies of projectinstellingen:

Token Besparing: Vraag Claude om de SVG direct in een gecomprimeerd formaat te leveren zonder overbodige metadata van designprogramma’s zoals Illustrator of Inkscape.
Toegankelijkheid: Voeg altijd de eis toe om <title> en <desc> tags binnen de SVG op te nemen voor optimale screenreader-compatibiliteit.
Kleurconsistentie: Definieer vooraf een beperkt kleurenpalet (bijvoorbeeld maximaal drie hex-codes) zodat de gegenereerde illustraties naadloos aansluiten bij je bestaande webapplicatie.

Pro-Tip: Test de gegenereerde SVG altijd direct in je browser via de Artifacts preview om te controleren of paden correct sluiten en er geen ongewenste clipping optreedt.

5. Veelgestelde Vragen

Q: Kan ik deze prompt ook gebruiken in ChatGPT of Gemini?

A: Hoewel ChatGPT en Gemini uitstekende tekst- en codegeneratoren zijn, mist het specifieke interactieve “Artifacts” venster van Claude. Je kunt de code wel genereren in andere tools, maar Claude biedt de handigste live preview ervaring voor directe visuele iteraties.

Q: Hoe zorg ik ervoor dat de gegenereerde SVG precies past bij onze merkidentiteit?

A: Voeg in de master prompt altijd specifieke hex-codes en stijlelementen toe (zoals “gebruik strakke hoeken en een pikteken-dikte van 2px”). Hoe specifieker je bent over de visuele regels, hoe nauwkeuriger het resultaat.

Q: Wat moet ik doen als de SVG niet goed schaalt op mobiele schermen?

A: Controleer of de prompt expliciet vraagt om een correcte viewBox en vermijd hardcoded width en height attributen in pixels binnen het hoofdelement, zodat CSS de sizing kan overnemen.