Let's Talk

100+ successful projects

15+ years work experience

4,5/5 customer ratings

Selecteer een pagina

From Claude AI to Atomic Elements: the new website for Spreekvrij

Claude
Web design
Atomic elements
Design system
Screenshot van de hero-sectie van de Spreekvrij-website

Introduction

In 2026, Frank and David approached me for help with the Spreekvrij website. They wanted to handle most of the content themselves, but brought me in to build the design system (UI) and to refine the final concept.

This resulted in a beautiful website that's ready for growth - a solid foundation for Frank and David to launch their business venture.

Needs, requirements, and challenges

My role as Digital Soulmate: developing the concept, thinking strategically alongside Frank and David, and setting up a scalable website based on a design system.

The key wishes and requirements were:

• Logical website structure and flow: The website needed to be built in a logical way, allowing users to easily find content through multiple routes.

• A scalable website: The website needed to be set up so it could easily be expanded, built according to a design system. This includes using components, variables, and classes.

• Unique photos and videos: The photos and videos needed to be high-quality and feature prominently throughout the website.

Frank van de Stottercoach

Frank's experience

Want a unique website that looks great and drives new customers? Digital Soulmate is your ideal partner!

The process at a glance

Een screenshot van de Elementor-backend met een pagina die is opgebouwd met Atomic Elements.
As much content as possible was built using containers and elements from Atomic Elements. With this new Elementor feature, you can build your website in a way that's comparable to working with a design system in Figma.
Een screenshot van een conversatie tussen een persoon en Claude AI.
During this project, we used AI in a variety of ways: from developing features with HTML, CSS, and JavaScript, to creating digital guides (e-books) and writing content.
Een screenshot van de Spreekvrij stijlgids.
We also used AI for the style guide. Based on our own preferences, we worked together to develop a consistent visual style.

Final result

Screenshot van de hero-sectie van de Spreekvrij-website
Careful thought was given to the use of photos and videos per page and the emotions they evoke. Everything has also been fully optimised for desktop, tablet, and mobile.
Een screenshot van de aangeboden pakketten van spreekvrij.nl
The entire website has been built clean and well-organised. For elements like the packages, we created reusable components, giving us a single central source that can be used in multiple places throughout the website.
Een screenshot van de hero sectie van de spreekvrij contactpagina.
The website offers various conversion opportunities, from e-book funnels and contact forms to a fully integrated paid checkout via Plug&Pay.

Reflection

Design tokens matter in a design system

Getting to grips with Atomic Elements took a bit of adjustment, since my usual way of building in Elementor works differently. Going forward, I'll plan the design tokens, components, and structure of the design system more carefully from the start.

AI is powerful, but not always the fastest route

Getting a specific result can sometimes mean spending a lot of time fine-tuning prompts. We noticed that, in some cases, it was quicker and more efficient to simply build it ourselves.

Achieved great results and learned a lot along the way

Throughout this process, we achieved great results and gained valuable knowledge along the way. In particular, we learned a lot about working with Atomic Elements and Claude AI.

Illustratie van de Digital Soulmate die achter zijn laptop zit en iets bespreekt met een vrouwelijke klant die een kopje drinkt, ter visualisatie van een advies.

Refresh your website or app with a creative upgrade!

Schedule a free 30-minute discovery call and find out:

  • Which package aligns best with your project needs.
  • Whether we can establish a long-term collaboration.
  • Why a Digital Soulmate can help your business grow.
Book your call today
See also

Other great results