KI-UI-Designer: einheitliche Interfaces, in deinem eigenen Code

Was ein KI-UI-Designer macht

Sein Ergebnis ist Code, also ist eine Änderung bereit zum Ausliefern, sobald du sie freigibst.

• Prüft Seiten auf uneinheitliche Typografie, Abstände und Farben und behebt sie mit deinen Design-Tokens.
• Macht aus einmaligem Markup gemeinsame Komponenten.
• Ergänzt und prüft den Dark Mode.
• Behebt Probleme bei der Barrierefreiheit: Kontrast, Fokuszustände, Labels und Tastaturbedienung.
• Macht Vorher-nachher-Screenshots in Desktop- und Smartphone-Breite für das Review.

Ziele, die du ihm gibst

Gib einem KI-Mitarbeiter eine einzige Zahl, die er bewegen soll, so wie einer neuen Kollegin oder einem neuen Kollegen, und prüfe sie jede Woche. Such dir für den Anfang eins dieser Ziele aus.

Sein Tagesablauf

• Den nächsten Screen vom Board oder aus seiner Audit-Liste nehmen.
• Screenshots in Desktop- und Smartphone-Breite machen, hell und dunkel.
• Ihn mit den Tokens und Komponenten des Designsystems verbessern; eine Komponente anlegen, wenn sich ein Muster wiederholt.
• Ihn erneut im Browser prüfen und die Barrierefreiheits-Checks ausführen.
• Einen Pull Request mit Vorher-nachher-Screenshots öffnen.

KI-UI-Designer mit Claude Code oder Codex einrichten

1. Schreib die Rollenbeschreibung

   Speichere sie als CLAUDE.md (Claude Code) oder AGENTS.md (Codex) im Repository, in dem der Mitarbeiter arbeitet, damit jede Session mit seiner Aufgabe, seinem Ziel und seinen Regeln startet. Siehe den CLAUDE.md-Leitfaden.

   # Rolle: UI-Designer
   Ziel: 3 fertige Screens pro Woche.
   
   ## Für jeden Screen
   1. Mach Screenshots: Desktop und Smartphone, hell und dunkel.
   2. Korrigiere Typo, Abstände und Farben nur mit unseren Tokens.
   3. Nutze Komponenten wieder; extrahiere eine, wenn sich ein Muster wiederholt.
   4. Prüfe Kontrast, Fokuszustände und Labels.
   5. Öffne einen PR mit Vorher-nachher-Screenshots.
   
   ## Regeln
   - Keine neuen Farben, Schriften oder Abstandswerte außerhalb der Tokens.
   - Frag, bevor du Texte, Layouts wichtiger Flows oder die Marke änderst.

2. Gib ihm die Tools, die er braucht

   Das Frontend-Repository und ein lokaler Dev-Server, ein Browser, den er für Screenshots steuern kann, deine Design-Tokens und deine Komponentenbibliothek sowie ein Barrierefreiheits-Checker.

3. Leg fest, was dein Ja braucht

   Er soll fragen, bevor er die Marke (Logo, Farben, Schriften), Texte, das Layout von Anmelde- oder Checkout-Flows oder irgendetwas ändert, das Kunden auf einer konvertierenden Seite bemerken.

4. Gib ihm einen Zeitplan

   Eine Rolle braucht einen Rhythmus, keinen einzelnen Prompt. Nutze /loop oder geplante Aufgaben für einen wiederkehrenden Prompt, oder gib ihm Arbeitszeiten, einen Heartbeat und ein Board mit Issues; siehe Claude Code proaktiv machen.

Verwandte Leitfäden

Wie ein Designer neben einem Entwickler arbeitet, zeigt mehrere Claude-Code-Agenten. Damit er sich selbst Arbeit nimmt, lies Claude Code proaktiv machen.

KI-UI-Designer einstellen statt selbst skripten

Bei Crewmark steht ein KI-UI-Designer bereit, den du direkt einstellen kannst. Er läuft in deiner Claude-Code-, Codex-, DeepSeek-Harness- oder OpenCode-Session mit dem Abo, das du schon bezahlst, wacht während der Arbeitszeiten per Heartbeat auf, nimmt sich das nächste Issue von einem gemeinsamen Board und schreibt dir, wenn er eine Entscheidung braucht.

1. Wähle die Rolle

   Skills, Ziel und Zeitplan sind schon eingerichtet. Ersetze das Ziel durch deine eigene Zahl.

2. Verbinde dein Projekt

   Führe den Setup-Befehl im Repository oder Ordner aus, in dem er arbeitet. Er bekommt seine eigene Session und seinen eigenen Checkout.

3. Prüfen statt babysitten

   Er kommentiert seine Issues während der Arbeit und fragt vor allem, was auf deiner Freigabeliste steht. Lies, was ein KI-Mitarbeiter ist.

KI-UI-Designer: häufige Fragen