Design in der Geschwindigkeit von Adjektiven — Paul Bakaus, Renaissance Geek, Inc.
AAI Engineer
Computing/SoftwareSmall Business/StartupsPhotography/Art
Transcript
00:00:00Fangen wir an. Hallo zusammen, danke fürs Kommen. Ich heiße Paul und werde versuchen,
00:00:21euch vor dem Nachmittagstief zu bewahren. Mal sehen, ob uns das gelingt. Okay, dieser Vortrag, dieser kalte
00:00:29Einstieg hier, wird viel verständlicher, wenn ihr wisst, was Impeccable ist. Wenn ihr
00:00:35es noch nicht kennt: Es ist ein Design-Skill, der eure Coding-Umgebung in einen besseren
00:00:39Designer verwandelt – und hoffentlich auch euch zu besseren Designern macht. Ihr könnt es ausprobieren.
00:00:43Es funktioniert in allen Umgebungen wie Cloud Code, GitHub Copilot, Cursor, Codex usw. Und dieser Vortrag
00:00:51handelt eigentlich von meinem Ansatz beim Bauen dieses Tools, und weniger von dem Tool selbst. Aber fangen wir
00:00:59mal mit einer ganz typischen Website an. Das hier ist eine absichtlich sehr einfache Website, und
00:01:05ich möchte euch das als Kontext für das geben, was ich euch als Nächstes zeige. Also, wisst ihr, es ist
00:01:11eine ganz okaye Website. Nicht überragend, ziemlich fad, aber immerhin gibt es ein bisschen Farbe und so.
00:01:19Und hier ist nun der Befehl: „Mach es fetter, mach den Workflow-Bereich fetter mit Impeccable.“ Das ist also mit installiertem Impeccable. Nun gibt es da... es ist nicht perfekt. Es gibt ein paar Probleme dabei. Zum Beispiel die Abschnittsnummern, die ihr da seht – das ist ein typisches Merkmal von KI-Schleifen,
00:01:41die GPT einfach liebt. Und Claude liebt das übrigens auch. Und manchmal schleicht
00:01:48sich das ein. Ich würde also nicht sagen, dass das perfekt ist, aber ich finde, es ist auf jeden Fall fetter als vorher.
00:01:54Viele Leute installieren Impeccable, probieren es aus und fragen mich dann: „Hm, ist das vielleicht nur Placebo? Vielleicht ist das Modell ja von Haus aus gut genug, oder?“ Man weiß nicht genau, ob es wirklich funktioniert. Vergleichen wir es also hiermit: Das ist exakt dasselbe Projekt, GPT 5.5 auf „extra hoch“, genau derselbe Prompt ohne Impeccable.
00:02:16Es gibt also einen leichten Unterschied, würde ich sagen, aber urteilt selbst. Das Vorher und Nachher unterscheidet sich ziemlich, und ich werde darüber sprechen, warum das so ist und welcher Ansatz dahintersteckt.
00:02:35Es geht um Design in der Geschwindigkeit von Adjektiven – um den Elefanten im Raum anzusprechen: Es sind nicht nur Adjektive, sondern auch Verben.
00:02:44Aber einige von ihnen sind eben Adjektive.
00:02:49Zuallererst verschwimmen die Rollen von Ingenieuren und Designern immer mehr. Es gibt heute mehr Design-Engineers als je zuvor. Designer schreiben Code, Ingenieure entwerfen Designs und umgekehrt.
00:03:02Einige der besten Rückmeldungen, die ich von Leuten bekomme, die zu mir kommen, lauten: „Impeccable gibt uns eine gemeinsame Designsprache, mit der jetzt alle kommunizieren können.“
00:03:11Aber im Grunde prallen diese Welten meiner Meinung nach aufeinander, und der klassische Übergabeprozess ist irgendwie kaputt. Dieser Wasserfallprozess – ich fange mit Design an, vielleicht mit dem „Was“ auf Produktmanagement-Seite, dann geht es ins Design, gefolgt von einer Übergabe und Feedbackschleifen, und am Ende baut es der Engineer –
00:03:30das so existiert einfach nicht mehr. Ich weiß nicht, wie es euch geht, aber ich habe das Gefühl, das bricht in kleinen wie großen Unternehmen gerade rasant zusammen.
00:03:41Und wenn es um die eigentliche Designarbeit geht, gibt es im Moment gefühlt zwei Welten, in denen man sich bewegen kann.
00:03:48Entweder man nutzt direkte Manipulation im Pixelraum, das heißt, man ist in Figma und passt Ränder, Abstände oder was auch immer an, oder man ist in Webflow oder einem anderen Tool, wo man das Endergebnis oder das Design direkt bearbeitet.
00:04:04Das ist ja schön und gut, aber dann hat man das Gefühl, abgehängt zu werden, weil alle anderen agentisch unterwegs sind und komplett mit Schleifen eskalieren, richtig?
00:04:13Also wechselt man zum anderen Extrem: Man sagt einfach zu seinem Agenten: „Bitte designe das für mich“ oder „Bau das mal.“
00:04:18Aber für mich gibt es da einen Mittelweg, den wir noch nicht ausreichend erforscht haben.
00:04:24Wie sieht das exakte Maß an Kontrolle aus? Wie können wir den Menschen genau zum richtigen Zeitpunkt in die Schleife einbinden?
00:04:32Da kam mir dieser Gedanke. Es gab vor einiger Zeit einen sehr beliebten Tweet.
00:04:38Einen Diff mit Opus zentrieren – ja, nicht gerade die beste Verwendung von Opus.
00:04:44Aber es verdeutlicht dieses Problem ganz gut: Wann setzen wir welches Tool ein?
00:04:51Wann ist welches Tool für welche Aufgabe geeignet?
00:04:56Meiner Meinung nach ist die direkte Manipulation von Abständen, Rändern, Spacing und so weiter für die meiste Arbeit im Moment
00:05:03auf einer viel zu niedrigen Ebene angesiedelt.
00:05:08Wenn man andererseits komplett agentisch vorgeht, bekommt man Webseiten wie diese hier.
00:05:15So etwas hätte man vielleicht noch 2022 bekommen.
00:05:17Jeder hier kann die typischen Muster von KI-Einheitsbrei erkennen.
00:05:21Aber die lila Verläufe gehen inzwischen weit darüber hinaus.
00:05:24Bei den meisten Front-End-Modellen gibt es keine lila Verläufe mehr.
00:05:28Jetzt bekommen wir das hier, und es trägt quasi einen anderen Anzug, wie Claude sagen würde.
00:05:33Aber im Grunde ist es auch nur ein Einheitsbrei.
00:05:37Es ist einfach ein sich ständig bewegendes Ziel.
00:05:39Jetzt haben wir – ich nenne es Claude-Beige –, wir haben diese Instrumental-Serifen-Schriften, wir haben Kursivschrift.
00:05:44Das ist nicht unbedingt ein schlechtes Design.
00:05:46Nur sieht eben alles, was aus Claude-Design hervorgeht, genau so aus.
00:05:49Und wenn alles gleich aussieht, bekommt man quasi das algorithmische Uniqlo, wie ich es nenne.
00:05:55Also auch nicht wirklich toll.
00:05:57Hier ist meine erste kontroverse These für die heutige Session.
00:06:01Man kann Design nicht in einem einzigen Durchlauf erledigen.
00:06:04Viele wollen das zwar, und vielleicht kommen wir da irgendwann auch hin.
00:06:08Ich halte es zum aktuellen Zeitpunkt einfach für nicht möglich.
00:06:11Vielleicht sogar überhaupt nie.
00:06:13Um etwas zu bauen, das wirklich großartig aussieht, sich gut anfühlt und effektives Design darstellt,
00:06:19braucht man etwas Kontextreiches, das davon geprägt ist, was man zu tun versucht,
00:06:26wer die Zielgruppe ist und was man erschaffen möchte.
00:06:28Außerdem muss es mehrstufig sein.
00:06:31Man muss sein Design iterativ weiterentwickeln.
00:06:33Selbst wenn man Solopreneur ist – und erst recht, wenn man keiner ist –,
00:06:38hat man vielleicht verschiedene Leute mit unterschiedlichen Meinungen.
00:06:40Benutzer haben Meinungen.
00:06:41Design ist nun mal chaotisch.
00:06:42Es ist ein Prozess.
00:06:43Das einfach wegzuwünschen und zu sagen: „Agent, löse dieses Problem für mich“,
00:06:48wird das Problem leider nicht lösen.
00:06:51Ein weiteres Problem ist: Wenn man die Sprache des Designs nicht beherrscht
00:06:57oder wenn die Stakeholder die Sprache des Designs nicht kennen,
00:07:00wird das Ganze sehr schnell sehr frustrierend.
00:07:02Wer schon mal etwas designt hat, kennt diese Art von Erfahrung vermutlich.
00:07:06Und dann baut sich innerlich so ein Gefühl von „Mhm...“ auf.
00:07:11Und irgendwann denkt man sich: „Ääh...“
00:07:16Man muss sich also zuerst fragen: Was ist das emotionale Terrain?
00:07:20Wie soll sich das auf gar keinen Fall anfühlen?
00:07:22Was ist die Referenz?
00:07:23Wer ist die Zielgruppe?
00:07:24Das sind alles äußerst wichtige Fragen, die geklärt werden müssen.
00:07:27Man kann schließlich auch zu keinem menschlichen Designstudio gehen – selbst zum besten der Welt –,
00:07:33sich vor einen Design Director stellen und sagen: „Wisst ihr was?
00:07:36Ich möchte ein Design für meine Marke.“
00:07:38Und der Design Director nickt,
00:07:39sagt: „Verstanden“
00:07:41und geht wieder weg.
00:07:42Das macht absolut keinen Sinn.
00:07:44Die müssen logischerweise erst herausfinden, was man eigentlich aufbauen will
00:07:47und was man damit bezwecken möchte.
00:07:50Wichtig ist in diesem Beispiel – selbst bei der Version 2026 von KI-Einheitsbrei,
00:07:55also einem schnell per Vibe-Coding hingeworfenen Pitch –, dass hier absolut niemand irgendetwas entschieden hat.
00:08:00Man hat das einfach in einem Durchlauf generieren lassen.
00:08:02Auf dieser Seite hat niemand eine bewusste Entscheidung getroffen.
00:08:05Das ist vielleicht technisch kompetent, aber völlig inhaltsleer.
00:08:10Meine These, die ich hier vertrete und die ich in den letzten Monaten zu entwickeln versucht habe,
00:08:17ist ein Tool, das genau das Maß an Kontrolle bietet, das man braucht, um den Agenten in die richtige Richtung zu steuern –
00:08:23und zwar mit Adjektiven und Verben.
00:08:26Genau von diesen Arten von Wörtern spreche ich.
00:08:29Ich spreche von Wörtern wie: Mach das fetter, mach das dezentraler.
00:08:32Kondensiere das.
00:08:33Also im Grunde Vereinfachung.
00:08:35Schleife das.
00:08:36Mach es dichter oder verstaerke das.
00:08:39„Verstärken“ würde zum Beispiel bedeuten, sicherzustellen, dass dieses Design auf ganzer Linie funktioniert.
00:08:44Vielleicht ist die Performance auf bestimmten Geräten schlecht.
00:08:46Vielleicht ist es nicht responsive.
00:08:48Das sind also Wörter, die wir in der Welt des Designs verwenden.
00:08:54Und mir ist aufgefallen, wenn man zwei Leute dabei beobachtet, wie sie genau dieselbe Aufgabe versuchen,
00:08:58wobei der eine ein Engineer ist, der noch nie wirklich etwas mit Design zu tun hatte,
00:09:01und der andere ein Designer ist:
00:09:03Es gibt einen gewaltigen Unterschied im Ergebnis, selbst wenn sie dasselbe Modell, dieselbe Umgebung und alles Gleiche nutzen,
00:09:08und zwar allein aufgrund der Sprache, die sie verwenden.
00:09:11Ich habe also versucht, diese Sprache quasi in einen Skill
00:09:18und in ein System zu komprimieren, um sich besser ausdrücken zu können.
00:09:22So kann man zum Beispiel hier eine Baseline haben,
00:09:27aber dann macht man es fetter,
00:09:28und der Agent weiß tatsächlich, was „fetter“ in eurem Kontext bedeutet.
00:09:32Man macht es dezenter.
00:09:33Er weiß, was das bedeutet.
00:09:34Man kondensiert es, und er weiß, was das bedeutet.
00:09:36Aber wie genau soll es fetter sein?
00:09:42Was bedeutet „fetter“ im Kontext eures Projekts?
00:09:44Das ist eine wirklich wichtige Frage,
00:09:46denn, wie ihr zu Beginn der Demo sehen konntet,
00:09:49beim kalten Einstieg,
00:09:51wenn man einfach zu GPT, Claude oder wem auch immer sagt: „Mach das fetter“,
00:09:55hat das Modell keine Ahnung, was man damit meint.
00:09:57Es hat zwar seinen eigenen Referenzrahmen dafür, was „fetter“ bedeuten könnte,
00:10:01aber es wird tun, was es will, oder?
00:10:03Es erfindet neue Farben.
00:10:05Es erfindet neue Farben.
00:10:06Es erfindet neue Verläufe.
00:10:07Es wird – ich meine, es spielt keine Rolle.
00:10:10Was es bei Impeccable tatsächlich bedeutet: keine Verläufe, kein Glasmorphismus, kein Neon,
00:10:17sondern stattdessen Hierarchie, Skalierung, prägnante Typografie,
00:10:20also Dinge, die dein Designsystem nicht zerstören
00:10:24und die Aufmerksamkeit, die der Nutzer darauf lenken soll, angemessen erhöhen.
00:10:29Und das ist ein echter Satz aus der Datei, die geladen wird, wenn du „fetter“ und „makellos“ sagst.
00:10:38Zeig jemandem deine Arbeit und sag: Hey, ich mache das fetter.
00:10:42Ich mache das fetter.
00:10:43Wenn sie dir glauben, hast du versagt.
00:10:45Das ist also etwas, das wir den Agenten tatsächlich selbst auftragen.
00:10:49Und oft reflektiert der Agent dann und denkt sich so: Ähm, ich weiß nicht.
00:10:54Ich glaube, ich habe hier ein bisschen schlechte Arbeit geleistet.
00:10:57Ein Adjektiv ist ein leichtes Wort.
00:11:00Und ein leichtes Wort – was für ein deutscher Begriff, und Matt Pocock hat kürzlich auch darüber gesprochen,
00:11:06der ebenfalls wirklich ausgezeichnete Skills macht.
00:11:08Und das ist also von einem seiner Tweets gestohlen.
00:11:11Aber ich finde wirklich, es ergibt sehr viel Sinn.
00:11:15Das sind Wörter, die du im Grunde mit Bedeutung füllst, die du mit Bedeutung durchtränkst,
00:11:21und sie bedeuten etwas.
00:11:22Sie bedeuten für das Modell bereits etwas,
00:11:24aber dann übersetzt du das in den Bereich, der dich interessiert.
00:11:29Und die richtige Flughöhe verschiebt sich wirklich.
00:11:34Nun, ich glaube nicht, dass man auf dieser Flughöhe irgendwelche Probleme lösen kann.
00:11:39Das ist auch super wichtig.
00:11:40Es gibt immer noch Raum für den allerersten Anfang.
00:11:43Zum Beispiel, wenn du einfach nur explorative Arbeit willst und etwas auf den Bildschirm bekommen möchtest,
00:11:47oder wenn du einfach den letzten Schliff haben willst.
00:11:50Ich glaube nicht, dass KI im Moment gut genug ist, um Menschen für die letzten 5 %, 10 %, vielleicht sogar 20 % der Arbeit zu ersetzen,
00:11:57um es von gut zu großartig zu machen.
00:12:00Aber sie macht es tatsächlich besser.
00:12:04Nun, ich baue seit über 20 Jahren Tools.
00:12:07Damit verrate ich wohl mein Alter.
00:12:10Aber wann immer ich ein Tool gebaut habe, bilde ich zuerst den Workflow ab.
00:12:13Ich überlege mir, wie der eigentliche Workflow des Zielnutzers aussieht, dem ich helfen möchte.
00:12:17Und der Workflow des Designs ist nicht linear.
00:12:20Er ist unübersichtlich.
00:12:21Er hat viele verschiedene Phasen.
00:12:23Es sind verschiedene Leute beteiligt.
00:12:25Und deshalb habe ich jeden Teil des Prozesses abgebildet und mir überlegt:
00:12:28Nun, was sind die Einstiegspunkte entlang dieses Weges?
00:12:31Und wie können wir entlang dieses Weges helfen?
00:12:34Und so fängst du mit der Initialisierung an, mit dem Formgebungsprozess des Designs.
00:12:38Du gehst über zum Ausarbeiten, zum Iterieren, mit all diesen Verben und Adjektiven,
00:12:44und dann zu der eigentlichen verfestigten und polierten Phase.
00:12:46Und schließlich bringst du es irgendwie zu deinem Designsystem zurück.
00:12:49Du machst etwas technisches Cleanup, etwas Design-Cleanup.
00:12:53Nun, hier ist ein Beispiel für einen Befehl, bei dem ich mir eigentlich nicht sicher war, ob ich ihn veröffentlichen soll.
00:12:58Und er heißt Overdrive.
00:13:01Ich habe diesen Befehl in Impeccable im Grunde gebaut, um etwas zu kreieren, das völlig übertrieben ist.
00:13:08Und es war irgendwie so halb als Scherz gemeint, vielleicht?
00:13:11Aber die Leute sind absolut verrückt danach, nach diesem Ding.
00:13:15Und sie lieben es.
00:13:16Und das ist also nur ein Beispiel dafür – ich meine, das ist nicht in einem Zug erstellt.
00:13:20Das ist eine Art realistischer Ereignishorizont-Shader, den ich für meine Shader-Bibliothek Radiant Shaders gebaut habe.
00:13:28Aber ich habe dafür tatsächlich den Overdrive-Befehl verwendet, um es noch mehr zu übertreiben.
00:13:33Und es lächerlicher zu machen.
00:13:34Manchmal komme ich also auf solche Befehle, bei denen ich mir eigentlich nicht sicher bin.
00:13:38Und ich teste sie mit der Community.
00:13:39Und sobald es ankommt, merke ich: Okay, gut, es gibt noch mehr Leute, die Freude daran haben.
00:13:44Oh, los geht's.
00:13:49Los geht's.
00:13:50Okay.
00:13:51Ein Adjektiv ohne etwas dahinter ist einfach nur ein netterer Prompt.
00:13:54Du musst dem Agenten also wirklich sagen, was du mit dem Wort meinst, das du verwendest.
00:13:59Es hat in seinen Trainingsmaterialien so viele verschiedene Bedeutungen, dass du es ihm wirklich sagen musst.
00:14:05Nun, hier ist noch etwas.
00:14:08Ich habe so viele Anfragen für eine automatische Art der Verwendung von Impeccable erhalten.
00:14:14So viele.
00:14:16Es ist so frustrierend.
00:14:17So nach dem Motto: Mindestens einmal die Woche twittert mich jemand an und sagt, weißt du, was cool wäre?
00:14:21Lass Impeccable einfach die ganze Arbeit alleine machen.
00:14:24Ich muss mich über keine Befehle mehr entscheiden.
00:14:26Das ist nicht der Punkt.
00:14:27Der Punkt ist, dir eine Möglichkeit zu geben, zu steuern, worauf du am Ende hinauswillst.
00:14:31Es wird nie ein Tool sein, um Design in einem Zug zu machen.
00:14:34Das ist nicht die Absicht.
00:14:36Und ich werde niemals – ich meine, da ist gerade ein Pull Request offen, den ich deshalb nicht schließen werde.
00:14:41Es gibt kein Auto und es wird kein Auto geben.
00:14:46Meiner Meinung nach – und das ist für einige der nächsten Redner vielleicht etwas unangenehm –, aber ich glaube, Geschmack kann man nicht verstärken.
00:14:54Entschuldigung, ich glaube, Geschmack kann verstärkt werden.
00:14:56Ich glaube, ich nenne das amplifiziertes Handwerk.
00:14:58Und ich denke, man kann mit Tools arbeiten, um seinen Geschmack zu schärfen und mehr von seinem Geschmack herauszuholen.
00:15:04Ich glaube wirklich nicht, dass er im Labor gezüchtet werden kann.
00:15:07Ich denke, Geschmack ist per Definition irgendwie kontextuell.
00:15:12Er ist kulturell.
00:15:13Er ist rar.
00:15:15Und sobald jeder dasselbe repliziert, fängt es an, wirklich verwässert zu werden.
00:15:20Und wir betrachten es nicht mehr als Geschmack.
00:15:23Das ist meine Meinung.
00:15:24Ich weiß, das ist ein heiß diskutiertes Thema, aber ich versuche nicht, mit meinen Tools Geschmack zu ersetzen.
00:15:32Das war's von mir.
00:15:33Hier ging es darum, das richtige Maß an Kontrolle für Design zu finden.
00:15:36Vielen Dank.
00:15:37Und ich denke, ich habe noch Zeit für ein paar Fragen, falls ihr welche habt.
00:15:40Danke.
00:15:54Bis zum nächsten Mal.
Community Posts
No posts yet. Be the first to write about this video!
Write about this video