Case study: Claude AI en Atomic Elements

Van Claude AI tot Atomic Elements: de nieuwe website van Spreekvrij

Claude

Web design

Atomic elements

Design system

Inleiding

In 2026 werd ik door Frank en David benaderd met de vraag om te helpen bij de website van Spreekvrij. Zij wilden een groot deel van de content zelf oppakken, maar schakelden mijn hulp in bij het opzetten van een design systeem (UI) en het nachecken / optimaliseren van het uiteindelijke concept.

Dit heeft geleid tot een prachtige website die klaar is voor groei, een stevige basis waarmee Frank en David hun ondernemingsavontuur kunnen starten.

Wensen, eisen en uitdagingen

Mijn rol als Digital Soulmate: het bedenken van een concept, strategisch meedenken met Frank en David, en het opzetten van een schaalbare website op basis van een design systeem.

Dit waren de belangrijkste wensen en eisen:

• Logische websitestructuur en -flow: De website moet op een logische manier zijn opgebouwd en de gebruiker moet op verschillende manieren makkelijk zijn content kunnen vinden.

• Een schaalbare website: De website moet zo zijn opgezet dat deze makkelijk is uit te breiden en volgens een design systeem is opgebouwd. Dit betekent onder andere het gebruiken van componenten, variabelen en classes.

• Unieke foto’s en video’s: De foto’s en video’s moeten van hoge kwaliteit zijn en prominent op de website naar voren komen.

Frank's ervaring

Op zoek naar een unieke website die er fantastisch uitziet én nieuwe klanten aantrekt en converteert? Dan is Digital Soulmate jouw perfecte partner!

Het proces in beeld

Een screenshot van de Elementor-backend met een pagina die is opgebouwd met Atomic Elements. — Zoveel mogelijk content is opgebouwd met containers en elementen van Atomic Elements. Met deze nieuwe Elementor-feature kun je je website opbouwen op een manier die vergelijkbaar is met het werken met een design systeem in Figma.

Een screenshot van een conversatie tussen een persoon en Claude AI. — Tijdens dit project hebben we AI op verschillende manieren ingezet: van het ontwikkelen van features met HTML, CSS en JavaScript tot het maken van digitale gidsen (e-books) en het schrijven van content.

Een screenshot van de Spreekvrij stijlgids. — Ook voor de style guide hebben we AI ingezet. Op basis van onze eigen voorkeuren hebben we samen een consistente visuele stijl ontwikkeld.

Eindresultaat

Een screenshot van de aangeboden pakketten van spreekvrij.nl — De hele website is clean en overzichtelijk opgebouwd. Voor onderdelen zoals de pakketten hebben we herbruikbare componenten gemaakt, zodat we één centrale bron hebben die we op meerdere plekken binnen de website kunnen inzetten.

Een screenshot van de hero sectie van de spreekvrij contactpagina. — De website biedt verschillende mogelijkheden voor conversie, van e-bookfunnels en contactformulieren tot een volledig geïntegreerde betaalde checkout via Plug&Pay.

Reflectie

Design tokens zijn belangrijk in een design systeem

Het werken met Atomic Elements was even wennen, omdat ik vanuit Elementor gewend ben om op een andere manier te bouwen. De volgende keer wil ik vooraf beter nadenken over de design tokens, componenten en structuur van het design system.

AI is krachtig, maar niet altijd de snelste manier

Om een bepaald resultaat te bereiken, ben je soms lang bezig met het verfijnen van prompts. We merkten dat het in sommige gevallen sneller en efficiënter was om iets zelf te creëren.

Mooie resultaten bereikt en veel geleerd tijdens het proces

Tijdens dit proces hebben we zowel mooie resultaten geboekt als waardevolle kennis opgedaan. We hebben met name veel geleerd over het werken met Atomic Elements, Claude AI.

Geef jouw website of app ook een frisse, creatieve upgrade!

Boek je gratis 30-minuten kennismakingsgesprek en ontdek:

Zie ook