Claude Code für Designer: Ein Arbeitsplatz für Designer

Die Designerin, mit der ich letzten Monat zusammengearbeitet habe, hat innerhalb von drei Tagen ein komplettes Refactoring des Designsystems abgeschlossen. Sie ist keine Programmiererin. Sie kennt sich nicht mit Bash aus. Sie hatte noch nie einen regulären Ausdruck geschrieben. Sie hatte Claude Code, eine CLAUDE.md-Datei und die Angewohnheit, ihre eigenen Fehlentscheidungen offenzulegen.

Über diese Version des Tools spricht niemand. Jeder Claude Code-Beitrag wird von einem erfahrenen Programmierer für erfahrene Programmierer verfasst. Er ist voll von Agenten-Lanes, Hook-Skripten und obskuren Flags. Designer lesen ihn, nehmen an, er sei nichts für sie, und schließen den Tab.

Doch er ist genau das Richtige für Sie. Ehrlich gesagt sogar wichtiger als für die meisten Programmierer. Denn das Problem, mit dem Designer zu kämpfen haben, ist nicht das Schreiben von Code. Es ist die Pflege eines Designsystem über zehn Repositories hinweg, während das Team ständig neue Funktionen hinzufügt. Genau dieses Problem löst Claude Code im Handumdrehen.

Claude Code ist ein Agent, keine Autovervollständigung

Claude Code ist kein Copilot-Klon von GitHub. Es ist kein Chatfenster mit Code-Design. Es ist ein dauerhaft laufender Agent, der in Ihrem Terminal aktiv ist, Ihr gesamtes Repository durchsucht, Dateien bearbeitet, Tests ausführt, Pull Requests öffnet und sich meldet, wenn er nicht weiterkommt.

Der entscheidende Unterschied: Er wartet nicht darauf, dass Sie ihm sagen, welche Zeile bearbeitet werden soll. Sie geben ihm ein Ziel vor. Er findet heraus, welche Dateien geöffnet werden müssen, was geändert werden muss, ob eine neue Komponente hinzugefügt oder eine bestehende modifiziert werden soll und wie der restliche Code währenddessen weiterläuft.

Das ist der Punkt, der für Designer alles verändert. Sie zeigen nicht mehr auf bestimmte Zeilen. Sie beschreiben die Ergebnisse. Ergebnisse präzise zu beschreiben, ist eine eigene Disziplin, die in Schnelle Konstruktion für Designer behandelt wird. „Aktualisieren Sie alle Button-Komponenten, sodass sie das neue Fokusring-Token verwenden, einschließlich der alten deaktivierten Variante, und stellen Sie sicher, dass die Storybook-Stories weiterhin erfolgreich ausgeführt werden.“ Das ist ein Satz. Und gleichzeitig ein ganzer Tag Design-Operations-Arbeit, der in vier Minuten verpufft ist.

Die Aufgabe eines Designers war schon immer Geschmack, nicht Syntax. Claude Code macht Geschmack zum eigentlichen Produkt.

Installation in zehn Minuten

Sie benötigen drei Dinge: Node.js, ein Terminal und einen Claude-Account.

1. Öffnen Sie das Terminal (Mac: Cmd+Leertaste, geben Sie „Terminal“ ein). Sie geben zwei Befehle ein. Das ist die gesamte Installation.

2. Installieren Sie Node.js, falls Sie es noch nicht haben. Gehen Sie zu nodejs.org, klicken Sie auf den LTS-Download und führen Sie ihn aus. Dieser Schritt ist ein normales Installationsprogramm mit einem Doppelklick.

3. Fügen Sie im Terminal Folgendes ein: npm install -g @anthropic-ai/claude-code

4. Navigieren Sie zu Ihrem Design-Repository: cd ~/path/to/your/repo

5. Führen Sie Folgendes aus: claude

Beim ersten Start werden Sie durch die Anmeldung geführt. Fertig.

Das Repository kann beliebig sein: ein Designsystem-Paket, eine Next.js Marketing-Website, ein Storybook, ein Figma Token-Export, eine Tailwind-Konfiguration – was auch immer Sie verwenden. Wenn es ein Ordner mit Dateien ist, kann Claude Code ihn lesen.

| Schritt | So sieht es aus | Dauer |

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

| Node installieren | Standard-Mac/Windows-Installer | 2 Min. |

| Claude Code installieren | Ein npm-Befehl | 1 Min. |

| Anmelden | Browser-Weiterleitung | 1 Min. |

| Erste Sitzung | claude in einem beliebigen Ordner | Sofort |

Schreiben Sie CLAUDE.md wie ein Designbriefing, nicht wie eine Readme-Datei.

CLAUDE.md ist die Datei, die Claude Code jedes Mal als Erstes liest, wenn ein Repository geöffnet wird. Entwickler verwenden sie für Build-Befehle und Testpfade. Das ist in Ordnung. Dadurch geht aber auch 90 % des eigentlichen Potenzials verloren.

Behandeln Sie CLAUDE.md wie ein Designbriefing für einen neuen Designer. Es enthält die gewünschte Sprache, Markenrichtlinien, die Produktbeschreibung, Dinge, die wir niemals tun, und wie sauberes Arbeiten aussieht. Jeder Satz in CLAUDE.md muss nicht wiederholt werden.

Die Vorlage, die ich jedem neuen Designer gebe:

# CLAUDE.md

## What this repo is
One line. "Marketing site for Acme, a B2B analytics tool for finance teams."

## Voice
Three adjectives that describe how we write. Three phrases we never use. One example of a sentence we would ship and one we would cut.

## Design system
Where tokens live (path). Where components live (path). How we name things. Forbidden patterns (no inline styles, no hardcoded hex, no px values for spacing).

## Components we have
One-line descriptions of Button, Card, Hero, Nav, etc. So Claude does not build a new one when we already have it.

## What clean work looks like
A short paragraph. "We ship small, focused PRs. We update the Storybook story when we change a component. We never introduce a new dependency without asking."

## What to ask before proceeding
"If you are about to add a new color, stop and ask. If you are about to rename a component, stop and ask."

## Review standards
"Every change must pass typecheck and lint. Screenshots of before/after for any visual change."

Erstellen Sie sie einmal pro Repository. Aktualisieren Sie sie, sobald Sie etwas Neues über die Fehler des Agenten in Ihrer Codebasis erfahren. Die Auswirkungen summieren sich.

Die fünf wichtigsten Workflows

Die meisten Claude Code-Tutorials listen zwanzig Funktionen auf. Fünf davon machen 90 % der Arbeit eines Designers aus.

Designsystempflege. „Finde alle Stellen, an denen noch die alten Abstandswerte (8px, 16px, 24px) verwendet werden, und ersetze sie durch Platzhalter (--space-2, --space-4, --space-6). Aktualisiere die Komponenten. Sorge dafür, dass die User Stories weiterlaufen.“ Zwei Minuten. Früher eine Woche.

Komponenten-Refactoring. „Unser Button hat zwölf Varianten. Überprüfe sie. Sag mir, welche drei tatsächlich verwendet werden und welche neun überflüssig sind. Schlage dann eine konsolidierte API vor und implementiere sie hinter einem Feature-Flag.“ Du prüfst den Vorschlag. Du stimmst zu. Die Komponente wird veröffentlicht.

Figma-zur Seite. Füge einen Screenshot von Figma ein oder, besser noch, verbinde Figma MCP. Sag: „Erstelle diesen Hero-Bereich mit unseren bestehenden Komponenten und Tokens, nicht mit neuen.“ So erhältst du innerhalb von ein bis zwei Feedbackrunden einen Pull Request, der dem Design entspricht.

Token-Weitergabe. Brand aktualisiert eine Farbe. „Ersetze --color-accent im gesamten Monorepo und führe eine Typüberprüfung durch.“ Die Arbeit besteht nicht im Tippen, sondern im Mut. Claude Code hat unbegrenzten Mut und kein Ego.

Visuelle Überprüfung. „Starte den Entwicklungsserver, erstelle Screenshots von jeder Seite und teile mir mit, welche Seiten im Vergleich zum letzten Deployment fehlerhafte Abstände oder Überläufe aufweisen.“ Das ist Gold wert, wenn dein Repository Playwright oder ein ähnliches Setup verwendet. Es entdeckt Dinge, die dem Auge entgehen.

| Designsystem-Sweep | 2 bis 5 Tage, 1 Designer + 1 Entwickler | 20 Minuten, 1 Designer |

| Komponenten-Audit + Refactoring | 1 Sprint | 1 Nachmittag |

| Figma-zu-Seite | 1 bis 3 Tage | 1 bis 3 Stunden |

| Token-Propagation | Woche, fehleranfällig | Minuten, zuverlässig |

| Visueller Regressionstest | Normalerweise nie | Jeder Pull Request |

Figma verwenden, nicht den Screenshot

Wenn Sie nur eine PNG-Datei haben, fügen Sie diese ein. Claude Code verarbeitet Bilder. Dabei gehen Abstände und typografische Feinheiten verloren, die Struktur bleibt jedoch erhalten.

Wenn Sie Figma haben, verbinden Sie den Figma MCP-Server. Die Installation dauert nur fünf Minuten und ermöglicht Claude Code direkten Lesezugriff auf Ihre Figma-Frames. Frame-IDs, Ebenennamen, Abstandswerte, Token-Verknüpfungen – die gesamte Struktur. Die Ausgabequalität verbessert sich enorm. Das Modell muss nicht mehr raten.

Eine Regel gilt jedoch immer: Verwenden Sie Ihr bestehendes Designsystem, keine leere Leinwand. „Erstellen Sie dies mit unseren Komponenten“ ist immer besser als „Erstellen Sie dies“. Wenn Sie die Leinwand leer lassen, erfindet Claude Code Komponenten, die Sie bereits haben. Das ist reine Zeitverschwendung.

Wo Claude Code Ihr Vertrauen verliert

Seien Sie ehrlich zu sich selbst. Hier versagt das Tool aktuell.

Echte Markenillustration. Alles, was einen bestimmten künstlerischen Stil, handgezeichnete Charaktere oder Markenmaskottchen erfordert, die Ihrer Marke entsprechen müssen. Claude Code verwendet Generatoren, hat aber keinen Geschmack. Dafür beauftragen Sie weiterhin Prismlight, Runesmith oder einen Illustrator.

Subjektiver Layout-Geschmack. Ein Generator kann eine Seite korrekt layouten. Er kann Ihnen aber nicht sagen, ob die Seite emotional langweilig ist. Er kann Ihnen nicht sagen, ob der Held mehr Raum braucht. Er kann nicht spüren, ob eine Gewichtsentscheidung falsch ist. Das müssen Sie immer noch selbst entscheiden.

Produktentscheidungen auf Basis grundlegender Prinzipien. Ein Generator kann alles umsetzen, was Sie verlangen. Er kann Ihnen aber nicht sagen, ob Sie danach fragen sollten. Das ist immer noch die Aufgabe des Designers, der schließlich auch bezahlt wird.

Alles, wo das Repository unübersichtlich ist. Wenn Ihre Codebasis kein konsistentes System, keine CLAUDE.md-Datei, keine Namenskonventionen und keine Tokens hat, wird Claude Code das Chaos nur noch schneller verschlimmern. Sie müssen zuerst die Grundlagen bereinigen. Das ist zwar ärgerlich, aber auch verständlich.

Weitere Informationen zu KI-Workflows finden Sie unter Brainy Papiere. Für eine professionelle Implementierung in Ihrem Designteam klicken Sie auf Brainy einstellen. Wir kümmern uns dann um die Einrichtung und den ersten Workflow.

Checkliste für Designer-Einsteiger

Tag 1: Hier die vollständige Liste.

• Installieren Sie Claude Code (npm-Befehl, ca. 1 Minute).

• Melden Sie sich an und überprüfen Sie die Sitzung.

• Wählen Sie ein Repository. Nur eines. Fangen Sie klein an.

• Schreiben Sie CLAUDE.md anhand der obigen Vorlage. Nehmen Sie sich dafür eine Stunde Zeit.

• Wählen Sie einen der fünf Workflows. Führen Sie ihn komplett durch.

• Überprüfen Sie die Änderungen sorgfältig. Geben Sie sie nicht einfach ab. Sie sind der Art Director.

• Melden Sie Claude, wo es Probleme gab. Aktualisiere CLAUDE.md mit der Lektion.

• Führe einen weiteren Workflow durch. Mach es morgen.

Nach einer Woche wirst du den Unterschied spüren. Nach einem Monat willst du nicht mehr zurück.

FAQ

Muss ich programmieren können, um Claude Code zu verwenden?

Nein. Du musst wissen, was du willst, wie du es beschreibst und wie du einen Diff gut genug liest, um zu sagen: „Das ist richtig“ oder „Das ist falsch“. Wenn du schon einmal einem Junior-Designer Feedback gegeben hast, bringst du diese Fähigkeit mit.

Ist Claude Code sicher in einem Produktions-Repository?

Ja, wenn du einen Branch verwendest. Führe es niemals im Haupt-Branch aus. Erstelle einen Branch, lass Claude Code dort arbeiten, überprüfe den Pull Request wie jeden anderen und merge ihn, wenn er gut ist. Git schützt dich. Genauso wie die Anforderung, dass Pull Requests Tests bestehen müssen.

Claude Code vs. Cursor vs. v0 vs. Lovable – worin liegt der Unterschied?

Cursor ist ein vollwertiger Editor mit integriertem Claude. v0 und Lovable generieren die Benutzeroberfläche anhand von Eingabeaufforderungen, bleiben aber nicht dauerhaft im Repository. Claude Code ist headless, kann in jedem Repository verwendet werden und ist die leistungsstärkste Lösung für bestehende Codebasen. Für brandneue Prototypen sind v0 oder Lovable schneller. Für die Entwicklung realer Produkte ist Claude Code die beste Wahl.

Was kostet Claude Code?

Ein Claude Max-Abonnement deckt die Kosten ab und ist für die meisten Designer der optimale Einstieg. Größere Teams wechseln zur API-basierten Preisgestaltung. In jedem Fall ist Claude Code günstig im Vergleich zur Zeitersparnis durch die oben genannten Workflows.

Wofür sollte ich Claude Code niemals verwenden?

Markenillustrationen, subjektive Geschmacksanalysen, Produktstrategie – alles, was erfordert, zu wissen, warum ein Nutzer die Funktion tatsächlich wünscht. Überlassen Sie das Ihren Entwicklern. Die wiederkehrende Umsetzung können Sie dem Tool überlassen.

Sie sind nicht mehr der Junior

Lange Zeit waren Designer diejenigen, die die Vision entwarfen und sie den Entwicklern übergaben, die sie dann umsetzten. Das bedeutete Warten. Auf freie Sprintkapazitäten. Auf Backend-Arbeit. Darauf, dass jemand anderes die Texte tippte.

Diese Ära ist vorbei.

Der Junior ist keine Person mehr. Der Junior ist ein Modell. Sie sind der Art Director.

Schreiben Sie CLAUDE.md wie ein Designbriefing. Geben Sie die Arbeit an den Agenten weiter. Überprüfen Sie die Änderungen wie den Entwurf eines Juniors – anhand der Standards. Senden Sie ihn zurück, wenn er fehlerhaft ist. Veröffentlichen Sie ihn, wenn er korrekt ist.

Die Überarbeitung des Designsystems dauert drei Tage, nicht drei Sprints. Die Marketing-Website wird diese Woche veröffentlicht, nicht erst im nächsten Quartal. Die Token-Aktualisierung erfolgt innerhalb von Minuten, nicht erst nach tagelangem Warten.

Installieren Sie es. Schreiben Sie das Briefing. Liefern Sie das Projekt ab.