Vibe Coding für Einsteiger

00:00:03: Schön, dass ihr wieder eingeschaltet habt zu einer neuen Folge von TDRN Meister Promter dem Podcast der deine Prompt auf Hochglanz poliert.

00:00:13: Und ich sitze hier digital mit Renate von Renate GPT

00:00:17: und ich sitz' hier digital.

00:00:20: Und in dieser Folge haben wir uns überlegt, dass wir euch zeigen wie man mithilfe von künstlicher Intelligenz.

00:00:27: Seine eigene Website Weibkoden kann.

00:00:29: das heißt so die zwei Stichwörter für diese Episode sind einmal Weibcoding und gut Webseiterstellung.

00:00:35: Entschuldigung es sind drei.

00:00:39: Also das kommt auch nicht von ganz ungefähr.

00:00:42: Ich habe das nämlich tatsächlich ausprobiert weil ich war selber der festen Überzeugung oder ich hatte ein bisschen das meinst du das So?

00:00:50: diese Website-Erstellung mit KI, das ist dann immer ... Das sieht man auch sehr häufig.

00:00:55: Dass es so ein Einseiter ist.

00:00:58: Dass halt alles auf einer Seite ist.

00:01:01: Was auch per se nicht falsch ist.

00:01:03: Ist nicht schlecht?

00:01:04: Ist für mich immer

00:01:05: nur so ... Denkst

00:01:07: du, ah!

00:01:08: Ich weiß auch nicht warum.

00:01:10: Man gibt sich da viel Mühe aber ich denk so ... Nee also da geht doch mehr und deswegen dachte ich auch lange... dann brauche ich mich jetzt mit KI gar nicht da irgendwie dran versuchen, weil das geht da alles noch nicht.

00:01:24: Bis ich es jetzt probiert habe und ich sage es euch... Ich bin sehr, sehr positiv überzeugt davon was da jetzt alles möglich ist!

00:01:35: Aber wir gehen heute in der Folge drauf ein und sagen euch auch wie man da wirklich bestmöglich mit vorgeht.

00:01:42: Stella du musst wahrscheinlich keine Webseiten kochen oder?

00:01:46: Ja,

00:01:46: im beruflichen Alltag jetzt nicht unbedingt.

00:01:49: Aber gleichzeitig das was du gerade gesagt hast ist glaube ich dass du gerade meinst das es wie so eine Landing Page ist da einfach alles untereinander.

00:01:56: Ich kenne das zum Beispiel teilweise von Restaurants auch.

00:01:58: Da hast du dann ne kurze Übersicht so in der Einleitung wer sind wir?

00:02:01: Dann diese Verbindung in der Regel zu Google Maps wo du dann eben siehst beispielsweise wo sich der Standort befindet und darunter ist natürlich noch Impressum Kontakt Daten Und das ist halt so eine Seite, aber du hast zum Beispiel keinen Burger-Menü dann beispielsweise da drunter.

00:02:17: Es ist ja komplexer, dass eben mit verschiedenen Reitern zu bauen auch mit Unterseiten also was.

00:02:22: und gerade das muss ich ehrlich sagen vor künstlicher Intelligenz hätte ich dazu wie erstmal die Skills vernünftig drauf schaffen müssen um das dann auch selber zu programmieren.

00:02:32: Ich hatte mal selber ein Block und auch sowas einzurichten.

00:02:35: Das ist natürlich auch damals schon super niedrigschwellig gewesen!

00:02:38: Also ich weiß noch... Ich kann keine Websites programmieren, aber ich konnte auch schon vor fünf Jahren ohne Probleme und auch schon Jahre vorher so ein Blog starten.

00:02:46: Aber jetzt ist es eben einfach mit künstlicher Intelligenz viel leichter geworden sowas umzusetzen das es auch gut aussieht.

00:02:53: professionell wirkt natürlich Mit der Einschränkung die gehört dazu Wenn du's nicht selber vernünftig programmieren kannst kannst du natürlich auch bestimmte Code Fehler nicht so leicht erkennen wie jemand der das natürlich versteht.

00:03:06: deswegen Also ich finde auch das, was wir euch heute zeigen als Einstieg super.

00:03:11: Aber wichtig gerade wenn ihr das in einem professionellen Kontext nutzen wollt lasst da noch jemand auch nochmal drüber schauen einfach um zu schauen ob da irgendwelche Fehler im Code sind die ihr vielleicht nicht seht und natürlich auch das ganze Thema Datenschutz.

00:03:24: also Ich würde zum Beispiel sagen wer da irgendwie Datenabfrage machen möchte über seine Website weiß ich nicht, ob ich sagen würde ja ja mach das auch mal mit Kaisen oder ich glaube da würde ich doch eher sagen dass dann mal bitte den Experten drauf gucken.

00:03:37: Aber bevor ich das hier jetzt so schlecht rede... Ich weiß auf jeden Fall, dass du gerade deine Webseite neu gemacht hast mit Hilfe von KI.

00:03:44: Und ich habe sie natürlich schon gesehen, ich hab schon gefeedbackt und eine Sache die mir natürlich instant aufgefallen ist war das zum Beispiel der Reiter T-Drain Meisterprompter auch einfach so natürlich unser typisches Look entfiel genau perfekt aufgegriffen hat.

00:04:00: Ich weiß dass es ja auch eine Sache war, die dir auf jeden Fall bei der Sache wichtig war beim ganzen Vibecoden, dass optisch sofort passend ist.

00:04:08: Ja, also ich würde die Einschränkungen... Also klar.

00:04:11: Ich gehe mit allem mit.

00:04:12: Obwohl ich auch sagen muss, die KI setzt quasi ja das drumrum.

00:04:17: Wenn du eine Datenabfrage machst, machst du sowieso... Also musst du auf Tools integrieren, die das abfragen und wo auch dort dann die Daten gespeichert werden?

00:04:26: Aber da sind andere Geschichten!

00:04:28: Hier geht es jetzt ja auch erstmal um das, wie das dann aussieht.

00:04:31: so ne?

00:04:32: Das looken viel sagst du schon ganz richtig Und da muss sich auf jeden Fall die Einschenkung machen.

00:04:37: Wenn ihr von euch sagt, ihr habt gar keinen Bock darauf, euch darum zu kümmern.

00:04:42: Habt auch nicht so... Ich sag jetzt mal ein Auge dafür oder wollt euch da nicht reinfuchsen was ihr gerne mögt oder was nicht, was zu eurer CI passt?

00:04:52: Dann ist das nicht euer Way to go!

00:04:54: Dann kann man immer noch beauftragt einfach die Profis sehen an dem anderen.

00:05:00: So dass wäre schon meine Einschränkung weil Das sehe ich sehr häufig die Webseiten mit KI gestaltet sind sehr ähnlich aussehen, dass die alle dieselbe Schriftart haben.

00:05:11: Dass die immer dieselben Farben haben also sehr häufig so Lila blau und so Claude Design hat zum Beispiel eine sehr, sehr markante Schrift, die man einfach irgendwie erkennt.

00:05:24: Und da habe ich schon direkt.

00:05:26: irgendwie kommt da ein ungutes Gefühl ist genauso wie wenn jemand halt sagt diese KI Floskel benutzt.

00:05:33: Ist persönlich falsch?

00:05:34: Aber kommt einfach nicht so cool rüber.

00:05:36: Und dann habe ich eben versucht oder ich dachte, hey... ...ich hab jetzt Bock hier an dem Website langsam ist es mal in der Zeit nach.

00:05:44: Ich weiß nicht wie vielen Jahre meine erste Website.

00:05:46: Dann doch mal irgendwas da irgendwie rauszugeben.

00:05:50: und dann dachte ich okay.

00:05:54: Jetzt bin ich gerade ja am Rumspielen mit Manus.

00:05:57: Ich probiere das jetzt hier mal.

00:05:58: was soll schon schief gehen?

00:06:00: Dann habe ich eben geguckt mit einem offenen Auge, wenn ich durch die Welt gegangen hab.

00:06:04: Guck doch, welche Webseiten finde ich denn cool?

00:06:07: Was finde ich cool?

00:06:08: Welche Assets finde ich nice auf Webseite?

00:06:10: Wie soll das dann aussehen?

00:06:12: Das ist wirklich plain-plain.

00:06:14: umso überraschter bin ich ja auch, dass es funktioniert hat.

00:06:17: Ich habe Screenshots davon hochgeladen und habe gesagt, dass sich daran halt orientieren soll, dass das aber meine Schriftarten sind.

00:06:25: Die nutze ich auch in Canva schon dass das meine Farben sind mit dem Farbcode, den man auch in Ken war hat.

00:06:32: Und das habe ich dem dann quasi einfach gegeben.

00:06:35: Auch mit Unterseiten und das finde ich gerade das Coole diese Unterseite.

00:06:39: Dann dachte ich so, mal gucken ob es geht.

00:06:42: Und Leute, das funktioniert?

00:06:45: Also es hat einfach genau diesen Aufbau halt komplett nicht nur gepromptet sondern halt auch... In Manu sieht man das auch direkt an der... ...in so ein Splitscreen wie das dann aussieht!

00:06:57: Und ich war Überrascht.

00:06:58: ich war so, ich war dann auch im tunnel muss man auch sagen.

00:07:02: Ich war da weil das hat macht so spaß weil du merkst halt direkt ein impact.

00:07:06: Das hat der.

00:07:07: wann hat man das schon mal so häufig kann man das nicht.

00:07:10: dann sagt man noch mal halt dass es irgendwas ändern soll und ist es halt direkt auf der kompletten website anders.

00:07:19: Wir müssen uns das noch einmal jetzt Schritt für Schritt angucken.

00:07:22: Und zwar du hast am Anfang gesagt, du bist in die Recherche gegangen!

00:07:25: Das war ja auch dein wichtiger Punkt dass es eben nicht so ist quasi wenn du gar keine Idee hast wie's aussehen soll dann wirds ein bisschen schwierig sondern du hast dir erstmal Beispiele angeguckt von anderen Websites wo du sagst hey irgendwie das Design hat mir gepasst oder deinen Schriftart hattest Du ja eh schon und du hast natürlich auch einen Prompt dafür gebaut in den Prompt.

00:07:42: den findet ihr in den Show Notes Und ich glaube, der hat.

00:07:46: jetzt muss ich einmal kurz zählen.

00:07:48: Ja eigentlich sechs Punkte was ich spannend fand gerade dabei.

00:07:52: also Der eine ist natürlich so die Zielgruppe.

00:07:54: Die haben wir auch in unserem Grundlagen-Promptgerüst immer dabei und natürlich auch die Aufgabe, also generell erstmal quasi so eine Art Briefing hast du ja angefordert.

00:08:03: Da werde ich dich gleich auffragen warum ein Briefing?

00:08:05: aber natürlich den Zweck.

00:08:07: wozu brauche ich die Website?

00:08:08: welche Inhalte möchte ich draufhaben?

00:08:11: wie soll das Design aussehen?

00:08:12: dafür eben auch die Beispiele Tonalität also gerade angelingt an die Sprache und eben diese technischen Vorgaben.

00:08:18: Und ich glaube, das war bestimmt auch ein ganz wichtiger Take dafür, das direkt mit anzufragen weil da kommen wir ja genau in die Basis von Programmieren dass es eben auch quasi aus der Perspektive funktioniert.

00:08:31: aber erst mal bevor wir uns nochmal den Prompt angucken warum hast du jetzt ein strukturiertes Briefing angefragt?

00:08:36: Und nicht einfach quasi bau mir den Code für die Website Das war schlecht formuliert.

00:08:41: Promptet ist nicht so.

00:08:42: Aber das was ich damit meine

00:08:45: Ja, also am Ende briefen wir die KI ja tatsächlich.

00:08:48: Das heißt das ist... Also ich habe es mir so ein bisschen vorgestellt wie wenn ich halt jetzt auch eine Experimente mal auftragen würde.

00:08:56: So einen Riesenplan hab' ich dann von Webseitenbau tatsächlich noch nicht.

00:09:00: deswegen habe ich das ja auch als Experiment gesehen und habe dann wirklich einfach alle Detail erst mal zusammengeschraubt und das ist natürlich wichtig.

00:09:09: Also ich dachte so wenn nicht nichts davon gäbe also dieses briefing Wenn ich das halt sehr sehr sehr sporadisch mache dann kann es wie bei einem anderen Es nur generisch werden.

00:09:20: Und dass wollte ich ja nicht.

00:09:21: und genau deswegen habe Ich eben versucht okay was muss es denn alles wissen?

00:09:25: Und ich hab zum beispiel auch die tonalität.

00:09:27: wir haben dazu Auch schon folgen gemacht so mein tonalitätsprofil das habe ich als pdf.

00:09:32: ihr habt das hoffentlich alle auch.

00:09:35: Das habe ich quasi auch angehangen.

00:09:36: Also, ihr seht die Reiter da auch, dass es frei ist.

00:09:42: Ihr könnt sagen, die Details dazu sind im Anhang.

00:09:46: Empfehlung geht raus weil so detailliert kann man's gar nicht beschreiben und dann war das alles da sodass der KI erst mal ein Bild gibt okay?

00:09:55: Da geht man rein!

00:09:57: Den Zahn muss ich euch aufziehen, dass selbst mit diesem Briefing Da steckt natürlich dann, also man arbeitet da noch viel nach.

00:10:04: Das stimmt doch nicht alles!

00:10:05: Da muss man immer nochmal gucken ob da wirklich das wording ganz genau passt?

00:10:10: Ob da Buttons richtig sind oder ob man die nochmal innern kann.

00:10:14: Da geht man dann nochmal rein.

00:10:16: aber was für mich eher stressig war eben diese Aufbau und genau das habe ich dann so da reingegeben.

00:10:24: Vielleicht noch eine ganz wichtige Sache die wir auch als quasi evergreen hack immer dazu haben natürlich die maximal drei oder fünf rückfragen je nachdem wie umfangreich das ganze auch ist wenn wichtige informationen fehlen bevor ihr eben startet.

00:10:37: weil das ist wirklich so ein ding.

00:10:39: wir können es euch nur wärmstens empfehlen.

00:10:40: ich finde dass macht eigentlich die arbeit mit k i immer leichter und zeigt direkt am anfang von so einer konversation ok wo habe ich informationsfall vergessen?

00:10:50: was muss ich vielleicht noch nachreichen?

00:10:52: Aber das heißt, du hast dann dieses Briefing quasi ausgefüllt und hast du dir dann zum Beispiel bei Gemini kann man ja einen Canvas-Mod nutzen schon parallel so eine Website ausgeben lassen.

00:11:02: Genau!

00:11:02: Das macht es automatisch tatsächlich.

00:11:05: also ich kann jetzt für Manus sprechen.

00:11:07: in Manus öffnet sich sofort wenn Du halt sowas bauen möchtest öffnete sich quasi ne Vorschau.

00:11:14: Das heißt, sobald's fertig ist mit dem was du halt angegeben hast.

00:11:17: Dann öffnet es die Forscher und du kannst sogar... Also dann isst diese Forscher oder?

00:11:22: Du kannst diesen Screen auch größer machen und dann dort auf Bearbeiten klicken!

00:11:26: Das fand ich halt cool weil wenn ich jetzt immer beschreiben muss hier im dritten Button mach bitte dies und das.

00:11:32: ne da wirst ja auch nicht fertig Und da gehst du wirklich dann einfach drauf klickst da drauf in Bearbeit-Modus dann halt und sagst hey bitte macht den Button anders Oder was auch immer.

00:11:42: ne Also da ist wirklich dem Ganzen sind keine Grenz gesetzt.

00:11:47: Du kannst, ich würde mich nicht zu sehr aus dem Fenster lehnen aber für den... Ich sage jetzt mal für den Otto-Normal Verbraucher eigentlich alles machen was du für eine so eine Webseite brauchst und ich habe nichts Komplexes auf der Webseiten, ne?

00:12:02: Für meine Fälle ja!

00:12:05: Jeder Programmierer würde sagen das sind die Basics.

00:12:07: Aber was ich habe sind eben diese Unterseiten.

00:12:11: Und dann hab' ich auch Der Grund der Webseite übrigens für euch nochmal zu wissen.

00:12:16: Ich will so ein Hub bauen, einen Wissenshub wo alle Guidelines alles Checklisten, mein Wissen eigentlich über KI gesammelt ist was man einfach vor free runterladen kann damit es einfach das Wissen zugänglich jeder Mann ist.

00:12:31: und dementsprechend sind da halt Seiten wo die Guidelines hier weit stehen Und dann kann man drauf klicken und es lädt sofort das runter Von halt, dass es mit Google Drive quasi verbunden und dann lädt's das halt runter.

00:12:45: Also das ist auch damit verbunden.

00:12:47: Das heißt wir haben diese Anbindung.

00:12:50: Dann habe ich Videos und Fotos auch drin Und auch Instagram Verlinkungen.

00:12:54: Ich hab' auch so eine übermichseite wo ich halt auch mein erstes virales Reel zum Beispiel... ...und man kann da drauf klicken und kommt dann auch direkt zu Instagram.

00:13:02: also das Video läuft ab und dann klingt man quasi drüber.

00:13:06: Also wirklich jetzt nicht superkomplexes.

00:13:08: Aber für alles, was ich brauche und was ich sonst auf jeden Fall niemals ... Man kriegt alles hin.

00:13:15: Das weiß man in die Glaufschirrstraße.

00:13:16: Was ich nicht gemacht hätte sonst!

00:13:19: Aber wie lange insgesamt hast du denn dafür gebraucht?

00:13:23: Ich saß zwei Tage all-in-all... aber wenn ich sage, ich sitze zwei Tage da, dann meine ich, sitze zwanzig Stunden am Tag da.

00:13:31: Mein Freund hat nicht so viel mitbekommen von mir in der Zeit.

00:13:34: Weil ich dann so drin bin.

00:13:35: Ich bin im Tunnel und will auch irgendwann, das muss man jetzt auch sagen... ...ich bin da natürlich auch den glücklichen Voraussetzungen,... ...dass ich ein relativ großes Abomodell habe.

00:13:46: Das zieht schon auch Credits, muss man auch sagen!

00:13:50: Genau, da kommen wir jetzt nämlich zu dem.

00:13:52: Sagen wir mal was hat denn nicht funktioniert?

00:13:54: oder was war vielleicht im ersten Anlauf?

00:13:56: Worüber hast du dich geärgert?

00:13:58: Was hat nochmal eine extra Runde erfordert?

00:14:00: Natürlich, du brauchst einfach... die Quedets bzw.

00:14:03: die Token, also auch wenn er jetzt Gemini nutzt oder Cloud- oder Chatchi-PT ihr habt ja bestimmte Limits je nachdem ob ihr im Gratismodell unterwegs seid, ob ihr ein Abo verwendet unterscheiden die sich aber diese sind irgendwann aufgebraucht.

00:14:15: also beispielsweise weiß ich einen Kumpel von mir hat für so ein privates Podcast-Projekt von uns, eine Website gepromptet überarbeiten lassen und da war der Spaß nach zwei Stunden quasi vorbei.

00:14:27: Das hat zwar auch was gebracht in den zwei Stunden aber dann waren einfach ja die Quarters auf gebraucht und dann ging es auch erst mal nicht mehr weiter die nächsten Wochen bis es im nächsten Monat die Neuen gab.

00:14:36: deswegen also quält jetzt natürlich als einer Entschränkung Aber wo hast du noch gemerkt okay?

00:14:41: War jetzt nicht so wie ich dachte oder hat mir Stress gemacht.

00:14:44: Also ich muss tatsächlich, aber das geht auch sehr gut in dieser Ansicht die ich gesagt habe.

00:14:49: Kannst du immer auf mobile ansich klicken und das muss man auch machen wenn man eine normale Webseite macht dass du das simultan prüfst Und das muss man auf jeden Fall machen, weil da haben nicht alle Abstände gut gepasst.

00:15:02: Da musste ich halt häufig noch mal reingehen und sagen hey in der mobilen Ansicht geht der Text über den Button hinaus zum Beispiel oder so.

00:15:08: Das sind natürlich aber kleine Anpassungen.

00:15:10: Das ist jetzt...das hat es glaube ich gehört irgendwo dazu, aber das zieht dann diese Details ziehen extrem genau und dass halt alle Abstände irgendwie passen.

00:15:22: Aber ja, aber das wollt ihr auch noch sagen mit dem Meister Promptor.

00:15:24: Also ich hab natürlich ein Tetra N-Meister Prompter Reiter quasi auf mit einer Seite und da habe ich einfach nur gesagt bitte suche!

00:15:32: Und ich meine unsere Tetra in Meisterpromptor Farben sind ja sehr deutlich auch überall sichtbar in all unseren Materialien und ich habe einfach gesagt hey zieht ihr bitte die Farben von Tetra n Meisterprompter?

00:15:45: Ich möchte diese Seite in der Farbe haben Und ich habe nicht gesagt, das ist der Farbcode dazu.

00:15:53: Ich bin wirklich überrascht, dass was da alles rausgekommen ist.

00:15:57: Weil es war wirklich basic-basic!

00:15:59: Ich dachte so, ich probiere jetzt mal.

00:16:01: Aber es hat sich dann wirklich die Farbcodes quasi rausgezogen und hat sie dann repliziert und die ganze Website halt damit eingefärbt.

00:16:11: Ihr seht auf meiner Website auch so Handi-Mockups.

00:16:14: Ich finde das immer ganz schön.

00:16:16: irgendwie, ich weiß auch nicht und da habe ich auch wirklich das auch Basis.

00:16:20: Habe ich gesagt bitte dieses Bild in einem Handi Mockup und sodass du so durchtippen kannst einfach.

00:16:26: Da ist ein Pfeil und dann kann man halt mehrere Bilder.

00:16:30: Das war also so wie ich es wirklich... Jemanden erzählen würde und ohne irgendeine Programmiersprache irgendwo angewandt zu haben, sondern wirklich nur so wie ich mir vorstelle.

00:16:41: Und da ist eben das Wichtige ihr müsst natürlich eine Vorstellung haben von dem was ihr wollt.

00:16:46: jetzt nur so ganz ganz offen ranzugehen kann Ich euch allein schon aus credit sicht nicht empfehlen.

00:16:53: dafür ist es also dafür dass zieht halt extrem viele tokens Und das macht meinen Sachen gar keinen Sinn.

00:17:00: Deswegen geht da schon mit einem Plan ran, was ihr haben wollt wie es aussehen soll und dann funktioniert das wirklich extrem gut!

00:17:08: Okay, wir halten das fest und natürlich.

00:17:10: Wir haben jetzt einen KI-Tool so genannt aber es funktioniert ja mit verschiedenen.

00:17:14: Es gibt auch noch mal spezielle Vibecoding Tools zum Beispiel Loveable.

00:17:18: Falls euch mal dazu quasi eine extra Meister Promptereinschätzung interessiert müsstet ihr folgendes tun uns entweder bei Spotify oder YouTube in die Kommentare schreiben Oder uns eine E-Mail schicken damit wir einfach wissen okay dass interessiert euch und falls es euch nicht interessiert Schreibt uns doch gerne welches Thema euch stattdessen mal reizen würde hier in diesem Podcast.

00:17:37: Und ansonsten würde ich sagen, die Infos gibt es alle in den Show-Nutz auch zum Newsletter.

00:17:41: Übrigens Renate wir haben glaube ich noch keine Tonalitätsanalyse gemacht.

00:17:46: Was ist das einmal im Newsletter?

00:17:48: Aber weil wir neugierig darüber sprachen extra geschaut, wir haben noch keine tonalitäten Analyse.

00:17:57: Das kommt nächste Woche!

00:17:59: Das ist das was mich am allerhäufigsten benutze.

00:18:03: So und jetzt wisst ihr Worüber wir... Renate ist sprachlos und jetzt wisst ihr aber auch, worüber wir nächste Woche sprechen.

00:18:09: Das heißt um das nicht zu verpassen schaltet gern wieder ein.

00:18:12: Lasst uns wie gesagt Feedback da!

00:18:14: Wir freuen uns auf wenn möglich Plattform fünf Sterne und generell natürlich auch einfach Kritik was wir besser machen können.

00:18:21: Wir sind da offen.

00:18:23: Freuen uns von euch zu hören und ja ich hoffe ihr freut euch uns nächste Woche wiederzuhören hier bei T-Train Meister Prompte Und in dem Sinne Drei,

00:18:34: zwei, eins.

00:18:37: Bleib sauber!