Das AI Prototyping Bootcamp 2026: Von Null bis hin zum Erstellen von Apps und Websites mit Figma Make & Lovable

1. Grundlagen für Prototyping mit Figma Make, ChatGPT und Lovable: Gibt es eine Zukunft für Produktmanager, die nicht mit KI arbeiten können? Ehrlich gesagt nein. Wir sind gerade in eine ganz neue Ära von KI-gestütztem PM eingetreten , eine andere Art, die schneller voranschreitet , intelligenter ist und Ideen innerhalb weniger Stunden in Prototypen umwandelt . Wenn Sie auffallen wollen, relevant bleiben und eine Führungsrolle übernehmen wollen, brauchen Sie diese Fähigkeiten. Ich habe diesen Kurs ins Leben gerufen, nachdem mir zwei Direktoren in zwei verschiedenen Unternehmen gesagt hatten, dass meine KI-Prototypen wie Agenturarbeit aussehen. Und das alles wurde an einem Tag ohne Entwickler und ohne Wartezeit erledigt . Das gab mir den Mut, alles, was ich gelernt habe, mit Ihnen zu teilen. Dieser Kurs ist keine Theorie. Das sind keine Recycling-Frameworks, und es ist definitiv nichts, was Sie in einem Buch finden werden . Das ist echt Das ist praktisch. Und es ist der Vorteil, der Top-PMs von allen anderen unterscheidet Und ich habe es für dich gemacht. So können Sie zu dem Produktmanager werden, den sich Teams wünschen, Startups brauchen und den die Zukunft verlangt. 2. Erstellen Sie Ihre GPT- und UX-Patterns: Ordnung. Willkommen zu dieser Vorlesung Der erste, bei dem ein Prototyp mit KI-Tools gebaut wird. Und wo fängt man am besten an? Natürlich ist es ein Google-Suchfenster. Damit wir beginnen können, müssen wir HanTPT auf Vordermann bringen, um uns gute Anregungen für Lovable oder Figma Make zu geben gute Anregungen für Lovable oder Figma Make Und es gibt keinen einfacheren Weg, das zu tun, als zuerst Lovable Prompting Bible herunterzuladen Hier ist es. Sie können sehen, dass viel dahinter steckt. Aber mit Control A, Control C, dann ist es das Erste, was Sie tun müssen , zu ChatGPT zu Als Nächstes werden wir ein GPT in Cha GPT erstellen . Das ist unter Erkunden Dann erstellen wir, wir nennen es Figma und Flower, beide sind Prototypen Was Sie tun können, ist Dateien hochzuladen, um das Wissen für das GPT zu erstellen Aber ich denke, wir können das überspringen und es erstellen. Nur ich für dieses Ding und dann sicher. Wir warten ein paar Sekunden, schauen uns GPT an und jetzt fangen wir an, unser GPT zu trainieren Das Erste, was wir sagen werden, ist, dass Sie ein erfahrener UX-Experte sind , der kompetent ist und die anspruchsvollsten Bücher über Software-UX gelesen hat die anspruchsvollsten Bücher über Software-UX gelesen . Hast du es? Gibt mir eine Liste prominenter UX-Bücher. Du musst darüber nachdenken, wie du mit einem Kind sprichst, das im Speed-Kampfmodus ausgebildet wurde. Dann erzählen wir es jetzt, besorgen mir jeweils drei gute Praktiken und geben mir gute, ausführliche Erklärungen dazu . Warte ein bisschen. Erzählen Sie dem Laden das nach Ihrem Wissen. Okay, dann müssen wir uns überlegen wonach wir fragen werden, welche Art von Produkt. Und für diese Übung können wir ein schnelles Observability-Tool erstellen, das auf Datadog und Grafana and Dina Traces Tools basiert auf Datadog und Grafana and Dina Traces Wir werden dem GPT also sagen , Datadog Grafana, Dina-Traces und UX-Muster zu analysieren, Formulare zu untersuchen und die besten UX-Muster, Navigation, Funktion und Auffindbarkeit zu isolieren besten Erleben Sie es und formulieren Sie es in eine UX-Bibel für Observability. Seien Sie äußerst detailliert , wenn Sie diese beiden abgelenkten UX-Vorstudenten mit gutem Verständnis von UX, aber begrenzter Aufmerksamkeitsspanne, die leicht abdriften kann, erklären diese beiden abgelenkten UX-Vorstudenten mit gutem Verständnis von UX, aber begrenzter Aufmerksamkeitsspanne, . Wir erinnern Sie daran , sich an den Teil zu erinnern, der leicht wegdriftet, denn so werden , sich an den Teil zu erinnern, der leicht wegdriftet, wir Lavaba Figma Make behandeln Und das sind fantastische Helfer beim Bau von Prototypen. Sie lassen sich einfach sehr leicht ablenken, und Sie müssen ihnen genügend Informationen geben , bevor sie anfangen zu verstehen, was sie tun Das ist also genau das, was wir hier sagen. Mal sehen, was der GPT kommen wird. Und hier ist unsere UX-Bibel. Sie sagt uns genau, was eine Observability-Lösung in Bezug auf die Benutzererfahrung tun sollte , also kann es gemein sein Das ist eine gute Observability-Lösung für die Benutzer, die sie verwenden Warten wir, bis das GPT fertig ist, und dann werden wir es wieder anweisen, die Daten zu speichern, die ihm bekannt Ich scrolle langsam, damit du das Video anhalten und sehen kannst , was das GPT dir einfällt Ich lese in Echtzeit, und der Sound für Lovable und Figma ist recht anständig und eignet sich für ein gutes Prototyping, also warten wir, bis es fertig ist Siehst du, halluziniere es hier. Teil des Bereichs Beobachtbarkeit zu sein, das ist Gold wert. Okay, jetzt sagen wir nach deinem Wissen sortieren . Da haben wir's. Dann gehen wir zur Lovable Prompting Bible. Wir werden der GPT sagen, dass dies die liebenswerte Bibel ist die liebenswerte Speichern Sie es in Ihrem Wissen und halten Sie sich immer an diese bewährten Methoden, wenn Sie aufgefordert werden, eine Aufforderung für Lovable Dev oder Figma Make zu erstellen Da ich nichts über dieselbe Art von Bibel für Figma Make weiß , werde ich erneut die GPT bitten, Foren und Artikel usw. durchzugehen Und erschaffe es selbst. Da haben wir's. Das ist ein langes Dokument. Aber du kannst einfach klicken. Und es sollte in ein paar Sekunden erledigt sein. Was wir Sie nun bitten werden, ist, es und andere Formulare für Experten zu lesen , die gute Ratschläge für Figma Make gegeben haben, und wie Sie die besten Eingabeaufforderungen dafür erstellen können Erstelle die gleiche Art von Eindringungsbibel wie die liebenswerte Bibel , die du kennst. Okay, lassen Sie uns dazu auffordern Es wird eine Weile nachdenken und die eindringliche Bibel für Figma buchstabieren . Machen es. Es wird nur eine Weile dauern bis das große Dokument generiert und gespeichert ist, und dann können wir fast loslegen. In Ordnung Jetzt ist das erledigt. Sie haben offiziell beide Pochsenbibeln in Ihrem GPT gespeichert Das ist dein kleines Monster , mit dem du dir Hosen baust, und du musst es mit Sorgfalt behandeln und pflegen Also jedes Mal, wenn du ein Buch liest oder einen schönen Artikel hast, komm einfach her und gib deinem GPT etwas Liebe und noch mehr Artikel, damit es noch intelligenter wird Okay, jetzt, wenn wir damit fertig sind, können wir mit dem Bau unseres ersten beginnen Das ist die strategischste Sache. Um es noch einmal zusammenzufassen: Wir haben ein GPT erstellt und es angewiesen, nach den besten UX-Mustern und dem besten Wissen und den besten bewährten Verfahren zu suchen besten UX-Mustern und dem besten Wissen und den besten bewährten Verfahren Dann haben wir die Lovable Prompting Bible hinzugefügt. Wir haben sie gebeten, die Figma Prompting Bible im gleichen Stil zu erstellen, und sie gebeten, alles darin zu speichern Dann haben wir den Bereich ausgewählt , aus dem wir Produkte herstellen werden Derzeit wird das also Beobachtbarkeit sein, aber vielleicht können das einige Geschäftstools sein Vielleicht kann das eine App zum Musikhören sein. Vielleicht kann das etwas sein, um persönliche Websites für verschiedene Personen zu erstellen. Sie müssen die besten finden, die sie sind. Und fordern Sie das GPT auf, diese Websites zu analysieren, die besten Methoden und Muster zu ermitteln und es in seinem eigenen Wissensstand zu speichern, sodass es weiß was es sehen muss und wie die Aufforderung zu erstellen ist, also ist sie wirklich gut Wenn jetzt alles bekannt ist, können wir mit der Erstellung unserer ersten Eingabeaufforderung beginnen Um zu beginnen, werde ich ein paar Links und viele Screenshots für Dinge zusammenstellen , die mir gefallen. Was wir entwickeln werden, ist eine App zur Überwachung von Raumfahrzeugen Ich werde also nach den besten Such-Apps suchen , die es gibt, und das GPT damit versorgen Ordnung, ich habe also ein paar Artikel gefunden, die sich mit Raumfahrzeugmissionen und der Überwachung verschiedener Raumfahrzeuge Überwachung Also habe ich zuerst ihre Links hier eingefügt. Dann habe ich verschiedene Artikel und die Bilder für die Überwachung von Raumfahrzeugen hinzugefügt wie Ds in Grafana, diesen in Data Dub, Weltraumkontrollsoftware für diese Leute, mehr Raumfahrzeug-Software, noch mehr Raumfahrzeug-Software All diese sind hier. Dieser ist es nicht. Es wurde auch hinzugefügt. Und jetzt kommt die Aufforderung, die wie folgt lautet: Sie erstellen zuerst eine Figma Make-Eingabeaufforderung Es muss detailliert sein und so viel , dass ein US-amerikanischer Hochschulabsolvent es durchziehen kann , ohne abgelenkt zu werden Was wir bauen, ist ein Prototyp für ein Instrument zur Überwachung von Raumfahrzeugen zum Thema Gufan wirklich wichtig, ein Team auszuwählen und dem GPT mitzuteilen Sie müssen Grafana, seine Struktur, seine UX und seine Benutzeroberfläche im Detail analysieren und iGMA make mitteilen, und wie Der Prototyp wird im Wesentlichen über drei Bildschirme verfügen , einen für die Übersicht, einen für die Betriebsanalyse und einen für die Start- und Landeanalyse Stellen Sie sicher, dass Sie zu viele Details angeben, damit kein Fehler auftritt Und hier ist ein Tipp, den ich dir zu 100% zeigen möchte. Wenn Sie das tun, stellen Sie sicher, dass Sie gründlich recherchieren. Derzeit habe ich es mir überlegt. Wir werden es für noch mehr, zum Beispiel für erweitertes Denken, einsetzen . Jetzt werden wir unsere erste Aufforderung erstellen, was sehr strategisch ist und ohne sie, wie ich Ihnen am Anfang gesagt habe, kann Ihr Prototyp so stark abdriften. Das ist also der , den du machen musst. Manchmal dauert es mehrere Läufe, bei denen Sie ChatGPT bitten, es zu erstellen und es dann zu lesen Drucken Sie es dann erneut aus und lesen Sie es erneut und bearbeiten Sie es, damit Sie endlich das haben, was Sie benötigen Schauen wir uns also an, was dabei herauskommt. In Ordnung. Und jetzt, nach einigem Nachdenken, wenn Sie hier die Option haben nicht nur erweitertes Denken zu verwenden, sondern eine gründliche Analyse durchzuführen, können Sie das mit Sicherheit tun, und es wird besser sein. Aber jetzt haben wir das, was wir brauchen, und das ist unsere erste Aufforderung, Inhalt, Aufgaben, Richtlinien, einfach alles. 3. Perfektionierung der Figma Make Prototyping-Bibel: Erfolgskriterien sind leer, also muss das sicher sein, aber in und was ich tun werde, und wenn du willst, kannst du es auch als Extrameile machen es auch als Extrameile Du kannst das von hier kopieren, ein normales Diagramm von Chan GPT starten, hier klicken, Deep Research sagen und es mitteilen Recherchieren Sie gründlich und stellen Sie sicher, dass dies den höchsten UX- und KI-Standards entspricht , was dazu führt, dass Sie mmeic und , was dazu führt, dass Sie mmeic Überprüfen Sie Ihr Wissen, um sicherzustellen, dass es den Erfolgskriterien entspricht, zu denen die einfache Auffindbarkeit und die übermäßige Nutzung von Funktionen gehören einfache Sie fügen den großen Tank ein, und dafür wird eine gründliche, gründliche Recherche Suchen Sie nach einer detaillierten Figma Make-Aufforderung? Ja, ein voll exotischer. Ja. Simuliertes FEMA-Layout. Nein. Und starten Sie die Recherche neu, es wird ein bisschen dauern. Aber die Aufforderung wird noch besser sein. Warten wir also auf die Recherche. Sobald die Recherche abgeschlossen ist, sobald die Aufforderung erfolgt ist, werden wir sie tatsächlich anwenden. Mal sehen, was Figma Make damit machen wird. Und natürlich, dann teste es aus und liebe es, schau, was der Unterschied sein wird Aber warte einfach ein bisschen, und dann gehen wir zu unserer nächsten Vorlesung, wo wir diese Aufforderung zum Leben erwecken und umsetzen werden Leben erwecken und umsetzen Dies wird Ihr erster Bildschirm für unser perfektes Tool zur Überwachung von Satellitenflugzeugen und Raumschiffen Bleib dran. Wir sehen uns in der nächsten Vorlesung. 4. Die PM-Denkweise beim Prototyping: Können Sie aus KI einen soliden Prototyp herausholen, ohne ihm den richtigen Kontext zu geben Genau. Das kannst du. In diesem Vortrag werden wir uns auf den wichtigsten Teil des Prozesses konzentrieren . Und das ist der Aufbau Ihres primären Prototyp-Prompts. Derjenige, der das erste Bild erstellt, das als Grundlage für alles weitere dient , Ihr strategischster Hit während des gesamten Entstehungsprozesses. Das ist dein Auftrag. Wenn Sie es vermasseln, wird Ihr Prototyp überall sein und er wird mit jeder nächsten Aufforderung immer weiter driften. Ich zeige dir, wie du Cha GPT wie einen intelligenten Assistenten benutzt, wie du ihm die richtigen Zutaten gibst und wie du sicherstellst, dass er sich eher wie ein erfahrener UX-Denker verhält als wie ein abgelenkter Lassen Sie uns Ihren Prototyp auf Erfolgskurs bringen . Lass uns dein Gebäude holen. Wir sehen uns drinnen. 5. Die Kernstrategie "Visuals & Logic": Synchronisierung von Eingabeaufforderungen und Bildern mit KI.: Okay, jetzt, nach den gründlichen Recherchen, haben wir unseren Das ist der Heilige Gral. Wir nehmen es einfach, Oop, bis zum Ende, kopieren es und los geht's Auf der linken Seite ist das liebenswert. Auf der rechten Seite ist das Figma Make. Mal sehen, was passieren wird , wenn wir die Master-Eingabeaufforderung und ein paar Screenshots eingeben die Master-Eingabeaufforderung und ein paar Screenshots Lassen Sie uns also die große Eingabeaufforderung an beiden Stellen platzieren und dann die Screenshots anhängen. Wir sind uns einig, dass wir einen Grafana-Prototyp machen Also habe ich fünf gute Screenshots von Grafana gesammelt. So liebenswert und Figma macht das. Wir werden verstehen können, Oh, wir müssen das eins nach dem anderen machen Okay, eins, zwei, drei. Okay, da ist unser erster Unterschied. Hier kannst du bis zu drei hinzufügen, hier kannst du bis zu fünf hinzufügen. Bist du bereit, unseren ersten Bildschirm zu sehen? Auch hier habe ich die wichtigsten und repräsentativsten Screenshots, die riesige Hauptaufforderung, drei, zwei, eins, los geht's. Und lass uns gehen. Lasst uns sehen, was passiert , wenn das erledigt ist. Beide Systeme funktionieren. Designiterationen von Lovable Auf der rechten Seite schreibt Figmme den Code. Mal sehen, wer es zuerst macht. Mal sehen, wer es besser macht. Da haben wir's. Liebenswert war zuerst da. Warten wir, bis Figma jetzt hergestellt Und jetzt die Stunde der Wahrheit. Mal sehen, was mit Figma passiert , nur noch ein paar Sekunden. Da haben wir's. Ich würde sagen, das ist ziemlich ähnlich. Wenn wir es jetzt von beiden Seiten betrachten, fühlt es sich wirklich ziemlich ähnlich an. Stellt Ihnen ein Dashboard zur Verfügung. Lass uns expandieren Lass uns expandieren und alles sehen. Ja, das ist liebenswert. Und das ist der von Figma. Ich würde sagen, dass die Figma-Version irgendwie ein bisschen mehr wie Grafana aussieht, aber sie sind ziemlich falsch und es gibt absolut nichts, und es gibt absolut Lass uns ein paar Garnelen probieren, damit wir fühlen, wie es läuft. Lass uns sehen Lass uns wieder Chan Chi PT mitbringen. Gehen Sie zu unserem Prompt-Generator und sagen Sie ihm, ich möchte einen Prompt, der den Prototyp anwendbar macht, ähnlich dem Szenen-Framework von Pana Stellen Sie sicher, dass Sie mir eine liebenswerte Figur geben , die vernünftig wird Wirf Menüs runter, all meine Leute und Karten. Mal sehen, was Cha GPT mitbringen wird. Achten Sie darauf, die Aufforderung mit der Bitte zu bereichern , damit der Typ des Polo-Demonstranten mehr Spaß Während wir warten, möchte ich mir einen dieser Screenshots ansehen, der mir besser gefällt, damit ich Ihnen zeigen kann, dass Bild 1.000 Wörter bedeutet Mal sehen, welchen wir wählen sollen . Es ist immer der letzte. Okay, lassen Sie uns das hier an beiden Orten gepostet kopieren, liebenswert. Und holen wir uns den von der eigentlichen Weltraummission von Grafana, diesen, hier gepostet, hier gepostet. Ich glaube, ich habe einen verpasst Okay. Und wir haben vergessen , uns liebenswert zu ernähren Bitteschön, liebenswert. Und jetzt holen wir uns diesen Brant , der total verrückt ist Komm schon, der GPT. Seiten, Dashboards Geh sofort liebenswert. Rufen wir das Figma-Mikrofon auf. Jetzt sollte es uns ein ausreichendes Maß an Klickbarkeit rund um die Mal sehen, wie es ist, gegen das Denken ein Veto einzulegen. Und jetzt, nur um eine Zusammenfassung zu machen, hier haben wir den Weltraumstatus, die Kommunikation, das thermische System, die die Wir haben Biografien und Zeitreihen, genau wie Igufan die Idee aus all den verschiedenen Modellen übernommen und das Stromversorgungssystem und die Temperaturüberwachung bereitgestellt hat die Idee aus all den , ein gutes Armaturenbrett für eine solche Startkontrolle , ein gutes Armaturenbrett für eine Hier ist es ziemlich dasselbe, aber ich hatte das seltsame Gefühl, dass es wirklich nur Schwarz nachahmen wollte Und noch einmal, es ist eine übliche Wärmeenergie im Gesundheitswesen. Im Grunde weiß es, was es visualisiert, aber es gibt einige Abweichungen Es wurde viel mehr von Grafana inspiriert und das ist sehr ähnlich, auch wenn diese Art von Flüssigglas nicht mein Favorit ist, aber wir werden es etwas weiter und es wird eine weitaus bessere Visualisierung bieten Ich bin mir fast sicher, dass es mit dieser Aufforderung passieren wird Wenn nicht, werden wir es einfach noch ein bisschen nachfragen, um zu sehen, was als Nächstes passiert. Okay, Volvo ist bereit. Und noch einmal, die neueste Version überprüfen, los geht's. Habe sie, aber es fühlt sich wirklich nicht anklickbar an. Nichts ist anklickbar, und ich kann nichts Interessantes auswählen Mal sehen, was Figo tun wird. Geben Sie eine weitere Aufforderung, während Sie warten. Gib mir eine Auswahl, Dropdown, Filter oben. Das gibt mir die Möglichkeit, aus den vier Namen der Raumfahrzeuge zu wählen Machen Sie den Filter außerdem interaktiv und in der Lage, die Dashboards unten zu filtern, machen Sie die Batterie, die SOC, P-Generation und die anderen Felder oben anklickbar, sodass Sie Dummy-Dashboards genauer definieren Schau nach, ob Figma etwas getan hat oder ob es immer noch nachdenkt. Da haben wir's. Es gibt sogar einen Leitfaden für Prototypen. Alles sieht gut aus. Vielleicht ist es Oh, sieh mal, es ist anklickbar und es geht irgendwo hin Die Dinge auf der rechten Seite sind zusammenklappbar. Interessant. Es hat es getötet. Es hat eine Art Service obendrauf. Wir kehren zurück. Okay. Nun, da wir all diese haben, sind sie alle anklickbar. Wenn ich hineinklicke, habe ich ein weiteres Dashboard, was unglaublich ist Geben Sie mir in der Mitte und am unteren Ende des Schilds eine Zurück-Schaltfläche im Stil von Flüssigglas, damit ich zum vorherigen Bildschirm wechseln kann. überzeugen haben Mit dem Prototyp der Marke Figma werden wir noch mehr zu Normalerweise bin ich mit Figma Make sehr zufrieden. Heute glaube ich, dass ich es mit der letzten Aufforderung verwechsle. Da haben wir es, und wenn ich klicke, wäre es schön, wenn ich auf die Zurück-Taste drücke Da ist es. Der kleine Zurück-Knopf. Fantastisch. Also sind wir fertig mit dem Liebenswerten für diese Sitzung Ich denke, dieses Mal hat es für eine wirklich gute Erfahrung gesorgt Konzentrieren wir uns nun auf die Herstellung von Figma und schauen wir, was dort passiert, ob sie aus dem Koma erwacht Okay, jetzt ist es weiß. Ich mag es mehr, wenn es weiß ist Arrangiere alles besser. Folgen Sie der Seitennavigation von Kafana, von der ich Ihnen einen Screenshot gebe Und dann pausiere ich dieselbe Aufforderung zur Seitennavigation. Oder wir können etwas anderes tun. Spiel dog krafana.com, öffne es. Seitennavigation öffnen. Lass uns das machen. Wir geben das im ersten Menü im linken Luftraum an. Und dieses Armaturenbrett sollte es sein. Folgen Sie abschließend dem allgemeinen Ausblick und dem Design von Grafana. Es wird also als Grafana-Screenshot geschält und navigiert, zwei. Geben wir ihm jetzt noch einen. Lass uns Granaten machen. Ja. Okay. Das wird reichen. Ahmen Sie den Text und die Maße nicht nach. Du stylst nur. Mal sehen, wie es jetzt läuft. Es sollte viel besser sein. Manchmal braucht es ein bisschen mehr Überzeugung. Ein bisschen gewaltsamer Neustart. Und da hast du es. Das ist eher so. Se Finger Make mag wirklich mehr Screenshots und sagt ihm, was zu tun ist. Und wieder siehst du, wenn du darauf klickst, hat es die kleine Zurück-Schaltfläche. Es bietet Ihnen genau Visualisierungen im Grafana-Stil All diese sind hier. Das ist wunderbar. haben wir unsere erste Seite und können damit weitermachen In unserer nächsten Vorlesung werden wir sehen, welche wir wählen sollen. Welches ist besser, obwohl, hey, das sind beides phänomenale Tools, phänomenale Tools, und es ist unglaublich, das gute Wissen zu haben , wie man Prototypen erstellt Aber da haben wir's. Wir haben den ersten Teil abgedeckt. Habe deinen Hauptbildschirm. Sie haben Ihren Hauptprototyp. Schauen wir uns jetzt an, ob wir in unseren nächsten Sessions Figma Make Over Bow verwenden werden, und was ist der Unterschied Was sind die Gemeinsamkeiten und wie geht es weiter? Wir sehen uns in der nächsten Vorlesung. 6. Erstellen des Master-Prompt und Zusammenfassung der Methode.: Nett. Das war der wichtigste Teil des gesamten Bauprozesses. Sie wissen jetzt, wie Sie Ihre erste Aufforderung präzise und ohne Vermutungen Sie haben gesehen, wie Sie Bilder, Links und Logik kombinieren können, um Cha GPT dazu zu bringen, und Logik kombinieren können, um Cha GPT dazu zu genau das zu tun Und denken Sie daran: Müll rein ist gleichbedeutend mit Müll raus. Ein großartiger Prototyp steht mit einer intelligenten, gut genährten KI zusammen. In der nächsten Vorlesung werden wir diese Aufforderung mithilfe von fett gedruckten Bildern und intelligenten Anweisungen in tatsächliche Bildschirme umwandeln . Lass uns gehen 7. Figma Make vs. Lovable: Der Showdown: Sie haben jetzt viel mehr Kontrolle und ich bin mir sicher, dass Sie es fühlen können Durch die Kombination von Bildern und detaillierten Anweisungen steuern Sie die KI wie ein Creative Director und nicht nur wie ein Prompt-Autor Dieser Ansatz hilft Ihnen dabei, den Flow zu integrieren, Konsistenz zu wahren und Bildschirme zu erhalten , die sich wie das gleiche Produkt anfühlen Als Nächstes werden wir darüber sprechen, welches Tool verwendet werden soll, ob Figma Mak oder Lovable, und welche Unterschiede und Gemeinsamkeiten es gibt Also bleib dran und wir sehen uns drinnen. 8. Der endgültige Vergleich in der Praxis: Und wir sind wieder auf dem Bildschirm von Lovable Figma, Lovable auf der rechten Seite, Figma Make auf der linken Seite In diesem Vortrag dreht sich alles um die Auswahl eines Tools. Und ich bin wirklich hier, um Ihnen zu sagen, dass Sie unabhängig davon, welches Sie wählen werden, das richtige wählen werden. Diese beiden sind fantastische Air-Prototyping-Tools, und sie haben so viel gemeinsam, aber es gibt auch einige Unterschiede Selbst jetzt, wenn Sie auf den Bildschirm schauen, können Sie sehen, dass Figma Make auf der linken Seite etwas strukturierter aussieht, ein bisschen professioneller mit einem darin eingebetteten Design Es ist sauber und mit Sicherheit Figma-kompatibel. Ja, noch einmal, es kann etwas Überzeugungsarbeit erfordern, wie Sie gesehen haben, dass wir noch ein oder zwei weitere Prototyp-Prompts machen mussten ein oder zwei weitere Prototyp-Prompts Aber am Ende ist das Ergebnis wirklich, wirklich beeindruckend. Es ist ein bisschen langsamer. Es dauert etwas länger, um die Dinge herauszufinden. Aber wenn es die Dinge herausfindet, können Sie sehen, dass es wirklich einfach zu bedienen ist. Und für mich und in Zukunft wird Figma höchstwahrscheinlich meine Wahl sein, um den Kurs fortzusetzen, aber liebenswert Da haben wir's. Hier ist es liebenswert. Ovable ist unglaublich, weil es seinen eigenen Kopf hat. Es ist extrem schnell , weil es auf Designmustern basiert , die wirklich allgemein anwendbar sind und emotional sind Sie sind quasi die Designmuster einer ganz eigenen Sache. Liebenswert hat immer sein eigenes Ding, dass es dem, was man von ihm verlangt, sehr nahe kommt Aber trotzdem ist es wirklich gut für deine visuellen, schnellen KI-Ideen geeignet deine visuellen, schnellen KI-Ideen Auch hier ist es emotional und liefert Ihnen wirklich, sehr schnelle Ergebnisse, die Ihren Wünschen so nahe kommen und manchmal extrem professionell sind Wünschen so nahe kommen . Beide funktionieren fantastisch gut. Ma cha GPT, wie du gesehen hast, aber du solltest nie vergessen dass Lovable diese fantastische Bibel mit Eingebungen hat , die du besorgen und an dein GPT-Team weitergeben musst , damit es weiß, damit es Und das Beste ist, dass die inspirierende Bibel von Lovable sowohl für Lovable als auch für Figma Make funktioniert Bibel von Lovable sowohl für Lovable als auch für Figma Make funktioniert. Endlich das UX-Wissen, das hinter all dem steckt. Sie haben gesehen, dass wir, als wir anfingen, unser GPT zu unterrichten, es mit verschiedenen Links und Screenshots versehen haben , nicht nur auf KI-Eingabeaufforderungen beziehen, sondern auch für eine gute UX im Allgemeinen Und das überlasse ich dir. Sie müssen Ihr GPT-Dokument immer mit Dingen wie dem beliebten Buch der Silicon Valley Product Group belegen, das wirklich enorme Mengen an Wissen über UX enthält und darüber, wie man Produkte entwickelt, die Ihre Nutzer lieben werden , oder irgendetwas anderes, das es gibt, das Sie mögen, das Ihnen gefällt, die Theorie Holen Sie sich einfach Screenshots aus diesen Büchern, holen Sie sich Zitate aus diesen Büchern und geben Sie sie in Ihr GPT Danach ist die Auswahl der Tools einfach, denn FigmomCN ist allesamt liebenswert, gemischt mit cha GPT, und die richtigen Artikel und das richtige Wissen sind die heilige Dreifaltigkeit des KI-Prototypings dieser wirklich interessanten Periode der menschlichen Zivilisation, die der KI-Teil der Geschichte ist, in der Ab heute, ab dieser Vorlesung, werden wir Figma Make verwenden, um unsere Prototyping-Erfahrung und unsere Prototyping-Reise fortzusetzen unsere Prototyping-Reise Bleiben Sie dran, wo wir diesen Raumschiff-Prototyp noch besser machen diesen Raumschiff-Prototyp noch besser Wir sehen uns in der nächsten Vorlesung. 9. Wer gewinnt und was kann man verwenden?: Haben Sie schon einmal einen Prototyp aus einem KI-Tool gebaut? Das funktioniert zwar, fühlt sich aber nicht wirklich richtig an. Das passiert, wenn Sie nur mit Texten oder nur mit Bildern arbeiten nur mit Texten oder nur mit Bildern In dieser Vorlesung werden wir beides kombinieren. Sie lernen anhand von Screenshots und ausführlichen Anweisungen, wie Sie KI-Tools Bildschirm für Bildschirm aufrufen können, um genau das zu bekommen, was Sie benötigen, ohne die KI dabei herumtreiben zu lassen. Das ist der Punkt, an dem dein Prototyp Realität wird. Lass uns gehen. 10. Baufluss für erste End-to-End-AU-Prototypen mit Figma Make: Warst du schon einmal so sehr in deinem Prototyp festgefahren und verheddert , dass KI seltsame Bildschirme erstellt und sie immer schlecht zusammenbindet, und du so oft zurückkehren und überarbeiten musst, dass du Das bedeutet in der Regel, dass es zuerst auf dem Bildschirm statt im Flow First gebaut wurde zuerst auf dem Bildschirm statt im Flow First gebaut Und in dieser Vorlesung werden wir Tools verwenden, um die tatsächlichen Nutzererfahrungen abzubilden, sodass Ihr Prototyp ihnen folgen kann. Du lernst, wie du einen Flow nach erstellst und wie du Bildschirme auf der Grundlage realer Interaktionen miteinander verbindest, ohne zu Bildschirme auf der Grundlage realer Interaktionen erraten, was der Nutzer tun sollte Dieser Schritt ist die Brücke zwischen Strategie und Umsetzung. Also lass uns dich bauen lassen, wir sehen uns drinnen 11. Erstellen von Benutzerflüssen zur Unterstützung beim Erstellen eines umfassenden Prototyps: Willkommen zur nächsten Sache , die wir mit unserer fantastischen Sache machen werden, den Prototyp zum Beobachtungstool für Raumfahrzeuge zu machen Beobachtungstool für Raumfahrzeuge zu Nun, obwohl wir einige Grafiken haben und einige Interaktionen mit den Schaltflächen haben, wollen wir noch mehr aus ihnen herausholen Wir wollen nicht, dass es so statisch ist und wollen, dass es interaktiv ist und uns viel mehr Details über dieses Raumschiff liefert und darüber, wie wir es beobachten Nehmen Sie das mit Vorsicht und denken Sie darüber nach. Es gibt jeden anderen Prototyp, Sie erstellen werden, bei dem Benutzer auf unterschiedliche Weise mit dem Produkt interagieren können unterschiedliche Weise mit dem Produkt interagieren , das Sie entwickeln. Sie müssen strategisch und technisch wissen, was passiert , wenn ein Benutzer hier oder da klickt, wohin er geleitet wird und wie seine Benutzerreise aussehen wird. Für heute werden wir also drei verschiedene Verfahren durchführen, bei denen es darum geht, unter den verschiedenen Ressourcen zu drei verschiedene Verfahren durchführen, bei denen es darum geht, unter den verschiedenen klicken z. B. bei herkömmlichen Health-Power-Batterien und Wärmeenergie. Zusätzlich werden wir nach ein paar Schaltflächen fragen diesen Diagrammen nach ein paar Schaltflächen fragen, die uns Prognosen für die verschiedenen Ressourcen zeigen . Schließlich machen wir die Event-Zeitleiste anklickbar, sodass wir mehr Details zu den Ereignissen sehen können mehr Details zu den Ereignissen sehen Aber selbst wenn wir diese vage Idee im Kopf haben, können wir hier in Mirror ein Board starten, um uns zu entspannen und ein gutes Bild zu haben hier in Mirror ein Board starten, um uns zu entspannen und ein gutes Bild Es gibt ein wirklich schönes, sofort einsatzbereites Board, das Website-Template heißt Bei diesem handelt es sich um das Flussdiagramm der Website und das Wire-Framing der Website Dafür werde ich das Website-Flussdiagramm verwenden . Wir werden es vorgefüllt verwenden. Und jetzt machen wir es ganz einfach. Ich werde ein paar Sachen löschen, nur damit wir es einfach haben. Diese brauchen wir nicht. Okay. Da haben wir's. Ich brauche die nicht. Wir brauchen nur den ersten Bildschirm. Unser erster Bildschirm ist also so, als würde ich hier sitzen, ich werde ihn einfach kopieren. Los geht's. Stell es hier hin. Und wir haben gesagt, dass wir drei verschiedene Verbindungen haben werden. Einer ist hier. Geben wir ihm ein bisschen Farbe, damit es besser sichtbar ist, und geben wir ihm etwas Gewicht. Da haben wir's. Welche Farbe ist die beste, diese. Also dieser wird hierher gehen, dieser wird hierher gehen und dieser wird hierher gehen. Komm schon. Wenn wir hier klicken, können wir etwas Text eingeben, damit es für uns einfacher ist. Wenn ein Benutzer oben auf eine Karte klickt, sollten Sie eine Untergruppe von Dashboards und Warnmeldungen zu den allgemeinen Themen Gesundheit, Stromversorgung und Energie sehen können und Warnmeldungen zu den allgemeinen Themen Gesundheit, Stromversorgung Was war das und was war thermisch? Und mehr. Jetzt sind wir hier und wir wissen, dass der Prototyp derzeit dieses Dashboard öffnet. Wir haben jedoch nur zufällige Dinge darin, und wir wollen es umsetzbarer machen und tatsächliche Daten bereitstellen, die für die Menschen nützlich Also gehen wir nicht zurück zu Lovable, wir gehen zu Wir gehen zu unserem Freund, dem Prototyp Figment Lovable. Wir werden es etwas fragen Wir werden es bitten, mir praktikable Metriken und Visualisierungen mit Schwellenwerten oder Raumfahrzeugen zu geben Visualisierungen mit Schwellenwerten oder , die Was war der andere? Allgemeine Gesundheit, Energie und Thermo, Leistung, Energie und Thermo, sie werden für einen Observability-Prototyp in Figma verwendet , gib mir eine graue Aufforderung, genau wie wir es zuvor getan haben oder ein UX-Student im Vorstudium, der sich leicht ablenken lässt genau wie wir es zuvor getan haben oder ein UX-Student im Vorstudium Das daraus erstellte Diagramm zeigt in einer eingebetteten Ansicht eine Schublade, wenn auf eine bestimmte Karte einer eingebetteten Ansicht eine Schublade, wenn auf eine bestimmte Design geklickt wird Mal sehen, was passieren wird. Während wir auf die Aufforderung warten, können wir etwas noch Besseres tun. Wie gesagt, Bilder sagen mehr als 1.000 Worte, also wollen wir den Grafiktyp sehen. Mal sehen, dass wir Folgendes tun können. Wir können das Schubladen-Dashboard und Bilder sehen und der Sache halber können wir einfach nach etwas suchen , das uns gefällt. Ich würde sagen, das ist gut genug. Und es ist so einfach wie das zu tun. Wir werden es kopieren. Wir werden wieder hierher gehen. Aber sehen Sie, welche Aufforderung wir haben. Kopieren und zur Eingabeaufforderung einfügen. Aber in Figur M, und warte darauf. Also das wird sich von all diesen hier aus öffnen. Hier gibt es einen Trick , den ich Ihnen zeigen möchte, und lassen Sie uns ab sofort die Bildschirme loswerden, nur damit wir Platz für unseren Text schaffen können. Wenn Sie die Bildschirme später hinzufügen, wird es besser aussehen, wenn Sie möchten. Aber was Sie bei Ereignissen sehen möchten, wenn ein Ereignis geöffnet wird und wenn es mit einem thermischen Gesamtzustand oder einer Energieressource zusammenhängt , müssen Sie im Grunde dieselbe Innenansicht verknüpfen und eine Schublade öffnen, wenn Sie auf klicken. Ich bin bereit für diese Aufforderung. Wir können weitermachen und überprüfen , ob jede einzelne dieser Karten anklickbar sein muss Und wenn du auf die Karte klickst, erscheint sie darin, aber wenn du auf das Ereignis klickst, erscheint eine Schublade Diese beiden werden miteinander verbunden. Und das ist die Art von Beziehung , die ich Ihnen hier zeigen möchte, und die Tatsache, dass Sie diesen User Journey Tree erstellen müssen , damit Sie hier in Mirror erfolgreich sind. Vor diesem Hintergrund können wir jetzt wieder zu unserem Prototyp zurückkehren und uns fragen, was passieren wird. Sobald das passiert ist, können wir versuchen die Ereignisse in kurzer Zeit zu erstellen. Also bekomme ich, was ich vorher hatte. Ich sehe, dass die Event-Zeitleiste die Kopfzeile der Karte ist, also muss ich CHANGPT auf jeden Fall auffordern , Insights-Ansichten für den Event-Tab zu erstellen und sicherzustellen, dass Sie immer den richtigen Namen in das Event-Timeline-Widget eingeben Dann posten wir die erste Eingabeaufforderung. Sagen wir es noch einmal, wenn ein Ereignis eröffnet wird und es sich auf eine der drei Karten oben bezieht, sollte es mit einer Schublade verknüpft sein. Wir müssen HAGPT die Essenz hinter der Nutzungsreise vermitteln HAGPT die Essenz hinter der Nutzungsreise Wenn ein Benutzer auf ein Ereignis klickt, sollte ein Dashboard geöffnet werden Es sollte vorerst ein vordefiniertes Dashboard sein, ein M-Dashboard, damit es gut visualisiert werden kann Es sollte einige KPIs für diese Ereignisse enthalten, und danach werden wir es wieder mit den Insights-Ansichten für die vier obigen Karten verknüpfen den Insights-Ansichten für die vier Schauen wir uns also an, was jetzt passieren wird. Das besorgen, ins Chat-GPT einfügen, um einen richtig guten, schönen, langen Abschlussball zu haben, sowohl für den Gesamtzustand als auch für die Batterie, sodass wir all diese Links haben können Also nehme ich den vorherigen Prompt weil das der Links-Prompt sein wird, und ich lasse die Tatsache, dass Figma Make diese Innenansichten erstellen muss, einfach im Danach werden wir die Verlinkung vornehmen. Also bist du bereit? Wir klicken darauf und Chad GPT gibt uns die Aufforderung. Sehen Sie, was Figma Make in dieser Zeit macht. Es funktioniert immer noch. Schauen wir uns also wie das ablaufen wird, nachdem die Eingabeaufforderung beendet ist. 12. Erstellen eines umfassenden Prototyps durch Verknüpfen von Benutzerabläufen: Okay, jetzt denkt Figma Make nach. Und was wir jetzt hier tun müssen, ist diesen Chan-GPT-Abschlussball zu nehmen , den wir zuvor gemacht haben Die KPIs in den obersten vier Karten oder den Insights-Ansichten ähneln also den Insights-Ansichten ähneln denen, die wir später für Veranstaltungen erstellen Unser Mix bezieht sich auf die vier wichtigsten Karten in den Bereichen Thermo, Gesundheit, Batterie usw. Seien Sie anklickbar und um eine Innenansicht zu öffnen, die wir später sehen, klicken Sie auf den Link zu den Zeitleisten der Ereignisse auf Jetzt ist Figma Make fast fertig, und sobald es fertig ist, werden wir es mit den KPIs auffordern Stell es dir noch einmal wie einen Baum vor. Wir werden Teile der Innenansichten von den Karten oben mit Teilen der Event-Zeitleiste verknüpfen Innenansichten von den , sodass wir ein Ereignis veranstalten können, wenn ein bestimmter Schwellenwert aus der Innenansicht erreicht wird Da haben wir's. Wenn wir jetzt darauf klicken, oh, da ist ein Fehler. Gib ihm eine Sekunde. Versuch es nochmal. Wenn wir darauf klicken. Da sind wir. Das sind die Innenansichten. Aber auch hier zeigen sie nicht die gleichen KPIs, die wir wollen Wir werden Figma Make also auffordern , sicherzustellen, dass die verschiedenen Ansichten denselben KPIs entsprechen , die wir zuvor bereitgestellt haben Wir fügen eine große Eingabeaufforderung von Chan GPT mit allen Lambdas allen Schwellenwerten Sehen Sie, all die verschiedenen KPIs, die wir mit einem Ereignis verknüpfen können, wenn ein bestimmter Schwellenwert erreicht ist einem Ereignis verknüpfen können, wenn ein bestimmter Schwellenwert erreicht Und es ist leicht zu verstehen, oder? Wenn ein Raumschiff überhitzt wird oder seine Batterie verliert, sollte es ein Ereignis geben, das uns sagt, hey, es könnte abstürzen oder hey, es kann etwas Schlimmes Okay, Figma Make ist jetzt fertig , nur noch ein bisschen mehr Leichter, das wird sich von selbst reparieren. Vielleicht ein bisschen mehr Zeit. Aber jetzt, wenn es fertig ist, werden Sie sehen dass dieselben KPIs, die wir in ChatGPT hatten , in den Dashboards für die Insights-Ansicht enthalten sein werden den Dashboards für die Okay, ich beende es jetzt. Fast da. Und es ist geschafft. Lass uns darauf klicken. Und sie haben es. Wir können die KPIs sehen, die wir wollten Wir können die Zeitleiste der Ereignisse im Insights-Dashboard sehen und sind bereit, sie miteinander zu verbinden. Eine Sache, die mich wirklich nervt ist diese Bodenverfolgungssituation Ich wollte eine Karte mit einem kleinen Modell darin haben, damit es nicht das schwarze kleine Fenster ist Ich möchte das Raumschiff sehen und sehen, wohin es sich in diesem Widget bewegt, damit es viel besser in die Tat umgesetzt werden damit es viel Und wir können seine Position sehen. Erstellen Sie also eine Ground Track-Situationskarte mit einem kleinen Flugzeugmodell und zeigen Sie dessen Position Und noch einmal, lassen Sie es uns wie ein Mensch aufrufen. Es ist wirklich nett, dass Sie, sobald Sie eine gute erste Aufforderung haben, beginnen können, mit Figma auf menschenlesbare Weise zu sprechen Figma auf menschenlesbare Weise Und innerhalb des Wunders der Zeit sollte es uns jetzt eine weitaus bessere Sicht bieten, und wir werden unsere Flugzeuge in 21 Jahren auf einer kleinen Karte in diesem Widget sehen einer kleinen Karte in diesem Widget Da haben wir's. Hier ist unser kleines Flugzeug und wo es hinfliegen kann, wo es so viel besser war, so optisch ansprechend. Das Letzte, was wir jetzt tun müssen , ist mit dem Aufbau unseres Event-Tabs zu beginnen. Und wenn wir das machen, wollen wir die Schublade. Ja, wir haben bereits die Eingabeaufforderung für die Schublade erstellt und erfahren, was sie mit ChatGPT zu tun Auch hier kopieren wir die Eingabeaufforderung und geben sie an Figma Make weiter, damit es die Ereignisse anklickbar macht und eine Schublade von links nach rechts öffnet Sie müssen die vordefinierten kleinen Schubladen öffnen , die wir mit den obersten vier Karten verknüpfen können wenn ein Schwellenwert überschritten wird Schauen wir uns also an, was passiert, wenn Figma Make die Arbeit an diesen Schubladen beendet Dies ist der letzte Schritt, bevor wir beide miteinander verbinden und eine tatsächliche Nutzungsgeschichte haben. Figma Make macht gerade einen kleinen Fehler fertig , den wir beheben müssen Okay, lassen Sie uns jetzt sehen, was mit unserer Event-Zeitleiste passiert ist und ob sie anklickbar sind Sie sind anklickbar, sehen aber nicht anklickbar aus. Sehen Sie, die Schublade öffnet sich nur ein bisschen. Ich wollte wirklich, dass sie anklickbarer aussehen, und das ist es, was ich Figma vorschlagen werde Ich möchte, dass die Ereignisse anklickbar sind und wie Hyperlinks blau hervorgehoben sind und dass sich die Schublade weiter links öffnet, also in wie Hyperlinks blau hervorgehoben sind und dass sich die Schublade der Mitte der Und wieder werden wir durch die Magie des menschlichen Verständnisses von fgnomc herausfinden können, des menschlichen Verständnisses von fgnomc herausfinden können, ob es dazu in der Lage ist, indem wir es einfach mit menschlicher Sprache dazu auffordern Mal sehen, wie es läuft. Unsere erste Aufforderung ist solide, und ich habe das Gefühl, dass Figma Make jetzt versteht was es tut und wohin wir damit Lass uns sehen. Figma Make ist fertig Und ja, da haben wir's. Sie sind blau. Sie erscheinen anklickbar und die Schublade öffnet sich in der Mitte des Bildschirms mit allen gewünschten KPIs. Das ist ein großartiges Ergebnis. Wir sehen uns in der nächsten Vorlesung. 13. Wir gratulieren!Du hast es gebaut! Als nächstes gehen wir All-in!: So halten Sie Ihren Prototyp realen Nutzerverhalten Sie haben jetzt einen funktionierenden Plan für das, was Ihre Benutzer tatsächlich erleben, und das macht jeden Bildschirm, den Sie als Nächstes erstellen, einfacher, schneller und zielgerichteter In der nächsten Vorlesung werden wir alles zusammenfügen und vom Rohling zu einem funktionierenden Prototyp übergehen Lass uns ihn bauen. Wir sehen uns drinnen. 14. Erstellen Sie Ihre Marke, Strategie und Masterprompt: sich jemals gefragt, wie es tatsächlich aussieht, innerhalb von Stunden statt Tagen von Null zum funktionierenden Prototyp zu gelangen . Nun, das ist es. In diesem Vortrag führe ich Sie durch den gesamten Prozess der Kombination Ihrer ersten Eingabeaufforderung mit Ihren visuellen Elementen und zusätzlichen Eingabeaufforderungen für Ihre Flows und all die KI-Tools, die Holy Trinity, Lovable Pigmmic Sie werden sehen, wie alles, worüber wir gesprochen haben, Schritt . Das ist der Zauber , der passiert. Lass uns gehen. 15. Von 0 auf 1 für Ihre persönliche Website mit Lovable: Auch hier sind wir auf dem Bildschirm von Lovable und dem Prototyp für das Missionskontrollsystem AK Aber heute werden wir nicht darüber sprechen. Wir werden etwas völlig anderes machen , damit wir nicht nur Figma Make, sondern auch liebenswerte Superkräfte erforschen können Was wir heute tun werden, ist Ihre eigene Website zu erstellen, Ihre Marke aufzubauen und Ihre Online-Präsenz Das ist extrem wichtig, weil jeder große Profi seine eigene Website hat nun von Anfang bis Ende Lovable und alles, Lassen Sie uns nun von Anfang bis Ende Lovable und alles, was wir in den vorherigen Vorlesungen gelernt haben, umfassend erleben was wir in den vorherigen Vorlesungen gelernt haben, wir in den vorherigen Vorlesungen gelernt haben Oh, ohne weitere Umschweife, wie gesagt, werden wir das nicht tun Wir werden zum Dashboard gehen und etwas völlig anderes beginnen. Aber wie wir gelernt haben, müssen wir zuerst planen. Und das ist der Grund, warum ich geplant habe. Jetzt Miro. Ich habe diese Mindmap, wie die Website von jemandem aussehen sollte und was ich haben wollte Das ist der Experience Tree, der User Journey Tree, über den wir gesprochen haben. Es ist vereinfacht, weil es letztendlich nicht so viele Dinge gibt, die Sie auf der Seite eines Produktmanagers oder Produktberaters tun können eines Produktmanagers oder Produktberaters . Also hier ist es. Zuerst haben wir eine Ausleihseite mit meinen Lieblings-Strichmännchen, Bildern , einem Logo und einem Namen, die in drei Hauptkapitel der Website unterteilt ist. Die eine sind die Schaltflächen zum Aufrufen von Aktionen, die an erster Stelle stehen, die Dienste zweiter Stelle und die Kontakte an dritter Stelle. Unter den Aktionsschaltflächen haben wir LinkedIn, Medium und Substack, wo Leute mich sehen und mir auf LinkedIn folgen können Sie können meine Artikel auf Medium lesen und je nach Präferenz sowohl Medium als auch Substack abonnieren . Bei den Diensten wird hier Geld verdient. Wenn wir darüber nachdenken, welche Dienstleistungen, sagen wir, ich anbiete, ist das Einstellungshilfe für Unternehmen, dann ist das Einstellungshilfe für Unternehmen, Unterstützung bei der Einstellung der besten BMs, Ausbildungshilfe für Unternehmen und Menschen Nun, wir sind in dieser Schulung, also biete ich Ihnen diesen Service an Und schließlich die Erstellung maßgeschneiderter Lebensläufe für angehende Produktmanager, damit sie ihren ersten oder nächsten Job erreichen können ihren ersten oder nächsten Job erreichen Unter Kontakt stehen zwei Dinge, die Cently oder beliebiger Terminplaner, den Sie verwenden möchten, und eine E-Mail, damit die Leute Damit habe ich eine allgemeine Vorstellung davon, was meine Website tun sollte, was das Erste ist. Es ist wirklich wichtig. Aber dann müssen wir, abgesehen davon, was es tun sollte , wissen, wie es aussehen sollte. Und ich habe mir überlegt, ob ich vor Leuten, die ich mag, ein paar Links vorbereiten sollte , und so weiter. Aber das wäre sehr voreingenommen und sehr subjektiv. Also, woran ich gedacht habe und was wir jetzt machen werden, ist Super-Improvisation, zusammen mit Gehen wir also zu ChatGPT. Wir wollen es erzählen, ich habe es zum Nachdenken gebracht, damit es mir bessere Antworten gibt Und jetzt lasst uns strategisch denken. Der Hauptzweck dieser Website ist Marketing. Es ist kein Produktmanagement. Wenn wir also über die Bestandteile einer solchen Website nachdenken, suchen wir am besten nach jemandem ein großartiger Vermarkter ist und seine eigene Website hat, jemand, der ein großartiger Produktmanager ist und eine eigene Website und eine Website hat, eine persönliche Website, die extrem einflussreich ist Also das ist es, womit ich ChatGPT auffordern werde. Also gib mir drei Websites. Eine für den berühmten Market Make , der den meisten Besucherverkehr hat. Drei persönliche Websites. Von Leuten, einer für Vermarkter von Landwirten, einer für berühmte Produktmanager oder Produktmanagementberater und eine sehr einflussreiche Person auf YouTube, die einen angesehenen Beruf hat Ich möchte, dass diese Websites bei ihrer Zielgruppe den meisten Traffic und Einfluss und dass sie allgemein anerkannt werden. Da haben wir's. Drei Leute. Wir haben gefragt. Mal sehen, wohin das führt. Mal sehen, wohin es gehen wird. Es hat ein gutes Denkmuster, und mal sehen. Es geht los. Das sind die drei Leute, Neil Patel, Produktmanager, Marty Keegan, Andy Torsa Ali Abdaal. Wenn Sie die Podcasts von Lee noch nicht gesehen haben, sind sie wirklich gut Okay. Wir haben die drei. Lass mich sehen, ob die Links funktionieren. Ja, das tun sie Ein VPG funktioniert. Lass uns einfach nachsehen. In Ordnung. Gut. Unglaublich. Wir wissen jetzt also ungefähr, wie unsere Website aussehen wird und was sie tun wird. Also werde ich jetzt noch eine Sache machen. Ich werde mir das holen. Ich möchte einen Screenshot machen, nur um mir etwas Arbeit zu sparen. Ich gehe wieder zu Chan GPT. Oh, sag es, bitte erkläre die Struktur einer Website und den Wortlaut, den wir später verwenden werden, oder liebenswerte Pumpe. Da haben wir's Fantastisch. GPT hat genau erklärt, was wir in dem Mockup hatten Nun, was wir zu GPT gehen, ist die Reparatur von Lovable, wenn Sie zum Beispiel mit einem Hochschulabsolventen sprechen, der etwas Erfahrung mit UX hat, aber es ist extrem aber Stellen Sie sicher, dass es der Lovable Dot Dev Prompting Bible entspricht der Lovable Dot Dev Prompting Bible Es ist extrem detailliert und das Ergebnis ist eine perfekte Eigenmarken-Website Ein Berater für Produktmanagement. Verwenden Sie diese Webseitenstruktur. Wir kopieren die Struktur der Website als Beispiel für die Positionierung und das Aussehen verwenden eine Mischung aus den folgenden Websites. Wir sagten, Nopatel SVPGF das Strichmännchen morphob jeder von den folgenden Links, und ich werde ihm einige Link-Artikel geben Das sind Dinge, die ich selbst gemacht habe, mehr oder weniger natürlich mit Hilfe von GPT von Aber im Grunde sind das die Strichmännchen , die ich gerne benutze Sie sind Teil meiner Marke und ich mag sie genug, um sie auf meine Website zu stellen. Ich werde hier genau wie wir gründliche Recherchen durchführen damit es zu einer tieferen Recherche und einer besseren Marke kommen kann. Und jetzt wollen wir sehen, welche Magie passieren wird. Oh, eine Sache noch. Achten Sie darauf, die Farben der Strichmännchen für die Website zu verwenden . Ordnung. Nun, schauen wir mal, was dann passiert Okay, bevor wir anfangen, was sind die Spitznamen, die verwendet werden sollten, und das Logo? In Ordnung. Also der Name ist Seal calf and F. Sie können ein Logo generieren, das aus den Initialen VK besteht Willst du einen Ton und ein Gefühl? Verwenden Sie den Ton und das Gefühl der drei Websites, über die ich geschrieben habe, nämlich, dass ich extrem direktiv sein werde, damit sie nicht an etwas anderes denkt. Sollte ich eine Aufforderung schreiben, in der Annahme, dass die Website mit Webflow-Framer oder Code erstellt wird , wird die Seite in liebenswertem Punkt Dv erstellt . Jeder spezifische Plotline-Slogan, den Sie unter Ihrem Namen haben möchten, generieren Sie den Slogan und lassen Sie sich von Set, generieren Sie den Slogan und lassen Godin, Purple, Cow inspirieren Okay. Denken wir, dass wir gut sind? Das wird interessant sein. Mal sehen, wo die Forschung endlich beginnen wird. Großartig. Sagt, wo soll es her, die Farbe aus meinen Motiven mit den Strichmännchen, den Slogan generieren, das Logo generieren. Lass uns gehen. Lass uns sehen, wie es läuft. Fantastisch. Jetzt, nach 13 Minuten Nachdenken und Dosensoßen, haben wir endlich die Lovable-Aufforderung Ich habe es gelesen und es ist wirklich, wirklich gut, genau wie gestern Abend Oh, wir haben einen Autoplan. Zeit, es zu verwirklichen, sagt ein GPT. Wir gehen zu Lovable Wir geben die Aufforderung, aber ich würde auch mehrere Screenshots hinzufügen, weil das Bild aus 1.000 Wörtern besteht Lassen Sie uns einen kurzen Satz von Bildern zusammenstellen. Du kannst das mit Nein machen, sofort Nuro. Ich nehme einfach die, die mir am besten gefallen. Ups. Dann gehen wir Ich werde aus all diesen Bildern ein Bild zusammenstellen , um zu sehen, ob es fliegen wird , nur damit wir die Grenze von drei Bildern nicht überschreiten. Ich denke, wir haben eine gute Untergruppe von Stabfeigenbildern. Planke? Okay. Die Bilder sind fertig. Lovable ist hier. Oh, also lass uns zwei Bilder machen. Lass uns Aileen machen. Und schließlich S VPG. Okay. Nun, wenn wir die drei Screenshots und die Aufforderung haben , wollen wir sehen, was passieren wird. Lovable fängt jetzt an zu arbeiten. Und wenn es fertig ist, haben wir hoffentlich eine wirklich gute persönliche Website für mich mit Strichmännchen und einer guten Funktionalität, alles an einem Ort. Mal sehen, wie es läuft. Antwort: Es ist ein ziemlicher Schock, als Lovobo das Ding herausgeschüttet Und, oh mein Gott, ich habe das gesehen und dachte mir: Das ist das Ende Das ist das Ende des Kurses. Lovo tut nicht, worum ich ihn bitte. Aber wenn wir nach unten scrollen, sehen wir, dass es tatsächlich eine anständige Website geschaffen hat , die meiner Arbeit folgt Im Medien-Newsletter steht Linked. Es heißt Einstellungsunterstützung, Schulung und Workshop, zivile Karriereberatung. Es bietet wirklich, wirklich gute Sachen. Buchen Sie einen Anruf mit meiner Kalenderintegration direkt darin. Schicken Sie mir eine E-Mail. Ich schaue mir das später an. Aber die allgemeine Website ist fantastisch. Wir haben diese Dinge, was extrem hässlich ist. Jetzt gehen wir zurück zu ChatGPT und sagen ihr Lass uns drei persönliche Websites mit phänomenalen Spielfeld sind Produktmanagement, Marketing und Beratung Aber mit ein bisschen mehr Aufforderung bin ich mir sicher, dass daraus diese wunderschöne Website werden wird diese wunderschöne Website Mal sehen, was ChatGPT Ihnen bieten wird. Welche sind die drei persönlichen Websites, die laut ChatGPT phänomenale Landingpages haben Okay. Und mit der Magie der Zeit haben wir unsere Konkurrenten Erster, Nein. Der zweite. Und noch einmal, das ist meine persönliche Präferenz. Es hängt wirklich davon ab wie du einfach aussehen wolltest. Dieser war besser. Oh, Lenny. Da ist Lenny Fantastisch. Ich möchte mich von Lenny inspirieren lassen, wie ich es immer tue Wenn du Lenny nicht folgst, weißt du, was zu tun ist. Ordnung. Also werden wir Lovable sagen, die Landingpage mit einem ähnlichen Namen und der Mischung aus diesen beiden Screenshots zu machen die Landingpage mit einem ähnlichen Namen und der Mischung aus diesen beiden Screenshots Das ist einer und ich mag April Dun Fold auf jeden Fall. Sie können einige dieser **** Figuren anstelle der von Ihnen erstellten verwenden. Ich auch in Screenshots. Ich gehe zurück zu Miro und lade sie nacheinander herunter Okay. Erledigt. Mal sehen, ob das besser wird, und hoffen wir, dass es besser wird. Das ist ein bisschen besser, aber der Text ist einfach gestohlen. Und V ist noch besser, finde ich. Gehen wir zurück zu NGPT. Lass uns unseren Prototypen verwenden und ich erzähle es dir. Ich möchte eine sofort liebenswerte, aber nur die Landingpage für eine persönliche Website so einstellen , dass sie den Screenshots ähnelt und das Strichmännchen anstelle des Menschen auf dem Bild generiert wird Es muss die Besucher und Strichmännchen verwenden, ähnlich wie bei den Screenshots, ich gebe die Bedürfnisse einfach, aber die Leute wollen nach unten scrollen Okay, versuchen wir es noch einmal. Diesmal gehen wir zuerst Chachi Pet durch, diese und jene Oh, eine Sache noch. Stellen Sie sicher, dass Sie sich in Ihrem Wissen an die Bibel halten und sehr detailliert sind, wenn Sie es einem Vorschulabsolventen mit begrenztem UX-Verständnis erklären , das sich sehr leicht ablenken lässt. Okay, lass uns das noch einmal machen . Ordnung. Wir haben die Aufforderung Da haben wir es. Lass es uns kopieren. Lass es uns kopieren und sehen, was passiert. In Ordnung, viel besser. Nun, vielleicht können wir das einfach machen, den Abstand bearbeiten. Nein, das ist in Ordnung, aber Polsterung. Okay, versuchen wir etwas anderes, N. Lassen Sie uns die leeren Leerzeichen von King über und unter der Landing Page Slimmer löschen Leerzeichen von King über und unter der Landing Page Die Schaltflächen „Positionierung“, „Sorge“ und „Strategie“ berühren also fast den oberen Rand der Seite. Bestätigen. 16. Fallstricke und Dinge, die Sie beim Feinabstimmen von Prototypen an Produkte beachten sollten: Okay, jetzt ist es Zeit für etwas Lustiges. Wir gingen an dem Punkt, an dem wir das hatten , mit so viel Tempo oben und unten, dass es schwierig war, zu scrollen Ich werde dir ein verborgenes Geheimnis verraten. Ich habe am Ende der Vorlesung versucht, sie zu bearbeiten, und ich habe mir visuelle Werkzeuge besorgt und festgestellt, dass ich nichts tun kann. Siehst du, wenn ich darauf klicke, kann ich die leeren Stellen dahinter nicht löschen. Schreiben Sie alles, was ich konnte, und dann habe ich versehentlich hineingeblättert und gesehen, dass ich auf 90% Zoom war Im Grunde wird das also so aussehen wie das, was ich Ihnen zuvor gezeigt habe Also mehr von der Geschichte ist, dass es viele bewegliche Teile gibt , also kümmern Sie sich darum. Mal sehen, was wir jetzt tun können. Vielleicht können wir etwas Polsterung hinzufügen. Nein, das können wir nicht. Das war nicht gut. Also lass es uns verwerfen. Ich denke, wir können es vorerst so lassen, noch einen Versuch Und lass uns etwas anderes sehen. das vergrößern und die Schrift Wir wollen das vergrößern und die Schrift vergrößern. Unglaublich. Okay, das sieht jetzt fantastisch aus. Was wir jetzt tun müssen, ist einfach den Text zu ändern und diese Schaltflächen zu erstellen. Das ist die falsche Farbe, damit wir die visuellen Änderungen vornehmen und nacheinander beginnen können und nacheinander beginnen damit wir gezieltere Eingabeaufforderungen haben können Stellen Sie für diese Schaltfläche den rosafarbenen Stil aller anderen Schaltflächen ein und bewegen Sie den Mauszeiger Okay, jetzt ist es pink, aber mach es trotzdem wie mittelgroß. Lass es uns so nennen. Visuelle Änderungen, machen Sie den gleichen Stil wie die Schaltfläche hinter Medium Mal sehen, wie es reagieren wird. Nein, das ist nicht das, was wir wollten, also werden wir die letzte Änderung rückgängig machen sehen, es einmal dunkelrosa machen von Dv Okay. Ich lerne, wie es funktioniert hat. Schaltflächen sehen klickbarer aus und ähneln einer Schaltfläche Lass es das Gegenteil von Arbeit mit einem fiesen Button aussehen. Es gibt also einen gewissen Kontrast. Dann fange ich an, es nach dieser Sache zu fragen. Positionierungsstorys müssen Knöpfe sein, und sie müssen aufgerufen werden Ich helfe dir dabei. Kontakt, sie müssen laut L. auf die jeweiligen Teile der Seite verlinken die jeweiligen Teile der . Okay, mir gefällt es. Also sollten sich diese Dinge jetzt ändern. Mir gefällt das besser als das, was es hier ist. Also lass uns lernen, wie es funktioniert. Derselbe Stil wie die Knöpfe. Ich helfe Ihnen bei Service und Frontag, damit wir eine gewisse Konsistenz haben können Ja. Okay, super nett. Ich möchte in der Schriftrolle sehen, wie ich fett helfen kann. Okay. Nett. Jetzt können wir den Text ändern, uns das ansehen, zum Chat GPT gehen und es sagen Das ist die Überschrift meiner Website. Machen Sie es einflussreicher, kürzer und schlagkräftiger. Und die Tatsache, dass es sich um Produktmanagement-Beratung handelt. Klicken Sie auf Word-Produktmanagement-Beratung. Das gefällt mir. Lass es uns ändern. Klicken Sie auf Word-Produktmanagement-Beratung. Okay. Kannst du es überhaupt Click Worth Produktmanagement nennen es überhaupt Click Worth Produktmanagement Das Produktmanagement von Click Worth ist in Ordnung. Die Dosen sollen kürzer und schärfer sein. Auch hier können Sie mit dem Wortlaut machen , was Sie wollen. Das ist extrem wichtig. Aber Sie können es tun, wie wir es beim liebenswerten GPT, dem Prototypen, getan haben liebenswerten GPT, dem Prototypen, Mach einfach weiter und bring es bei. Marketingwissen, bringen Sie ihm bei, wie man diese Phrasen gut trifft. Ich mache aus komplexen Produkten eine Positionierung, die sich verkauft. Ich helfe Ihnen dabei, aus komplexen Produkten eine einfache Positionierung zu machen. Ich helfe Gründern und Führungskräften dabei, aus komplexen Lösungen eine Positionierung zu machen , die sich verkauft. Okay, lass uns das benutzen. Und auch dies dient hauptsächlich zu Testzwecken, also wird es in Ordnung sein. Dann können wir runter gehen. Das sind Geräusche Mir gefällt nicht, dass sie nicht anklickbar sind. Machen Sie also Schaltflächen klar, positionieren und kommunizieren Sie , die Popups mit Text öffnen , und generieren Sie dann einen guten Popup-Text , der Details zur Unterüberschrift und Überschrift enthält Die Idee ist, dass ich, wenn ich als Benutzer klicke, weitere Informationen darüber erhalte, wie ich Ihnen helfen Mal sehen, wie es läuft. Los geht's. Fantastisch. Lassen Sie die Symbole rosa erscheinen wie in D in und die Medien unten, damit wir Konsistenz haben Die Symbole rosa. Machen Sie sie dunkelrosa, wenn der Benutzer mit der Maus über sie fährt, genauso wie der Mauszeiger über das mittlere Symbol wirkt, um noch pünktlicher zu sein nichts. Lass es uns noch einmal versuchen Lassen Sie sie im Screenshot-Styling erscheinen , wenn Sie mit der Maus darüber fahren Manchmal müssen kleine Dinge oft angeklickt werden. Okay, ich habe etwas getan. Ja, es macht es dunkler, nicht dieselbe Farbe, aber wenn ich noch mehrere Male gefragt habe, wird es passieren. Versuchen wir, wichtigere Dinge zu erledigen, bevor wir weiterfragen , wenn wir wollen Jetzt möchte ich die Links für mein Medium und meinen Newsletter hinter den Buttons und den folgenden Link zum Medium-Button hinzufügen mein Medium und meinen Newsletter hinter den Buttons und den folgenden Link zum Medium-Button Wenn ich also klicke, öffnet es sich in einer neuen Feuchtigkeit. Geben wir „Ich bin da rein“ und fügen den folgenden Link hinter den Newsletter-Button ein , wo er geöffnet wird. Ich tippe auf meinem Substack auf Substack oder einfach nur auf diesen , der Zeit halber Mal sehen, wie es läuft. In Ordnung. Lass uns sehen Öffnet es sich? Jep. Nachrichtenbrief. Jep Funktioniert. Dienstleistungen. Nun möchte ich Sie bitten, wenn ich auf Schulungen und Workshops zur Einstellungsunterstützung und auf Lebenslauf und Karriere klicke , ein nettes Pop-up mit zusätzlichem Text zu öffnen ein nettes Pop-up mit , der erklärt, wie ich das mache. Okay, nett und ändere sogar den Stil so, wie ich es wollte. Also, wenn ich klicke, gehe, um Kontakt aufzunehmen. Wenn ich klicke, wird Kontakt aufgenommen , und wenn ich klicke, wird Kontakt aufgenommen. Ich werde dir sagen, wann immer jemand auf Kontakt aufnehmen klickt, sollte es immer einen Anruf buchen öffnen galant den Link **** in Street away Book call Lass uns sehen. Dann müssen wir einfach die Schaltflächen unten reparieren. Das wäre gut. Und vielleicht werden diese Knöpfe fertig. Dies wird schrittweise eine neue Website sein. Okay, es ist erledigt. Lass uns sehen. Buche ein Auto. Fantastisch. Das ist gutes Zeug. Jetzt lassen Sie die Buttons und mailen Sie mir aktiv, sie sehen stilvoll aus wie die „Mit mir arbeiten “ -Buttons und bewegen Sie den Mauszeiger Ich fange an, diese hier zu mögen , weil sie einen anderen Stil haben , weil Sie leiten dich tatsächlich weiter. Also ich bin damit einverstanden. Machen Sie die E-Mail-Schaltfläche so groß wie die Buch-Schaltfläche. Hoppla, endlich. In Ordnung. Ordnung, richtig, richtig. Nett Ich finde, damit sind wir wirklich startklar, um zu sehen, wie ich Ihnen helfe, Services. Vereinbaren Sie einen Anruf, damit es uns gut geht. Auf diese Weise verwenden Sie Lovable im Wesentlichen , um Ihre eigene Website zu erstellen Und wenn Sie auf Veröffentlichen klicken, können Sie Ihre URL hinzufügen und damit an die Öffentlichkeit gehen. Das ist fantastisch. Vielen Dank, dass Sie während dieser verschiedenen Vorträge bei mir geblieben sind. Ich bin mir absolut sicher, dass Sie es von nun an mit KI-Prototyping beenden werden und dass Sie sehr gut verstehen, wie die Beziehung zwischen Chan GPT, dem liebenswerten Figmamk aufgebaut ist und wie gut Sie mit all diesen drei Tools kommunizieren können , um sowohl fantastische Prototypen als auch tatsächliche Produkte zu entwickeln Wir sehen uns in der nächsten Vorlesung. 17. GLÜCKWUNSCH!SIE HABEN UNENDLICHE HEBELWIRKUNG FREIGESCHALTET. GESTALTEN SIE DIE ZUKUNFT!: Und einfach so bauen Sie mithilfe von KI im Handumdrehen einen funktionierenden Prototyp. Das ist der neue Standard. Sie wissen jetzt, wie Sie KI informieren, Benutzerabläufe strukturieren und Ideen schnell in greifbare, testbare Produkte Egal, ob Sie sich auf einen Pitch vorbereiten, Design unterstützen oder eine Idee validieren, dieser Workflow verschafft Ihnen Sie verwenden nicht nur Tools. Sie verwenden Strategie. Viel Spaß beim Prototyping und bis bald. Tolle Arbeit.