KI-App-Designer: mobile Screens, gebaut und im Simulator geprüft

Was ein KI-App-Designer macht

Er gestaltet im Code der App, also ist das, was du prüfst, das, was ausgeliefert wird.

• Legt neue Screens an und verfeinert bestehende mit deinen Komponenten.
• Folgt den Konventionen von iOS und Android: Navigation, Safe Areas, Dynamic Type und Touch-Ziele.
• Startet die App im Simulator oder Emulator und macht von jeder Änderung Screenshots.
• Prüft Dark Mode, kleine und große Bildschirme sowie Accessibility-Labels.
• Bereitet Screenshots für App Store und Play Store vor.

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 nehmen.
• Ihn mit den Komponenten der App bauen oder anpassen.
• Ihn im Simulator auf einem kleinen und einem großen Gerät laufen lassen, hell und dunkel.
• Korrigieren, was nicht stimmt, und dann das Ergebnis per Screenshot festhalten.
• Einen Pull Request mit den Screenshots öffnen.

KI-App-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: App-UI-Designer
   Ziel: 2 App-Screens pro Woche.
   
   ## Für jeden Screen
   1. Bau ihn mit unseren Komponenten und den Plattformkonventionen.
   2. Starte ihn im Simulator: kleines und großes Gerät, hell und dunkel.
   3. Prüfe Safe Areas, Dynamic Type, Touch-Ziele und Labels.
   4. Öffne einen PR mit Simulator-Screenshots.
   
   ## Regeln
   - Ändere Navigationsstruktur oder Onboarding nicht, ohne zu fragen.
   - Reiche keine Builds im App Store oder Play Store ein.

2. Gib ihm die Tools, die er braucht

   Das Repository der App, Xcode und der iOS-Simulator oder Android Studio und ein Emulator auf dem Rechner, auf dem er läuft, eine Möglichkeit für Screenshots und deine Komponentenbibliothek.

3. Leg fest, was dein Ja braucht

   Er soll fragen, bevor er Navigation, Onboarding oder Paywall-Screens ändert, und er darf nie selbst Builds einreichen oder Store-Einträge bearbeiten.

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

Für den Entwickler, der die Logik hinter seinen Screens umsetzt, siehe den KI-Softwareentwickler. Für Web-Interfaces siehe den KI-UI-Designer.

KI-App-Designer einstellen statt selbst skripten

Bei Crewmark steht ein KI-App-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-App-Designer: häufige Fragen