TL;DR

Wir haben in 18 Monaten bei Social Animal über 30 Headless-Projekte deployed. Ungefähr ein Drittel unserer kürzlich eingegangenen Aufträge ist Rettungsarbeit von designergeführten Builds, die Demos shipped haben, aber in der Produktion kaputt gingen. Michael Nervegnas Leitfaden „Claude Code for Designers" auf Substack ist für das Prototyping legitim gut -- aber er endet, bevor es um Row Level Security, Auth-Token-Refresh, Abstraktionsentscheidungen für Datenbanken, Deploy-Rollback, Content Security Policy und Admin-Authentifizierung geht. Dieser Artikel behandelt diese Lücken. Wenn Sie in die Produktion gehen, brauchen Sie diese.

Inhaltsverzeichnis

Was ist Claude Code und warum nutzen Designer es?

Claude Code ist Anthropics terminal-basiertes Codier-Tool, das Anfang 2025 gelauncht wurde. Es läuft als @anthropic-ai/claude-code und erfordert Claude Pro ($20/Monat) oder Team ($30/Platz/Monat) mit API-Zugriff. Sie schreiben, bearbeiten und debuggen Code durch Natürlichsprache in Ihrem Terminal.

Designer nutzen es, weil es die Lücke zwischen „Ich habe das in Figma designt" und „das ist eine funktionierende Next.js-App" schließt. Anders als v0 oder Bolt operiert Claude Code auf Ihrem tatsächlichen Dateisystem. Es liest Ihre Projektstruktur, modifiziert Dateien, führt Ihren Dev-Server aus und iteriert bei Fehlerausgabe. Für jemanden, der Komponenten-Hierarchien versteht, aber keine TypeScript-Generics auswendig lernen möchte, ist das genuinely useful.

Nervegna positioniert es als ein Tool, das Designern ermöglicht, „systemisch zu denken" anstatt über Syntax. Wir stimmen zu. Wo wir divergieren, ist das, was nach dem ersten npm run dev erfolg passiert.

Was macht Nervegnas Leitfaden richtig?

Nervegna trifft drei Dinge, die die meisten KI-Codier-Tutorials verpassen.

Erstens: Projektkontex. Er empfiehlt, Claude Code eine CLAUDE.md-Datei mit Ihren Projektkonventionen, Tech Stack und Design Tokens zu geben. Wir haben gesehen, dass Claude Code Tailwind-Utilities gegen ein Projekt generiert, das CSS Modules nutzt, weil niemand ihm die Konventionen sagte. Kontext vor dem Codeschreiben zu etablieren ist der richtige Ansatz.

Zweitens: die iterative Schleife. Prompt, Output überprüfen, Kurs korrigieren, wiederholen. Er behandelt Claude Code nicht als einen „beschreib und ship"-Button. Er behandelt es als einen Pairing-Partner, der Aufsicht braucht. Das ist das korrekte mentale Modell.

Drittens: klein anfangen. Eine einzelne Komponente oder Seite bauen, bevor man versucht, vollständige Anwendungsgerüste zu scaffolden. Wir haben Designer gesehen, die prominen „bau mir ein vollständiges SaaS-Dashboard mit Auth, Billing und Admin" in einer Nachricht. Das Ergebnis ist immer ein Chaos. Nervegnas inkrementeller Ansatz vermeidet das.

Wo Nervegnas Leitfaden Designer gut bedient, ist die 0-zu-Prototyp-Phase. Das Problem ist, dass Prototypen zu Production Code werden, und da werden die Lücken wichtig.

Wo endet der Leitfaden zu kurz?

Nervegnas Stück liefert für die Prototyping-Phase. Es behandelt keine Bedenken, die dringend werden, wenn Sie eine echte Datenbank, echte Benutzer und echte Deployment-Infrastruktur verbinden.

Was fehlt:

  1. Row Level Security (RLS) -- von Claude Code generierte Supabase-Projekte haben fast nie korrekte RLS-Richtlinien
  2. Auth-Handoff -- die Lücke zwischen Supabase Auth in Entwicklung und Production Flows mit Token-Refresh, Session-Management und Redirect-Handling
  3. Abstraktionsentscheidungen für Datenbanken -- wann man Supabase-Client direkt nutzt gegenüber Prisma oder Drizzle ORM
  4. Deploy-Rollback-Strategie -- was passiert, wenn ein Claude Code Commit die Produktion bricht
  5. Content Security Policy -- besonders für Next.js Image mit Proxy-/externen Assets
  6. Admin-Authentifizierung -- wenn Sie rollenbasierte Zugriffe jenseits einfacher User-Auth brauchen

Lass uns jeden einzelnen durchgehen.

Row Level Security Fallstricke, die Claude nicht erkennt

Row Level Security ist Supabase's Mechanismus, um sicherzustellen, dass Datenbankabfragen nur Zeilen zurückgeben, die der anfragende Benutzer sehen darf. Wenn Sie eine Tabelle in Supabase erstellen, ist RLS standardmäßig deaktiviert. Jeder authentifizierte Benutzer -- oder in manchen Konfigurationen jede anonyme Anfrage -- kann jede Zeile lesen.

Wenn Claude Code ein Supabase-Projekt scaffoldet, erstellt es Tabellen und schreibt client-seitige Abfragen. Es wird manchmal RLS-Richtlinien hinzufügen, wenn Sie danach fragen. Aber die Richtlinien, die es generiert, sind oft auf subtile Weise falsch.

Häufige RLS-Fehler in KI-generiertem Code

Fehler Was passiert Wie man es behebt
RLS überhaupt nicht aktiviert Jeder authentifizierte Benutzer liest alle Daten ALTER TABLE your_table ENABLE ROW LEVEL SECURITY;
Richtlinie nutzt auth.uid() aber Tabelle hat keine user_id Spalte Richtlinie kompiliert aber passt null Zeilen, blockiert allen Zugriff Fügen Sie user_id UUID REFERENCES auth.users(id) hinzu und füllen Sie es
SELECT-Richtlinie existiert aber keine INSERT/UPDATE/DELETE-Richtlinien Benutzer können lesen aber nicht ihre eigenen Daten schreiben Erstellen Sie separate Richtlinien für jede Operation
Richtlinie nutzt nur auth.role() = 'authenticated' Jeder angemeldete Benutzer kann alle Zeilen sehen, nicht nur ihre eigenen Fügen Sie auth.uid() = user_id Bedingung hinzu
Service-Role-Schlüssel in client-seitigem Code genutzt RLS wird vollständig umgangen Stellen Sie SUPABASE_SERVICE_ROLE_KEY nie in Client-Bundles zur Verfügung

Wir haben das letzte -- Service-Role-Schlüssel in Client-Code -- in drei separaten von Designern gebauten Projekten dieses Jahr gesehen. Claude Code wird den Service-Role-Schlüssel manchmal nutzen, weil er „funktioniert" und keine Berechtigungsfehler wirft. Der Schlüssel umgeht alle RLS. Er gehört nur in server-seitigen Code (API Routes, Server Actions, Edge Functions). Nie in einer use client Komponente.

Nervegna behandelt RLS in seinem Leitfaden nicht, was verständlich ist. Aber wenn Sie seinem Workflow folgen und sich mit Supabase verbinden, überprüfen Sie jede Tabelle manuell. Führen Sie das in den Supabase SQL-Editor ein:

SELECT schemaname, tablename, rowsecurity
FROM pg_tables
WHERE schemaname = 'public';

Wenn rowsecurity für eine Tabelle, die Benutzerdaten speichert, false ist, stoppen Sie und beheben Sie es, bevor Sie deployen.

Auth-Handoff: Die Lücke zwischen Prototyp und Produktion

Auth ist der häufigste Fehlerpunkt in designergeführten Builds. Nicht weil das initiale Setup falsch ist -- Supabase Auth ist einfach zu scaffolden -- sondern weil Production Auth Edge Cases beinhaltet, die während lokaler Entwicklung nicht auftauchen.

Nervegnas Leitfaden konzentriert sich darauf, dass Dinge lokal funktionieren. Hier ist, was beim Deployen bricht:

Token-Refresh-Fehler

Supabase Auth Tokens verfallen nach 3600 Sekunden (1 Stunde) standardmäßig. Der Supabase-Client handhabt Refresh automatisch -- theoretisch. In der Praxis, wenn Ihr Next.js Middleware oder Server Components einen neuen Supabase-Client bei jeder Anfrage erstellen, ohne die existierende Session zu übergeben, bekommen Sie intermittierende 401 Fehler nach der ersten Stunde.

Mit Next.js App Router brauchen Sie @supabase/ssr (Version 0.5.x ab Februar 2025) und korrekte Cookie-Handhabung in Middleware. Claude Code generiert oft das ältere, deprecated @supabase/auth-helpers-nextjs Paket. Überprüfen Sie Ihre package.json.

OAuth Redirect URI Mismatches

OAuth-Provider (Google, GitHub) erfordern exakte Redirect URIs. Claude Code konfiguriert diese für localhost:3000. Wenn Sie zu Vercel oder Netlify deployen, müssen Sie Ihre Production URL und alle Preview Deployment URLs sowohl in der OAuth-Provider-Konsole als auch in Supabase's Auth-Einstellungen unter „Redirect URLs" hinzufügen. Das dauert 5 Minuten blockiert aber 100% der OAuth-Logins, wenn Sie es verpassen.

Das Session-Sync-Problem

In Next.js 14+ haben Sie Server Components, Client Components, Middleware, API Routes und Server Actions -- alle potenziell needing the current user session. Der Supabase-Client muss in jedem Kontext unterschiedlich erstellt werden. Claude Code erstellt oft eine einzelne createClient() Utility und nutzt sie überall, was zu Hydrations-Mismatches und stalen Sessions führt.

Sie brauchen minimum drei Client-Erstellungs-Funktionen:

  • createBrowserClient() für Client Components
  • createServerClient() für Server Components und Server Actions
  • createMiddlewareClient() für Middleware

Das ist in Supabase's SSR-Leitfaden dokumentiert, aber Claude Code generiert es nicht konsistent korrekt.

Supabase vs Prisma: Wofür sollte Claude Code generieren?

Nervegna behandelt diese Entscheidung nicht, und sie ist wichtiger als die meisten Designer realisierten.

Supabase-Client (@supabase/supabase-js) fragt die Datenbank über Supabase's PostgREST API ab. Es ist praktisch, erfordert keine Schema-Definitionsdateien und funktioniert direkt mit RLS. Aber es gibt Ihnen keine Typ-Sicherheit jenseits von dem, was Supabase generiert, und es koppelt Ihre Anwendung eng an Supabase's Infrastruktur.

Prisma ORM (aktuell v6.x) verbindet sich direkt zu PostgreSQL. Es gibt Ihnen eine Schema-Datei (schema.prisma), generierte TypeScript Typen, Migrations und Datenbank-agnostische Abfragen. Aber es respektiert RLS-Richtlinien nicht (es verbindet sich als privilegierter Benutzer) und es erfordert einen Build-Schritt um den Client zu generieren.

Drizzle ORM (v0.36.x) ist eine leichtere Alternative mit SQL-ähnlicher Syntax und besserer Edge-Runtime-Unterstützung.

Entscheidungsmatrix

Faktor Supabase-Client Prisma Drizzle
RLS-Unterstützung Native Muss in App-Schicht implementiert werden Muss in App-Schicht implementiert werden
Typ-Sicherheit Generiert via CLI Generiert aus Schema Schema-als-Code
Edge-Runtime kompatibel Ja Limited (Prisma Accelerate erforderlich) Ja
Learning Curve für Designer Low Medium Medium
Vendor Lock-in High (Supabase) Low Low
Claude Code Generierungs-Qualität Good Good Inconsistent

Unsere Empfehlung: Wenn Sie einen Prototypen bauen oder immer auf Supabase laufen, nutzen Sie Supabase's Client. Wenn Sie von Supabase wegmüssen oder strikt schema-gesteuerte Entwicklung wollen, nutzen Sie Drizzle. Wir haben uns von Prisma für neue Projekte abgewendet wegen Edge-Runtime-Limitierungen, obwohl Prisma Accelerate ($0 für 60K Abfragen/Monat, dann $49/Monat) das verbessert hat.

Sagen Sie Claude Code Ihre Entscheidung explizit in Ihrer CLAUDE.md Datei. Wenn Sie das nicht tun, wird es Ansätze mischen -- manchmal via Supabase-Client abfragen, manchmal via ORM -- und Sie enden mit zwei verschiedenen Datenzugriffs-Mustern im selben Projekt.

Deploy-Rollback: Was passiert, wenn Ihr KI-generierter Code kaputtgeht

Nervegnas Leitfaden geht iterativ durchs Feature-Bauen. Er behandelt nicht, was passiert, wenn eine Claude Code Session einen Commit generiert, der lokal Dev passed aber Produktion bricht.

Das passiert häufiger als Sie erwarten würden. Claude Code kann in einer einzelnen Prompt-Antwort 15 Dateien modifizieren. Wenn Sie das als eine Einheit committen und deployen, bedeutet Rollback, alle 15 Änderungen zu revertieren -- selbst wenn 13 fine waren.

Eine praktische Rollback-Strategie

1. Commit nach jeder logischen Änderung, nicht nach jeder Claude Code Session. Wenn Claude Auth, UI und Database Schema in einer Session modifiziert, machen Sie drei separate Commits.

2. Nutzen Sie Vercel's instant rollback. Wenn Sie auf Vercel deployen, ist jedes Deployment immutable. Sie können zu jedem vorherigen Deployment in unter 10 Sekunden vom Dashboard rollback. Netlify bietet das Gleiche.

3. Laufen Sie niemals Database Migrations direkt von Claude Code aus. Wenn Claude eine Migration-Datei generiert, überprüfen Sie sie manuell, bevor Sie npx supabase db push oder npx prisma migrate deploy laufen. Eine gelöschte Spalte ist nicht etwas, das Sie mit einem Git Revert zurückrollen können.

4. Taggen Sie known-good-Zustände. Bevor Sie eine Claude Code Session starten, die kritische Pfade betrifft (Auth, Payments, Datenmodelle), erstellen Sie ein Git Tag: git tag pre-auth-refactor. Falls Dinge schiefgehen, git reset --hard pre-auth-refactor bringt Sie zurück.

5. Preview Deployments sind obligatorisch, nicht optional. Vercel und Netlify erstellen beide Preview Deployments für jeden PR. Mergen Sie nicht zu main ohne durch die Preview zu klicken. Claude Code kann Code generieren, der lokal funktioniert aber in Production fehlschlägt wegen fehlender Umgebungsvariablen, Edge-Runtime-Inkompatibilitäten oder CSP-Verletzungen.

Content Security Policy für Proxy-Assets

Das ist niche aber bisse hard, wenn Sie eine von Designern gebaute Site deployen.

Next.js's <Image> Komponente proxied externe Bilder durch /_next/image standardmäßig. Das ist großartig für Optimierung. Aber wenn Sie einen Content Security Policy Header haben (und Sie sollten), müssen Sie die Domains, von denen Ihre Bilder kommen, explizit erlauben.

Claude Code setzt next.config.js mit remotePatterns auf für Bild-Optimierung aber wird keine CSP Headers hinzufügen. Wenn Sie hinter Vercel's Sicherheit Headers deployen oder Ihre eigenen via Middleware hinzufügen, brechen externe Bilder still -- sie laden lokal (wo CSP oft lax ist) aber failed in Production.

Hier ist das Minimum, das Sie in Ihrem Middleware oder next.config.js Headers brauchen:

// middleware.ts
const cspHeader = `
  default-src 'self';
  script-src 'self' 'unsafe-eval' 'unsafe-inline';
  style-src 'self' 'unsafe-inline';
  img-src 'self' blob: data: https://your-supabase-project.supabase.co https://your-cdn.com;
  font-src 'self';
  connect-src 'self' https://your-supabase-project.supabase.co;
  frame-ancestors 'none';
`;

Ersetzen Sie 'unsafe-eval' und 'unsafe-inline' mit Nonces für Production Hardening. Der Punkt ist: Wenn Claude Code Bilder von Unsplash, Supabase Storage oder irgendeinem externen CDN zieht und Sie fügen diese Domains nicht zu Ihrer CSP img-src Direktive hinzu, bekommen Sie broken Images in Production mit zero Console Errors in Entwicklung.

Wann brauchen Sie tatsächlich Admin-Auth?

Nervegnas Leitfaden behandelt grundlegende Benutzer-Authentifizierung. Viele von Designern gebaute Projekte brauchen eine Admin-Schnittstelle -- eine Weise für den Site-Owner oder Content-Team um Daten zu verwalten, ohne die Datenbank direkt zu berühren.

Die Frage ist: Wann brauchen Sie Custom Admin Auth als separate Concern gegenüber nur Supabase's Dashboard zu nutzen?

Sie brauchen KEINE Custom Admin Auth wenn:

  • Sie sind die einzige Person, die Inhalte verwaltet
  • Ihr Client ist komfortabel mit Supabase's Table Editor
  • Das Projekt hat weniger als 3 Content Types
  • Updates passieren weniger als einmal pro Woche

Sie brauchen Custom Admin Auth wenn:

  • Nicht-technische Team-Mitglieder müssen Inhalte verwalten
  • Sie brauchen Approval Workflows oder Draft/Publish States
  • Das Projekt hat rollenbasierte Zugriffe (Editor vs. Admin vs. Viewer)
  • Sie verwalten nutzer-generierte Inhalte, die Moderation erfordern

Wenn Sie Admin Auth brauchen, ist der einfachste Ansatz eine role Spalte auf Ihrer profiles Tabelle (die auth.users spiegelt) mit einem Enum: 'user' | 'editor' | 'admin'. Dann fügen Sie RLS-Richtlinien hinzu, die diese Role überprüfen:

CREATE POLICY "Admins can do anything"
ON public.posts
FOR ALL
USING (
  EXISTS (
    SELECT 1 FROM public.profiles
    WHERE profiles.id = auth.uid()
    AND profiles.role = 'admin'
  )
);

Claude Code kann das generieren, wenn Sie es spezifisch prominen. Ohne den Prompt wird es zu einfachen auth.uid() = user_id Richtlinien defaulten, die keine Admin-Zugriffe berücksichtigen. Sie enden mit einem Admin, der keine anderen Benutzer-Inhalte sehen kann.

Nervegnas Workflow von Anforderungen in einer CLAUDE.md Datei zu definieren würde das fangen -- wenn Sie rollenbasierte Zugriffe in Ihre Anforderungen einzubeziehen denken. Fügen Sie es der Datei hinzu, bevor Sie anfangen zu bauen.

Bevor Sie zu Prod pushen: Die Checkliste

Das ist das, was wir bei Social Animal vor dem Deployen eines Projekts nutzen, das von KI-Codier-Tools gebaut oder signifikant unterstützt wurde.

Datenbank & Sicherheit

  • RLS ist auf jeder Tabelle im public Schema aktiviert
  • RLS-Richtlinien existieren für SELECT, INSERT, UPDATE und DELETE auf jeder Tabelle
  • SUPABASE_SERVICE_ROLE_KEY wird nur in server-seitigem Code genutzt (grep Ihre Codebasis: grep -r "SERVICE_ROLE" --include="*.ts" --include="*.tsx")
  • Kein Supabase-Client wird mit dem Service-Role-Schlüssel in irgendeiner Datei, die 'use client' enthält, erstellt
  • Database Migrations wurden manuell überprüft
  • Foreign Key Constraints existieren wo erwartet
  • Indexes existieren auf Spalten, die in WHERE Klauseln und RLS-Richtlinien genutzt werden

Authentifizierung

  • @supabase/ssr wird genutzt (nicht deprecated @supabase/auth-helpers-nextjs)
  • Separate Client-Erstellungs-Funktionen existieren für Browser, Server und Middleware Kontexte
  • OAuth Redirect URIs sind konfiguriert für Production Domain UND Preview Deployment Domains
  • Token-Refresh wird getestet (setzen Sie temporär ein kurzes Verfallsdatum und überprüfen Sie, dass Sessions überleben)
  • Protected Routes redirekt zu Login, wenn Session absent ist
  • Logout löscht alle Cookies und server-seitigen Session-Zustand

Admin & Roles

  • Wenn Admin-Features existieren, Role-Checks passieren auf RLS-Level (nicht nur UI-Level Hiding)
  • Admin Routes sind geschützt durch Middleware, nicht nur conditional Rendering
  • Default Role für neue Benutzer ist die least privileged Role

Deployment & Rollback

  • Umgebungsvariablen sind auf der Deployment-Plattform gesetzt
  • Ein known-good Git Tag existiert von bevor die letzten Major KI-unterstützten Änderungen
  • Preview Deployment wurde getestet durch Klick-durch core Flows
  • Vercel/Netlify instant rollback wird verstanden und ist für das Team dokumentiert
  • Database Backups sind aktiviert (Supabase Pro Plan enthält tägliche Backups für $25/Monat)

Content Security & Assets

  • CSP Headers enthalten alle externen Bild-Domains in img-src
  • CSP Headers enthalten Supabase Projekt URL in connect-src
  • next.config.js remotePatterns matched CSP img-src Domains
  • Fonts sind self-hosted oder ihr CDN ist in font-src
  • Kein mixed content (HTTP Ressourcen auf HTTPS Seiten)

Code Qualität

  • TypeScript strict Mode ist aktiviert ("strict": true in tsconfig.json)
  • Kein @ts-ignore oder any Typen, die Claude Code hinzugefügt hat um Fehler zu supprimieren
  • npm run build passed ohne Warnings (nicht nur npm run dev)
  • Error Boundaries existieren für Client Components, die Daten fetchen
  • Loading und Error States existieren für async Operationen

Performance

  • Images nutzen Next.js <Image> Komponente mit width und height oder fill
  • Kein client-seitiges Data Fetching für Daten, die in Server Components fetched werden könnten
  • Bundle Size wurde überprüft (npx next@latest build zeigt Route Sizes)
  • Lighthouse Score ist über 90 für Performance (run auf dem Preview Deployment, nicht localhost)

Diese Checkliste ist nicht umfassend. Sie ist das Minimum für ein Projekt, das Supabase, Next.js und KI-generiertem Code berührt.

FAQ

Ist Claude Code gut genug für Designer um Production Apps zu bauen?

Claude Code ist exzellent beim Generieren von funktionierten Code aus Design Intent. Aber Production Readiness erfordert Sicherheits-, Auth- und Infrastruktur-Wissen, das das Tool nicht unprompted zur Verfügung stellt. Paaren Sie es mit einer Checkliste und Code Review von jemandem mit Backend-Erfahrung.

Funktioniert Nervegnas Leitfaden für Projekte jenseits von Prototypen?

Nervegnas Workflow -- context-first Prompting, incremental Building, iterative Review -- skaliert gut. Die Lücke ist in Production Concerns wie RLS, Auth Edge Cases und Deployment Strategy. Sein Ansatz ist sound; er braucht Ergänzung für irgendetwas Benutzer-facing.

Sollte ich Supabase oder Prisma mit Claude Code nutzen?

Nutzen Sie Supabase's Client-Bibliothek, wenn Sie RLS Enforcement auf Datenbank-Level wollen und Sie sind committed zu der Supabase-Plattform. Nutzen Sie Drizzle ORM, wenn Sie Datenbank-Portabilität und Edge-Runtime-Kompatibilität wollen. Wir haben uns von Prisma für neue Projekte abgewendet wegen Edge Limitations.

Wie verhindere ich, dass Claude Code den Supabase Service-Role-Schlüssel in Client Code nutzt?

Fügen Sie eine explizite Regel zu Ihrer CLAUDE.md Datei hinzu: „Nutzen Sie niemals SUPABASE_SERVICE_ROLE_KEY in Client Components. Nutzen Sie ihn nur in Server Actions, API Routes oder Middleware." Claude Code respektiert Project-Level Instruktionen, wenn sie klar geklärt sind.

Was ist der billigste Weg, eine Claude Code-generierte Next.js App zu deployen?

Vercel's free Hobby Plan unterstützt ein Production Deployment pro Projekt. Supabase's free Tier enthält 2 Projekte mit 500MB Database und 1GB File Storage. Gesamtkosten: $0/Monat für low-traffic Sites. Erwarten Sie, zu Vercel Pro ($20/Monat) und Supabase Pro ($25/Monat) zu wechseln, sobald Sie echte Benutzer haben.

Wie oft generiert Claude Code Code mit Sicherheitsproblemen?

In unserer Erfahrung haben ungefähr 40% der Claude Code Sessions, die Database Operationen beinhalten, Code mit mindestens einer RLS-Lücke. Es ist nicht böswillig -- das Tool optimiert für „funktionierenden" Code, und RLS-Verletzungen produzieren keine Fehler. Sie exponieren Daten einfach still. Immer manuell auditieren.