Prompt Engineering für Designer: Von vagen Briefings zu nutzbaren KI-Ergebnissen

Wenn Ihre KI-Ergebnisse wie Stockfotos aussehen, wirkt Ihre Anfrage wie ein Wunschtraum.

Das ist das Problem mit der Art und Weise, wie die meisten Designer den Umgang mit KI-Tools gelernt haben. „Erstelle mir ein Hero-Bild für ein Fintech-Startup“ ist keine Anfrage. Das ist eine vage Vorstellung. Eine Anfrage ist das, was Sie einem freiberuflichen Illustrator geben würden, der 400 Dollar pro Stunde verlangt und präzise Fragen stellt.

Designer können das bereits. Sie haben in der Schule Briefings verfasst. Sie schreiben jede Woche im Beruf Briefings. Sie wissen, wie Klarheit, Referenzen und Einschränkungen schriftlich dargestellt werden. KI-Anfragen erfordern dieselbe Fähigkeit, nur für eine andere Zielgruppe.

Eine Anfrage ist ein Designbriefing in Prosa

Betrachten Sie Eingabeaufforderungen nicht als Zauberworte. Sehen Sie sie als den ersten Absatz eines Kreativbriefings, ergänzt durch die finalen Spezifikationen am Ende.

Ein gutes Briefing erklärt dem Ersteller, wer er ist, wofür das Projekt gedacht ist, welche Regeln gelten, welche Referenzen verwendet werden sollen und wie das Ergebnis aussehen soll. Fehlt auch nur einer dieser Punkte, erhält man zwar technisch korrekte Arbeit, aber emotional fehl am Platz. Bitten Sie einen Junior, „ein Logo für ein Café zu entwerfen“, und Sie erhalten zwölf Kaffeebohnen. Bitten Sie ihn hingegen, „ein Logo für ein Third-Wave-Café zu entwerfen, das sich an Freelancer richtet, mit Wortmarke, geometrischer serifenloser Schrift, ohne Piktogramme und inspiriert von der Zurückhaltung von Blue Bottle“, dann kommen Sie der Sache schon näher.

Mit Aufgabenstellungen verhält es sich genauso. Der Instinkt, vage zu bleiben, weil das Modell intelligent ist, ist der teuerste Fehler bei KI-gestütztem Design. Präzise zu sein ist nicht kleinlich, sondern das A und O.

Eine gute Aufgabenstellung liest sich wie ein Designbriefing. Eine schlechte Aufgabenstellung liest sich wie ein Wunschtraum.

Die fünf Bestandteile jeder brauchbaren Aufgabenstellung

Jede Aufgabenstellung, die zu einem brauchbaren Design führt, besteht aus fünf Bestandteilen. Sie können sie auswendig lernen, in eine Vorlage einfügen oder auf einen Haftzettel drucken. Die Bestandteile:

1. Rolle. Welche Rolle gibt die KI vor? (Sie sind ein erfahrener redaktioneller Illustrator mit zehn Jahren Berufserfahrung beim New Yorker.)

2. Kontext. Wofür ist das Bild gedacht und für wen? (Dieses Bild ist das zentrale Element eines Blogbeitrags über Designer, die lernen, mit KI-Tools zu arbeiten. Die Zielgruppe sind professionelle Designer, Early Adopters, skeptisch, aber neugierig.)

3. Vorgaben. Welche Regeln gelten? (Redaktionell, nicht unternehmensbezogen. Keine sichtbaren Computer. Keine Stockfotos. Flache Farben, starke Silhouette, hoher Kontrast, geringe Detailgenauigkeit.)

4. Referenzen. Wie soll das Bild aussehen bzw. wirken? (Linienführung von Saul Steinberg, kombiniert mit der Schlichtheit von Schweizer Tourismusplakaten der 1960er-Jahre. Markenfarbpalette: #080404 Hintergrund, #ff6434 Akzentfarbe.)

5. Ausgabespezifikation. Welche Spezifikationen müssen die gelieferten Bilder haben? (16:9 Seitenverhältnis, 1200x630, PNG, kein Text im Bild.)

Wird die Rolle weggelassen, erhält man mittelmäßige Ergebnisse. Wird der Kontext weggelassen, ist das Ergebnis für niemanden bestimmt. Werden die Einschränkungen weggelassen, erhält man das, was das Modell vermutet – meist Stockfotos. Werden die Referenzen weggelassen, orientiert sich das Ergebnis an den Trainingsdaten. Werden die Ausgabespezifikationen weggelassen, erhält man die falschen Abmessungen.

| Eingabeaufforderung | Funktion | Was passiert, wenn sie weggelassen wird? |

-------------|--------------|-----------------------------|

| Rolle | Legt Geschmack und Expertise fest | Generische Ausgabe |

| Kontext | Bestimmt den Zweck der Aufgabe | Löst das falsche Problem |

| Einschränkungen | Definiert, was vermieden werden soll | Führt zu unerwünschten Klischees |

| Referenzen | Gibt die visuelle oder tonale Richtung vor | Orientiert sich an den Trainingsdurchschnittswerten |

| Ausgabespezifikation | Steuert Format und Ausgabe | Falsche Abmessungen, falsches Format |

Beispiel: Bildgenerierung für ein Hero-Bild

Die vage Version, die jeder Designer schon mal getippt hat:

„Hero-Bild für einen Blogbeitrag über Prompt Engineering für Designer.“

Das Ergebnis: ein Designer am Laptop, ein leuchtendes Gehirn, ein Roboter mit Stift oder eine Kombination aus allem. Standard. Ausgedient.

Die strukturierte Version:

Sie sind ein redaktioneller Illustrator und arbeiten seit zehn Jahren für The New Yorker und Wired. Erstellen Sie ein Hero-Bild für einen Blogbeitrag mit dem Titel „Prompt Engineering für Designer“. Die Zielgruppe sind Designer, die KI-Hype skeptisch gegenüberstehen, aber bereit sind, die Tools ernsthaft einzusetzen.

Komposition: Links im Bild ein handgezeichnetes Briefing mit Anmerkungen, das rechts in den klaren, getippten Prompt-Text übergeht. Dies verdeutlicht die Übersetzung zwischen einem technischen Briefing und einem strukturierten Prompt.

Stil: Editorial, flächige Farben, starke Silhouette, hoher Kontrast, geringe Detailgenauigkeit. Papierstruktur akzeptabel. Keine Computer. Keine Roboter. Keine Gehirne. Keine leuchtenden Kugeln.

Referenzen: Linienzeichnungen von Saul Steinberg für das Briefing. Zurückhaltung eines Schweizer Tourismusplakats für die Aufgabenstellung. Markenfarben: #080404 Hintergrund, #ff6434 Akzent, #d0d3d8 Neutral.

Ausgabe: 1200x630, kein Text im Bild.

Das Ergebnis: Ein Hero-Bild, das Sie direkt verwenden können und nicht viermal neu generieren müssen.

Der Unterschied liegt nicht im Talent, sondern in der Struktur.

Beispiel: UI-Prototyp in v0 oder Lovable

Vage:

„Erstellen Sie mir eine Landingpage für eine Designagentur.“

Das Ergebnis: Eine Tailwind-Vorlage mit Standard-Farbverlauf, drei Feature-Karten, einem Standard-Hero-Bild und einem Text, der sich liest wie bei jeder anderen Agentur im Internet.

Struktur:

Entwicklung einer Landingpage für Brainy, ein Designstudio mit über 2 Millionen Followern auf Instagram und Threads. Zielgruppe: Gründer von SaaS-Unternehmen der Serien A bis C, die Branding-, Web- und Design-Services benötigen. Sie kennen bereits alle Agentur-Websites und verlassen sie sofort, wenn diese standardisiert wirken.

Layout: Einspaltiger Hero-Bereich mit einer einzeiligen, fettgedruckten Überschrift und einem Call-to-Action (CTA), gefolgt von einem horizontalen Scrollstreifen mit Kundenlogos, einer dreiteiligen Servicebeschreibung (Branding, Web, Content) im Bento-Grid-Design, einem Testimonial-Bereich mit drei Zitaten und einer einfachen Kontakt-Fußzeile.

Einschränkungen: Keine Farbverläufe, keine Stockfotos, keine generischen Hero-Illustrationen. Nur Dark Mode, Hintergrundfarbe #080404, Akzentfarbe #ff6434. Typografie: Eine serifenlose Schriftart für alles, fett für Überschriften, leicht für Fließtext. Der Zeilenabstand beträgt überall 4 Pixel.

Referenzen: Die Abstandsbeschränkung von Linear. Die Schriftstärke von Vercel. Das Bento-Grid-Abschnittsmuster von Apple. Keine Kopie davon.

Ergebnis: Responsive, Mobile-First- und Shadcn-Komponenten.

Dasselbe Tool. Völlig anderes Ergebnis.

Beispiel: Ein Programmierer erstellt eine Komponente

Vage:

„Erstelle mir eine Button-Komponente.“

Ergebnis: Ein Button. Eine Variante. Keine Barrierefreiheit. Kein Fokuszustand. Farben, die nicht gewünscht sind.

Strukturiert:

Sie sind Senior Design Systems Engineer. Erstellen Sie eine Button-Komponente in unserem Designsystem.

Kontext: Dieser Button ersetzt unsere bisherigen, improvisierten Button-Stile, die auf zwölf Marketingseiten verteilt sind. Er muss primäre, sekundäre und Ghost-Varianten, drei Größen (sm, md, lg) sowie die Zustände „Laden“, „Deaktiviert“ und „Fokus“ unterstützen.

Einschränkungen: Verwenden Sie unsere vorhandenen Tokens aus tokens.css (keine neuen Farben). Der Fokusring muss einen Offset von 2px (--color-accent) haben. Verwenden Sie niemals px für den Abstand, sondern immer --space-Tokens. Die Schriftart ist immer --font-sans mit --text-sm oder --text-base, abhängig von der Größe. Im Ladezustand wird ein Spinner angezeigt und Klicks sind deaktiviert.

Referenzen: Radix UI-Primitive für Barrierefreiheitsmuster. Unsere bestehende Kartenkomponente unter /components/Card.tsx als Referenz für die Dateistruktur.

Ausgabe: TypeScript, Tailwind, Storybook-Story, die jede Variante und jeden Zustand testet. Tests, die das Verhalten im deaktivierten Zustand, beim Laden und im Fokus abdecken.

Gib einem Coding-Agenten diese Anweisung, und du erhältst einen echten Button. Gibst du ihm „Erstelle mir einen Button“, erhältst du etwas, das du manuell neu schreiben musst.

Die Constraint-Bibliothek, die sich jeder Designer zulegen sollte

Constraints sind die Geheimwaffe. Gleichzeitig werden sie von Designern am häufigsten unterschätzt. Kopiere diese Bibliothek, füge die relevanten Zeilen in deine Prompts ein und passe sie an deine Marke an.

| Domäne | Einzuschließende Constraints |

--------|------------------------|

| Illustration | Flache Farben, starke Silhouette, hoher Kontrast, geringe Detailgenauigkeit, kein Text im Bild, keine Computer/Handys/Roboter/Gehirne, außer explizit gefordert, redaktionell, nicht unternehmensbezogen |

Fotostil-Generierung | Kein Stockfoto-Look, keine Hochglanzbeleuchtung, keine 3D-Renderings, außer auf Anfrage, natürliche Komposition, realistische Unvollkommenheiten willkommen |

UI-Generierung | Vorhandene Komponenten verwenden, keine neuen Farben außerhalb von Tokens, Mobile-First, Barrierefreiheit erforderlich (Fokuszustände, Kontrastverhältnisse), keine Farbverläufe, außer die Marke verlangt sie |

| Typografie | Eine serifenlose Schriftart für die Benutzeroberfläche, Serifenschriften nur, wenn die Marke dies erfordert, maximal drei Schriftschnitte pro Text, kein Blocksatz, keine Texte in Großbuchstaben mit mehr als vier Wörtern |

| Farbe | Verwenden Sie Tokens statt Hexadezimalcode, niemals weiße Schrift auf reinem Schwarz, niemals reines Rot auf reinem Grün, Kontrast mindestens 4,5:1 für Fließtext |

| Layout | Zeilenabstand 4px oder 8px, Fließtext niemals zentriert, niemals Blocksatz, maximal 75 Zeichen pro Zeile, Bilder linksbündig ausrichten, sofern die Komposition nichts anderes erfordert |

| Code | TypeScript strikt, benannte Exporte statt Standard, keine neuen Abhängigkeiten ohne Rückfrage, Testabdeckung für jede neue Komponente |

Verwenden Sie diese Vorlagen als fertige Blöcke. Anfangs mag es Ihnen etwas seltsam vorkommen. Dann werden Sie feststellen, dass sich die Qualität Ihrer Ergebnisse über Nacht verdoppelt hat.

Weitere Informationen zu KI-Workflows finden Sie unter Brainy Papiere. Wenn Sie eine wirklich auf die Marke Ihres Teams zugeschnittene Prompt-Bibliothek benötigen, nicht Ihre zufällige ChatGPT-Historie, dann Brainy einstellen.

Iteration ohne Neustart

Der größte Fehler bei der Prompt-Entwicklung ist, den gesamten Prompt zu löschen und neu zu schreiben, wenn die Ausgabe nicht stimmt. In neun von zehn Fällen war der Prompt fast perfekt. Nur eine Variable war falsch.

Gehen Sie gezielt vor. Ändern Sie immer nur eine Sache.

1. Führen Sie den Prompt einmal aus. Notieren Sie sich den Fehler.

2. Identifizieren Sie den fehlerhaften Teil. Ist die Ausgabe zu allgemein, sind die Referenzen schwach. Enthält sie die falschen Elemente, fehlt in den Constraints ein „kein X“. Richtet sie sich an die falsche Zielgruppe, ist der Kontext unzureichend.

3. Bearbeiten Sie nur diesen Teil. Schreiben Sie nicht den gesamten Prompt neu.

4. Führen Sie den Prompt erneut aus. Vergleichen Sie die Ausgabe mit der ersten. Besser, schlechter oder gleich?

5. Wiederholen. Drei bis fünf Runden führen in der Regel zum Ziel.

Verwandter Hinweis: Kontextrot ist real. Wenn Sie im selben Chat iterieren und die Ergebnisse schlechter statt besser werden, ist die Sitzung verunreinigt. Öffnen Sie einen neuen Chat, fügen Sie die aktuell beste Aufforderung ein und machen Sie weiter.

Die drei Fehler, die garantiert zu schlechten Ergebnissen führen

Drei Muster, die ich jede Woche sehe, und jedes einzelne davon ruiniert die Ergebnisqualität.

Fehler 1: „Mach es besser.“ Das Modell weiß nicht, was „besser“ für Sie bedeutet. „Besser“ bedeutet für das Modell den Durchschnitt von „besser“, was einer Regression zum Mittelwert entspricht. Seien Sie konkret. „Verstärken Sie den Farbkontrast.“ „Gestalten Sie die Komposition asymmetrischer.“ „Entfernen Sie die Hälfte der Details aus dem Hintergrund.“

Fehler 2: Fünf Optionen gleichzeitig anfordern. Sie erhalten fünf mittelmäßige Optionen anstatt einer guten. Fordern Sie nur eine an. Iterieren Sie. Akzeptieren Sie die erste gute Option.

Fehler 3: Fehlende Referenzen. Referenzen prägen den Geschmack des Modells. Ohne sie erhält man den Durchschnitt der Trainingsdaten. Mit drei gut gewählten Referenzen kommt man dem gewünschten Ergebnis schon recht nahe.

FAQ

Ist Prompt-Engineering eine echte Fähigkeit oder nur ein Hype?

Es ist eine echte Fähigkeit, vergleichbar mit dem Verfassen eines guten Kreativbriefings. Wer einen Freelancer briefen kann, kann auch ein Modell mit Prompts versorgen. Der Hype nennt es „Engineering“. In Wirklichkeit sind es einfach „klare Anweisungen“.

Welches Tool eignet sich am besten für die Prompt-Verarbeitung?

Für Bilder eignen sich Midjourney und Gemini Pro am besten für detaillierte Text-Prompts. Für UI-Designs reagieren v0 und Lovable gut auf strukturierte Vorgaben. Für Codierung sind Claude Code und Cursor am stärksten, insbesondere mit einer gut geschriebenen CLAUDE.md-Datei. Die Qualität der Prompts ist wichtiger als das Tool selbst.

Sollte ich eine Prompt-Bibliothek verwenden?

Ja. Erstellen Sie eine. Organisieren Sie die Prompts nach Anwendungsfall. Speichern Sie jeden gelungenen Prompt. Notieren Sie sich die Gründe für jeden Fehlschlag. Nach drei Monaten verfügen Sie über eine Bibliothek, die wertvoller ist als jedes Tool-Abonnement.

Wie lang sollte ein Prompt sein?

Lang genug, um alle fünf Teile abzudecken, aber kurz genug, damit jeder Satz sinnvoll ist. Meine Prompts umfassen meist zwischen 100 und 300 Wörtern. Kürzere Prompts sind zu unpräzise. Längere führen wahrscheinlich zu Wiederholungen.

Muss ich technische Prompt-Tricks wie Temperatur oder top_p lernen?

Nicht für die meisten Designarbeiten. Diese Funktionen werden in API-Aufrufen verwendet, nicht in Chat-Oberflächen. Konzentrieren Sie sich zunächst auf die fünf Teile. Parameter können Sie später für API-Aufrufe verwenden.

Formulieren Sie präzise

Jeder vage Prompt ist ein zehnminütiger Umweg, der nur zu unbrauchbaren Ergebnissen führt. Jeder strukturierte Prompt ist eine zehnminütige Investition, die sich auszahlt.

Beschreiben Sie die Rolle, den Kontext, die Einschränkungen, die Referenzen und die Ausgabespezifikation. Gehen Sie dabei jeweils eine Variable durch. Speichern Sie die funktionierenden Varianten.

Sie wissen bereits, wie man ein Briefing verfasst. Das Modell ist ein Junior am anderen Ende der Leitung.

Schreiben Sie es so, wie Sie es meinen.