UX & UI für Vibe-Coded-Produkte

Dein Produkt funktioniert. Jetzt wird es Weltklasse.

Du hast deine App oder dein Tool mit Claude Code erstellt. Es funktioniert, aber man sieht an jedem Button, dass es von der AI designed wurde. Ich nutze die Basis, erarbeite daraus eine best-in-class UX & UI und bringe Claude Code und Codex bei, dein Design System und deine Tokens zu verstehen und zu nutzen.

Design-Audit buchenSo gehe ich vor

Der Unterschied

Gleiche Funktion. Ein völlig anderes Produkt.

An der Logik ändert sich nichts. Informations-Architektur, Spacing, Farbe, States, Motion und ein echtes Design System machen den Unterschied, den deine Nutzer:innen wirklich spüren.

Was der Agent ausgeliefert hat
app · upgrade

✨ Pro Plan ✨

29 €/Monat — monatlich abgerechnet

Schöpfe das volle Potenzial deines Workflows aus — Reports, Exporte und Team-Seats — alles in einem nahtlosen, leistungsstarken Plan.

  • ✅ Unbegrenzte Projekte — keine Limits
  • ✅ Teammitglieder — nahtlose Zusammenarbeit
  • ✅ Priority-Support — 24/7

👎 vielleicht später

Nach der Überarbeitung
app · upgrade

Pro

Beliebt
29 €/ Monat

Alles, was dein Team braucht. Sauber gestaltet.

  • Unbegrenzte Projekte

    Leg so viele an, wie dein Team braucht.

  • Erweiterte Analytics

    Sieh genau, wie dein Produkt genutzt wird.

  • Priority-Support

    Echte Menschen, schnelle Reaktionszeiten.

Auf Pro upgraden

Kommt dir das bekannt vor?

Es funktioniert, sieht aber KI-generiert aus

Generische Komponenten, unzählige Emojis und Verläufe… Die Funktionalität sitzt, aber man sieht ihm an: Hier war Claude am Werk.

Kein Design System als Anker

Jeder Screen erfindet Spacing, Farbe und Hierarchie neu. Mit jedem Prompt driftet die Konsistenz ein Stück weiter.

Die Qualität leidet, sobald der Agent dran ist

Ohne Tokens und Guardrails produzieren Claude Code und Codex für dieselben Muster immer wieder leicht unterschiedliches UI.

Erst die Funktion. Das Handwerk kam nie.

Die Features sind da, aber Typografie, Spacing, States und Flows haben nie die Aufmerksamkeit bekommen, die sie verdienen.

Das Fundament

Ein Token-System, auf das dein Produkt und deine Agenten aufbauen.

Ich extrahiere oder baue die Design Tokens, die alles zusammenhalten: Farbe, Typo, Spacing, Rundungen, Schatten, etc. Sie als Tokens zu definieren ist aber nur die halbe Arbeit. Die Kür ist, Claude Code und Codex beizubringen, wie man sie damit umgehen sollen. So bleibt jeder neue Screen automatisch im Style.

Farbe

Brand
20
40
80
100
Accent
20
40
80
100
Highlight
20
40
80
100
Surface
20
40
80
100

Typografie

Aa

Überschrift

Fließtext

Legende

Abstände

4
8
12
16
24
32
48

Rundungen

12
20
28

Schatten

surface
card
popover

Was du bekommst

Best-in-class UX- und UI-Design

Für das Produkt, das du schon gebaut hast. Hierarchie, Typografie, Spacing, Farbe und States auf dem Niveau eines Senior-Design-Teams.

  • Screen-für-Screen-Redesign deiner wichtigsten Surfaces
  • Echte Hover-, Focus-, Loading-, Empty- und Error-States mit Liebe zum Design
  • Barrierefrei, konsistent und on-brand bei jedem Schritt
  • Animation und Motion, die die Funktionalität unterstützen und nicht nur blinken lassen

Ein echtes Design System und Tokens

Kein einmaliger Anstrich. Ein Token-System und Komponenten, die mitwachsen.

  • Tokens für Farbe, Typo, Spacing, Rundungen, Schatten und Motion
  • Wiederverwendbare Komponenten mit sinnvollen Defaults
  • Barrierefreiheit als Grundvoraussetzung
  • Content, der sich an deine Voice & Tone hält. Ohne – Gedankenstriche
  • So dokumentiert, dass Mensch und Agent ihm folgen können

Claude Code und Codex, die sich daran halten

Ich richte deine KI-Coding-Tools so ein, dass sie dein Design System verstehen und nutzen. Auf einem Rechner oder für deine ganze Development-Landschaft. So bleibt auch jede weitere Arbeit on-system.

  • CLAUDE.md und Projektregeln, an deine Tokens gekoppelt
  • Guardrails gegen hartkodierte Farben, Spacing und Radien
  • Design SKILLS, die wirklich bessere Interfaces erzeugen
  • Agenten, die on-brand UI produzieren, ohne Hand anlegen

Der Teil, der bleibt

Und es bleibt on-system, auch wenn wir fertig sind.

Ein Redesign, das mit dem nächsten Prompt zerfällt, ist verbranntes Geld. Also bringe ich deinen Tools & Engineers das System bei: Ich hinterlege deine Tokens in Claude Code und Codex und ergänze SKILLS & Guardrails. So ist das nächste Feature deines Teams on-brand, weil es so gebaut ist, nicht durch Zufall.

  • Tokens und Regeln, die deine Agenten bei jeder Aufgabe lesen
  • Lint- und Review-Gates, die hartkodierte Werte blockieren
  • SKILLS und Docs, die ganz einfach in jedes neue Produkt übernommen werden können
CLAUDE.md
## Design system
Always use tokens from design-tokens.ts.
Never hardcode color, spacing, or radius.

// design-tokens.ts
export const tokens = {
 color: { brand: '#FFBF00', ink: '#182B52' },
 radius: { control: 12, card: 20 },
 space: [4, 8, 12, 16, 24, 32],
}

$ npm run lint:design
✓ no hardcoded design values

So gehe ich vor

  1. 01

    Audit

    Ich gehe dein Produkt Screen für Screen durch, finde die Lücken in UX und Gestaltung und schaue, welches Design-Fundament schon da ist.

  2. 02

    Design System und Tokens

    Ich definiere oder extrahiere deine Tokens für Farbe, Typo, Spacing, Radius und Elevation. Dazu die Kern-Komponenten, auf denen alles andere aufbaut.

  3. 03

    Screens neu gestalten

    Ich bringe deine wichtigsten Screens und Flows auf Highest-Class-Niveau, mit echten States, nicht nur polierten Happy-Path-Mockups. Auf Wunsch natürlich sogar dein gesamtes Produkt.

  4. 04

    Claude Code und Codex einrichten

    Ich konfiguriere deine Agenten und dein Repo so, dass Design System und Tokens der Standard sind, mit Guardrails, die Drift abfangen, bevor sie live geht.

  5. 05

    Übergabe

    Du behältst das System, die Komponenten, das Agenten-Setup und die Regeln, um auch lange nach unserer Zusammenarbeit on-system auszuliefern.

Warum ich

Oliver Pitsch

Ich bringe 20 Jahre Design, UX und Product Erfahrung mit. Ich habe große Design-Systeme gebaut und verantwortet, Design-Teams bei Trusted Shops geleitet und liefere heute echte Produkte end-to-end mit Claude Code und KI-Agenten. Ich kenne beide Seiten: das Handwerk hinter der besten UX und genau, wie man KI-Coding-Tools dazu bringt, es verlässlich zu liefern.

20 Jahre Design & UXDesign Systeme at scaleDirector UX bei Trusted ShopsLiefert täglich mit Claude CodeGründer, AI-SaaS (Reputami)Solo-Builder (Joinride.cc, Famili.one)
Mehr über mich →

Häufig gestellte Fragen

Was genau ist ein Vibe-Coded-Produkt?+
Software, deren Funktion schnell mit KI-Unterstützung gebaut wurde, mit Tools wie Claude Code, Codex, Copilot, Cursor, Lovable oder v0, oft ohne dass ein Designer beteiligt war. Die Logik läuft. Design und UX brauchen meist noch eine erfahrene Hand.
Gestaltest du alles neu oder nur die Oberfläche?+
Wir starten dort, wo es am meisten zählt: deine wichtigsten, meistgenutzten Screens. Das System und die Tokens lege ich so an, dass der Rest des Produkts folgen kann, ohne jeden Screen einzeln neu zu bauen.
Hält die Qualität, wenn du weg bist?+
Ja. Genau dafür hinterlegen wir dein Design System in Claude Code und Codex. Deine Agenten liefern standardmäßig on-system UI, und die Guardrails fangen Drift ab, bevor sie bei den Nutzern ankommt.
Welche KI-Coding-Tools unterstützt du?+
Vor allem Claude Code und OpenAI Codex. Der Design-System- und Token-Ansatz funktioniert mit jedem agentischen Setup, inklusive Copilot, Cursor und ähnlichen Tools.
Nutzt du unser bestehendes Design System oder baust du ein neues?+
Beides. Wenn du schon Tokens und Komponenten hast, erweitere und schärfe ich sie. Wenn nicht, baue ich ein schlankes System, zugeschnitten auf dein Produkt und die Art, wie dein Team baut.
Wie lange dauert das?+
Ein fokussiertes Audit und erste neu gestaltete Screens dauern meist 2 bis 4 Wochen. Ein komplettes System samt Agenten-Setup läuft je nach Produktgröße länger. Für einen schnellen Start gibt es auch ein einwöchiges Intensiv-Format.
Was kostet das?+
Der Preis hängt von Umfang und Produktgröße ab. Für Audits und Intensiv-Formate gibt es Tagessätze, für vollständige Projekte projektbasierte Preise. Melde dich, dann finden wir ein Modell, das passt.

Kontakt

Bereit, dass dein Produkt so gut aussieht, wie es funktioniert?

Schick mir einen Link zu deinem Produkt oder ein paar Screenshots. Ich sage dir, wo die größten UX-Gewinne liegen und wie ich Design System und Agenten-Setup angehen würde. Das erste 30-Minuten-Gespräch ist kostenlos.

Direkt per E-MailAuf LinkedIn schreiben

Formale Kontaktdaten gewünscht? Siehe Impressum und Kontaktinformationen.