KI-Agenten für Designer: Agentische Workflows entwerfen und aufbauen

Der Unterschied zwischen einem Chatbot und einem Agenten ist der Unterschied zwischen einem Junior, der auf deine nächste Nachricht wartet, und einem Junior, der die ganze Aufgabe selbständig erledigt.

Diese zweite Version tauchte in deinen Tools irgendwann in den letzten achtzehn Monaten auf, und die meisten Designer haben es noch immer nicht bemerkt. Sie tippen Prompts in ein Chatfenster, kopieren die Antwort, fügen sie in Figma ein und fragen sich, warum ihr Workflow wie eine leicht schnellere Version von 2023 wirkt. Der Agenten-Shift ist kein "besseres ChatGPT." Es ist ein Kategorienwechsel.

Ein Agent bekommt ein Ziel. Er entscheidet, welche Tools er aufruft. Er ruft sie der Reihe nach auf, liest die Ergebnisse, korrigiert den Kurs und übergibt dir ein fertiges Ergebnis. Du tippst nicht mehr im Chat. Du briefst ein kleines Team und reviewst das Deliverable.

Chatbot, Copilot, Agent, und warum der Unterschied wichtig ist

Drei Begriffe werden verwendet, als wären sie dasselbe. Sind sie nicht.

Ein Chatbot ist turnbasiert. Du fragst, er antwortet, du fragst wieder. ChatGPT ohne Tools, Claude in einem einfachen Chatfenster, Gemini in der App. Der Kontext ist das, was du einfügst. Der Output ist Text.

Ein Copilot ist kontextuelle Unterstützung. GitHub Copilot, Figmas KI-Features, Notion AI. Er lebt in einem anderen Tool und schlägt den nächsten Schritt vor, während du arbeitest. Er verlässt nicht die Spur, in der du dich befindest. Er plant keine mehrstufige Arbeit.

Ein Agent ist zielorientiert. Du gibst ihm ein Ergebnis, keinen nächsten Schritt. Er wählt seine eigenen Tools, ruft sie in einer Schleife auf, überprüft seinen eigenen Fortschritt und hört auf, wenn das Ziel erreicht ist oder er deinen Input braucht. Das klarste moderne Beispiel ist Claude Code, das in deinem Terminal mit eingebundenen MCP-Servern läuft, wobei ChatGPTs Agent-Modus, Cursors Agent-Panel und Anthropics Computer Use sich genauso verhalten.

Die Quintessenz: Chatbots antworten, Copilots helfen, Agenten liefern.

Ein Agent ist eine Schleife, kein einzelner Prompt

Jeder Agent, den du je benutzen wirst, läuft durch denselben Vier-Schritt-Zyklus. Lerne diese Form, und du kannst vorhersagen, wie sich jedes agentische Tool verhalten wird.

1. Planen. Der Agent liest das Ziel und entscheidet den ersten Schritt.
2. Handeln. Er ruft ein Tool auf. Liest eine Datei, fragt eine API ab, führt einen Befehl aus, ruft eine URL ab.
3. Beobachten. Er liest den Output des Tools und entscheidet, ob er dem Ziel nähergekommen ist.
4. Iterieren. Wenn nicht fertig, plant er den nächsten Schritt. Wenn fertig, meldet er sich zurück.

Diese Schleife ist das Ganze. Die Magie, die man Agenten zuschreibt, ist nur die Schleife, die sauber läuft, mit genug nützlichen Tools verbunden. Keine Schleife, kein Agent. Ein Modell, das einmal antwortet, ist ein Chatbot. Ein Modell, das die Schleife mit Tools auf ein Ziel hin ausführt, ist ein Agent.

Das Agenten-Toolkit des Designers im Jahr 2026

Du musst keinen Agenten von Grund auf bauen. Im April 2026 sieht die nützliche Agentenoberfläche für Designer so aus.

Claude Code. Lebt in deinem Terminal oder in VS Code. Liest dein gesamtes Repository. Ruft Dateien auf, führt Befehle aus, kommuniziert mit MCP-Servern. Am besten für alles, was Code, Tokens oder ein Design-System-Repository berührt.

Claude Desktop und ChatGPT mit MCP. Beide unterstützen jetzt MCP-Verbindungen. Du kannst sie mit Figma, Google Drive, Notion, Linear und deinem Dateisystem verbinden. Besser für Recherche, Briefs, Spec-Schreiben und Content-Arbeit als für Coding.

Cursor Agent-Modus. Editor-nativer Agent zum Bauen in React, Vue oder Svelte. In dem, was er tut, näher an Claude Code, mit einem visuellen Interface statt einem Terminal.

Figma MCP. Kein Agent selbst. Ein Tool-Connector. Er macht Figma zu einer Datenquelle, die ein Agent lesen kann. Einmal eingerichtet, kann jeder MCP-fähige Agent deine Frames sehen. Die Einrichtung wird in Figma MCP: Figma mit Claude Code und KI-Agenten verbinden erklärt.

n8n, Zapier-Agenten und eigene Skripte. Wenn du einen Agenten willst, der nach einem Zeitplan läuft oder auf einen Webhook reagiert (neuer Figma-Kommentar, neue Google-Formular-Einreichung, neue E-Mail in einem geteilten Posteingang), sind das die Hosting-Plattformen. Designer nutzen sie für die "Klebe"-Agenten, die im Hintergrund laufen, während du schläfst.

Für die meisten Designer ist der richtige Einstiegs-Stack Claude Code plus Figma MCP plus eine Verbindung zu Google Drive oder Notion. Das reicht für neunzig Prozent der agentischen Designarbeit.

Wie man einen Agenten entwirft (es ist immer noch ein Brief)

Einen Agenten zu entwerfen ist keine Coding-Aufgabe. Es ist eine Briefing-Aufgabe. Dieselbe, die du jedes Mal machst, wenn du Arbeit an einen Freelancer oder einen Junior übergibst.

Vier Fragen, die du in dieser Reihenfolge beantworten musst, bevor du irgendetwas baust.

1. Was ist das Ziel? Ein Satz. "Erstelle ein Moodboard und ein kurzes kreatives Brief aus dem Transkript eines Kundengespräches."
2. Welche Tools braucht der Agent? Liste sie auf. "Ein Google Doc lesen, im Web suchen, Bilder abrufen, in eine Figma-Datei schreiben, in einem Google-Drive-Ordner speichern."
3. Welche Regeln schränken ihn ein? "Nur Bilder aus redaktionellen Quellen, keine Stockfotografie. Nie eine Marke erfinden. Jede Quelle zitieren. Das Brief immer in unserem Hausformat erstellen."
4. Wann stoppt er? "Wenn die Figma-Datei einen Moodboard-Frame mit mindestens 12 Referenzen hat und das Brief als PDF im gemeinsamen Drive gespeichert ist."

Fehlt das Ziel, driftet der Agent. Fehlen die Tools, improvisiert er mit den falschen. Fehlen die Regeln, liefert er dir den Durchschnitt seiner Trainingsdaten, was meistens Stock und KI-Schrott ist. Fehlt die Stop-Bedingung, läuft er ewig oder stoppt zu früh.

Das ist dieselbe Form wie der fünfteilige Prompt aus Prompt Engineering für Designer, skaliert für mehrstufige Arbeit.

Rezept 1: Der Research-to-Moodboard-Agent

Der erste Agent, den jedes Design-Studio bauen sollte. Er frisst ein Transkript eines Kundengespräches und produziert ein erstes Moodboard plus ein kurzes kreatives Brief.

Ziel. Aus einem Discovery-Call-Transkript ein Moodboard in Figma und ein kreatives Brief in Google Drive erstellen.

Benötigte Tools. Google Drive MCP (Transkript lesen, Brief schreiben), Websuche, Bildabruf, Figma MCP (in einen Moodboard-Frame schreiben).

System-Prompt-Form. Das ist die Anweisung, die du dem Agenten einmalig zu Beginn der Sitzung gibst.

You are a senior brand strategist at Brainy, a design studio with 2M+
community followers. Your job: turn a discovery call transcript into
a first-pass creative direction.

Goal:
- Read the transcript at the Google Drive URL I give you.
- Extract: client name, industry, audience, brand adjectives (3-5),
  competitors mentioned, any visual references they named.
- Produce two deliverables:
  1. A creative brief, saved as a Google Doc in /Brainy/Briefs/
     using our template at /Brainy/Templates/brief.docx.
  2. A Figma moodboard in the file I specify, populated with at
     least 12 editorial image references (no stock photography).

Rules:
- Use only editorial sources: Are.na, It's Nice That, Brand New,
  museum archives, design studio portfolios. Never Shutterstock,
  Getty, or Unsplash generic.
- Every image needs a source URL captioned on the Figma frame.
- Voice for the brief: Brainy house voice. Opinionated on craft,
  neutral on facts. No corporate filler.
- If the transcript is unclear on an adjective, flag it as "needs
  confirmation" in the brief instead of inventing one.

Stop when:
- Brief is saved, moodboard has 12+ captioned references, and you
  have posted the two URLs back to me.

Das ist ein funktionierendes Agenten-Brief. Füge es in Claude Desktop mit MCP-Verbindungen zu Drive und Figma ein, zeige es auf ein Transkript und überprüfe den Output.

Was du reviewst. Sind die Adjektive richtig? Sind die Referenzen markenkonform und driften nicht ins Offensichtliche? Hat er tatsächlich jedes Bild mit einer Quelle beschriftet? Ist das Brief in der Hausstimme oder ist es ins LinkedIn-Englisch zurückgefallen?

Iteration. Erster Lauf wird rau sein. Aktualisiere den System-Prompt mit dem, was der Agent verpasst hat. Führe ihn erneut aus. Nach drei oder vier Zyklen liefert der Agent Briefs, die du einem kundenseitigen Strategen übergeben kannst, ohne sie neu zu schreiben.

Rezept 2: Der Spec-to-Handoff-Agent

Dieser Agent schließt die Lücke zwischen "Design ist genehmigt" und "Dev hat alles, was er braucht." Er liest eine Figma-Datei und schreibt das Engineering-Handoff-Dokument.

Ziel. Für eine gegebene Figma-Datei-URL ein Entwickler-Handoff-Dokument mit Komponenten-Inventar, Token-Liste, Spacing-Werten und offenen Fragen erstellen.

Benötigte Tools. Figma MCP, ein Ort zum Schreiben des Outputs (Notion, GitHub Issue, Google Doc, nach Wahl).

System-Prompt-Form.

You are a senior design systems engineer acting as the bridge
between a design team and a front-end team.

Goal:
- Read the Figma file at the URL I give you.
- Produce a handoff document containing:
  1. Component inventory: every component instance used, counted,
     with Figma component name and closest existing code component
     name from our /components/ directory.
  2. Token usage: every color, spacing, and typography variable
     referenced, compared against /design/tokens.css.
  3. Layout specs: breakpoints used, any auto-layout frames that
     might be ambiguous at edge cases.
  4. Open questions: a bulleted list of anything in the Figma file
     that cannot be resolved from the file alone (missing states,
     unclear interactions, content placeholders).
- Write the output as a Notion page in /Engineering/Handoffs/.

Rules:
- Never invent a component. If a Figma element does not map to an
  existing code component, list it under "new components required"
  with a one-line description.
- Flag every free-form (non auto-layout) frame as a risk.
- Include the Figma node ID for every item so devs can jump to it.
- Do not assume interactions that are not explicitly in the file.

Stop when:
- Notion page is written and you have posted the URL back to me.

Warum dieses Rezept wichtig ist. Das "Designer dachte, das wurde übergeben, Dev hat die Tokens nie gefunden"-Problem ist ein Klassiker. Dieser Agent eliminiert es in etwa neunzig Sekunden pro Feature.

Wo er versagt. Bei Figma-Dateien, die ein Chaos sind. Frames ohne Auto-Layout, inkonsistente Variablennutzung, zufällige Einzel-Komponenten. Der Agent legt das Chaos offen, was entweder ein Geschenk ist (jetzt weißt du es) oder ein Problem (jetzt musst du es beheben).

Rezept 3: Der Design-QA-Agent

Der Agent, der nach einem Deploy läuft und dir sagt, was falsch ausgeliefert wurde.

Ziel. Eine deployete Staging-URL mit der maßgeblichen Figma-Datei vergleichen und visuellen Drift melden.

Benötigte Tools. Figma MCP, Playwright (zum Erstellen von Screenshots der Staging-Seite), Bildvergleich (Claude kann Bilder nativ in seinem Vision-Modus vergleichen).

System-Prompt-Form.

You are a senior product designer doing a pre-release visual QA pass.

Goal:
- Visit the staging URL I give you at three breakpoints: 1440px,
  768px, 375px.
- For each breakpoint, take a full-page screenshot using Playwright.
- Compare each screenshot to the corresponding Figma frame at the
  URL I provide.
- Produce a QA report listing every visual difference, categorized:
  - BLOCKING: wrong components, wrong colors, broken layouts
  - NON-BLOCKING: spacing off by less than 4px, minor type weight
    mismatches, image crops slightly different
  - INFORMATIONAL: intentional differences between design and code
    worth noting

Rules:
- Do not flag differences that are within 2px of intended spacing
  unless they visibly break alignment.
- Include a screenshot-with-annotation for every BLOCKING item.
- Link every item back to the Figma node ID.
- Output as a Markdown file in /qa/reports/ with timestamp.

Stop when:
- Report is saved and you have posted the path back to me.

Warum dieses Rezept wichtig ist. Die meisten Teams machen Design-QA manuell oder gar nicht. Ein QA-Agent läuft bei jedem Pre-Prod-Deploy. Er fängt 80 % des Drifts ab, den Augen auf der dritten Seite übersehen.

Wie Designer ihn nutzen. In CI einbinden, damit er automatisch bei Staging-Deploys läuft. Oder manuell betreiben und vor dem Ausliefern von allem Sichtbaren ausführen. So oder so hörst du auf, der Engpass bei "Wurde das richtig ausgeliefert?" zu sein.

Was Agenten (noch) nicht können

Sei ehrlich mit dir selbst. Hier scheitern Agenten im April 2026.

Geschmacksentscheidungen. Der Agent liefert dir ein kompetentes Moodboard. Er kann dir nicht sagen, dass das Moodboard emotional flach ist oder dass die Marke stärker auf Zurückhaltung setzen sollte. Das bist immer noch du.

Vage Ziele. "Mach die Website besser" ist kein Ziel. Der Agent läuft im Kreis oder produziert generischen Output. Wenn du das Ziel nicht in einem Satz mit einer klaren Stop-Bedingung formulieren kannst, hat der Agent keine Chance.

Neue Strategie. Agenten sind hervorragend darin, eine von dir definierte Strategie auszuführen. Sie sind schlecht darin, eine von Grund auf zu erfinden. Positionierung, Markenarchitektur, produktbezogene Grundsatzentscheidungen sind immer noch menschliche Arbeit.

Langfristiges Urteilsvermögen. Ein Agent kann dir sagen "Diese Button-Variante wird nicht verwendet." Er kann dir nicht sagen "Wir stehen kurz davor, eine Preisseite zu launchen, die eine vierte Button-Variante brauchen wird, also lösch sie nicht." Der Agent sieht den Snapshot, nicht die Roadmap.

Alles, was Vertrauen bei einem Kunden oder Partner erfordert. Ein kundenseitiger Stratege, ein Art Director, der einem Freelancer Feedback gibt, ein Creative Director, der eine Idee pitcht. Agenten unterstützen diese Menschen. Sie ersetzen sie nicht.

Die Regel: Agenten übernehmen die Ausführung. Menschen übernehmen Geschmack, Strategie und Vertrauen.

Wie man wie ein Agenten-Designer denkt, nicht wie ein Agenten-Nutzer

Es gibt einen Unterschied zwischen dem Verwenden von Agenten und dem Entwerfen von ihnen. Die meisten Designer werden am Ende beides tun.

Einen Agenten zu verwenden ist Prompt-Arbeit. Ein Brief schreiben, den Output reviewen, iterieren.

Einen Agenten zu entwerfen ist Systemarbeit. Du definierst das Ziel, wählst die Tools, schreibst die Einschränkungen, setzt die Stop-Bedingung und baust eine Feedback-Schleife auf, damit der Agent mit der Zeit besser wird. Es ist näher dran, ein kleines Team zu führen, als einen Prompt zu schreiben.

Drei Gewohnheiten, die Menschen, die gute Agenten entwerfen, von denen unterscheiden, die mit kaputten kämpfen.

Erstens schreiben sie das Brief, bevor sie das Tool öffnen. Kein Tippen, bis Ziel, Tools, Regeln und Stop-Bedingung auf Papier sind. Spart eine Stunde ziellosen Herumprobierens.

Zweitens versionieren sie den System-Prompt wie Code. In einer Datei speichern. In Git einchecken, wenn möglich. Jedes Mal, wenn der Agent auf neue Weise scheitert, fügt man eine Regel hinzu. Der Prompt wird mit der Zeit klüger, nicht rauschiger.

Drittens reviewen sie jeden Lauf für die ersten zehn Läufe. Kein Vertrauen standardmäßig. Jeder Output wird gelesen, bewertet und genutzt, um den Prompt zu aktualisieren. Nach zehn Läufen ist der Agent zuverlässig genug, um im Hintergrund zu laufen. Vor zehn Läufen nicht.

Wenn du mehr KI-Workflow-Breakdowns willst, stöbere in den übrigen Brainy Papers. Wenn du agentische Workflows in dein Team integriert haben willst, ohne die ersten drei Monate des Herumprobierens, beauftrage Brainy und wir liefern den ganzen Stack.

Der Agenten-Starterplan für Designer

Eine Woche, ein Agent, eine funktionierende Schleife.

• Wähle einen Workflow, den du wiederholt ausführst. Keinen Fantasy-Workflow. Einen echten, den du diesen Monat gemacht hast.
• Schreibe das Ein-Satz-Ziel, die Tool-Liste, die Regeln und die Stop-Bedingung auf Papier.
• Richte Claude Code oder Claude Desktop mit einer MCP-Verbindung ein (Figma, Drive oder Dateisystem).
• Füge das Brief als System-Prompt ein. Führe den Agenten auf einem echten Input aus.
• Lies den Output kritisch. Bewerte ihn danach, was du selbst geliefert hättest.
• Aktualisiere den Prompt mit dem, was gescheitert ist. Führe ihn erneut aus.
• Wiederhole drei bis fünf Mal. Notiere, wie viel Zeit jeder Lauf im Vergleich zur manuellen Ausführung benötigt.
• Speichere den finalen System-Prompt. Das ist dein erster Produktions-Agent.

Das einmal tun, und der zweite Agent braucht die Hälfte der Zeit. Der vierte Agent braucht einen Nachmittag. Der achte Agent läuft nach einem Zeitplan, während du schläfst.

FAQ

Muss ich coden können, um einen KI-Agenten zu bauen?

Nein. Jedes Rezept oben wird über einen System-Prompt plus MCP-Verbindungen konfiguriert, beide werden in einer UI oder einem einzigen Befehl eingerichtet. Du schreibst Briefs und verdrahtest Tools, keinen Produktionscode. Wenn du Zapier konfigurieren kannst, kannst du einen Agenten konfigurieren.

Was ist der Unterschied zwischen Claude Code und einem Claude-Agenten?

Claude Code ist ein spezifischer Agent, der im Terminal lebt und für die Arbeit mit Codebasen gebaut wurde. "Ein Claude-Agent" ist jeder Agent, der vom Claude-Modell angetrieben wird, was Claude Code sein könnte, Claude Desktop mit Tools, ein eigener Agent, der über die Anthropic-API gebaut wurde, oder ein ChatGPT-ähnlicher Agent, der Claude im Hintergrund verwendet. Claude Code ist der Flaggschiff-Agent für Designer-Developer-Arbeit im Jahr 2026.

Was kostet es, einen Agenten zu betreiben?

Für einzelne Designer deckt ein Claude Max-Abonnement oder ein ChatGPT Plus-Abonnement Claude Code bzw. den Agent-Modus ab. Das liegt im unteren dreistelligen Dollarbereich pro Monat und schließt die meisten Tools ein, die du benötigst. Für Teams skaliert die API-Nutzung damit, wie viel die Agenten laufen. Das Budget beginnt bei etwa 50 bis 200 Dollar pro Designer pro Monat bei intensiver Nutzung. Günstig verglichen mit der Zeit, die es spart.

Du führst jetzt ein kleines Team

Früher warst du ein Designer. Du bekamst Briefs und produziertest Arbeit. Das ist immer noch Teil des Jobs.

Jetzt gibt es einen zweiten Teil. Du schreibst Briefs für kleine Teams von Agenten, die Arbeit produzieren, während du den ersten Teil machst. Du reviewst ihren Output. Du korrigierst sie, wenn sie driften. Du streichst die Agenten, die sich nicht bewähren, und beförderst die, die es tun.

Die Designer, die diesen Shift zuerst verstehen, werden das Jahrzehnt dominieren. Nicht weil Agenten Designer ersetzen, sondern weil Designer, die Agenten führen, Designer ersetzen, die es nicht tun.

Wähle einen Workflow. Schreibe das Brief. Liefere den ersten Agenten. Reviewe den Output. Mach es am Montag wieder.