Ein Designer + KI. Hunderte von Deliverables. — Vincent Wendy, AI Engineer
AAI Engineer
컴퓨터/소프트웨어마케팅/광고경영/리더십
스크립트
00:00:00Hallo zusammen, ich hoffe, ihr habt eine gute Zeit auf der Konferenz. Bevor wir
00:00:19anfangen, wie viele von euch sind eigentlich Designer, also Produktdesigner? Hey, eine
00:00:24Hand, und noch eine, okay. Und wie viele – ich nehme an, der Rest von euch sind Ingenieure, ist das
00:00:32richtig? Ja, ziemlich genau. Okay, der heutige Vortrag ist also kein technischer Vortrag, sondern eher ein
00:00:40Erfahrungsbericht aus der Praxis: wie ich das Design für AI Engineer, diese Konferenz und unsere
00:00:46anderen vergangenen Konferenzen erstellt habe und wie KI mir dabei geholfen hat. Der Titel lautet heute also:
00:00:54Ein Designer plus KI, das bin ich als Designer, und Hunderte von Deliverables. Lasst uns
00:01:00beginnen. Mein Name ist Vincent Wendy, ich bin Senior Creative Designer bei AI Engineer, und
00:01:07bei AI Engineer sind wir ein sehr kleines Team. Wir haben zurzeit nur etwa 12 bis 15 Leute,
00:01:15und jeder macht sein eigenes Zeug. Ich denke, KI war eine
00:01:24wirklich hilfreiche Möglichkeit, damit jeder alles machen kann. Bei einer Veranstaltung dieser Größenordnung
00:01:33haben wir natürlich ein Problem, oder? Und dieses Problem ist das Skalierungsproblem, oder nennen wir es die Herausforderungen,
00:01:40und wie man sie überwindet? Im Grunde durch Automatisierung, und darauf kommen wir im späteren Teil dieses Vortrags. Als ich diesen Vortrag vorbereitete, haben wir nur
00:01:536.000 Teilnehmer erwartet, und jetzt sind es 7.000 – nun, gut für uns. Dazu haben wir 140 Sponsoren, mehr als 140 Sponsoren, über 300 Speaker, über 600 Sessions und einen Designer.
00:02:10Und jeder braucht jedes Design, richtig? Jedes einzelne Ding braucht Design. Sponsoren brauchen Assets, Speaker brauchen Grafiken,
00:02:19man braucht Beschilderung, damit man sich nicht verläuft, und genau das ist es, was wir tun, was ich tue. Von Stickern – mögt ihr euer Swag, eure Sticker?
00:02:31Nun, ich hoffe schon, denn dieses Design habe ich auch erstellt – bis hin zu Landingpages, Speaker-Ankündigungen, Track-Maskottchen, all dem Zeug, das man sieht,
00:02:41all das, was ihr hier seht, von physischer Beschilderung bis hin zu digitaler Beschilderung, Landingpages, einfach alles ist
00:02:51ein Deliverable. Und 1.000 Details bedeuten 1.000 Wege zu scheitern, oder? Denn ein fehlendes Sponsorenlogo wird ein riesiges Problem,
00:03:04und Speaker mit einem falschen Zeitplan sind ebenfalls ein riesiges Problem, richtig? Und es scheint unmöglich, so viele Arten von Deliverables zu bewältigen, aber ja – trefft mein Design-Team.
00:03:16Das sind ich, Devin, GPT und Figma. Und im Moment sind wir an dem Punkt, an dem Werkzeuge kein Problem mehr sind,
00:03:31sondern das Haben eines echten Problems ist unser Vorteil. Wenn mich also zum Beispiel jemand fragt: „Was hat dich beim Design für AI Engineer inspiriert?“
00:03:41wusste ich damals die Antwort nicht, aber nachdem ich darüber nachgedacht habe, ist es tatsächlich das Problem,
00:03:46das mich dazu inspiriert hat, für diesen AI Engineer zu designen, und darauf kommen wir im späteren Teil dieses Vortrags.
00:03:53Habt ihr also den Vortrag von Simon Willison gesehen, so im Jahr 2025?
00:04:00Ja.
00:04:01Ja, und das ist ziemlich interessant, oder? Er bat jeden LLM, eine Vektorgrafik zu erstellen,
00:04:11und zwar im Grunde einen Pelikan, der Fahrrad fährt. Das dient im Wesentlichen zum Testen,
00:04:16und ich habe es noch einmal getestet, und das Basismodell macht das immer noch,
00:04:20und es ist für mich als Designer nicht brauchbar. Aber als Designer müssen wir über den Tellerrand blicken,
00:04:26und wir könnten GPT einfach bitten, ein Rasterbild zu erstellen, wie etwa eine PNG-Datei von einem Pelikan auf einem Fahrrad,
00:04:33und dann kann ich es in Figma vektorisieren, und wir können es jetzt ausliefern.
00:04:37Wir müssen hier also über den Tellerrand blicken, ungeachtet der Fähigkeiten des LLMs.
00:04:44Wie löst man also dieses Skalierungsproblem?
00:04:52Im Grunde durch fünf Dinge: erstens das Fundament, wiederverwendbare Designs,
00:04:56automatisierte Workflows, validierte Ergebnisse und auch das Beseitigen von Reibungspunkten.
00:05:00Das Fundament ist definitiv der Kernbereich, den wir richtig aufsetzen müssen,
00:05:06wie das Design-System, Typografie, Farben, Komponenten und anderes Zeug.
00:05:11Und sobald das steht – zum Beispiel wenn wir die Website erstellen –,
00:05:17ist alles innerhalb dieser Struktur eingerichtet. Und ja, das ist nur ein Beispiel.
00:05:22Wir haben die Farben, Primärfarben und dann auch die Akzentfarben,
00:05:26die Typografie und auch den Text und all das andere Zeug.
00:05:31Und seid ihr auch – seid ihr mit Atomic Design vertraut?
00:05:37Also ja, mein früherer Hintergrund ist Produktdesigner,
00:05:41deshalb bin ich sehr vertraut mit Konzepten wie benutzerzentriertem Design
00:05:46und auch Atomic Design, bei dem man die kleinstmöglichen Teile erstellt
00:05:50und sie dann wie Legosteine kombinieren,
00:05:53schließlich zu Deliverables. Und das ist in meinem heutigen Job äußerst nützlich.
00:06:02Sobald wir all diese Grundlagen geschaffen haben, müssen wir im Grunde –
00:06:09nutzen wir zum Beispiel Devin sehr viel. Im Büro – jeder benutzt Devin.
00:06:14Jeder, sozusagen, missbraucht Devin zum Beispiel. Ja.
00:06:18In diesem Fall sage ich dann einfach: „Hey, wir verwenden diese Desktop-Typografie
00:06:25und diese Mobil-Typografie“, weil wir wissen,
00:06:29dass Claude oder andere LLMs es lieben, ein paar zufällige Schriftgrößen reinzuwerfen, oder?
00:06:35Und wenn wir das nicht definieren, liefern sie nur Schrott ab, so wie den vorherigen Schrott.
00:06:41Und ja, Typografie, Farbe und Zeug, und dann kommen wir zu wiederverwendbarem Design.
00:06:50Wenn wir es also richtig einrichten, sodass die Website das Branding widerspiegelt,
00:06:57können alle anderen Teams bei AI Engineer – zum Beispiel die Marketing-Teams –
00:07:02im Grunde alles erstellen. Sie können basierend darauf E-Mail-Designs erstellen.
00:07:08Sie können Flyer oder Dokumente allein auf Grundlage der Website erstellen,
00:07:13weil es bereits definiert ist – also von Anfang an festgelegt wurde.
00:07:18Und ja, sobald man das Design hat, kann man es einfach wiederholen.
00:07:24Das Maskottchen hat zum Beispiel fast das gleiche Design
00:07:28und wird immer wieder verwendet. Und wenn man diese Dinge erst einmal definiert hat,
00:07:34kann man im Grunde ein Design erstellen, das für alles funktioniert.
00:07:38Und das ist der Teil, über den ich am liebsten sprechen möchte,
00:07:41nämlich die automatisierten Workflows.
00:07:43Früher, wenn man zum Beispiel einen Blick aus dem Raum wirft,
00:07:48gab es da einen Zeitplan, richtig? Den Zeitplan für jeden Einzelnen.
00:07:52Früher haben wir das manuell in Figma gemacht, aber jetzt nutzen wir dafür Devin.
00:07:58Und ich zeige es euch mal.
00:08:02Hey.
00:08:04Im Moment holen wir uns also einfach die neuesten Daten.
00:08:08Ich frage Devin einfach: „Hey, ich möchte diesen Raum auf dieser Basis.“
00:08:14Und dann können wir es einfach exportieren, als PNG herunterladen,
00:08:18und die Daten sind akkurat, und dann können wir es einfach auf den USB-Stick ziehen
00:08:22und auf den Bildschirm bringen.
00:08:25Das war vorher quasi unmöglich,
00:08:28weil die Reibungsverluste einfach zu groß waren
00:08:31zwischen den Designern und den Entwicklern.
00:08:33Wir konnten die Dinge nicht pixelgenau hinbekommen,
00:08:35denn sobald wir den Designern sagten –
00:08:38Entschuldigung, den Ingenieuren, die das Design erstellt haben, zum Beispiel:
00:08:40„Hey, ich muss das so geliefert haben“ –
00:08:44dann haben sie es nicht pixelgenau umgesetzt.
00:08:46Es gab eine Menge Feedback, richtig?
00:08:49Aber mit Devin sagen wir einfach:
00:08:52„Hey, kannst du das genauer machen?“
00:08:54Wir können es einfach mit MCP verbinden,
00:08:58und wenn es nicht funktioniert,
00:09:00können wir immer ein Spezifikationsblatt oder so etwas bereitstellen
00:09:02oder etwas, das definiert, wie der Abstand sein soll,
00:09:06wie groß die Schrift sein soll und so weiter.
00:09:11Und das machen wir für die Speaker-Ankündigungen.
00:09:14Wir haben also über 300 Speaker,
00:09:20und es ist unmöglich für mich, das einzeln zu handhaben, richtig?
00:09:22Deshalb haben wir dieses Ding erstellt, das heißt –
00:09:26auf das ihr auch zugreifen könnt, für die Speaker-Ankündigung,
00:09:29und ihr könnt es auch selbst ausprobieren, wie das hier zum Beispiel.
00:09:32Ihr könnt es hier auswählen,
00:09:38und dann könnt ihr auch euren Namen ändern.
00:09:40Na ja.
00:09:42Zum Beispiel hier könnt ihr den Namen in alles ändern, was ihr wollt.
00:09:44Und wir haben auch den Querformat-Modus,
00:09:48der ebenfalls geladen werden kann.
00:09:51Wenn der Speaker auch ein Porträtfoto und alle Details hat,
00:09:53wird es automatisch exportiert.
00:09:56Und wir haben auch die Sammelkarten,
00:09:59die überraschenderweise ziemlich beliebt sind.
00:10:01Und wir haben ein anderes Design-Thema.
00:10:05Und das ist alles pixelgenau, richtig?
00:10:07Zum Beispiel dieses hier.
00:10:11Das ist von TBPN inspiriert, also ja.
00:10:14Und wie liefere ich das pixelgenau aus?
00:10:19Schauen wir uns das genauer an.
00:10:23Der Prozess sieht also so aus: Früher, als ich meine Karriere
00:10:25als Produktdesigner begann, war das eben noch so:
00:10:34Okay, wir müssen recherchieren.
00:10:37Wir müssen Produkte bauen, ganz im Sinne von Design Thinking, richtig?
00:10:39Und dann Feedbackschleifen und so weiter.
00:10:42Aber für mich ist das inzwischen einfach veraltet.
00:10:45In meinem Fall gehen wir einfach zu Slack, Figma,
00:10:49und schicken es dann zurück zu Slack, weil unser Devin in Slack lebt.
00:10:54Und dann liefern wir all die Dinge aus, die er braucht.
00:10:58Wenn wir zum Beispiel MCP anschließen können oder auch das Spezifikationsdokument,
00:11:01wie zum Beispiel dieses Spezifikationsblatt hier,
00:11:07das ist ein Plugin in Figma, falls es euch interessiert.
00:11:10Es ist kostenlos.
00:11:15Und es fügt im Grunde Anmerkungen zum PDF hinzu.
00:11:15Und ja, Designer benennen ihre Ebenen ja nie.
00:11:20Das ist also nur so ein zufälliger Frame 3, Frame 4.
00:11:24Aber das LLM versteht es.
00:11:29Und es definiert im Grunde all diese Abstände, all diese Schriftgrößen
00:11:31und dann all die Farben und so weiter.
00:11:37Das wird euch definitiv dabei helfen, ein pixelgenaues Produkt zu entwickeln.
00:11:40Das wird dir definitiv helfen, ein pixelperfektes Produkt zu entwickeln.
00:11:44Und wir haben auch erst kürzlich, wie heute, Fotos,
00:11:51für die wir das Miniaturbild des jeweiligen Sprechers erstellen müssen, oder?
00:11:55Und dann haben wir Devin gefragt: Hey, wer ist diese Person?
00:11:58Und ja, es hat so etwas getan wie...
00:12:01Ich mache sozusagen eine Art Tinder-mäßige,
00:12:06weißt du, Erkennung, ob das dieselbe Person ist oder nicht.
00:12:09Und ich denke, das ist ziemlich genau.
00:12:11Es ist Jason Liu.
00:12:12Ja.
00:12:13Und dann können wir das nutzen, zum Beispiel für den Kontext.
00:12:18Früher, wenn wir das Miniaturbild erstellt haben,
00:12:19mussten wir alle Codes durchsuchen, die der Fotograf hatte,
00:12:23und sie einzeln durchgehen, vielleicht nach Zeit, wenn möglich.
00:12:27Aber jetzt können wir einfach sagen: Oh, das ist Jason Liu.
00:12:30Lade das Foto herunter.
00:12:31Und dann können wir es in das Miniaturbild einfügen, oder?
00:12:34Und das ist ziemlich erstaunlich.
00:12:36Ich meine, die Welt, in der wir im Moment leben, ist eigentlich...
00:12:40der Stand für mich als Designer ist bereits auf dem Höhepunkt.
00:12:43Denn was kann man sich sonst noch wünschen, oder?
00:12:48Ich meine, wir haben bereits Dinge zum Automatisieren.
00:12:50Wir haben bereits Dinge, um das Design schnell zu erstellen.
00:12:54Im Grunde brauchst du nur ein Problem.
00:12:56Denn sobald du ein Problem hast, das es wert ist, gelöst zu werden,
00:12:59kannst du im Grunde alles lösen.
00:13:03Und zurück zu meinem Vortrag.
00:13:04Ich bin so vom Thema abgekommen.
00:13:06Ja.
00:13:07Und dann – ja.
00:13:09Und das ist auch das erstaunliche Ding, das wir testen.
00:13:11Wie ihr wisst, haben wir Hunderte von Sponsoren, oder?
00:13:16Über 140 Stück.
00:13:18Und wie ihr im Foyer sehen könnt,
00:13:21haben wir das Banner mit all den Sponsoren.
00:13:24Und ich sage im Grunde zu Devin: Hi, könntest du vergleichen...
00:13:29könntest du prüfen, ob in dieser Grafik irgendwelche Logos fehlen?
00:13:33Und die Genauigkeit liegt basierend auf meinem Test bei 100%.
00:13:38Was ziemlich verrückt ist.
00:13:40Und wir nutzen dasselbe für das T-Shirt, das ihr als Werbegeschenk erhalten habt.
00:13:48Und überraschenderweise weiß Devin, wie man Dinge visualisiert, oder?
00:13:54Wie man Dinge visuell erkennt.
00:13:56Und das ist sehr überraschend.
00:13:58Denn als Mensch machen wir eben Fehler.
00:14:02Oh, es stellt sich heraus, dass ein kleiner Dienst fehlt.
00:14:05Aber mit dieser Art von Sache können wir es eben doppelt überprüfen.
00:14:09Mensch plus KI, kombiniert.
00:14:13Nun, damit hat man sein eigenes QA-Team.
00:14:15Und Reibungsverluste beseitigen.
00:14:17Das ist also einfach die Art zu denken.
00:14:21Als Designer müssen wir wie ein Nutzer denken, nicht wie ein Designer.
00:14:26Richtig?
00:14:27Denn jeder Nutzer hat seine Bedürfnisse.
00:14:29Man kann zum Beispiel hier den Hallenplan ablaufen.
00:14:33Ich stelle mir also im Grunde vor, ich wäre ein Teilnehmer, der zur Registrierung geht,
00:14:39zum...
00:14:41die Wegeleitung und den QR-Code sieht und all diese Dinge.
00:14:46Im Grunde muss alles miteinander verbunden sein, damit ihr euch nicht verirt
00:14:50und wisst, wie ihr eure Räume und den Rest findet.
00:14:55Und die echte Arbeit besteht darin, Ausnahmen zu handhaben.
00:15:00Zum Beispiel – oh, ich habe – ja.
00:15:03Zum Beispiel gibt es eine Planänderung, richtig?
00:15:09Und als wir dieses Ding erstellt haben, hatte es keinen Bearbeitungsbutton.
00:15:13Und dann hieß es eines Morgens: Hey, dieser Zeitplan muss aktualisiert werden.
00:15:19Und wir haben diese Bearbeitungsbuttons nicht.
00:15:21Ich konnte einfach Devin fragen: Hey, kannst du mir einen Bearbeitungsbutton einfügen?
00:15:25Und das hat er gemacht.
00:15:26Wir können jetzt also alles ändern und es als PNG ausgeben und wieder auf den Bildschirm laden,
00:15:32was ziemlich praktisch ist, oder?
00:15:34Und diese Ausnahmen, nicht wahr, das war früher nicht möglich, als wir alles manuell machen mussten.
00:15:41Aber jetzt ist es einfach leichter geworden.
00:15:43Die Erkenntnis hier ist also, dass man, um das Skalierungsproblem zu lösen, tatsächlich im Kleinem denken muss.
00:15:51An all die kleinsten Dinge denken, die möglich sind.
00:15:53An alles denken, was schiefgehen kann und schiefgehen wird, und versuchen, es im Vorfeld zu lösen.
00:15:59Und auch, ja, im Grunde kann man im Moment alles automatisieren.
00:16:04Und zu diesem Zeitpunkt ein Problem zu haben, wird euch tatsächlich zugutekommen,
00:16:11weil es euch hilft, ein besseres Produkt auszuliefern und Dinge zu liefern, die gut sind.
00:16:18Und ja, ich denke, das ist alles, was ich teilen kann.
00:16:20Ich hoffe, mein Vortrag war von Nutzen für euch.
00:16:23Und ja, das war's.
00:16:26Danke euch.
00:16:29Vielen Dank.
커뮤니티 글
아직 글이 없습니다. 이 영상에 대한 첫 번째 글을 작성해 보세요!
이 영상에 대해 글쓰기