Benedikt Grimm 

Schön, dass ihr alle da seid. 

Wolfgang Seyppel 

Guten Morgen zusammen. Wer von euch kennt Xaumi? Xaumi? Einige. An die, die nicht die Hand gehoben haben. Xaumi ist ein Mobilfunkhersteller, der mittlerweile auch in Elektroautos setzt. Das Wahnsinige an Xaumi ist, dass die dieses Jahr mit 75. 000 vorbestellten Elektroautos an Start gingen und planten, bis zu 100. 000 zu produzieren. Das Krasse ist an dem ganzen Ding, das ist eine vollautomatisierte Roboteranlage. Das ist ein Video von Chaumie und die planen alle 76 Sekunden, also das ist, was die Anlage kann, ein Auto auszuliefern. Das sind 47 Autos die Stunde die diese Produktionsanlage raushauen kann. Das Ganze machen 700 Roboter und 181 mobile Roboter-Einhalten. Und es gibt einen ganz besonderen innovativen Schritt, den die eingegangen sind, und zwar haben sie es geschafft, Schweißnähter am Unterboden zu reduzieren. Und zwar 840 Schweißnähter konnten sie einsparen. Dadurch sparen sie 45% an Produktionszeit und schaffen eine erhöfte Qualität, weil diese ganzen Schweißnähten natürlich jeweils eine Säugbruchstelle darstellen können. Was ist das Tolle daran? Die haben einmal eine vollautomatisierte Fertigungslinie. Sie arbeiten mit Modulen und Komponenten, die sie standardisiert zusammensetzen, KI-gesteuerte Qualitätssicherung und vorausschauende Logistikplanung. Jetzt ist natürlich die Frage: Was hat denn so ein Autohersteller mit uns zu tun? 

Wolfgang Seyppel 

Ist auch nicht unser großes Vorbild, dieser Autohersteller. 

Benedikt Grimm 

46 Projekte die Stunde. 

Wolfgang Seyppel 

46 Projekte die Stunde. Genau, das ist das, was wir planen, das, was wir euch jetzt heute zeigen. Nein, letztendlich, worum geht es? Es geht darum, dass man in höherer Qualität schneller zu einem Ergebnis kommt. Wir sind da ein Dienstleister. Das ist das, was wir schaffen müssen. Wir müssen es schaffen bei dem Wettbewerbdruck, den wir am Markt haben und auch alle produzierenden Gewerbe müssen das schaffen, schneller, mit höherer Qualität zum Ergebnis zu kommen. Und wie bei Chaumi, wollen wir das mit Hilfe von KI machen, datenbasiert, voll effizient, nicht mehr linear, sondern intelligent, iterativ und mit modernen Tools und immer wieder vorausschauend arbeiten. Wer zeigt euch das heute? Einmal der Bene, das ist der Benedikt Grimm. Bene ist bei uns, ich sage gleich noch was zur Firma, ist Head of Front-end. Bene ist privat auch ein absoluter Nerd, den kriegt man tatsächlich gar nicht vom Rechner weg. Also das, was er euch alles zeigt, das schaut er sich am Wochenende an, das schaut er sich morgens an, abends an. Das ist Wahnsinn. Ich kriege manchmal Teams-Nachrichten am Sonntag: „Boah, Wolli, ich habe hier das und das rausgefunden. Voll krass. Guck dir das mal an. Echt Wahnsinn. Macht totalen Spaß mit Bene. 

Wolfgang Seyppel 

Privat Bene Ist Hunde-und Katzenliebhaber, hat viele davon zu Hause, großes schönes Haus und ist ein total toller Typ. 

Benedikt Grimm 

Ich merke schon, ich komme ja richtig gut weg als Tier. Tier-messi mit Nerd-Syndrom. Genau. Danke, Wolli. Der Wolley leitet bei uns die Delivery und ich darf mit dem Wolley zusammenarbeiten und der gibt mir überhaupt erst den Raum, dass wir überhaupt mal auch in Projekten ganz viele Dinge ausprobieren können. Wolley ist mein Grill-und Chutney-Master, wenn wir bei dir zu Besuch sind, der Oberknaller. So komme ich gerne immer vorbei. 

Wolfgang Seyppel 

Vielleicht noch ganz kurz was zur Synergy. Wir haben jetzt keine Slides mitgebracht. Das wäre natürlich Todesurteil gewesen bei dem Titel. Synergy, das ist die Firma, für die wir arbeiten. Synergy ist eine Firma, eine Digitalagentur letztendlich, mit einem sehr starken Tech-Fokus. Wir arbeiten an Webseiten, an E-Commerce, wir bauen CMS-Systeme, letztendlich Digital Experience-Plattform., kommen sehr stark aus dem Commerce-Feld, erweitern uns aber in, ich sage mal, face to the customer. Das ist uns einfach wichtig. Ux, customer first, customer centricity. Wir sind sehr bald die 150 Mitarbeitende in Köln, Dortmund und Berlin und haben, wie gesagt, Kompetenz in der Webentwicklung, Managed Service, Data Analytics, all das, was dazugehört, tolle Nutzerelebnisse zu schaffen. Wir gehören zu einer Group, zur Time to Act Group. Die Time to Act Group ist nicht nur einfach unsere Mutter, sondern wir sind eng, sehr eng verbandelt mit der Time-to-Act Group. Wir haben einige Geschwisterunternehmen, die im kompletten IT-Sektor unterwegs sind. Ich weiß, unser Geschäftsführer hat früher immer gesagt, wir machen alles außer SAP, bis er eine SAP-Firma erworben hat und jetzt machen wir auch SAP, also Google Cloud, Microsoft Dynamics. Wir haben mit der catWorx den größten Adlation-Dienstleister Europas am Start, 1. 500 Mitarbeitende wachsend. 

Wolfgang Seyppel 

Das in der Nutschell. Wenn ihr mehr Informationen wollt, wir haben hier so schöne Flyer ausgelegt zu unserer hauseigenen Messe auch. Kontaktiert uns gerne, wenn ihr da Interesse habt. Super spannende Themen. Wird ein tolles Event. Meldet euch einfach bei uns. 

Benedikt Grimm 

Okay, perfekt. Was haben wir heute überhaupt mit euch vor? So, ist Sales vielleicht Ende. Jetzt kommen wir zu unserem Thema und wir haben das im Vorfeld ein paar Mal geprobt. Mal hat es funktioniert, mal hat es nicht funktioniert. Wir hoffen, dass in der Schleife jetzt wieder die funktionierende Welle dran ist. 

Wolfgang Seyppel 

Also no bullshit einfach. Mal schauen, was passiert. 

Benedikt Grimm 

Mal schauen, was bei rumkommt. Wir haben uns vorgenommen, mit euch zusammen heute mit Storyblock eine Seite zu bauen, eine Landing Page, sagen wir mal. Storyblock, für die, die es nicht kennen, ist ein Headless CMS, bietet uns dadurch, dass es alle Funktionen über Schnittstelle anbietet, die perfekte Basis im Prinzip, auch mit KI dagegen zu gehen. Und wie das funktioniert, das gucken wir uns jetzt einfach mal zusammen an und überlegen uns gemeinsam, was wir überhaupt da drauf haben wollen. 

Wolfgang Seyppel 

Und ganz kurz zwei Fragen noch, damit ich vielleicht ab und zu moderativ mal eingreifen kann. Interessiert mich natürlich, wie technikaffin seid ihr? Also deswegen einfach mal zwei Fragen. Wer von euch kennt React? Jawohl. Das ist schon mal gut. Wer von euch kennt WindSurf? Alles klar, dann wissen wir, was zu tun ist. Ihr kriegt ein paar Erklärungen zwischendrein. Windsurf ist das Entwicklungstool, was der Bene gleich verwenden wird. React, nur kurz zur Erklärung, ist ein Content Framework. Damit werden ganz, ganz schicke, moderne Webseiten gebaut im Front-End. 

Benedikt Grimm 

Exakt. Okay, wo wollen wir anfangen? Zunächst einmal, vielleicht springe ich mal ganz kurz in den Storyblock rein und zeige euch, wir haben im Moment einen leeren Storyblock Workspace. So viel passiert hier gar nicht drin. Wir müssen in Storyblock erst mal die Content-Modelle haben. Das ist das, was eure Redakteure, wenn sie das Ganze bedienen wollen, überhaupt mal brauchen, die Pflegemasken bereit zu haben. Aktuell ist alles leer. Wir wollen das jetzt gemeinsam füllen und ich springe von da aus auch einmal rüber nach Windsurf. Nicht wundern, ich habe natürlich, wie jeder gute Koch in einer Live-Sendung, einen Ein kleines Rezept mit vorgebracht und ich habe mal was mitgenommen. Ist in dem Fall jetzt einfach ein Blanko-Next-Jetzt-Projekt, wo ich mal Storyblock, so wie es in der Doku steht, angebunden habe. Hat aber ansonsten, wenn wir mal an unsere Komponenten gucken, wirklich noch nichts drin. 

Wolfgang Seyppel 

Wir haben es am Freitag übrigens versucht, das mal vorab ein bisschen laufen zu lassen. Wir haben uns vorgenommen, wir wollten das eigentlich ohne vorgeschriebene Prompts machen. Grandios gescheitert, klappt einfach nicht. Gute Prompts sind das A und O und deswegen ist das auch komplett richtig, dass der Ben dann das vorbereitet hat. 

Benedikt Grimm 

Korrekt. Du hast eben gesagt, ich benutze WindSurf. Stimmt nicht ganz. Ich benutze WindSurf als IDE, aber wir benutzen heute Cloud Code, weil das von der Art und Weise einfach so angenehm ist zu beobachten, Wir wissen, wie es funktioniert. Es funktioniert als echt spitze. Wir haben vor kurzem einen Hackathon gemacht. Da haben wir mittendrin festgestellt, oh, Cloud IV ist draußen. Ja, okay, dann probieren wir es einfach mit einem anderen Tool noch mal. Hat mega funktioniert und deswegen auch für heute mitgebracht. Windsurf ansonsten ist so was wie CURSERV, falls ihr das kennt. Visual Studio Code mit AgentX Coding mit integriert. Und dann kann ich die Modelle wählen und aussuchen, wer soll mir was coden. Keine Sorge, so viel Code seitig gucken wir aber gar nicht rein heute. Es sei denn, es interessiert euch und ihr stellt Fragen dazu. Was wir machen wollen? Wir wollen ja als erstes überlegen, was brauchen wir auf so einer typischen Landing Page? Und dafür habe ich uns ein paar Prompt Templates gemacht. In Cloud Code sind das Slash Commands. Und die Frage wäre jetzt an euch, was brauchen wir denn vielleicht zuerst? Vielleicht mache ich es auch einmal vor und dann steigt ihr danach ein und sagt, was ihr als erstes haben wollt. 

Benedikt Grimm 

Ich sage jetzt mal einfach, so eine typische Landing Page braucht irgendeine Art von Navigation. Von daher, ich könnte es jetzt auf Deutsch tippen, ich kann es auf Englisch tippen. Deutsch tatsächlich, witzigerweise, viel präziser als die englische Sprache. Deswegen, wenn ihr promptet, auch wenn es immer so verleitet, in Englisch zu schreiben und ich das im Prinzip auch immer irgendwie mache, auf Deutsch funktioniert es in der Realität tatsächlich viel besser, weil die Sprache viel klarer ist. Wir machen es jetzt trotzdem auf Englisch, weil ich einfach so ein Gewohnheitstier bin. 

Wolfgang Seyppel 

Menschen und Technik. 

Benedikt Grimm 

Und zwar bauen wir eine Navigationskomponente. Mobile wollen wir ein Burger-Menü haben. Wir wollen mindestens zwei Level haben an Navigation-Items. Und während wir das jetzt losschicken. Ich spreche ich mal rüber und erkläre, was das Prompt Template macht. Es sei denn, es gibt schon eine Frage dazu. 

Wolfgang Seyppel 

Genau, wenn ihr Fragen habt heute, einfach rein. Wir werden jetzt im Übrigen gleich … Also Bene, macht das mal vor. Dann frage ich euch auch, was wollt ihr auf dieser Landing Page haben? Also gleich Wir müssen ein bisschen mitmachen, gerne. Und am Ende können wir das Ding auch noch mal gemeinsam zerschießen oder noch schöner machen. Also wir fangen klein an und arbeiten uns dann ins Maximum rein. 

Benedikt Grimm 

Genau, das Wichtige ist, zu verstehen, was machen wir jetzt gerade. Also erst mal, ich lasse kurz verstehen, wir brauchen die modernen Coding Tools, die machen euch alle eine To-Doliste. Also die brechen den Task runter in kleinere Schritte. In dem Fall haben wir sechs Schritte, in die wir das Ganze aufteilen und das entspricht auch dem, wie wir es in der Realität ja selber machen würden. Wir würden als erstes uns das Content-Modell überlegen und das im Storyblock anlegen. Das kann ich von Hand machen, das kann ich mit verschiedenen Tools machen. In dem Fall wollen wir das aber, dass die KI das auf Basis dessen generiert, was wir als Requirement reingeben. Dann brauchen wir natürlich das frontend Gegenstück dazu, müssen das Ganze einmal verknüpfen und am Ende wollen wir wahrscheinlich in den meisten Fällen noch irgendwie eine Preview-Seite, zu checken, hat das überhaupt alles funktioniert, wie wir uns das vorstellen. Und damit Wenn ich das relativ abstrakt hier reinkippen konnte, brauche ich so was wie Slash Command, ich sage mal Prompt Templates, die so ein bisschen was vorwegnehmen, damit ich das nicht jedes Mal von Hand tippen muss, weil sind wir ehrlich, wir sind alle manchmal Habe ich mal faul und wollen nicht immer alles von Hand aus tippen in Perfektion. 

Benedikt Grimm 

Deswegen habe ich eine kleine Markdown-Datei, das ist eine Textdatei, die das Ganze noch mal im Prinzip aufschlüsselt, was denn möglich sein soll. Dass ich erwähne, wir brauchen Komponentennamen, wir brauchen unsere Felder, die verfügbaren Feldtypen im Storyblock, also das, was die Redakteure überhaupt benutzen können, die verschiedenen Arten, muss ich zumindest einmal auflisten, weil sonst verlasse ich mich nur auf das vortrainierte Wissen und das ist nicht immer der reale Case, der dann auch in der Realität funktioniert. Und dann gibt es ja ganz konkret verschiedene Schritte, die wir vornehmen müssen. Und je spezifischer ich diese Schritte natürlich schon mit gebe, desto besser funktioniert das. Deswegen habe ich auch in dem Fall einfach mal schon mit angegeben, wo denn überhaupt meine Logiken liegen, dass ich einen Graph-Status haben will, weil ich mache es mit dem Development-Space und man darf nur dreimal publishen am Tag. Dann wird das funktioniert. Und wir haben Storyblock MCP uns extra für heute hier einmal mitgenommen. Mcp habt ihr mit Sicherheit mittlerweile schon sehr, sehr oft gehört. Vielleicht mal kurz so eine Einschätzung: Wer kennt alles Was ist der Begriff „MCP mittlerweile? Okay, doch weniger als ich gedacht hätte. „mcp Model Context Protocol ist von Anthropic, ist ein Protokoll, ein Standard im Prinzip. 

Benedikt Grimm 

Den haben die schon im November rausgebracht und das könnt ihr euch vorstellen, wie, ich glaube den USB-C-Stecker für KI-Tools, so wird es oft verglichen. Ihr habt eure KI, ChatGPT, Cloud, was auch immer. Ihr könnt mit denen interagieren. Die Tools im Coding können ja zum Beispiel Dateien lesen, die können Dateien schreiben, können vielleicht eine Info aus dem Netz abrufen und wir wollen aber jetzt beispielsweise dem an die Hand geben: „Hey, du sollst auch mit Storyblock kommunizieren. Du sollst in Storyblock meinen Inhalt anlegen. Du sollst in Storyblock meine Komplente anlegen. Du sollst mir meine Produkte aus dem E-Commerce-System holen. Genau für solche Cases kann man MCPs bereitstellen. Das Witzige daran ist, MCPs sind gar nicht so kompliziert zu bauen. Selbst das MCP, was wir jetzt heute benutzen, mit Storyblock zu interagieren, habe ich in einer halben Stunde irgendwie gestern Morgen kurz noch schnell gebaut. Also mega easy, weil es auch im Prinzip einfach nur das kapselt. Ich habe diese Schnittstelle und vorher frage ich in einem bestimmten Schema ab, was erwartet die denn überhaupt und verbinde das mit ein bisschen Kontext, damit er weiß, was er wie benutzen soll. Und dadurch sehen wir jetzt gerade hier unten auch, wenn ich irgendwo zu schnell bin, bitte unterbrecht mich, sehen wir hier unten, unser Tool möchte jetzt gerade ausgeführt werden. 

Benedikt Grimm 

Und zwar wollen wir eine Komponente erstellen in Storyblock. Sieht jetzt sehr technisch aus. Da gibt es eine Navigation, die hat ein bestimmtes Schema. Gucken wir uns gleich mal in der Oberfläche an. Wir sagen jetzt einfach mal, uns bewusst, dass wir das genauso haben wollen, weil wir uns das durchgelesen haben. Wenn wir jetzt zweite Optionen sagen, wir akzeptieren alles, was die KI uns gibt, dann sind wir eher in so einem Vipe Coding-Kontext. Vipe Coding habt ihr bestimmt Vielleicht auch schon mal gehört oder vielleicht auch nicht. 

Wolfgang Seyppel 

Er hat das gehört schon mal? 

Benedikt Grimm 

Ein Teil. Vipe Coding ist so ein Begriff, den hat der Karpati, das ist so ein Ex-Tesla-Open-AI-Mitarbeiter, auf Twitter, auf X, geprägt. Der hat damals gesagt, er wist sich immer mehr dabei, wie er gar nicht mehr auf den Code guckt und einfach nur noch auf dem Vipe surft, wenn er entwickelt und sein Tool haben will. Das wäre dann, ich lasse die KI einfach laufen und schaue mal, was rauskommt. Wir wollen aber viel bewusster daran gehen, denn das ist auch das, was in der Realität funktioniert. Wenn ich jetzt den Koffie meinen Kollegen durchschicke und der aus dem UX-Bereich kommt und vielleicht irgendwie mal so einen schnellen Prototyp machen will, dann ist das genau das Richtige. Dann will der auch keinen Code sehen, aber Aber wenn wir in echten Projekten arbeiten, wollen wir ja durchaus wissen, was da am Ende rauskommt, damit wir das auch steuern können. In dem Fall bietet sich also an, dass ich hier jedes Mal das von Hand gegensteuern kann und kontrollieren kann. Wir schicken das jetzt mal auf die Reise. Wir kriegen Wir haben als Antwort auch einen Success zurück. Wir sehen hier, eine zweite Komponente kommt gerade uns entgegengeflogen. Das ist das NAV-Item. 

Benedikt Grimm 

Klingt auch erst mal gut. Nehmen wir mal genauso mit. 

Wolfgang Seyppel 

Und in der Zeit kann ich euch noch eine Frage stellen: Wer weiß denn, bei welchem Spiel KI das erste Mal einen Weltmeister besiegt hat? 

Benedikt Grimm 

Schatz. 

Wolfgang Seyppel 

Matthias, herzlichen Glückwunsch. Du hast ja ein Goodie Bad gewonnen. Dabei eine Time to act Cap, Dekleck, viele schöne Sachen, ein paar Gewürze, nur für dich. Und es folgen noch ein paar Fragen. Ihr habt das gesehen. 

Benedikt Grimm 

Genau, während ihr noch die React-Komponente baut, kann man mal kurz in den Storyblock reinspringen und werden jetzt hoffentlich eigentlich. Sehen, neben unserer Page gibt es jetzt plötzlich die Navigation und unsere Items. Gucken wir mal da rein. Sehen wir, es gibt ein Logo, es gibt einen Call-to-Action-Button und ein Element von Navigationselementen. Das klingt für mich erst mal passend. Es gibt ein Navigationselement, das hat ein Label, einen Link und weitere Unterelemente und das Unterelement hat auch ein Label, einen Link und eine Beschreibung. Ich glaube, die KI hat unsere Anforderung erfüllt. Schauen wir mal, wir wollen jetzt die Frontend-Komponente bauen, die dazwischen passt. Sie sehen dann hier auch schon, dass es auch unseren React-Code so geschrieben hat, wie man es jetzt von Hand wahrscheinlich wenn wir nicht schreiben würden. Je nachdem, wie die Anforderungen sind. Wir haben Tell me in der Style-Option mit drin. Das Ganze ist eine Kleinkomponente geworden, weil ich Listener habe. Also ein bisschen Technik, Schnick-Schnack, warum man das in einem React so machen sollte, sage ich, das passt. Und ich schicke ihn noch mal los, für die anderen Komponenten zu bauen, auf die wir jetzt gerade warten. Wer weiß noch, wofür … Holli, du kannst in der Zeit noch mal was fragen. 

Wolfgang Seyppel 

Ja, genau. Wer weiß noch, wofür MCP steht? Joachim. Mega, dass ich dir so eine Tasche geben kann. 

Benedikt Grimm 

Ja, Gewürze und eine Synergy-Copy, nur für dich. Gott sei Dank funktioniert das Internet auch hier. 

Wolfgang Seyppel 

Genau, das war unsere nächste Befürchtung, dass wir hier irgendwie nur Edge haben. 

Benedikt Grimm 

Vielleicht während er hier immer noch baut, das dauert scheinbar ein bisschen. 

Wolfgang Seyppel 

Ich kann noch eine kleine andere Geschichte erzählen währenddessen. Wir haben, der Ben hat es eben gesagt, wir hatten einen Hackathon bei uns tatsächlich vor zwei Wochen, weil wir ein Projekt haben, wo wir gesagt haben, da müssen wir es schaffen, mindestens 30% der Aufwände zu sparen. Wir haben irgendwann mal eine Schätzung gemacht, wussten, das geht schon recht in den hohen Bereich. So können wir nicht am Wettbewerb teilnehmen. Haben einen Hackathon gemacht, fünf Tage. Es war tatsächlich so, wir haben, glaube ich, Donnerstag angefangen, Donnerstag, Freitag gearbeitet. Samstag kam Clot vier raus. Bene, am Wochenende kamen diese Teams-Nachrichten, WhatsApp-Nachrichten. Wahnsinn, Wahnsinn. Wir müssen alles anders machen. Hat dann übers Wochenende losgehackt und dann Montag, Dienstag, Mittwoch haben wir mit Hilfe von Clot 4 das Ding auseinandergenommen und haben es tatsächlich geschafft, über 30% der Aufwände zu reduzieren. Und das Ganze, das Schöne ist daran, wir haben uns das nicht nur auf die Entwicklungsseite angeguckt, sondern was unser Vorhaben war, letztendlich eine komplette Manufaktur zu starten, also angefangen beim Requirements Engineering, also hinzugehen zu sagen, wir haben dann ein bestimmtes Lastenheft. Das Lastenheft können wir in ein KI-Tool geben. Das KI-Tool, dem sagen wir: „Übersetz uns das in User-Stories. 

Wolfgang Seyppel 

Diese User-Stories hauen wir in unser Jira rein. Wir verwenden Jira. Da haben wir dann erst mal, das war auch noch ein ganz cooles Learning, wir sind erst mal losgegangen und haben gesagt, wir brauchen jetzt eine KI, das Ganze in Jira zu überführen. Manchmal ist es aber einfacher. Das ist nämlich in dem Fall so. Da reicht schon die normale Confluence-Automatisierung. Man kann nämlich in Confluence Tabellen anlegen, die einem Schema wie an einem Jira-Ticket entsprechen und dann sagen: Zack, klick, überführe mir das alles in Jira-Tickets. Und da hat man das, was man früher stundenlang einzeln diese User-Stories reingehackt, das hat man dann innerhalb von wenigen Minuten gemacht mit am Anfang AI-Tool, ChatGPT, Copilot, was auch immer man verwendet, es dann in Jira zu packen. „meeting-protokolle haben wir. Wir haben einen Transkripter mit reingebracht, der uns letztendlich unterstützt, also aufzeichnet während eines Meetings, dann am Ende die To-Dos zusammenfasst, QR, die KI-basiert ist und so, die ganze Kette effizient dazu hinzubekommen. Also nicht nur die Entwicklung, sondern alles, was wir haben. Das muss unser Ziel sein bei uns und ich glaube auch bei allen anderen, Es hat zwischendurch jetzt alles fertig gemacht. 

Benedikt Grimm 

Wir haben auf unsere Beispielseite einen Storyblock angelegt. Auch hier seht ihr wieder den Call. Auch hier habe ich wieder aktiv entschieden, dass ich das genauso haben möchte. Das ist das Wichtige daran. Wir wollen nicht, dass das zu sehr eine in die gleiche Richtung läuft. Manchmal sieht man auch schon, während da Responss zurückkommen, das geht eigentlich gerade in eine ganz andere Richtung, als ich das wollte. Dann drücke ich kurz „Escape, unterbreche den Agent und sage, was ich eigentlich wirklich haben möchte und korrigiere gegen und spare damit Tokens und Zeit ein. Zeit ist auch das richtige Stichwort, Wolle, aber … Wir sehen jetzt hier, unser Navigationsexample ist in Storyblock angelegt worden als Story. Sehr cool, genau das, was wir haben wollten. Schauen wir mal eben. Okay, Er hat uns sogar ein Logo gegeben. Hätte ich jetzt gar nicht mit gerechnet. 

Wolfgang Seyppel 

Es ist interessant, dass jetzt der dritte oder vierte Test, den wir gerade machen, immer ist es ein bisschen anders, aber es funktioniert. Also guckt, was da rausgekommen ist. Genau, wir haben … Das in wenigen Sekunden letztendlich. 

Benedikt Grimm 

Wir haben unsere Navigation in Storybox. Wir sehen ja auch, wir haben zwei Issues. Das müssten wir noch mal gegensteuern. Macht aber nichts. Für jetzt akzeptieren wir das, wie es ist oder wir können es auch einfach mal korrigieren gleich. Wir sehen jetzt hier, wir haben unsere Navigation, wir können unser Logo einpflegen. Scheinbar wird das Logo aber dann zu einem Text und haben unsere Navigationselemente und wir können die Ganz einfach, weil es Storyblock ist, könnte ich jetzt zum Beispiel sagen, ich will Solutions an den ersten Platz schieben. Dann reflektiert sich das natürlich im Live-Editing direkt wieder. Wir checken noch mal kurz die Mobile-View und gucken dann, wie wir den Fehler kurz aufgelöst kriegen. Mobile haben wir ein Burger-Menü, genau das, was wir wollten. Und dann eine passende hierarchische Navigation, würde ich mal behaupten. Grob mit dem Fehler, dass ich das nicht zuklappen kann, würde ich jetzt erst mal leben. Wir beheben aber einmal gemeinsam das Thema immer, dass das Logo nicht korrekt ist. Und dafür, mal kurz gucken. 

Wolfgang Seyppel 

Soll ich noch eine Geschichte erzählen zwischendurch? 

Benedikt Grimm 

Ja, warte, ich erkläre erst, was wir alles machen. Wir lernen erst mal unseren Kontext, weil es gibt Es gibt nichts Schlimmeres, als wenn mittendrin das Kontextfenster vollläuft. Also im Prinzip das Gedächtnis der KI, inwieweit sie Dinge zusammenfassen kann. Und das wollen wir nicht, weil wenn das automatisiert, sich irgendwann reduziert, dann hat man keine Kontrolle mehr darüber, was sich denn überhaupt zusammengefasst wird. In dem Fall, wir können es jetzt einfach mal auf Deutsch schreiben. Wir sehen einen Fehler in der Navigation-Komponente. Das Logo ist ein generisches Story-Block-Logo anstelle unseres gepflegten Bildes. Aus den Blockdaten. Jetzt könnte ich das so auf die Reise schicken. Meistens macht es aber in der Realität mehr Sinn, wenn ich sage: „Gib mir drei Lösungswege. Ich werde dann einen davon auswählen. Hat den Hintergrund, dass manchmal gibt es ja verschiedene Perspektiven. Es gibt die Lösungsweg, ich will es pragmatisch lösen, weil es jetzt ganz schnell gelöst werden muss. Ich möchte es nachhaltig lösen. Ich möchte es mit Hinsicht auf Performance noch mal optimiert lösen. Das sind ja alles verschiedene Arten und Weisen, wie man das Ganze lösen kann. Und ich möchte nicht die erstbeste Lösung haben, sondern ich möchte auch hier wieder aktiv entscheiden selber, wie wollen wir es denn überhaupt lösen? 

Benedikt Grimm 

Damit das funktioniert, gebe ich dem natürlich mit, dass ich drei Blödeswege haben will und dann kombiniere ich selber die besten Parts daraus und was ich überhaupt haben möchte. Jetzt kannst du noch mal erzählen, weil jetzt rennt er noch ein bisschen los. 

Wolfgang Seyppel 

Wir haben eben die Frage gestellt mit dem Schachweltmeister, der besiegt wurde. Ich hatte letztens im Radioschirm am Morgen WDR5 im Radio. Je älter man wird, desto höher sind die WDR-Zahlen, die hinten rankommen. Eins live, 20er, WDR2, drei, vier, fünf. Ich bin bei fünf angelangt und da haben die die Geschichte erzählt, wo ist aus ihrer Sicht KI entstanden. Und jetzt die Frage an euch: Wisst ihr, wo der Begriff „getürkt herkommt? „getürkt? „getürkt? Du weißt das. Habe ich es dir gestern schon erzählt? Nein, ich weiß es. Okay, du weißt es. Ich erzähle es trotzdem. Es ist ganz interessant. Und zwar, sorry. Noch eine Tüte? Noch eine Tüte. Die gibt es gleich noch für eine andere Frage. Ich habe auch noch einen Pokal übrigens. Den gibt es auch noch zu gewinnen. Das ist das Highlight heute. Nein, 17 1770 ist das entstanden, und zwar der österreichische Hofmechaniker hat eine Maschine gebaut, einen Kasten, und dort drinnen war versteckt ein Mann. Und dieser Mann hat versteckt Schacht gespielt gegen Gegner. Und die Gegner dachten, 1770 Das müsst ihr euch vorstellen. Das kann nicht sein, da sehe ich keiner. Er hat so ein Spiegelsystem gebaut. Man konnte nicht erkennen, wer der Enter ist und dachte, er spielt gegen eine Maschine Schach. 

Wolfgang Seyppel 

Und diese Maschine war als Türke verkleidet und daher kommt der Begriff „getürkt. Und manche Zungen behaupten, das war die erste KI, die es gab, 1770, von Wolfgang, von Kempelen. Das sind intelligente Menschen, diese Wolfgänge. 

Benedikt Grimm 

Wir haben mittlerweile Wolfgang Die Mehrzahl von Wolfgang ist übrigens Wolfgänge. 

Wolfgang Seyppel 

Wolfgänge, genau. Siehst du, man lernt nie aus. Wir haben ja gesagt, es gibt Learnings hier. Also Wolfgänge, bitte. 

Benedikt Grimm 

Okay, wir sehen, er will hier verschiedene Wege vorschlagen, wie wir es lösen können. Mir kommen aber alle seltsamerweise komisch vor. Ich glaube, es ist eher ein Refresh-Issue. Schauen wir mal. Selbstsam. Ansonsten leben wir für jetzt mit dem Logo, aber … 

Wolfgang Seyppel 

Ja, würde ich auch sagen. Sollen wir mal gucken, was wir sonst noch auf der Landing Page platzieren wollen? 

Benedikt Grimm 

Jawohl, lasst uns das gerne gucken. 

Wolfgang Seyppel 

Wir haben eine Landing Page. Was wollen wir? Ihr wurdet schon alle gescannt. Also keine Sorge, wir haben eure Adressen, wir können euch alle kontaktieren. Ihr könnt nichts dagegen machen. Trotzdem habt ihr die Möglichkeit am Ende über QR-Code, diese Landing Page zu nutzen. Und was brauchen wir auf dieser Landing Page noch? Also bitte gibt uns einfach Input. Was wollen wir da rein machen? Es muss ja irgendwie … Ihr sollt euch da hinterlegen, damit wir euch kontaktieren können? Was für Felder wollt ihr haben? Ein Slider. Ein Slider? Was soll in dem Slider denn drin sein? Wir wussten, dass diese Frage kommt. Übrigens, danke, dass du nicht mit Video gesagt hast, weil das hätten wir von neinen müssen. Wir machen einen Slider mit Fotos, oder? Das geht doch. 

Benedikt Grimm 

Ich hoffe. 

Wolfgang Seyppel 

Was für Fotos? Da haben wir auch was vorbereitet. Okay, Slider. 

Benedikt Grimm 

Auch irgendwas spitziges. 

Wolfgang Seyppel 

Ein Produkt. Darf ich euch ein bisschen lenken? Wir wollen irgendwas eingeben. So was wie E-Mail-Adresse, Nachname, Vorname. Telefonnummer, Vorname, Nachname. Okay? Ja? 

Benedikt Grimm 

Ja, okay. Warte, ich schicke gerade den Slider. 

Wolfgang Seyppel 

Dabei bleiben wir. Slider und dann Telefonnummer, Vorname. 

Benedikt Grimm 

Wobei, wir probieren es einfach mal aus, dass wir zwei Instanzen laufen lassen. Und wenn ich nicht irgendwas extrem falsch gemacht habe, kommen Da sind wir auch zwei gleichzeitig gelaufen. Lass uns mal schauen. Slider hattet ihr gerade. Was hattet ihr jetzt gerade noch? 

Wolfgang Seyppel 

Vorname, Nachname, Telefonnummer. 

Benedikt Grimm 

Sagen wir einfach mal ein Formularsection mit Vorname, Nachname, Telefonnummer. Schicken wir die auch los. Jetzt wird es ein bisschen tricky, weil wir müssen jetzt natürlich auch kontrollieren, wer fordert unsere Aufmerksamkeit. Hier ist nämlich schon der Erste, der unsere Aufmerksamkeit erfordert. Und zwar ist das die Slider-Section. Wir nehmen die mal mit. Wir sehen auch schon vom Datenkonstrukt, was hier angelegt wird, dass es mit Autoplay, also KI hat ein bisschen zu weit gedacht, als für das, was wir typischerweise vielleicht mit reinnehmen würden, aber ist okay. Nehmen wir mal mit auf. In der zweiten Part ist unsere Formular-Section. Auch hier, das sieht eigentlich ganz gut aus. Nehmen wir auch einmal so mit, wie es hier kommt. Und jetzt schauen wir mal, ob das Ganze zusammenkommt. Was wäre denn die nächste Section, die ihr so auf so einer typischen Landing Page, auf so einer Marketingseite, die ihr vielleicht heute auch schon im Einsatz habt, verwenden würdet? Was ist eine Suche? 

Wolfgang Seyppel 

Eine Suche? 

Benedikt Grimm 

Wir können einen Suchschlitz machen, einen Such-Engine anzubinden. Jetzt in den nächsten 30 Minuten wird auf jeden Fall eine Herausforderung werden. Wir können den Header vielleicht gleich noch mal überarbeiten und den Suchschlitz mit aufnehmen. Ich nehme mal kurz den Sektchen. 

Wolfgang Seyppel 

Genau, lass uns das mal aufbringen. 

Benedikt Grimm 

Ich mache mal kurz hier den Part noch zu Ende und dann schauen wir uns das mal an. 

Wolfgang Seyppel 

Wer hatte denn sich gemerkt, welche Entwicklungsumgebung der Bene verwendet? Nein, das ist das Framework? Da hinten war es, oder? Du wolltest unbedingt diese Tüte haben. Ich weiß das. 

Benedikt Grimm 

So, schauen wir mal. 

Wolfgang Seyppel 

So, bitte schön. 

Benedikt Grimm 

Ich hoffe, das ist mein realisieren, dass er es jetzt nicht auseinandergebracht hat, aber ich wollte mutig sein. Wir sind heute mutig. 

Wolfgang Seyppel 

Du bist mutig. 

Benedikt Grimm 

Hier stellen wir noch die Beispiel-Story für unser Form-Example. Und? Na? So. Unsere Slider-Section ist auch gut auf dem Weg. Und dann werden wir gleich wahrscheinlich noch ein paar Sections brauchen, ein bisschen Inhalt reinzubringen, weil wir die ganzen Learnings von heute am Ende mit auf die Seite generieren wollen. 

Wolfgang Seyppel 

Das hatten wir euch ja versprochen in dem Titel, dass wir so ein paar Promptbeispiele mit reingeben, dass wir so ein paar Learnings mitgeben und eins können wir euch schon mal mitgeben, was total wichtig ist: Das Promptding, das macht man nicht jedes Mal von neuem. Also auch wir merken uns die Prompts, die wir geschrieben haben. Wir merken uns, wie wir vorgegangen sind. Wir dokumentieren das, dass wir das wiederverwenden können. Das macht total viel Sinn, wenn ihr das nicht nicht nur in der Entwicklung macht, sondern auch bei euch im Privaten, wenn ihr Kontext mitgebt, ob ihr bei ChatGPT Projekte zum Beispiel eröffnet, das so ein bisschen strukturiert. Also da steckt tatsächlich Arbeit hinter, da vernünftig vorzugehen und nicht nur schnell was reinschreiben, das Ergebnis abwarten. Es entwickelt sich sehr viel vom „Ich code zu „Ich prompte. 

Benedikt Grimm 

Genau, wir sehen, auch unsere Form-Section ist mittlerweile angekommen. Ich würde behaupten, sieht ganz gut aus. Ich weiß tatsächlich jetzt gar nicht, was Was passiert? Danke. Was passiert, wenn man es abschickt? Haben wir nämlich gar nicht definiert. Im Moment ist es halt nur das optische Element. Das müssten wir jetzt im nächsten Schritt angehen. Für mich soll es jetzt erst mal an der Stelle so reichen. Ich gehe mal in die Slider-Demo rein. Wir haben unseren Slider. 

Wolfgang Seyppel 

Was ist das so für dich? 

Benedikt Grimm 

Wir müssen mal kurz gucken, ob die Bilder auch wirklich funktionieren. Ja, okay. Ist ja schon mal ganz nett. Von dem Slider passt für uns auch, mit dem wir arbeiten können. Jetzt ist es aber so in euren realen Projekten, habt ihr nicht immer, dass ihr spontan entscheidet, „Okay, welche Elemente packe ich jetzt da drauf? Typischerweise habt ihr ja schon ein Set an Elementen für eure Landingpages, für euer Designsystem, was ihr haben müsst. Und wo lebt euer Das ist mein System typischerweise. Das lebt natürlich in Figma und nicht in irgendeinem Prompt. Und ihr wollt ja möglichst nah an eure Figma-Designs ran. Und jetzt sehe ich gerade, dass … Doch, ich habe Figma noch offen. Gott sei Vielen Dank, der liebe Koff. Wir hatten mir ein kleines Figma-Template von einer Section mal vorbereitet, wie es typischerweise aussieht. Figma ist einfach ein Design-Tool. Da sprechen wir meistens davon, dass wir auch hier Komponenten haben. Wir haben jetzt hier unsere Section. Da drin Hier gibt es eine Subheading, ein Heading, Supporting Text, hier so ein Feature-Item, da drin sind wieder Komponenten. Das sind natürlich unfassbar viele Design-Details, die jetzt so prompt, wenn ich sage, ich will so eine Feature-Section mit sechs Elementen, fehlen natürlich da. 

Benedikt Grimm 

Da sind die Abstände nicht mit berücksichtigt, da sind die Fontsizes und so weiter nicht berücksichtigt. Das möchte ich aber jetzt haben und ich möchte exakt das haben. Und damit das funktioniert, machen wir uns ein anderes MCP zunutze. Wir kopieren uns einfach den Link und weil ich natürlich hoffentlich schlau war, habe ich im Vorfeld auch hierfür einen kleinen Command uns vorbereitet. Ist im Prinzip exakt das Gleiche, was wir eben gemacht haben, nur dass wir jetzt als ersten Schritt sagen, wir Wir lesen diese Figma-Datei, auch da wieder über so einen MCP-Server, dann parsen wir die Informationen und dann erstellen wir in Storyblock die Komponente. Ist im Prinzip auch so ähnlich wie das, was Storyblock gerade selber rausgebracht hat vom Workflow, dass ich direkt aus Figma jetzt Komponenten anlegen kann. 

Wolfgang Seyppel 

Was ist eine Frage? Was hält euch davon, die komplette Seite in Figma zu machen, gerade per Prompt zu werden? 

Benedikt Grimm 

Die komplette Seite in Figma machen und dann per Prompt … 

Wolfgang Seyppel 

Einfach übernehmen, so wie du es designt. 

Benedikt Grimm 

Das Problem wird sein, da haben wir auch morgen noch eine Masterclass zu, da geht es, wie wir es im Projekt genutzt haben. Das Problem ist, dass selbst das, und das werden wir gleich sehen, ich schicke es mal kurz, ich schaue mal auf die Reise mit. Das ist relativ ungenau, weil auch wenn die ganzen Tools das immer versprechen, wir kriegen das eins zu eins nachgebildet, das funktioniert noch nicht. Das, was funktioniert, ist, wir machen den Rohbau und gehen dann Schritt für Schritt da rein. Und dann wird es auch interessant, dann sparst du trotzdem die Zeit, weil du ganz viele Handgriffe, die du sonst so Boilerplate-mäßig machst, die musst du einfach nicht noch mal machen. Aber es funktioniert eben noch nicht so, dass du sagst, eins zu eins, mach das jetzt, auch wenn Tools das versprechen manchmal. Und wenn du das in mehreren Schritten machst, dann sagen sie direkt: „Lass mal in den Ober und dann die X-Komponenten, weil wir vorhin diese Bedarfsdaten haben. Das würde funktionieren, bin ich von überzeugt. Genau, man müsste es dann genauso prompten. Hier ist Das ist ein Figma-Design. Nehm das jetzt bitte mal auseinander, starte auf der höchsten Ebene und geht dann immer weiter runter ins Detail. 

Benedikt Grimm 

Und dann wird das in der Realität wahrscheinlich funktionieren. Wir machen das bei dem anderen Projekt genau so im Prinzip. Setzt aber voraus, dass eure Figma-Designs dem systemischen Gedanken auch folgen. Nicht immer sind Figma-Designs so aufgebaut, wie es jetzt hier zum Beispiel der Fall ist. Das ist jetzt nur ein Extrakt von der größeren Datei, aber wir haben hier die ganzen Design Tokens definiert, die über mehrere Screens hinweggehen. Dann funktioniert es natürlich super gut, weil dann willst du auch, ich sage jetzt mal, hier diesen Header-Bereich. Ich bin mir fast sicher, dieses Heading hier, das gibt es an fünf anderen Stellen mindestens. Und das möchte ich auch nicht jedes Mal wieder neu bauen, sondern ich möchte auch da, dass er das wiederverwendet, damit meine Codebase nicht unnötig aufgeblasen wird. Wichtig für uns im Design ist, dass wir unsere Probe super eng mit den Entwicklern abstimmen, dass wir dieselbe Sprache stellen. 

Wolfgang Seyppel 

Wir gehen eigentlich, ich sage mal, front and foreight-zentrisch vor, bauen genauso unsere Designs, damit das genauso skaliert in der Improflexion. 

Benedikt Grimm 

Wir sehen jetzt hier, das Figma-Ding, das dauert ein bisschen länger, macht aber nichts. Wolli, du hast bestimmt noch eine Frage gehabt. Aber hat das deine Frage beantwortet überhaupt? Ja. Okay. Perfekt. 

Wolfgang Seyppel 

Ich kann noch ein bisschen was erzählen. Ich hatte eben den Transkripter erwähnt. Wir haben ja verschiedene Leute von unserer Firma hier. Da hinten ist auch die wunderbare Olga, die hat das ausprobiert. Fireflies heißt dieser Transkriptor. Das war wirklich total interessant. Den kann man einladen zu den Meetings und dann hört der mit. Also teilweise kommst du auch selber in das Meeting rein, bist erst mal alleine mit dem Fireflies oder zu zweit und redet dann mal so ein bisschen vorweg. Das protokolliert das Ding komplett und fasst wirklich hervorragend die Tasks zusammen. Also dieses „Irgendjemand muss mitschreiben und am Ende die „Meeting Notes zusammenfassen in die Runde schicken, das kann alles automatisiert passieren und ist einfach so eins. Ich fand das total enorm, was da einfach möglich ist. Geht teilweise auch mit dem Transkripter von Teams. Also kann man auch anmachen, Transkript und dann das ganze Ding in ChatGPT hauen und sagen: „Fassen wir das zusammen? Wäre auch noch so eins. Für uns war, Firefly hat so ein bisschen bessere Ergebnisse noch. Man muss mal so mit den Tools ausprobieren, ähnlich wie wir das hatten. Auf einmal kommt Cloud 4 raus in der Entwicklung, macht das Gleiche wie vorher, aber es entwickelt sich einfach von Tag zu Tag weiter. 

Benedikt Grimm 

Was das Wichtige ist, was man dabei wissen muss, und du hast auch unser Learning aus unseren Hacketons, kein Tool da draußen, wird euch das in Perfektion direkt hinstellen. Was wir oft machen, ist, wir gehen von dem einen Tool in das andere und kombinieren das. Beispielsweise machen wir für so schnelles Prototyping, gehen wir hin und ziehen uns meistens die aktuelle Seite von einem Projekt. Also alles, was jetzt gerade so vielleicht an Informationen auf der Seite steht, zum Unternehmen selbst. Und dann ging es Produkt, Prototyp, sage ich mal, wo man so einen Handwerkerservice, der wollte so eine Schadensaufnahme quasi digitalisieren Damit man sich das besser vorstellen kann, ist der Koffe hingegangen und hat das Ganze in einem Prototyp einfach mal runtergebracht, ist hingegangen, hat sich die Unternehmensinfos auf der Seite einfach kopiert, ist dann: „Okay, wer wird das am Ende benutzen? Das benutzt ja eigentlich die Person, die in der Stellenanzeige gerade gesucht wird als der Mitarbeiter. Also kopiere ich mir auch mal die Stellenanzeige noch mit rein und hat dann die Infos alle kombiniert und hat sich dann in ChatGPT, glaube ich, war es, ein Prompt bauen lassen, den er dann in den Binsurf oder in so ein Coding-Tool geworfen hat und dann kam ein Tool raus, was schon mit „Ich kann Fotos hochladen, „Ich kann einen Vertrag mir vorbereiten lassen, eine Kostenrechnung, ob das stimmt, keine Ahnung. 

Benedikt Grimm 

Und bis dahin zu einer Unterschrift per iPad machen lassen. Das war unfassbar detailliert dadurch und das ist so ein bisschen das Learning. Man muss einmal iterativ vorgehen und man muss die Tools immer wieder miteinander kombinieren und auch aktuell bleiben, was neu ist. 

Wolfgang Seyppel 

Und wie bleibst du aktuell? Kannst du das ein bisschen erzählen? Wo findest du deine ganzen News? 

Benedikt Grimm 

Also meistens auf x. Com. Also ehemals Twitter, ehemals Twitter. Wenn man Elon Musk ausblenden kann, sind da ganz viele wichtige Informationen schon mal bei. Ansonsten Hacker-News, Reddit oder ich glaube, die Magazinen da draußen, die ihr vielleicht eher so kennt, so T3N oder Golem, Heize. Da ist schon viel Info bei. Manchmal ist auf LinkedIn auch was Nettes mit dabei, aber LinkedIn ist meistens so zwei Wochen hinterher, was den Informationsgehalt angeht. Und ich glaube, es ist unfassbar wichtig, up to date zu bleiben, die Tools mitzugehen. Wir gucken mal kurz, weil es durchgelaufen ist, ob unsere Komponente, wir erinnern uns, so sieht sie aus, ob sie auch so ins Storyblock angekommen ist. Wir wechseln noch mal eben hier rüber. Gucken wir mal kurz. Unsere Feature Section, unser Feature Item ist auf jeden Fall da. Schauen wir mal, unsere Beispielseite. Zack, da ist sie. Und ich würde jetzt behaupten, es sieht zumindest ungefähr so aus wie unser Figma-Design, oder? 

Wolfgang Seyppel 

Was sagt ihr? Figma. 

Benedikt Grimm 

Sieht wie aus. Realität. 

Wolfgang Seyppel 

Sehr cool. Wollt ihr noch irgendwas? Wir können auch jetzt „freie Wahl. Wir können hier noch irgendwas machen. Wir können die Farbe ändern, wir können die Schriftart ändern. Habt ihr irgendeine Wunschvorstellung? Ich hätte mal eine Frage zum Thema. Wie bekommt man dann hin, wenn wir die verschiedenen Komponenten haben? 

Benedikt Grimm 

Denkt ihr es so weit mit, dass du die Headline 1, 2, 3 so definierst oder sieht man dann schon so viel denn gerade entraut, von Zeiten oder von Zeiten? Super wichtige Frage. Ja, ich komme sofort auf die Antwort dazu. Ich brauche noch ein Accordion, fairerweise, weil ich später so ein paar Promptemplates euch auch darstellen möchte. Deswegen schicke ich noch kurz ein Accordion auf die Reise. Consistency. Wir benutzen React-Komponenten. Also wir haben schon Bausteine im Projekt meistens liegen. Das ist dann das Designsystem und die wollen wir wiederverwenden. Damit die aber wiederverwendet werden, müssen wir natürlich der KI in irgendeiner Art und Weise mitgeben? Wo liegen die? Welche Möglichkeiten gibt es? Wie ist unser Brand-Bild überhaupt, was wir erreichen wollen, konsistent haben wollen? Und in dem Fall geben wir auch dafür eine Regel im Prinzip mit. Und zwar ist das in dem Fall, ich habe hier so eine Cloud-Datei liegen. Jedes andere Tool hat andere Dateinamen dafür, aber es gibt immer so Regeldateien. Da sind so ein paar Projektinfos drin. Und zwar ist das in dem Fall beispielsweise so die typischen Befehle vom Projekt, mit welchen Frameworks ich arbeite, damit die KI einfach so ein bisschen mehr geprimed ist auf die Informationen von unserem speziellen Projekt. 

Benedikt Grimm 

Und wenn ich in dem Ordner Komponenten bin, Habe ich hier eine zweite Cloud-Datei liegen und da gehe ich jetzt ein bisschen mehr auf die Design-Spezifika ein, die ich haben möchte. Wir haben die Erfahrung gemacht, dass wir in einem Tailwind, das ist einfach eine Art von Design-CSS-Framework, mit dem man arbeiten kann, dass wir damit ganz gute Ergebnisse erzielen können. Wenn wir mitgeben, hier sind unsere Ordnerstrukturen, damit er den Code richtig bauen kann und dann aber auch so ein paar visuelle Prinzipien mitgeben, so was wie: „Benutze unsere semantische Farbskala mit 60% Neutralität, 30% Komplementär, 10% Akzentfarben, je nachdem, wie ich es haben möchte. Wir geben auch unser Grid System meistens Wir machen uns noch mal mit, dass wir uns hier in einem 8-Punkt-oder 4-Punkt-Grid befinden. Wir haben sogar ein Projekt, da erklären wir das ganze Designsystem in einem Guide-File. Das ist auch, ich glaube, 1. 000 Zeilen lang oder so. Also das ist ziemlich ausführlich. Dadurch kriegen wir es aber hin, dass wir selbst komplett Blanko-Projekte sehr konsistent generieren lassen können. Und das ist erst mal so counterintuitiv, weil man so viel Info erst mal runterschreiben muss. Deswegen ist auch der UX-Kollege der Koffies stark da drin, weil man das gewohnt ist, aus der UX-Sicht eher genau das runterschreiben zu formulieren, was man haben möchte. 

Benedikt Grimm 

Und wenn man das verständlich formuliert kriegt, dann ist das Ergebnis auch so viel besser. 

Wolfgang Seyppel 

Genau, letztendlich die Effizienz, die kommt ja nicht nur davon, dass wir irgendwelche modernen Tools verwenden, sondern Sachen wiederverwenden, nicht immer das Ganze noch mal machen. Unsere Komponenten-Library, die wächst im Prinzip von Projekt zu Projekt und alle profitieren davon. Das ist Das muss so ein Gesamtkonglomerat sein, was du aufbaust und dann fängt das irgendwann an, Sinn zu machen. Gerne. Das geht jetzt alles super schnell, aber du glaubst, du kriegst einen Grundsetter. 

Benedikt Grimm 

Also ich hatte im Vorfeld nicht ganz so viel Zeit. Deswegen habe ich das erst gestern früh 6: 00 gemacht. Also das Next-Jay-Setup, das dauert irgendwie fünf Minuten. Das ist ja ein Befehl zum Ausführen. Storyblock reinkriegen, haben wir auch in dem Fall jetzt mal per Prompt probiert, war auch fünf Minuten, weil die Doku einfach sehr, sehr gut ist in dem Fall. 

Wolfgang Seyppel 

Was ja auch ein Grund ist, weswegen wir jetzt hier Storyblock zum Beispiel ausgewählt haben. Also je nachdem, welche Tools du verwendest, unterscheidet sich das auch. Manche Tools sind da einfacher. 

Benedikt Grimm 

Genau, so einen First spirit kann ich jetzt zum Beispiel nicht nehmen. Genau. 

Wolfgang Seyppel 

Aber letztendlich, ich weiß nicht, ob man da jetzt eine Zahl ran machen kann. Es wird schon krass viel schneller, wenn du vorher mehrere Tage gebraucht hast, irgendwie die Entwicklungsumgebung und dies und jenes aufzusetzen, geht das mitunter einfach super schnell. 

Benedikt Grimm 

Ja, und das ist jetzt ein spezieller Use Case nur. Wir machen jetzt eine Landing Page und machen uns hier Seiten, die wir uns generieren lassen. Das Ganze funktioniert, aber auch über ganz, ganz viele andere Themen. Es gibt noch ein Tool, das heißt Task Master. Da kann ich eine Aufgabe noch mal detaillierter runterbrechen, den Status nachverfolgen. Und da wird es super interessant dann, weil es dann viel, viel detaillierter geht. Dann kann ich noch mal reingehen, das gegensteuern und das ist eigentlich so das Geheimnis dahinter. Man denkt immer, KI macht schnell, weil ich es einfach nur reinfeuere und das Ergebnis, was rauskommt, ist geil, aber ich muss die Zeit zumindest am Anfang einmal investieren, genug Kontext aufzubauen. Und dann macht es auch wirklich langfristig schnell. Und haben wir das große Glück, dass der Bolli das uns erlaubt, Projekte zu machen, die Kunden das mitmachen. 

Wolfgang Seyppel 

Sie profitieren alle davon. 

Benedikt Grimm 

Und das macht Das hat dann auch echt Spaß. Wir haben ein Projekt, da machen wir auch die ganze KI-getriebene Entwicklung. Jetzt gerade aktuell, da sind wir so schnell. Ich glaube, wir sind acht Wochen vor dem Zeitplan. Das ist schon, finde ich, erstaunlich und das macht dann auch einfach Spaß mit dem Team. Und man hat auch die Zeit, viel mehr in Details reinzugehen, die man vorher nicht hatte, weil man vorher damit beschäftigt war, immer wieder so Basework zu machen, die man sich einfach sparen kann. 

Wolfgang Seyppel 

Also ähnlich auch wie bei Chaumi. Das, was die machen, was so ein E-Autohersteller ausmacht, ist, wenn die immer schneller werden, die Sachen zu produzieren, können sie irgendwann Features, Qualität und so weiter hochhalten. Und das ist das, was wir hier so ein bisschen zeigen wollen. Es wird irgendwann dahin kommen, dass der Markt wird höhere Konkurrenz, mehr Dienstleisterdichte, mehr Konkurrenz in E-Commerce, Shopsystemen und irgendwann brauchen wir Zusatzservices. Wir nicht nur noch den Shop dahin stellen, wir müssen andere Sachen anbieten. Und das bei einer Budgetrestriktion ist dann total schwer und diese Tools und dieses Vorgehen ermöglicht uns einfach, mehr in solche Sachen zu investieren. Wir verschifften unser Budget in andere Sachen. Ich glaube, wir müssen ein bisschen auf der Uhr. Ja, ich habe noch … Mach du weiter und du hattest noch eine Frage. Eine Zentralisierung an der Frage, wie monetarisiert ihr denn an Zeit? Oder habt ihr erst … ? Das ist eine super Super interessante Frage. Es gibt natürlich verschiedene Vertragsarten erst mal. Mit jedem Kunden ist es unterschiedlich. Jetzt gerade ist es noch sehr stark nach Zeit. Wir wissen noch nicht, wo es hingeht, aber wir können uns vorstellen, dass da schon irgendwann ein Change reinkommen wird und der eher so in diese Richtung Wert gehen wird. 

Wolfgang Seyppel 

Aber schwer zu sagen, was passiert, schwer zu sagen, was die anderen Dienstleister machen. Da muss man sich so ein bisschen in den Marktgegebenheiten anpassen. Unser Wunsch, mein Wunsch wäre Wert, finde ich eine total coole Währung, aber was passieren wird, werden wir sehen. 

Benedikt Grimm 

Wir hatten jetzt gerade auch hier wieder noch mal so einen Fehler, den haben wir jetzt mal kurz behoben und dann zeigen wir euch hoffentlich gleich einmal, wie wir die ganze Seite am Ende auch setzen, weil wir haben jetzt ganz viele Komponenten gebaut und wir wollen am Ende auch eine Seite daraus generieren noch und die mit Inhalt füllen. Wir haben noch neun Minuten. 

Wolfgang Seyppel 

Können Sie uns noch eine Abschlussfrage stellen? 

Benedikt Grimm 

Ja, wir sehen einmal unser Feature Grid. Ich gehe mal kurz zurück und Guck mal, ob unser Accordion auch funktioniert. Perfekt, das sieht doch ganz gut aus. Man sieht auch hier, jetzt hat er auch den Header ungefähr gleich gemacht wie bei den Features. Und damit das Ganze jetzt zusammenkommt, habe ich natürlich noch einen zweiten Prompt mitgebracht. Und zwar habe ich gesagt, Create Content. Und Create Content ist auch wieder nur ein Befehl, den ich vorbereitet habe, der was entgegennimmt. Und zwar sage ich, wir holen erst mal alle Komponenten aus Storyblock, die es gibt in unserem Projekt und das macht es auch sehr interessant Das sind so die Bestands-Soy-Block-Projekte im Prinzip vom Vorgehen her. Ich hole alle Komponenten, die es gibt. Ich hole mir alle Assets in dem Fall. Ich analysiere einmal meinen Content, den ich jetzt gleich reingebe und dann sage ich, basierend auf den Komponenten und meinem Inhalt, wähle die passenden Elemente aus und generiere damit die Seite. Und in unserem Fall, der Geschwindigkeit wegen, habe ich die Learnings auch in der Datei natürlich mal vorabgeschrieben, damit wir uns das jetzt nicht zusammenschreiben unterschreiben können, weil ich habe nur zwei Finger und sage jetzt, basierend auf den Learnings in learnings. 

Benedikt Grimm 

Md generiere eine Seite in Storyblock mit dem Slug Home. Ja, und das schicken wir los. 

Wolfgang Seyppel 

Und in der Zeit die Abschlussfrage für diesen Pokal und noch mal wunderschöne Gewürze. Wie heißt das Tool, was übers Wochenende, was wir im Hackathon erzählt haben, was auf einmal neu rauskam? Ja. Claude, reicht mir jetzt erst mal. Du hast schon was bekommen. Du wolltest das Chutney haben. Du kannst Da könnt ihr euch gerne bei mir melden und dann kriegen wir das hin. 

Benedikt Grimm 

Wolleich Signus ist ja Mango-Chutney. 

Wolfgang Seyppel 

Mango-chutney, genau. 

Benedikt Grimm 

Habt ihr andere Fragen noch, die in die Spezifika gehen, die jetzt hier noch nicht beantwortet waren oder was ihr euch vielleicht noch erhofft habt oder im Kopf geblieben ist.. 

Wolfgang Seyppel 

Und competet mit anderen. 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 und it only costs me 200 $ a month. I think that's quite cheap for the outcome that it gives us. 

Wolfgang Seyppel 

Also, business case ausrechnen. Das ist total einfach. 200 $ rein und mehrere tausend gespart. 

Benedikt Grimm 

Wir gucken mal gerade. Hier ist unser Command, der einmal fehlgeschlagen ist. Das sehen wir eine interessante Sache, weil er sieht natürlich, dass es fehlschlägt wegen einem bestimmten Fehler, den uns die Storyblock netterweise selbstverständlich formuliert zurückgibt und er weiß, was er jetzt gegen korrigieren muss. Jetzt flackert das ein bisschen, weil er hier so ein paar Re-Render-Probleme hat, aber wir sollten gleich sehen, dass er das jetzt noch mal generiert. Er generiert jetzt die Inhalte der Seite und die schicken wir dann einmal noch gegen Storyblock und veröffentlichen die Seite dann und dann sollten wir die hoffentlich, die QR Code auch sehen können. Jetzt bin ich gespannt. Ihr zahlt das ja jetzt hier mit Storyblock. Kann ich aber auch Templates in Shopware direkt generieren? 

Wolfgang Seyppel 

Genau, Shopware auch. Also unser Hackathon tatsächlich, der war mit Shopware. Da funktioniert das auch. Haben wir auch schon mit anderen Tools. Also Shopware und Storyblock haben wir es jetzt am meisten gemacht, weil das einfach Tools sind, die wir häufig verwenden, aber ich bin überzeugt, moderne Shopsysteme, moderne CMS-Systeme, die können das. Das ist immer wichtig. Also je besser die Dokumentation Dokumentation zum Beispiel auch von den Tools ist, weil wir können auch hier, also nicht da, das ist ja das Frontend, wir können auf die Dokumentation der Toolreferenzieren. Wir schauen irgendwann und sagen: „Shopware, liest ihr die Dokumentation von Shopware 6 XY durch? Und dann verwendet das Tool die Dokumentation und baut anhand der Dokumentation. Und so was sind dann die Sachen, die total wichtig sind. Je besser Sachen dokumentiert sind, wie gesagt, desto besser funktioniert das. Wenn ein Tool das nicht hat, dann wird es schwieriger. 

Benedikt Grimm 

Wir sehen jetzt hier, er hat ein paar. Ich use es auf jeden Fall bei unserer Seite. 

Wolfgang Seyppel 

Aber ich glaube, damit schließen wir so ein bisschen trotzdem ab, oder? Also das Ergebnis, finde ich, lässt sich total sehen. Das haben wir alles hier gebaut, vorbereitet, habt ihr gesehen, waren ein paar Prompts, die Seite war vorher leer. 

Benedikt Grimm 

Genau, wir haben so ein paar Learnings mit drauf gemacht. Ich gehe gleich noch mal hin, dass Sie das noch mal an der einen oder anderen Stelle klappt, damit ihr es auch richtig benutzen könnt, weil wir sehen, hier fehlen Inhalte und ich müsste es jetzt noch mal neu generieren lassen. Ich möchte euch aber auch nicht von eurer Pause abhalten. Was aber der Kernpunkt ist und das sind auch diese Key Learnings. Man muss sich immer wieder mitnehmen, immer wieder neue Learnings mitnehmen, neue Tools ausprobieren, auch einfach, denn es ist zum allerersten Mal so, dass so eine Technologie nicht von Unternehmen oder vom Government zuerst über ganz viele Use Cases hinweg ausprobiert wurde, sondern es ist das erste Mal tatsächlich in der Technologie der Fall, dass die Endnutzer das viel, viel früher hatten und das jetzt erst in die Companies wenn es dann das Government drüberschwappt. Und das ist eine unglaublich gute Chance, euer Wissen auch so jetzt schon aufzubauen. Dann das Thema, eine Prompt-Bibliothek zu pflegen und erfolgreiche Prompt auch mit dem Team zu teilen, Weil es bringt nichts, wenn der eine Kollege super viel da drin macht und super fit darin ist und sich das alles erarbeitet und irgendwo ablegt und der andere kriegt es gar nicht mit und macht dieselben Schritte und dieselben Learnings noch mal, sondern auch da muss man zusammenkommen. 

Benedikt Grimm 

Das kann man machen in Notion oder in Confluence, theoretisch auch über eine gescherte Microsoft Notes oder in Teams. Und dann ist es wichtig, das richtige Tooling zu pilotieren. Warum funktioniert das? Sind wir ehrlich, die KI hat jetzt die ganze Arbeit gemacht. Ich habe sie ja nur gesteuert an ein paar Stellen, aber man muss halt auch den Invest eingehen. 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. Und das ist dieser Punkt und das müssen auch eure Chefs oder müsst ihr auch selber verstehen. Das ist eigentlich ein Invest, der es total wert ist zu gehen, denn am Ende hilft es dem Team. Das Team kann entspannter sein. Das nimmt auch ein bisschen mentale Last ja auch ab von Team-Membern. Stichwort Richtung Burnout Prevention. Da zu investieren ist die absolut richtige Entscheidung. Ich könnte auch nicht glücklicher sein, dass wir die Möglichkeit haben, bei uns das so zu machen. Dann das Thema Kontext ist King. Je ausführlicher ihr das formuliert und euch die Zeit nimmt, das können auch mal Tage sein, die man investiert, desto eher erreicht ihr euer Ziel, ohne in eine Sackgasse zu laufen und dann wieder von vorne anfangen zu müssen. 

Benedikt Grimm 

Und dann ist es wichtig, iterativ vorzugehen und nicht zu erwarten, one shot fits all. Ich erreiche jetzt mit meinem einen Prompt Das perfekte Endergebnis, weil das wird noch nicht passieren. Man weiß nicht, nächste Woche vielleicht. Und es gibt noch ein Thema, über das wir gar nicht gesprochen haben und was wir jetzt auch komplett außen vorgelassen haben: Datenschutz in Compliance. Nicht jede Firma und jedes Unternehmen kann diese Tools in der Art nutzen, wie wir es jetzt tun. Und auch nicht jeder Kunde von uns kann die Tools nutzen, weil die teilweise auch nicht wollen, dass ihre IP oder Intellectual Property an irgendeine KI gesendet wird, die vielleicht in den USA lebt oder wo auch immer. Da gibt es ja verschiedene Bedenken und Dinge, die man abwägen muss. Und ein Thema, was dann auch immer relevanter wird, auch Stichwort „Souveräne Cloud-Architektur, Das sind so was wie europäische KI-Systeme. Das ist in dem Fall nicht immer so was wie Azure, sondern zum Beispiel so was wie bei OVH-Cloud als Primus im europäischen Raum, die auch leistungsstarke Modelle anbieten. Klar, die sind deutlich weg von Client vielleicht noch aktuell, sind aber deutlich günstiger und ihr habt die komplette Hoheit und Kontrolle über eure Daten. 

Benedikt Grimm 

Und das ist auch ein wichtiger Punkt, den wir beachten sollen. 

Wolfgang Seyppel 

Also abschließend, wir haben Hype: Wenn eure Tools besser sind und besser denken als das Team, nicht das Team ersetzen, sondern helft dem Team besser zu werden. Investiert, lasst die Leute lernen und dann könnt ihr solche Sachen machen. Vielen Dank, dass ihr alle da wart. Danke euch. 

Benedikt Grimm 

Ihr noch Fragen habt oder so, wir stehen bestimmt gleich noch draußen.