insights! #116: How AI and Storyblok are revolutionizing web development – live, iterative, scalable

Benedikt Grimm 

Great to have you all here. 

Wolfgang Seyppel 

Good morning, everyone. How many of you know Xaumi? Xaumi? A few. For those who did not raise their hand: Xaumi is a mobile phone manufacturer that now also builds electric cars. The crazy thing about Xaumi is that this year they started with 75,000 pre-ordered electric cars and planned to produce up to 100,000. What is really wild about the whole thing is that it is a fully automated robot plant. This is a video from Chaumie, and they are planning to deliver one car every 76 seconds – that is what the plant can do. That is 47 cars an hour that this production line can put out. All of that is done by 700 robots and 181 mobile robot units. And there is one very special innovative step they took: they managed to reduce the number of weld seams on the underbody. They were able to save 840 weld seams. That cuts 45% of the production time and creates higher quality, because every one of those weld seams can of course be a potential breaking point. What is so great about that? For one thing, they have a fully automated production line. They work with modules and components that they assemble in a standardized way, AI-driven quality assurance and predictive logistics planning. Now, of course, the question is: what does a car manufacturer have to do with us? 

Wolfgang Seyppel 

That car manufacturer is not exactly our big role model either. 

Benedikt Grimm 

46 projects an hour. 

Wolfgang Seyppel 

46 projects an hour. Exactly, that is what we are planning, that is what we are going to show you today. No, in the end, what is this about? It is about getting to a result faster and at higher quality. We are a service provider. That is what we have to achieve. With the competitive pressure we face in the market, we have to manage it – and every manufacturing business has to manage it too: to get to the result faster and at higher quality. And just like Chaumi, we want to do that with the help of AI: data-driven, fully efficient, no longer linear but intelligent, iterative, with modern tools and always working in an anticipatory way. Who is going to show you all this today? First, Bene – that is Benedikt Grimm. Bene is our – I will say something about the company in a moment – Head of Frontend. In his private life Bene is an absolute nerd as well, you really cannot get him away from the computer. So everything he is going to show you, he looks at on the weekend, he looks at it in the morning and in the evening. It is amazing. Sometimes I get Teams messages on a Sunday: “Wow, Wolli, I just found out this and that. Totally crazy. Take a look at this.” Really amazing. It is a lot of fun working with Bene. 

Wolfgang Seyppel 

In private, Bene is a dog and cat lover, has plenty of them at home, a big beautiful house, and he is a really great guy. 

Benedikt Grimm 

I can already tell I am coming across really well as an animal person. Animal hoarder with nerd syndrome. Exactly. Thanks, Wolli. Wolley runs our delivery organization, and I get to work with Wolley, and he is the one who gives us the room to try out a lot of things in projects in the first place. Wolley is my barbecue and chutney master – when we visit you, that is the highlight. That is why I always love coming over. 

Wolfgang Seyppel 

Maybe a few quick words about Synergy. We did not bring any slides. That would of course have been a death sentence with a title like this. Synergy is the company we work for. Synergy is a company, a digital agency in the end, with a very strong tech focus. We work on websites, on e-commerce, we build CMS systems, ultimately digital experience platforms, we come very much from the commerce field but are expanding into, let us say, face to the customer. That is simply important to us. UX, customer first, customer centricity. We will soon be 150 employees in Cologne, Dortmund and Berlin and we have, as I said, expertise in web development, managed service, data analytics, everything that goes into creating great user experiences. We are part of a group, the Time to Act Group. The Time to Act Group is not just our parent company, we are closely, very closely tied to the Time to Act Group. We have a number of sister companies operating across the entire IT sector. I know our managing director always used to say we do everything except SAP, until he acquired an SAP company – and now we do SAP as well, so Google Cloud, Microsoft Dynamics. With catWorx we have the largest Adlation service provider in Europe on board, 1,500 employees and growing. 

Wolfgang Seyppel 

That in a nutshell. If you want more information, we have laid out some nice flyers here, about our in-house trade fair as well. Feel free to get in touch if you are interested. Really exciting topics. It is going to be a great event. Just contact us. 

Benedikt Grimm 

Okay, perfect. So what have we got planned with you today? Right, that is enough sales talk. Now let us get to our topic. We rehearsed this a few times beforehand. Sometimes it worked, sometimes it did not. We hope that this time round we get the version that works. 

Wolfgang Seyppel 

So, no bullshit, plain and simple. Let us see what happens. 

Benedikt Grimm 

Let us see what comes out of it. What we set out to do today is to build a page together with you in Storyblock, a landing page, let us say. For those who do not know it, Storyblock is a headless CMS, and because it offers all its functions via an interface, it is essentially the perfect basis for going at it with AI as well. And how that works is exactly what we are going to look at together now, and we will decide together what we actually want to have on the page. 

Wolfgang Seyppel 

And two more quick questions, so that I can jump in every now and then to moderate. Naturally I would like to know how tech-savvy you are. So, just two questions. How many of you know React? Great. That is a good start. How many of you know WindSurf? All right, then we know what we have to do. You will get a few explanations along the way. Windsurf is the development tool that Bene is about to use. React, just to explain briefly, is a content framework. It is used to build really, really slick, modern websites in the frontend. 

Benedikt Grimm 

Exactly. Okay, where do we start? First of all, maybe I will jump into Storyblock briefly and show you – at the moment we have an empty Storyblock workspace. There is not much going on in here. In Storyblock we first need the content models. That is what your editors need in order to have the editing forms available if they want to work with it at all. Right now everything is empty. We want to fill it together now, and from there I will also switch over to Windsurf. Do not be surprised, of course – like every good chef on a live show – I brought along a little recipe, so I took something with me. In this case it is simply a blank Next.js project where I have connected Storyblok exactly as described in the documentation. Other than that, if we look at our components, there really is nothing in there yet. 

Wolfgang Seyppel 

By the way, we tried on Friday to run this a bit in advance. We had set out to do it without pre-written prompts. That failed spectacularly, it simply does not work. Good prompts are absolutely essential, and that is why it is completely right that Ben prepared them. 

Benedikt Grimm 

Correct. You just said I am using WindSurf. That is not quite right. I use WindSurf as my IDE, but today we are using Cloud Code, because the way it works is simply so pleasant to watch. We know how it works. It works really brilliantly. We recently did a hackathon. Halfway through we noticed, oh, Cloud IV is out. Well, okay, then let us just try it with another tool. It worked really well and that is why I brought it along for today. Windsurf, apart from that, is something like CURSERV, if you know that. Visual Studio Code with agentic coding built in. And then I can pick and choose the models, decide who should code what for me. Do not worry, we are not going to look at that much of the code today. Unless it interests you and you ask questions about it. What do we want to do? First we want to think about what we need on a typical landing page like this. And for that I built us a few prompt templates. In Cloud Code these are slash commands. And the question for you now would be: what do we perhaps need first? Maybe I will demonstrate it first and then you jump in and say what you want first. 

Benedikt Grimm 

Let me just say that a typical landing page like this needs some kind of navigation. So, I could type it in German now, I could type it in English. German actually, funnily enough, is much more precise than English. So when you write prompts, even though it is always tempting to write in English – and basically I always do it that way – in reality German actually works much better, because the language is much clearer. We will still do it in English now, simply because I am such a creature of habit. 

Wolfgang Seyppel 

People and technology. 

Benedikt Grimm 

So, we are building a navigation component. On mobile we want a burger menu. We want at least two levels of navigation items. And while we send that off. Let me switch over and explain what the prompt template does. Unless there is a question about it already. 

Wolfgang Seyppel 

Exactly, if you have questions today, just jump in. By the way, in a moment we are going to … So, Bene, show us how it works. Then I will also ask you: what do you want to have on this landing page? So in a moment we will have to join in a bit, gladly. And at the end we can also blow the thing up together or make it even nicer. So we start small and then work our way up to the maximum. 

Benedikt Grimm 

Exactly, the important thing is to understand what we are doing right now. So first of all, let me briefly explain: we need the modern coding tools, they all create a to-do list for you. So they break the task down into smaller steps. In this case we have six steps that we split the whole thing into, and that also matches how we would do it in reality ourselves. First we would think about the content model and create it in Storyblock. I can do that by hand, I can do it with various tools. In this case, though, we want the AI to generate it based on what we feed in as requirements. Then of course we need the frontend counterpart to it, we have to link the whole thing together, and at the end, in most cases, we probably want some kind of preview page to check whether everything worked the way we imagined. And so that I could throw this in relatively abstractly, I need something like slash commands – prompt templates, let us say – that take care of some of it up front so that I do not have to type it out by hand every time, because let us be honest, we are all a bit lazy sometimes and do not always want to type everything out to perfection by hand. 

Benedikt Grimm 

That is why I have a little markdown file – that is a text file – which essentially breaks down what should be possible. That I mention we need component names, we need our fields, the available field types in Storyblock, in other words what the editors can actually use, the different kinds. I have to list them out at least once, because otherwise I am relying purely on pre-trained knowledge, and that is not always the real case that actually works in practice. And then there are very concrete steps that we have to take. And the more specific I make those steps up front, of course, the better it works. That is why, in this case, I simply specified where my logic lives, that I want to have a draft status, because I am doing it with the development space and you are only allowed to publish three times a day. Then it works. And we brought Storyblock MCP along especially for today. You have certainly heard about MCP quite a lot by now. Maybe a quick show of hands: who has heard the term “MCP” by now? Okay, fewer than I expected. “MCP”, Model Context Protocol, comes from Anthropic, it is a protocol, essentially a standard. 

Benedikt Grimm 

They released it back in November and you can think of it, I believe, as the USB-C connector for AI tools – that is how it is often compared. You have your AI, ChatGPT, Cloud, whatever. You can interact with them. The coding tools can, for example, read files, they can write files, they can maybe fetch some information from the internet, and now we want to give them something like: “Hey, you should also communicate with Storyblock. You should create my content in Storyblock. You should create my components in Storyblock. You should fetch my products from the e-commerce system.” That is exactly the kind of case you can provide MCPs for. The funny thing about it is that MCPs are not that complicated to build. Even the MCP we are using today to interact with Storyblock, I built in about half an hour yesterday morning, just quickly. So it is really easy, because essentially it just wraps things. I have this interface, and beforehand I query in a certain schema what it actually expects and combine that with a bit of context so it knows what to use and how. And because of that we can now see down here – if I am going too fast anywhere, please interrupt me – we can see down here that our tool wants to be executed right now. 

Benedikt Grimm 

And what we want to do is create a component in Storyblock. It looks very technical right now. There is a navigation, it has a certain schema. We will look at it in the interface in a moment. We are simply saying now, consciously, that this is exactly how we want it, because we have read it through. If we now take the second option and say we accept everything the AI gives us, then we are more in a vibe coding context. Vibe coding – you have probably heard of it before, or maybe not. 

Wolfgang Seyppel 

Who has heard of it before? 

Benedikt Grimm 

Some of you. Vibe coding is a term coined by Karpathy – he is a former Tesla and OpenAI employee – on Twitter, on X. Back then he said he kept catching himself not looking at the code any more and just surfing the vibe when he develops and wants to have his tool. That would be: I just let the AI run and see what comes out. But we want to approach it much more consciously, because that is also what works in reality. If I send this through to my colleague who comes from the UX side and maybe wants to knock together a quick prototype, then that is exactly the right thing. In that case he does not want to see any code either. But when we work on real projects, we do want to know what comes out at the end so that we can steer it. In that case it makes sense that I can counter-steer and check things by hand every time. Let us send it off now. We also get a success back as a response. We can see a second component flying towards us here. That is the nav item. 

Benedikt Grimm 

Sounds good at first as well. Let us take it exactly like that. 

Wolfgang Seyppel 

And in the meantime I can ask you another question: does anyone know in which game AI first beat a world champion? 

Benedikt Grimm 

Chess. 

Wolfgang Seyppel 

Matthias, congratulations. You have won a goodie bag. It includes a Time to Act cap, a sticker, lots of nice things, a few spices, just for you. And there are a few more questions to come. You saw it. 

Benedikt Grimm 

Exactly, while it is still building the React component, we can jump into Storyblock for a moment and hopefully we will now see that, next to our page, there is suddenly the navigation and our items. Let us take a look inside. We can see there is a logo, there is a call-to-action button and a set of navigation elements. That sounds fitting to me for now. There is a navigation element, it has a label, a link and further sub-elements, and the sub-element also has a label, a link and a description. I think the AI met our requirement. Let us see, we now want to build the frontend component that fits with it. You can already see here that it has written our React code the way you would probably write it by hand today. Depending on what the requirements are. We have Tell me in the style option in there. The whole thing has become a client component because I have listeners. So a bit of technical trickery, why you should do it that way in React – I would say that fits. And I am sending it off again to build the other components that we are waiting for right now. Who remembers what … Wolli, you can ask something else in the meantime. 

Wolfgang Seyppel 

Yes, exactly. Who still remembers what MCP stands for? Joachim. Great, now I can give you a bag. 

Benedikt Grimm 

Yes, spices and a Synergy cap, just for you. Thank goodness the internet works here too. 

Wolfgang Seyppel 

Exactly, that was our next worry, that we would only have Edge here somehow. 

Benedikt Grimm 

Maybe while it is still building here, it seems to be taking a little while. 

Wolfgang Seyppel 

I can tell another little story in the meantime. As Ben just said, we actually had a hackathon two weeks ago, because we have a project where we said we have to manage to save at least 30% of the effort. At some point we made an estimate and knew it was going quite high. That way we cannot compete in the market. So we did a hackathon, five days. It was actually like this: I think we started on Thursday, worked Thursday and Friday. On Saturday Clot Four came out. Bene, over the weekend those Teams messages and WhatsApp messages came in. Amazing, amazing. We have to do everything differently. He then hacked away over the weekend, and then on Monday, Tuesday and Wednesday, with the help of Clot 4, we took the thing apart and actually managed to reduce the effort by over 30%. And the nice thing about the whole thing is that we did not only look at the development side; our plan was ultimately to set up a complete manufacturing line, starting with requirements engineering, that is, going in and saying we have a certain requirements specification. We can feed that specification into an AI tool. And we tell the AI tool: “Translate that into user stories for us.” 

Wolfgang Seyppel 

We dump those user stories into our Jira. We use Jira. That gave us – and this was another really cool learning – we initially went off and said we now need an AI to transfer the whole thing into Jira. But sometimes it is simpler. That is the case here. Ordinary Confluence automation is enough. In Confluence you can create tables that match a schema like a Jira ticket and then say: bam, click, transfer all of that into Jira tickets. And what used to take hours of typing those user stories in one by one, you then did within a few minutes with an AI tool at the start – ChatGPT, Copilot, whatever you use – to get it into Jira. “Meeting minutes” we have covered too. We brought in a transcriber that supports us, records during a meeting, then summarizes the to-dos at the end, QR, which is AI-based, and so on, to make the whole chain efficient. So not just development, but everything we do. That has to be our goal, and I believe everyone else's too. In the meantime it has finished everything. 

Benedikt Grimm 

We have created a Storyblock on our example page. Here too you can see the call again. And here too I actively decided that this is exactly how I want it. That is the important part. We do not want the whole thing to run too much in one direction. Sometimes, while the responses are coming back, you can already see that it is going in a completely different direction than I wanted. Then I quickly hit “Escape”, interrupt the agent and say what I actually want, correct course and thereby save tokens and time. Time is the right keyword too, Wolli, but … We can now see here that our navigation example has been created in Storyblock as a story. Very cool, exactly what we wanted. Let us have a quick look. Okay, it even gave us a logo. I would not have expected that. 

Wolfgang Seyppel 

It is interesting that this is now the third or fourth test we are running, and it is always a bit different, but it works. So look at what came out of it. Exactly, we have … all that in a matter of seconds. 

Benedikt Grimm 

We have our navigation in Storybox. As you can see, we also have two issues. We would have to counter-steer there. But that does not matter. For now we accept it as it is, or we can also simply fix it in a moment. What we can see here now is that we have our navigation, we can maintain our logo. Apparently the logo then turns into text, and we have our navigation elements, and we can – quite easily, because it is Storyblock – I could now say, for example, that I want to move Solutions to first place. Then that is of course immediately reflected in the live editing. We will quickly check the mobile view again and then see how we can resolve the error. On mobile we have a burger menu, exactly what we wanted. And then a suitable hierarchical navigation, I would say. Roughly speaking, I could live with the bug that I cannot collapse it for now. But let us fix the issue with the logo not being correct together. And for that, let us have a quick look. 

Wolfgang Seyppel 

Should I tell another story in the meantime? 

Benedikt Grimm 

Yes, wait, let me first explain everything we are doing. First we clear our context, because there is nothing worse than the context window filling up halfway through. Essentially the AI's memory, how far it can summarize things. And we do not want that, because once it automatically starts reducing at some point, you no longer have any control over what actually gets summarized. In this case, we can simply write it in German for once. We see an error in the navigation component. The logo is a generic Storyblock logo instead of our maintained image. From the block data. Now I could send it off like that. But in reality it usually makes more sense if I say: “Give me three possible solutions. I will then pick one of them.” The reason is that sometimes there are different perspectives. There is the solution where I want to fix it pragmatically because it has to be fixed very quickly. I want to fix it sustainably. I want to fix it optimized with regard to performance. Those are all different ways of solving the whole thing. And I do not want the first solution that comes along, I want to actively decide for myself here as well: how do we actually want to solve it? 

Benedikt Grimm 

For that to work, I of course tell it that I want three possible solutions, and then I combine the best parts of them myself and decide what I actually want. Now you can tell another story, because it is off and running again for a bit. 

Wolfgang Seyppel 

We just asked the question about the chess world champion who was beaten. The other day I had the morning show on WDR5 on the radio. The older you get, the higher the WDR numbers you end up with. Eins Live, 20s, WDR2, three, four, five. I have arrived at five, and they told the story of where, from their point of view, AI began. And now a question for you: do you know where the German term “getürkt” comes from? “Getürkt”? “Getürkt”? You know it. Did I tell you yesterday already? No, I know it. Okay, you know it. I will tell it anyway. It is quite interesting. And so, sorry. Another bag? Another bag. There is one coming up for another question. I also have a trophy, by the way. That is still to be won as well. That is today's highlight. No, it happened in 1770: the Austrian court mechanic built a machine, a box, and hidden inside it was a man. And that hidden man played chess against opponents. And the opponents thought, in 1770 – you have to picture that. That cannot be, I cannot see anyone. He had built a system of mirrors. You could not tell who was in there and thought you were playing chess against a machine. 

Wolfgang Seyppel 

And this machine was dressed up as a Turk, and that is where the term “getürkt” comes from. And some people claim that was the first AI there ever was, in 1770, by Wolfgang von Kempelen. They are intelligent people, these Wolfgangs. 

Benedikt Grimm 

By now we have Wolfgang – the plural of Wolfgang, by the way, is Wolfgänge. 

Wolfgang Seyppel 

Wolfgänge, exactly. You see, you never stop learning. We did say there are learnings here. So, Wolfgänge, please. 

Benedikt Grimm 

Okay, we can see it wants to suggest different ways we could solve it. But strangely all of them seem odd to me. I think it is more of a refresh issue. Let us see. Strange. Otherwise we will live with the logo for now, but … 

Wolfgang Seyppel 

Yes, I would say so too. Shall we take a look at what else we want to put on the landing page? 

Benedikt Grimm 

Absolutely, let us have a look. 

Wolfgang Seyppel 

We have a landing page. What do we want? You have all been scanned already. So do not worry, we have your addresses, we can contact all of you. There is nothing you can do about it. Still, at the end you will have the option of using this landing page via a QR code. And what else do we need on this landing page? So please just give us input. What do we want to put in there? It has to somehow … You are supposed to leave your details there so that we can contact you? What fields do you want? A slider. A slider? What should be in the slider? We knew that question was coming. By the way, thank you for not saying video, because we would have had to say no to that. Let us do a slider with photos, shall we? That works. 

Benedikt Grimm 

I hope so. 

Wolfgang Seyppel 

What kind of photos? We have prepared something for that too. Okay, slider. 

Benedikt Grimm 

Something pointy as well. 

Wolfgang Seyppel 

A product. May I steer you a bit? We want to enter something. Something like email address, last name, first name. Phone number, first name, last name. Okay? Yes? 

Benedikt Grimm 

Yes, okay. Wait, I am just sending off the slider. 

Wolfgang Seyppel 

Let us stick with that. Slider and then phone number, first name. 

Benedikt Grimm 

Although, let us just try running two instances. And unless I did something terribly wrong, they will come … There we go, two of them ran at the same time. Let us take a look. You just had the slider. What else did you have just now? 

Wolfgang Seyppel 

First name, last name, phone number. 

Benedikt Grimm 

Let us just say a form section with first name, last name and phone number. Let us send that off too. Now it gets a bit tricky, because of course we now also have to keep track of who is asking for our attention. Here is the first one asking for our attention. And that is the slider section. Let us take it. From the data structure being created here, we can already see that it comes with autoplay – so the AI thought a bit further ahead than what we would typically include, but it is fine. Let us take it along. The second part is our form section. Here too, that actually looks quite good. Let us take it as it comes as well. And now let us see whether the whole thing comes together. What would be the next section that you would use on a typical landing page like this, on a marketing page like this that you may already be using today? What about a search? 

Wolfgang Seyppel 

A search? 

Benedikt Grimm 

We could add a search box to connect a search engine. In the next 30 minutes that will definitely be a challenge. Maybe we can revise the header in a moment and include the search box. Let me just grab the section. 

Wolfgang Seyppel 

Exactly, let us bring that up. 

Benedikt Grimm 

Let me just finish this part here and then we will take a look at it. 

Wolfgang Seyppel 

Who remembers which development environment Bene is using? No, that is the framework. It was back there, right? You really wanted this bag. I know that. 

Benedikt Grimm 

Right, let us have a look. 

Wolfgang Seyppel 

There you go. 

Benedikt Grimm 

I hope this is me realizing that it did not fall apart after all, but I wanted to be brave. We are being brave today. 

Wolfgang Seyppel 

You are brave. 

Benedikt Grimm 

Here we are also creating the example story for our form example. And? Well? There. Our slider section is well on its way too. And then we will probably need a few more sections in a moment to bring in some content, because at the end we want to generate all of today's learnings onto the page. 

Wolfgang Seyppel 

We did promise you in the title that we would give you a few prompt examples, that we would share a few learnings, and here is one we can already share that is really important: the prompt thing – you do not do that from scratch every time. So we too remember the prompts we have written. We remember how we approached things. We document it so that we can reuse it. That makes a lot of sense, if you do it not only in development but also in your private life, when you provide context, whether you open projects in ChatGPT, for example, structuring it a bit. So there really is work behind doing this properly and not just quickly typing something in and waiting for the result. A lot is shifting from “I code” to “I prompt”. 

Benedikt Grimm 

Exactly, we can see that our form section has arrived in the meantime as well. I would say it looks pretty good. Actually, I do not even know what … What happens? Thank you. What happens when you submit it? We did not define that at all. At the moment it is just the visual element. We would have to tackle that in the next step. For me that is enough at this point for now. Let me go into the slider demo. We have our slider. 

Wolfgang Seyppel 

How is that for you? 

Benedikt Grimm 

We should quickly check whether the images really work. Yes, okay. That is quite nice already. The slider works for us too, we can work with that. But in your real projects it is not always the case that you spontaneously decide, “Okay, which elements do I put on there now?” Typically you already have a set of elements for your landing pages, for your design system, that you have to use. And where does your … that is my system, typically. It lives in Figma, of course, and not in some prompt. And you want to get as close as possible to your Figma designs. And now I see that … Yes, I still have Figma open. Thank goodness. Many thanks, dear Koff. We had prepared a small Figma template of a section, showing how it typically looks. Figma is simply a design tool. There we usually talk about having components as well. Here we have our section. Inside it there is a subheading, a heading, supporting text, a feature item here, and inside that there are components again. Of course, those are an incredible number of design details that are naturally missing from a prompt like “I want a feature section with six elements”. 

Benedikt Grimm 

The spacings are not taken into account there, the font sizes and so on are not taken into account. But I do want that now, and I want exactly that. And to make that work, we make use of another MCP. We simply copy the link and, because I was hopefully smart, I prepared a little command for this in advance too. It is essentially exactly the same as what we did before, only that as a first step we now say: we read this Figma file, again via an MCP server, then we parse the information and then we create the component in Storyblock. In principle it is similar to the workflow that Storyblock itself just released, where I can now create components directly from Figma. 

Wolfgang Seyppel 

What is a question? What is stopping you from doing the entire page in Figma and generating it by prompt? 

Benedikt Grimm 

Doing the entire page in Figma and then by prompt … 

Wolfgang Seyppel 

Just taking it over the way you designed it. 

Benedikt Grimm 

The problem will be – and we have a masterclass on that tomorrow as well, about how we used it in the project – the problem is that even that, and we will see it in a moment, let me just send it off, let me take a look on the way. It is relatively imprecise, because even though all the tools keep promising it, that we get a one-to-one reproduction, it does not work yet. What does work is that we build the shell and then go into it step by step. And then it gets interesting, because you still save the time, since a lot of the manual steps you would otherwise do as boilerplate you simply do not have to do again. But it does not yet work in a way where you say, one to one, do it now, even if the tools sometimes promise that. And if you do it in several steps, then they say straight away: “Let us go for the top level and then the X components”, because we have those requirement details from earlier. That would work, I am convinced of it. Exactly, you would then have to prompt it accordingly. Here is a Figma design. Please take it apart now, start at the highest level and then work your way down into the detail. 

Benedikt Grimm 

And then in reality it will probably work. We do exactly that on the other project, essentially. But it does require your Figma designs to follow that systematic idea. Figma designs are not always structured the way they are here, for example. This is only an extract from the larger file, but here we have all the design tokens defined that carry across several screens. Then of course it works really well, because then you also want – let us say this header area here. I am almost certain this heading exists in at least five other places. And I do not want to rebuild that every single time either, I want it to reuse it there as well, so that my codebase does not get unnecessarily bloated. What is important for us in design is that we coordinate very closely with the developers so that we speak the same language. 

Wolfgang Seyppel 

We basically take a front-end-centric approach, let us say, and build our designs in exactly the same way, so that it scales the same way in implementation. 

Benedikt Grimm 

We can see now that the Figma thing is taking a bit longer, but that does not matter. Wolli, I am sure you had another question. But did that answer your question at all? Yes. Okay. Perfect. 

Wolfgang Seyppel 

I can tell you a bit more. I mentioned the transcriber earlier. We have various people from our company here. Over there is the wonderful Olga, she tried it out. Fireflies is the name of this transcriber. That was really interesting. You can invite it to meetings and then it listens in. So sometimes you even join the meeting yourself, are alone with Fireflies at first, or there are two of you, and you chat a bit beforehand. The thing records all of that and summarizes the tasks really excellently. So this whole “somebody has to take notes and send the meeting notes summary round at the end” can all happen automatically and is just one of those things. I found it absolutely amazing what is simply possible there. It also works to some extent with the transcriber in Teams. So you can turn that on too, transcript, and then throw the whole thing into ChatGPT and say: “Summarize this for us.” That would be another one. For us Fireflies gave slightly better results. You have to try things out with the tools, just like we did. All of a sudden Clot 4 comes out in development, does the same thing as before, but it simply keeps evolving from day to day. 

Benedikt Grimm 

The important thing you have to know about it – and it is also our learning from our hackathons – is that no tool out there is going to deliver it to you in perfection right away. What we often do is go from one tool into the other and combine them. For example, for quick prototyping we usually go and pull the current page of a project. So everything that is currently on the page in terms of information about the company itself. And then it was about a product, a prototype, let us say, for a tradesman service that wanted to digitalize damage assessment. So that you can picture it better: Koff went and simply put the whole thing into a prototype, went and copied the company information from the site, then thought: “Okay, who is going to use this in the end?” It is actually the person currently being sought in the job ad as an employee. So I will copy the job ad in as well, and then he combined all the information and had a prompt built in ChatGPT, I think it was, which he then threw into Windsurf or a coding tool like that, and out came a tool that already had “I can upload photos”, “I can have a contract prepared for me”, a cost calculation – whether that is accurate, who knows. 

Benedikt Grimm 

And all the way to signing on an iPad. That was incredibly detailed as a result, and that is a bit of the learning. You have to work iteratively and you have to keep combining the tools with each other and also stay up to date with what is new. 

Wolfgang Seyppel 

And how do you stay up to date? Can you tell us a bit about that? Where do you find all your news? 

Benedikt Grimm 

Mostly on x.com. So formerly Twitter, formerly Twitter. If you can filter out Elon Musk, there is a lot of important information in there. Other than that Hacker News, Reddit, or I think the magazines out there that you may be more familiar with, like T3N or Golem, Heise. There is already a lot of information there. Sometimes there is something nice on LinkedIn as well, but LinkedIn is usually about two weeks behind in terms of information value. And I think it is incredibly important to stay up to date and keep pace with the tools. Let us take a quick look, because it has finished running, to see whether our component – remember, this is what it looks like – has arrived in Storyblok the same way. Let us switch over here again. Let us have a quick look. Our feature section, our feature item is definitely there. Let us look at our example page. Bam, there it is. And I would say it at least looks roughly like our Figma design, right? 

Wolfgang Seyppel 

What do you say? Figma. 

Benedikt Grimm 

Looks like it. Reality. 

Wolfgang Seyppel 

Very cool. Do you want anything else? We can also do “free choice” now. We can do something else here. We can change the color, we can change the font. Do you have any wishes? I do have a question on the topic. How do you manage that when we have the different components? 

Benedikt Grimm 

Do you think that far ahead, that you define headline 1, 2, 3 that way, or do you already see so much drifting apart there? Really important question. Yes, I will get to the answer right away. To be fair, I still need an accordion, because I want to show you a few prompt templates later on. So let me quickly send an accordion off on its way. Consistency. We use React components. So we usually already have building blocks in the project. That is then the design system, and we want to reuse them. But for them to be reused, we of course have to somehow tell the AI: where are they? What options are there? What is our brand image, what do we want to achieve and keep consistent? And in this case we provide a rule for that too, essentially. In this case I have a Cloud file lying here. Every other tool has different file names for it, but there are always rule files like that. There is some project information in there. In this case that is, for example, the typical commands for the project, which frameworks I work with, so that the AI is simply primed a bit better with the information from our specific project. 

Benedikt Grimm 

And when I am in the components folder, I have a second Cloud file lying there, and there I go into a bit more detail about the design specifics I want. Our experience is that in Tailwind – that is simply a kind of design CSS framework you can work with – we can achieve really good results with it. If we specify: here are our folder structures, so that it can build the code correctly, and then also provide a few visual principles, something like: “Use our semantic color scale with 60% neutral, 30% complementary, 10% accent colors”, depending on how I want it. We usually also include our grid system, we note again that we are on an 8-point or 4-point grid. We even have one project where we explain the entire design system in a guide file. I think that one is 1,000 lines long or so. So it is pretty thorough. But that is how we manage to have even completely blank projects generated very consistently. And at first that is counterintuitive, because you have to write down so much information up front. That is also why our UX colleague, Koffie, is strong at it, because from a UX perspective you are used to writing down and articulating exactly what you want. 

Benedikt Grimm 

And if you manage to formulate it understandably, the result is so much better too. 

Wolfgang Seyppel 

Exactly, in the end the efficiency does not just come from us using some modern tools, but from reusing things instead of doing everything all over again. Our component library essentially grows from project to project and everyone benefits from it. That has to be an overall combination that you build up, and then at some point it starts to make sense. Gladly. This is all going super fast, but you think you get a basic setup. 

Benedikt Grimm 

Well, I did not have that much time beforehand. That is why I only did it yesterday morning at 6:00. So the Next.js setup takes about five minutes. It is one command to run. Getting Storyblock in, we tried by prompt in this case too, that was also five minutes, simply because the documentation is very, very good in this case. 

Wolfgang Seyppel 

Which is also one of the reasons why we picked Storyblock here, for example. So depending on which tools you use, that varies too. Some tools are easier. 

Benedikt Grimm 

Exactly, I could not take a FirstSpirit for this, for example. Exactly. 

Wolfgang Seyppel 

But in the end, I do not know whether you can put a number on it. It does get seriously much faster: if you previously needed several days to set up the development environment and this and that, it can now go really quickly. 

Benedikt Grimm 

Yes, and this is just one specific use case. We are building a landing page now and creating pages here that we have generated for us. But the whole thing also works for a great many other topics. There is another tool called Task Master. With it I can break a task down in even more detail and track the status. And that is where it gets really interesting, because then it goes into much, much more detail. Then I can go in again, counter-steer, and that is really the secret behind it. You always think AI makes things fast because I just fire something in and the result that comes out is great, but at least at the beginning I have to invest the time to build up enough context. And then it really does make things fast in the long run. And we are very lucky that Wolli allows us to do projects where the customers go along with it. 

Wolfgang Seyppel 

They all benefit from it. 

Benedikt Grimm 

And that makes it – it is really fun too. We have a project where we do the entire AI-driven development. Right now we are so fast. I think we are eight weeks ahead of schedule. I find that quite astonishing, and it is simply fun with the team too. And you also have the time to go into far more detail than you had before, because previously you were busy doing basic work over and over again that you can simply save yourself. 

Wolfgang Seyppel 

So similar to Chaumi as well. What they do, what defines an electric car manufacturer, is that as they get faster and faster at producing things, at some point they can keep features, quality and so on high. And that is a bit of what we want to show here. At some point we will get to a point where the market has stronger competition, a higher density of service providers, more competition in e-commerce and shop systems, and at some point we will need additional services. We will not just put up the shop, we will have to offer other things. And with budget restrictions that is really hard, and these tools and this approach simply enable us to invest more in things like that. We shift our budget into other things. I think we have to keep an eye on the clock a bit. Yes, I still have … You carry on, and you had another question. A question about centralization: how do you monetize by time? Or do you first … ? That is a really interesting question. First of all, there are of course different types of contract. It is different with every customer. Right now it is still very much by time. We do not yet know where it is heading, but we can imagine that at some point a change will come and that it will move more in the direction of value. 

Wolfgang Seyppel 

But it is hard to say what will happen, hard to say what the other service providers will do. You have to adapt a bit to the market conditions. Our wish, my wish, would be value – I think it is a really cool currency, but we will see what happens. 

Benedikt Grimm 

We just had another error here, which we have now quickly fixed, and then hopefully we will show you in a moment how we set up the whole page at the end, because we have now built a lot of components and at the end we also want to generate a page out of them and fill it with content. We have nine minutes left. 

Wolfgang Seyppel 

Could you ask us one final question? 

Benedikt Grimm 

Yes, let us look at our feature grid. Let me go back briefly and see whether our accordion works too. Perfect, that looks pretty good. You can also see here that it has now made the header roughly the same as with the features. And to bring the whole thing together, I of course brought along a second prompt. And I said: Create Content. And Create Content is again just a command I prepared that takes something in. And what I say is: first we fetch all the components that exist in our project from Storyblock, and that also makes it very interesting – those are essentially the existing Storyblok projects in terms of approach. I fetch all the components there are. I fetch all the assets in this case. I analyze the content I am about to feed in, and then I say: based on the components and my content, pick the matching elements and generate the page with them. And in our case, for the sake of speed, I have of course also written the learnings into the file in advance, so that we do not have to write it all out now, because I only have two fingers – and now I say: based on the learnings in learnings. 

Benedikt Grimm 

md, generate a page in Storyblock with the slug home. Right, and off we send it. 

Wolfgang Seyppel 

And in the meantime, the final question for this trophy and some more wonderful spices. What is the name of the tool that suddenly came out over the weekend, the one we talked about with the hackathon? Yes. Claude, that will do for now. You have already got something. You wanted the chutney. You can – just get in touch with me and we will sort that out. 

Benedikt Grimm 

Wolli's signature is mango chutney. 

Wolfgang Seyppel 

Mango chutney, exactly. 

Benedikt Grimm 

Do you have any other questions that go into the specifics, that have not been answered here yet, or that you were perhaps still hoping for or that stuck in your mind.. 

Wolfgang Seyppel 

And compete with others. So, you need to invest tokens to be better. But, Bene, do you know how many? 

Benedikt Grimm 

There is a tool that gives me the overview of my cloud usage. Okay. And as you can see, I use it quite extensively. And if I had paid it through the API cost, I would have paid 1. 300 euros or dollars since end of May. However, I'm on the max subscription and it only costs me 200 $ a month. I think that's quite cheap for the outcome that it gives us. 

Wolfgang Seyppel 

So, work out the business case. It is really simple. $200 in and several thousand saved. 

Benedikt Grimm 

Let us have a quick look. Here is our command that failed once. That shows us an interesting thing, because of course it sees that it is failing because of a particular error which Storyblock kindly returns to us in a clearly worded way, and it knows what it now has to correct. It is flickering a bit now because it has a few re-render problems here, but we should see in a moment that it is generating it again. It is now generating the contents of the page, and then we send those over to Storyblock and publish the page, and then hopefully we will be able to see it, the QR code, too. Now I am curious. So you are doing this here with Storyblock. But can I also generate templates directly in Shopware? 

Wolfgang Seyppel 

Exactly, Shopware too. Our hackathon was actually with Shopware. It works there too. We have also done it with other tools. So Shopware and Storyblok are what we have done it with the most, simply because those are tools we use frequently, but I am convinced that modern shop systems and modern CMS systems can do this. That is always important. So the better the documentation of the tools is, for example, because we can also – well, not there, that is the frontend – we can reference the documentation of the tool. At some point we look and say: “Shopware, read through the documentation of Shopware 6 XY.” And then the tool uses the documentation and builds based on the documentation. And things like that are what is really important. As I said, the better things are documented, the better it works. If a tool does not have that, then it gets more difficult. 

Benedikt Grimm 

We can see here that it has a few. I will definitely use it on our page. 

Wolfgang Seyppel 

But I think that is a good point to wrap up, isn't it? I think the result is really impressive. We built and prepared all of this here, you saw it, it was a few prompts, and the page was empty before. 

Benedikt Grimm 

Exactly, we put a few learnings on there as well. I will go back in a moment so that it works properly in one place or another, so that you can use it correctly too, because as you can see, content is missing here and I would have to have it generated again. But I also do not want to keep you from your break. What matters, though, and these are the key learnings: you have to keep taking things away with you, keep taking away new learnings, keep trying out new tools, simply because for the very first time a technology like this was not first tried out by companies or by the government across a great many use cases; this is actually the first time with a technology that end users had it much, much earlier and that it is only now spilling over into companies and then into government. And that is an incredibly good opportunity to build up your knowledge right now. Then the topic of maintaining a prompt library and sharing successful prompts with the team, because it is no use if one colleague does a huge amount in there and is really good at it and works it all out and stores it somewhere, and the other one does not hear about it at all and goes through the same steps and the same learnings all over again – there, too, you have to come together. 

Benedikt Grimm 

You can do that in Notion or in Confluence, in theory also via a shared Microsoft Notes or in Teams. And then it is important to pilot the right tooling. Why does that work? Let us be honest, the AI has done all the work now. I only steered it in a few places, but you do have to make the investment. Like you said, it's 200 dollars, that's expensive. It seems like it is It's expensive, but it isn't. It's actually cheap. It's actually cheap if you compare it to the output and the efficiency gains that you get. And that is the point, and your bosses have to understand that too, or you have to understand it yourselves. It is actually an investment that is absolutely worth making, because in the end it helps the team. The team can be more relaxed. It also takes some of the mental load off team members. Keyword: burnout prevention. Investing there is absolutely the right decision. I could not be happier that we have the opportunity to do it this way with us. Then the topic of context is king. The more thoroughly you formulate it and take the time – and that can be days that you invest – the more likely you are to reach your goal without running into a dead end and having to start all over again. 

Benedikt Grimm 

And then it is important to work iteratively and not to expect one shot fits all. That I will now reach the perfect end result with my one prompt, because that is not going to happen yet. Who knows, maybe next week. And there is one topic we have not talked about at all and that we have completely left out here: data protection and compliance. Not every company and every business can use these tools the way we are doing now. And not every one of our customers can use the tools either, because some of them do not want their IP, their intellectual property, sent to some AI that may live in the USA or wherever. There are various concerns and things you have to weigh up. And one topic that is becoming ever more relevant, keyword “sovereign cloud architecture”, is European AI systems. In this case that is not always something like Azure, but for example something like OVHcloud as the leader in Europe, who also offer powerful models. Sure, they are clearly behind Claude perhaps at the moment, but they are considerably cheaper and you have complete sovereignty and control over your data. 

Benedikt Grimm 

And that is also an important point we should keep in mind. 

Wolfgang Seyppel 

So, to close: we have hype. If your tools are better and think better than the team, do not replace the team, but help the team get better. Invest, let people learn, and then you can do things like this. Thank you all so much for being here. Thank you. 

Benedikt Grimm 

If you still have questions or anything, we will surely be standing outside in a moment.