- Mit dem Aufkommen von KI-Prototyping-Tools wechseln Designer von statischen Mockups zu einem Workflow, in dem sie selbst interaktive Prototypen und sogar die tatsächliche Code-Implementierung umsetzen
- Bei führenden Startups wie Perplexity und Vercel nutzen Designer KI-Tools wie Cursor, Claude, Lovable und V0, um Frontend-Code zu schreiben und bis zum Production-Deployment zu verantworten
- Im Branding-Bereich werden mit Lovable direkt Tools zur Erzeugung grafischer Systeme gebaut und an Kunden übergeben, um Musterskalierung und Brand-Maintenance zu automatisieren
- Product Intuition und grundlegende Grafikdesign-Fähigkeiten (Farbe, Abstände, visuelles Urteilsvermögen) bleiben weiterhin Kernkompetenzen; KI dient als Beschleuniger für die Umsetzung
- Die Rolle von Designern erweitert sich vom „Rechtecke zeichnen“ hin zu „Vision kommunizieren und Entscheidungen treffen“; wichtiger als Tool-Nutzung werden klare Ideen und schnelle Urteilskraft
KI-gestützter Branding-Workflow
- Nick Patterson (zuständig für Branding bei Lovable, Craft, Maven u. a.) nutzte Lovable, um in nur einer Stunde ein Tool zur Erzeugung eines Brand-Grafiksystems zu bauen
- Im Branding-Projekt für den Zahlungsabwickler Flow Glad entstand ein Pattern-Architect-Tool auf Basis islamischer geometrischer Muster
- Ein interaktives Tool, mit dem Kunden Radius, Sterndichte, Linienbreite, Abstände usw. in Echtzeit anpassen können
- Innerhalb eines zweiwöchigen Sprints (10 Tage) wurden mehrere Versionen des Pattern-Generators entwickelt und an den Kunden übergeben
- Bereits in der Moodboard-Phase lassen sich hochwertige Visuals zeigen
- Früher dominierten Referenzen aus Arbeiten anderer Designer, heute stehen eigene Produktionen im Zentrum des Moodboards
- Schon am zweiten Tag wurde an der Integration von Typografie und U-Bahn-Linienplan-artigen Mustern gearbeitet
- Neue Formen des Handoffs: Das Tool selbst wird an den Kunden übergeben
- Nach dem Markenaufbau wird nicht nur das Ergebnis, sondern das Tool bereitgestellt, damit der Kunde Muster selbst erweitern und variieren kann
- Wenn Kunden einen „Mittelweg“ wünschen, können sie ihre Absicht direkt durch Anpassung von Parametern ausdrücken
- So können sich schnell bewegende Unternehmen ihre Marke sofort umsetzen und skalieren
Praktischer Einsatz von KI-Prototyping-Tools
- Pranati Perry (Design Lead für Vercel V0) nutzt V0 für Asset-Erstellung und Interaktions-Prototyping
- Erstellung einer Cartridge-Komponente fürs Portfolio: SVG in Figma erzeugen → in V0 in ein dynamisches Tool umwandeln
- Mit einem einzigen Prompt wurden SVG-Farbverläufe geändert, Text dynamisch gemacht und Transparenzeffekte hinzugefügt
- Erstellung von Sprite-Animationen und Vorbereitung eines webbasierten RPG-Spiels
- Produktdesign-Workflow: Pre - During - Post
- Pre: Ideenexploration in Figma und V0; Figma ist nicht länger die einzige Quelle der Wahrheit für UI
- During: Schreiben von Production-Code mit Claude, wobei Designer den Großteil des Designs selbst implementieren
- Post: Der Vercel Agent hinterlässt automatisch Kommentare in PRs und unterstützt so das Code-Review
- Einsatzspektrum von V0
- Komplexe Prototypen wie Billing-Flows: Statt Spaghetti-Prototyping in Figma werden Modal-Flows in natürlicher Sprache definiert
- Tool zur Erzeugung eines Dithering-Cube-Effekts für Next.js-Konferenzanzeigen und E-Mail-Header (Arbeit des Brand-Designers Dan)
- CTA-Button-Animationen werden in V0 fertiggestellt und direkt an Design Engineers übergeben
- Nutzungstrends bei V0
- Anfangs vor allem für Landingpages, Grafiken und Shader verwendet
- Inzwischen setzen Sales- und PM-Rollen es ein, um persönliche Software für die Arbeit zu bauen
- PMs erzeugen interaktive Mockups zur Ergänzung von PRDs und gehen über statische Prototypen hinaus zu Live-Daten-Anbindung und KI-Integration
Integration von KI-Tools ins Produktdesign
- Henry Modiset (VP of Design bei Perplexity) definiert die Rolle von Designern als Problemlösung + Vision kommunizieren
- KI-Tools dienen als interaktive Kommunikationswerkzeuge; der Fokus liegt nicht auf perfekten App-Mockups, sondern auf der Visualisierung von Richtung und Absicht
- Ideen lassen sich schnell und kostengünstig explorieren, bevor Arbeit bei Engineers angefragt wird
- Aktueller KI-Einsatz im Design-Team von Perplexity
- Brand-Design-Team: experimentiert und kombiniert alle möglichen Tools nach den Prinzipien Velocity und Volume
- Produktdesign-Team: schreibt täglich Production-Code mit Cursor und Claude Code
- Einige Designer passen Animationen in Prototyping-Sandboxes an und übergeben sie anschließend an Engineers
- Game-Design-Team: Zusammenarbeit zwischen Game-Mechanics-Designer, UI-Designer und einem Designer für Musikgenerierung
- Am stärksten adaptiertes Tool: Cursor
- Im Produktdesign das am vollständigsten integrierte Tool
- Für die Exploration kleiner Einheiten (z. B. bestimmter Animationen) werden Sandbox-Tools wie V0 und Lovable genutzt
- Das Brand-Team baut eine Pipeline von Midjourney → Sora (Video) → Musikgenerierung → Frame.io
- Technisches Spektrum von Designern
- Designer mit jahrelanger Erfahrung im Schreiben von Production-Code nutzen KI als primären Beschleuniger
- Designer ohne Coding-Erfahrung beginnen Code zu lernen, um Animationen feinzujustieren und Brand-Details hinzuzufügen
- Gunnar (Designer) hatte keine Coding-Erfahrung, schreibt heute aber mit Cursor Svelte-UI-Komponenten
Wie Designer zur Codebasis beitragen
- Implementierung ist inzwischen Table Stakes geworden (eine grundlegende Fähigkeit, die Designer mitbringen sollten)
- Da die Umsetzung schneller wird, bleibt mehr Zeit für kreatives Denken
- Folgearbeiten an Features, die früher 2 bis 3 Wochen dauerten, verkürzen sich nun auf 1 Woche
- Wichtig ist die sinnvolle Begrenzung des Prototyping-Umfangs
- Das Prototyping kompletter Flows ist ineffizient; oft wird in einem Zwischenstadium ein PR erzeugt und dann direkt in die reale Implementierung gewechselt
- KI-Tools sind am wirkungsvollsten für punktgenaues Interaktions-Prototyping
- Bei Edge Cases ist es effizienter, Bedingungen in natürlicher Sprache zu beschreiben, als jedes Detail einzeln als Mockup zu bauen
- Ansätze für Code-Review und Lernen
- Es braucht eine Weiterentwicklung über „blindes Coden“ hinaus hin zum tatsächlichen Verstehen des von LLMs geschriebenen Codes
- Das LLM sollte wie ein „Praktikant“ behandelt werden; je konkreter die technischen Anweisungen, desto besser die Ergebnisse
- In Claude Memory kann explizit vermerkt werden: „Ich bin Designer und möchte lernen, wie Code funktioniert“, um den Lerneffekt zu erhöhen
- Um Engineers nicht zu belasten, wird das Ziel gesetzt, den eigenen Footprint zu minimieren
Entwicklung der Designerrolle und Hiring-Kriterien
- Kernkompetenzen von Designern im KI-Zeitalter
- Product Intuition: die Fähigkeit zu entscheiden, was gebaut werden sollte, und zu den meisten Ideen „Nein“ zu sagen
- „Warum würden Menschen das nutzen? Funktioniert es intuitiv? Passt es zum Markt? Ist es attraktiv genug für den Homescreen?“
- Grundlagen des Grafikdesigns: die Fähigkeit, anhand von Farbe, Abständen, Charakterdefinition usw. zwischen „gut“ und „schlecht“ zu unterscheiden
- Signale, auf die Perplexity beim Hiring achtet
- Erfahrung als Gründungsdesigner oder freiberuflich allein arbeitende Person: Menschen, die an unabhängige Entscheidungen gewöhnt sind
- Talent mit sowohl Product Intuition als auch Art-Direction-Fähigkeiten
- Bereitschaft zum kontinuierlichen Lernen: Da sich Tools schnell verändern, ist Anpassungsfähigkeit entscheidend
- Neudefinition der Designerrolle
- Wer beim „Rechtecke zeichnen“ stecken bleibt, hat keine Macht
- Mit KI-Tools lässt sich die eigene Vision im Kopf deutlich kraftvoller kommunizieren
- Der zentrale Vorteil des Codens für Designer: „Es ist einfacher, direkt zu bauen, als meine Gedanken zu erklären“
- Interaktive und tiefgehende Ergebnisse lassen sich innerhalb weniger Tage erstellen
Kollaborationsstruktur und praktische Hinweise
- Eine Umgebung, in der sowohl PMs als auch Designer prototypen können
- Im schlimmsten Fall entsteht Chaos, im besten Fall bessere Software
- Rückkehr zu First Principles: „Software mit statischen Bild-Tools zu planen, ist unvernünftig“
- Interaktive Prototypen sind die natürliche Form des Softwaredesigns
- Es braucht eine klare Entscheidungskultur und definierte Ownership
- Wenn jeder etwas bauen kann, sind schnellere Entscheidungen gefragt
- Die Stärke von Designern: Sie sind geübt darin, unter Unsicherheit eine Richtung zu wählen
- Praktische Empfehlungen für die Umsetzung
- Ideen machen 80 % aus, Tool-Nutzung 20 %
- Vor 2 bis 3 Jahren wurde noch ohne KI programmiert; heute ist die Veränderung kaum noch vorstellbar
- Per Konversation in natürlicher Sprache lässt sich eine Ideenliste in einen Prototypen verwandeln
- Aus Fehlern zu lernen ist entscheidend; dafür braucht es eine Organisationskultur, die Experimentierräume bietet
Fazit — KI erweitert das Spektrum von Design
- KI ist nicht nur ein Werkzeug zur Beschleunigung von Designern, sondern ein Medium, das die Bandbreite kreativer Ergebnisse erweitert
- Designer entwickeln sich nun von Tool-Nutzern zu Tool-Erstellern und bewegen sich über die Grenzen von Code, KI und Grafik hinweg
- Das Design-Zeitalter nach Figma bewegt sich in Richtung des Entwurfs von „interagierenden Ideen statt statischer Bilder“
- Mit der Verbreitung von KI wird nicht mehr entscheidend, wer etwas implementieren kann, sondern was überhaupt gebaut werden soll
Noch keine Kommentare.