Ward Poel
We've all experienced it - surfing to a website late at night only to be blinded by an intensely bright white background. Your eyes strain as you frantically go on the hunt for a dark mode toggle, if one exists at all. Out of the corner of your eye, you suddenly spot it—thank goodness—the glorious option that soothes the pain in your eyes. With a single click, dark mode is on, and just like that, you’ve just made the website ever so slightly more personalized. It's even possible this exact scenario happened when you went looking for this new installment of the Generative AI Playground - welcome, by the way! And our apologies if it did happen...
At Raccoons, we're convinced that having the possibility of completely personalizing the appearance and content of your website can become a powerful differentiator for your organization. And while many sites now offer this basic binary choice between light and dark, true website personalization remains rather limited. It's an observation that kept rattling in the heads of Raccooners Wout and Ward - why couldn't we simply ask a website to adapt to our preferences, ones that align with our current needs? They set to work with this question in mind, and at one of our most recent experimentation/training day, they were able to introduce an intriguing prototype - one that could transform the way users interact with websites, all powered by conversational AI.
This is the type of idea we’re not just dreaming up — we’ve got the skills to make it real, making it a perfect candidate for further exploration in the Playground!
Simply said, CSS is the language that shapes how a website looks — fonts, image sizes, color schemes, you name it. Traditionally, if you stumble onto a site where the font is so tiny (or so ugly) it gives you a headache, the only way to fix it would be by digging into the CSS code yourself — which, let’s be honest, requires a bit of technical know-how. That’s assuming you even have access to edit the site in the first place... So yeah, changing how a website looks isn’t exactly something regular users get to do.
Enter generative AI. Thanks to Wout and Ward’s proof of concept, you no longer need to touch a single line of code. Instead, you can simply say or type what you want, and the site adapts to your wishes. We’re not just talking about a basic dark mode toggle either — this is a flexible system, limited only by the capabilities of CSS itself.
Our prototype runs on a pretty straightforward principle. It uses OpenAI’s GPT-4o mini model — one of the more lightweight and affordable ones — to bridge the gap between the user and the site’s code. The result? A natural language interface that can modify CSS in real time. Basically, it breaks down the technical barrier between user’s intent and the web experience they want. Let’s say, after a couple of hours behind your laptop screen, your eyes are starting to hurt and you’d like the text to be bold and a little bigger. You explain the model your request, and this is how it will proceed:
And boom: your eyes can get some well-needed rest.
But of course, we didn't stop at just font sized during the demo. We pushed the prototype to its limits (or at least we tried). Turns out, there weren't that many limits. We ended up with rotating images on the site and even transformed the whole site into a full-on Barbie theme. Just to say: nothing was too much.
An important capability of this prototype is its memory - it remembers what you've asked it before. That means you can refine your site's look step by step, and the model keeps track. There's even a 'personalization history' feature that lets you roll back to a previous version of your styling - or go back to the default look if your Barbie moment has run its course. And hey, you never know when that hot pink flair might come in handy.
And that’s not all: while visual customization forms the core of the project, another fascinating aspect is the system's ability to adapt content based on user preferences. If a user finds an article too technical or complex, they can simply request, "Make this easier to understand," and the AI will rewrite the content to match their comprehension level.
Conversely, users seeking more in-depth information can ask for a more technical or detailed version of the content. This dynamic content adaptation opens up new possibilities for websites to serve diverse audiences with varying levels of expertise without maintaining multiple versions of the same content.
For businesses, implementing personalization has traditionally been resource-intensive, involving user research, segmentation, and the creation of multiple design variations. Our AI-powered approach dramatically reduces this overhead by putting personalization directly in the hands of each user. We’re already dreaming big:
This functionality is tailored to the user's needs, with almost no boundaries. The examples we've provided are just a glimpse of what's possible. That said, a quick disclaimer about the prototype has to made here: while you could tweak pretty much anything visual on the site, structural changes were… a different story. With the current setup, it just wasn’t possible to modify deeper layout elements. So if you asked the model to turn a table into a list, for example, it either struggled or simply didn’t follow through.
One of the most compelling applications of this prototype relates to web accessibility. The European Accessibility Act (EAA), and more specifically the Web Accessibility Directive (which will be fully enforced by June 2025) require digital products and services to be accessible to people with disabilities. When we think of common accessibility issues, some website problems immediately come to mind: poor color contrasts, excessive flashing or blinking content, some keyboard accessibility issues...
From now on, web developers will need to make sure their sites are POUR — that means the content must be Perceivable, Operable, Understandable, and Robust. According to the European Commission, by 2025, up to 87 million people in Europe will be living with a disability. So complying with these accessibility standards isn’t just a nice-to-have — it’s essential. But let’s be real: it’s no walk in the park. And that's where the dynamic approach of our conversational CSS really shines. Users with visual impairments could request larger text, higher contrast, or specific color combinations that work best for their particular situation (e.g. colorblindness). Those with cognitive disabilities might ask for simpler layouts or content rewrites that match their comprehension level.
This adaptive approach aligns perfectly with the EAA's goal of making digital content accessible to everyone, regardless of ability. Rather than implementing a one-size-fits-all solution, websites could adapt to individual accessibility needs through natural conversation.
When testing a prototype like this, it’s a good thing to verify how well it holds up on a website other than our demo website. That’s why we have already experimented with implementing the functionality as a Chrome Extension—and in doing so, we identified areas for improvement.
As we’ve stated before already, the GPT model lacks an inherent understanding of a page’s structure, which can lead to ineffective styling attempts. Many modern websites no longer follow traditional HTML structuring practices: for instance, when the model generated styling rules for traditional semantic elements like H1 and H2 tags, these failed on websites built primarily on complex arrangements with generic <div> elements. This inconsistency across the web makes universal personalization challenging. One potential solution could be to provide the LLM with the HTML structure of the page as additional context when generating CSS—however, this has not yet been tested.
On a broader level, we must also ensure consistent design principles: Complete freedom in customization could result in aesthetically problematic designs or broken layouts. Future iterations will need built-in safeguards to maintain basic design integrity. Lastly, further refining could examine whether the model shows consistent behavior across different browsers and devices.
Our AI-powered website personalization project represents a glimpse into the future of web interaction—one where the boundary between user intent and digital implementation dissolves through natural conversation. And here's the kicker: this was accomplished with just a brief development sprint (like, literally, in one day). Imagine what could be achieved with dedicated resources and a focused team effort!
As this technology matures, we anticipate a shift in how websites are conceptualized from the ground up. Rather than designing static pages with limited options, developers might instead create flexible frameworks that respond intelligently to user preferences—placing control firmly in the hands of the people who matter most: the users themselves. It’s not the case just yet, but it is nice to imagine already: every website just listens to you, understands your suggestions and implements them immediately…
At Raccoons, we'll continue exploring this approach as part of our commitment to harnessing generative AI for practical, impactful applications. After all, the Generative AI Playground is where some of our most innovative ideas take shape before transforming into solutions for our clients.
Who knows?
Written by
Ward Poel
Want to know more?
