1. Was wir bauen
Um den Ansatz greifbar zu machen, bauen wir ein konkretes Beispiel: ein CRM für ein kleines Vertriebsteam. Aber der Punkt ist nicht das CRM – der Ansatz funktioniert für jede Business-App: Projektmanagement, Auftragserfassung, Ticketsystem, was auch immer.
Das Ergebnis nach ca. 2 Wochen:
┌────────────────────────────────────────────────────────┐ │ MyCRM Dashboard Kontakte Deals │ ├────────────────────────────────────────────────────────┤ │ │ │ ┌────────────┐ ┌────────────┐ ┌────────────┐ │ │ │Offene Deals│ │ Umsatz MTD │ │Aktivitäten │ │ │ │ 12 │ │ €48.500 │ │ 34 │ │ │ └────────────┘ └────────────┘ └────────────┘ │ │ │ │ Pipeline │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ │ Qualif. │ │ Angebot │ │Verhandl. │ │ Gewonnen │ │ │ │ Deal A │ │ Deal C │ │ Deal E │ │ Deal G │ │ │ │ Deal B │ │ Deal D │ │ │ │ Deal H │ │ │ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │ │ │ │ Letzte Aktivitäten │ │ • 10:30 Anruf mit Firma ABC - Follow-up vereinbart │ │ • 09:15 Angebot an XYZ GmbH versendet │ └────────────────────────────────────────────────────────┘
2. Unser Ansatz: Iterativ mit KI
Vergiss „3 Wochen Planung, dann 3 Wochen Umsetzung". Mit KI als Co-Pilot arbeiten wir inkrementell: Wir starten mit dem Grundgerüst und bauen dann Feature für Feature fertig. Jedes Feature durchläuft denselben Zyklus:
Planen
Was braucht der Mitarbeiter?
Bauen
Claude Code generiert
Prüfen
Anschauen, testen, fühlen
Wiederholen
Bis es passt
Warum funktioniert das mit KI so gut?
Code ist billig geworden
Claude Code schreibt in Minuten, wofür du früher Tage gebraucht hast. Wenn dir das Ergebnis nicht passt, wirfst du es weg und baust es anders.
Varianten kosten fast nichts
Du kannst zwei verschiedene Umsetzungen eines Features bauen und dich dann für die bessere entscheiden. Ohne KI wäre das undenkbar gewesen.
Dein Fokus verschiebt sich
Statt „Wie code ich das?" fragst du dich: „Was passt am besten zum Arbeitsalltag des Mitarbeiters?" Das ist die eigentlich wichtige Frage.
Der wichtigste Satz in diesem ganzen Artikel:
Die KI schreibt den Code. Dein Job ist es, zu entscheiden, was am besten zum Prozess des Mitarbeiters passt. Das ist der Fokus. Alles andere ist Werkzeug.
Wo deine Zeit wirklich hingeht
Was Claude in Minuten macht
- CRUD-APIs generieren
- React-Komponenten bauen
- Datenbank-Schema erstellen
- Formular-Validierung
- Zwei Varianten eines Features
Worauf DU dich konzentrierst
- Wie arbeitet der Mitarbeiter heute?
- Welche Variante fühlt sich besser an?
- Welche Felder braucht er wirklich?
- Wo sind die Schmerzpunkte?
- Was kann weg, was muss dazu?
3. Tech-Stack & Voraussetzungen
Was du brauchst
npm install -g @anthropic-ai/claude-code
Unser Tech-Stack
Claude Code
KI-gestützter Coding-Assistent direkt im Terminal. Versteht Kontext, generiert Code, führt Befehle aus.
Next.js (App Router)
Fullstack React mit Server Components, API Routes und eingebautem Routing. Alles in einem Projekt.
PostgreSQL + Prisma
Robuste relationale Datenbank mit Type-Safe ORM. Migrationen, Seeding und Query-Builder inklusive.
NextAuth.js v5
Authentifizierung mit OAuth-Providern, Credentials und Session-Management.
S3-kompatibler Block Storage
Dateiablage für Dokumente und Anhänge. Presigned URLs für sicheren Up-/Download.
SonarQube + OWASP ZAP + Nuclei
Statische Code-Analyse, Dynamic Application Security Testing und Vulnerability Scanning.
4. Vorbereitung ist alles
Bevor du den ersten Prompt schreibst, gibt es einen Schritt, der alles danach besser macht: Du erstellst eine CLAUDE.md im Projekt-Root. Das ist die Memory-Funktion von Claude Code – eine Datei, die bei jedem Prompt automatisch mitgelesen wird.
Stell dir CLAUDE.md vor wie ein Briefing für einen neuen Entwickler. Du erklärst einmal: welchen Tech-Stack wir nutzen, welche Konventionen gelten, worauf zu achten ist. Claude Code liest das bei jedem einzelnen Prompt mit und hält sich daran.
CLAUDE.md erstellen
Erstelle eine CLAUDE.md für unser CRM-Projekt. Sie soll enthalten: - Projektbeschreibung (CRM für Vertriebsteam, 5-10 User) - Tech-Stack mit Versionen - Coding-Konventionen (z.B. Server Components bevorzugen, Prisma für DB) - Ordnerstruktur - Worauf bei jedem Feature zu achten ist (Validierung, Auth-Checks, etc.)
Claude generiert dir eine solide Basis. Die passt du an und ergänzt sie, wenn du im Projekt weiter vorankommst. Hier ein Beispiel, wie sie aussehen könnte:
# MyCRM – Projekt-Kontext
## Projektbeschreibung
CRM-System für ein kleines Vertriebsteam (5-10 User).
Kontakte, Firmen, Deals mit Pipeline, Aktivitäten, Dashboard.
## Tech-Stack
- Next.js 15 (App Router, Server Components)
- TypeScript (strict mode)
- PostgreSQL 16 + Prisma ORM
- NextAuth.js v5 (Credentials + Google OAuth)
- Tailwind CSS + shadcn/ui
- S3-kompatibler Block Storage für Dateien
- Recharts für Diagramme
## Coding-Konventionen
- Server Components als Standard, Client Components nur wenn nötig
- Prisma für alle DB-Zugriffe, kein raw SQL
- Zod-Schemas für Input-Validierung (API + Formulare)
- Deutsche Labels im UI, englische Variablennamen im Code
- Fehler mit try/catch und sinnvollen Fehlermeldungen
- Jede API-Route prüft Auth via getServerSession()
## Ordnerstruktur
src/
app/ → Pages & API Routes (App Router)
components/ → React Components
ui/ → shadcn/ui Basis-Komponenten
features/ → Feature-spezifische Komponenten
lib/ → Utilities, DB-Client, Auth-Config
types/ → TypeScript-Typen
prisma/
schema.prisma → Datenbank-Schema
seed.ts → Testdaten
## Regeln für jedes Feature
- Input immer mit Zod validieren
- Auth-Check in jeder API-Route
- Loading States und Error States einbauen
- Mobile-first: responsive ab 320px
- Keine Inline-Styles, immer Tailwind5. Grundgerüst aufsetzen
Erste Iteration: Wir bauen das Skelett. Noch keine Features – nur ein lauffähiges Projekt mit Datenbank, Auth und leeren Seiten. Das ist die Basis, auf der wir Feature für Feature aufbauen.
Projekt & Datenbank
npx create-next-app@latest my-crm --typescript --tailwind --app --src-dir cd my-crm
docker run --name crm-postgres \ -e POSTGRES_PASSWORD=crm_secret_2024 \ -e POSTGRES_DB=mycrm \ -p 5432:5432 \ -d postgres:16
Richte das Grundgerüst ein: 1. Prisma mit PostgreSQL. Schema: User, Contact, Company, Deal (Pipeline-Stages), Activity, File. 2. NextAuth v5 mit Credentials-Provider + Prisma-Adapter. 3. Basis-Layout mit Sidebar-Navigation: Dashboard, Kontakte, Firmen, Deals, Aktivitäten. 4. Leere Seiten für jeden Menüpunkt. 5. Seed mit realistischen Testdaten (deutsche Firmennamen). DATABASE_URL: postgresql://postgres:crm_secret_2024@localhost:5432/mycrm
Jetzt prüfst du: Starte die App, klick dich durch. Stimmt die Navigation? Fehlt ein Menüpunkt? Ist der Seed realistisch genug? Wenn nicht – gleich anpassen. Nicht aufschreiben und irgendwann später machen.
6. Features iterativ bauen
Jetzt kommt der Kern: Feature für Feature bauen. Jedes Feature durchläuft den Zyklus Planen → Bauen → Prüfen. Und wenn's nicht passt? Anpassen und nochmal. Das kostet dich mit KI Minuten, nicht Tage.
Kontakt-Management
Planen
Ich brauche eine Kontaktverwaltung. Der Vertriebsmitarbeiter will: - Schnell einen Kontakt finden (Suche über Name, Firma, E-Mail) - Auf einen Blick sehen: welche Deals laufen, letzte Aktivitäten - Neuen Kontakt in unter 30 Sekunden anlegen Welche Felder sind ein Muss, welche optional?
Bauen
Baue das Kontakt-Management: - DataTable mit Suche, Sortierung, Pagination - Kontakt-Detail-Seite mit verknüpften Deals und Aktivitäten - Create/Edit Modal mit Validierung (zod) - API Routes: GET (Liste+Filter), GET/:id, POST, PUT/:id, DELETE/:id
┌──────────────────────────────────────────────────────────────┐ │ Kontakte [+ Neuer Kontakt] │ │ ┌────────────────────────────────────────────────────┐ │ │ │ 🔍 Suche nach Name, E-Mail... │ │ │ └────────────────────────────────────────────────────┘ │ │ │ │ Name │ Firma │ E-Mail │ Deals │ │ ─────────────────┼─────────────┼──────────────────┼──────── │ │ Max Mustermann │ ABC GmbH │ max@abc.de │ 3 │ │ Lisa Schmidt │ XYZ AG │ lisa@xyz.de │ 1 │ │ Tom Weber │ DEF KG │ tom@def.de │ 5 │ │ │ │ Seite 1 von 4 [← ] [1] [2] [3] [→] │ └──────────────────────────────────────────────────────────────┘
Prüfen
Öffne die Kontakte-Seite. Suche einen Namen. Lege einen neuen Kontakt an. Geht das in unter 30 Sekunden? Sind die richtigen Felder da? Fühlt sich der Workflow natürlich an?
Anpassen
Zu viele Felder im Formular? Rauswerfen. Spalte fehlt in der Tabelle? Ergänzen. Das ist eine 2-Minuten-Änderung mit Claude.
Firmen-Verwaltung
Planen
Firmen-Verwaltung. Der Mitarbeiter will: - Alle Firmen als Karten sehen (nicht nur Tabelle) - Pro Firma: wie viele Kontakte, offene Deals, Gesamtwert - Firmen-Detail mit Tabs: Kontakte, Deals, Dateien Was ist die sinnvollste Ansicht für einen Vertriebler?
Bauen
Baue die Firmen-Verwaltung: - Karten-Grid mit Key-Metriken (Kontakte, Deals, Wert) - Detail-Seite mit Tabs - CRUD, Branchenfilter, Größenfilter - Autocomplete für Kontakt-Verknüpfung
Prüfen
Scrolle durch die Firmenkarten. Findest du auf einen Blick die Info, die du brauchst? Klick in eine Firma rein – ist alles da? Fehlt was, das ein Vertriebler braucht?
Anpassen
Vielleicht stellt sich raus, dass Karten auf Mobile nicht gut funktionieren. Dann baust du eine responsive Tabellenansicht als Alternative. 10 Minuten Aufwand.
Deal-Pipeline (Kanban)
Planen
Die Pipeline ist das Herzstück. Der Vertriebsleiter will: - Auf einen Blick: welche Deals in welchem Status - Per Drag & Drop Deals zwischen Stages verschieben - Summe pro Stage sehen - Filter: meine Deals vs. alle Deals Stages: Qualifiziert → Angebot → Verhandlung → Gewonnen / Verloren
Bauen
Baue ein Kanban-Board für die Deal-Pipeline: - Drag & Drop mit @hello-pangea/dnd - Deal-Karte: Titel, Firma, Wert, Owner, Alter - Summe pro Stage in der Spalten-Überschrift - Click öffnet Deal-Detail - Filter nach Owner und Zeitraum
┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │Qualifiz. │ │ Angebot │ │Verhandl. │ │ Gewonnen │ │ €24.000 │ │ €67.500 │ │ €45.000 │ │€123.000 │ │ │ │ │ │ │ │ │ │┌────────┐│ │┌────────┐│ │┌────────┐│ │┌────────┐│ ││Website ││ ││ERP- ││ ││Cloud- ││ ││CRM ││ ││Relaunch││ ││System ││ ││Migrat. ││ ││Projekt ││ ││€12.000 ││ ││€45.000 ││ ││€45.000 ││ ││€80.000 ││ ││ABC GmbH││ ││XYZ AG ││ ││DEF KG ││ ││GHI Ltd ││ │└────────┘│ │└────────┘│ │└────────┘│ │└────────┘│ └──────────┘ └──────────┘ └──────────┘ └──────────┘
Prüfen
Verschiebe einen Deal per Drag & Drop. Fühlt sich das flüssig an? Stimmen die Summen? Ist die Karte übersichtlich genug? Teste auf dem Handy – funktioniert Touch?
Anpassen
Hier lohnt es sich besonders, Varianten zu bauen (siehe nächster Abschnitt). Kanban vs. Tabelle mit Status-Dropdown – was bevorzugt dein Team?
Aktivitäten-Log
Planen
Aktivitäten-Tracking. Der Mitarbeiter will: - Schnell eine Notiz nach einem Anruf hinterlassen - Auf der Kontakt-/Deal-Seite sehen: was ist bisher passiert? - Typen: Anruf, E-Mail, Meeting, Notiz, Aufgabe Wie mache ich das Quick-Add so schnell wie möglich?
Bauen
Baue den Aktivitäten-Log: - Timeline-Ansicht auf Kontakt- und Deal-Detail-Seiten - Quick-Add: Inline-Formular direkt in der Timeline - Globale Seite mit Filter (Typ, Datum, User) - Farbkodierte Icons pro Typ
Prüfen
Erstelle eine Aktivität. Wie viele Klicks brauchst du? Ist das Formular zu lang? Ist die Timeline auf der Detail-Seite übersichtlich?
Anpassen
Oft ist weniger mehr: Vielleicht reichen 3 Typen statt 5. Das Formular auf das absolute Minimum reduzieren – nur Typ, Notiz, fertig.
Dashboard
Planen
Dashboard für den Vertriebsleiter. Auf einen Blick: - Wie viele Deals offen? Wert? - Wie läuft der Monat? (Gewonnene Deals) - Was steht an? (nächste Aktivitäten) - Wer performed? (optional) Was sind die 4 wichtigsten Zahlen?
Bauen
Baue ein Dashboard: - KPI-Karten: Offene Deals, Pipeline-Wert, Gewonnen MTD, Anstehende Aktivitäten - Pipeline-Chart (Recharts) - Umsatz-Trend 6 Monate (Line Chart) - Letzte 5 Aktivitäten Server Components mit parallelen Prisma-Queries.
Prüfen
Zeig das Dashboard jemandem aus dem Vertrieb. Versteht er die Zahlen sofort? Fehlt eine wichtige KPI? Ist die Reihenfolge sinnvoll?
Anpassen
Das Dashboard ist ein Dauerbrenner für Iterationen. KPIs ändern sich, Charts werden ergänzt. Mit KI ist jede Anpassung eine Sache von Minuten.
Datei-Upload
Planen
Dateiablage. Mitarbeiter wollen: - Angebote, Verträge, Notizen an Kontakte/Deals anhängen - Drag & Drop zum Hochladen - Vorschau für PDFs und Bilder Was ist der einfachste Upload-Flow?
Bauen
Baue Datei-Upload: - Drag & Drop Zone (react-dropzone) - Upload zu S3 via Presigned URL - Dateien an Kontakte, Firmen, Deals anhängen - Vorschau (Thumbnails für Bilder, Icons für Docs) - Download- und Löschen-Buttons
Prüfen
Lade eine Datei hoch. Wie fühlt sich der Drag & Drop an? Siehst du den Fortschritt? Ist die Vorschau hilfreich?
Anpassen
Braucht ihr wirklich Datei-Upload, oder reicht ein Link-Feld zu Google Drive/SharePoint? Manchmal ist die einfachste Lösung die beste.
7. Der KI-Vorteil: Varianten bauen & vergleichen
Das hier ist der eigentliche Game-Changer: Du kannst zwei komplett verschiedene Umsetzungen eines Features bauen und dann entscheiden, welche besser passt. Ohne KI wäre das Irrsinn – mit Claude Code ist es eine Frage von Minuten.
Beispiel: Pipeline-Ansicht
Dein Vertriebsteam ist sich nicht einig: Kanban-Board oder Tabelle? Bau einfach beides:
┌────────┐ ┌────────┐ ┌────────┐ │Qualif. │ │Angebot │ │Gewonnen│ │ │ │ │ │ │ │ Deal A │ │ Deal C │ │ Deal E │ │ Deal B │ │ Deal D │ │ │ └────────┘ └────────┘ └────────┘
- + Visueller Überblick
- + Drag & Drop intuitiv
- - Viele Deals = unübersichtlich
Deal │ Stage │ Wert │ Firma ─────────┼──────────┼─────────┼────── Website │ Qualif. │ €12.000 │ ABC ERP │ Angebot │ €45.000 │ XYZ Cloud │ Verhandl.│ €45.000 │ DEF
- + Kompakt, viele Deals sichtbar
- + Sortierung & Filter einfach
- - Weniger visuell, kein D&D
Baue eine zweite Variante der Pipeline-Ansicht als Tabelle: - Gleiche Daten wie das Kanban-Board - Spalten: Deal-Name, Stage (als Badge), Wert, Firma, Owner, Alter - Stage-Wechsel per Dropdown statt Drag & Drop - Sortierbar nach jeder Spalte - Filter nach Stage, Owner, Zeitraum Mach es als eigene Komponente, die ich neben dem Kanban testen kann.
Jetzt zeigst du beides deinem Team. Einer sagt „Kanban, klar!", der andere „Tabelle ist viel schneller". Am Ende baust du vielleicht einen Toggle, der zwischen beiden Ansichten wechselt. Oder du merkst, dass eine Variante eindeutig gewinnt.
Warum das so mächtig ist
In klassischen Projekten baut man eine Variante, weil man sich zwei nicht leisten kann. Dann wird wochenlang in Meetings diskutiert, welche Variante es sein soll – ohne sie je gesehen zu haben.
Mit KI baust du beides in einer Stunde, zeigst es den Leuten, und die Diskussion ist in 5 Minuten beendet. Weil alle sehen können, wovon sie reden.
8. Qualität & Sicherheit
Qualität ist kein separater Schritt am Ende – sie ist Teil jeder Iteration. Trotzdem lohnt sich ein dedizierter Durchlauf mit Security-Tools, bevor die App live geht.
SonarQube: Code-Qualität
# SonarQube starten docker run -d --name sonarqube -p 9000:9000 sonarqube:community # Analyse laufen lassen npx sonarqube-scanner \ -Dsonar.projectKey=my-crm \ -Dsonar.sources=./src \ -Dsonar.host.url=http://localhost:9000 \ -Dsonar.token=YOUR_TOKEN
Hier sind die SonarQube-Findings: [Findings einfügen] Behebe alle kritischen und hohen Issues. Erkläre bei jedem Fix kurz, warum das ein Problem war.
OWASP ZAP: Security-Scan
# Passive Scan (schnell) docker run -t ghcr.io/zaproxy/zaproxy:stable \ zap-baseline.py -t http://host.docker.internal:3000 # Active Scan (gründlich) docker run -t ghcr.io/zaproxy/zaproxy:stable \ zap-full-scan.py -t http://host.docker.internal:3000
Nuclei: CVE-Check
nuclei -u http://localhost:3000 \ -t cves/ -t vulnerabilities/ -t misconfiguration/
Claude fixt die meisten Findings automatisch. Das Schöne am iterativen Ansatz: Du findest Security-Issues früh, nicht erst am Ende wenn alles fertig ist.
Ehrliche Einordnung: Wo sind die Grenzen?
SonarQube, OWASP ZAP und Nuclei sind automatisierte Scanner. Sie finden bekannte Muster – SQL Injection, XSS, fehlende Headers, bekannte CVEs. Das ist eine solide Grundlage, aber es ist nicht alles.
Was automatisierte Tools nicht finden: Business-Logik-Fehler (User A sieht Daten von User B), Architektur-Schwächen, unsichere Workflows oder kreative Angriffsvektoren. Dafür braucht es einen erfahrenen Entwickler, der mitdenkt.
Internes Tool hinter VPN
Diese Checks sind eine solide Basis. Für Software, die nur im geschützten Firmennetzwerk läuft, bist du damit gut aufgestellt.
Öffentlich erreichbar
Dann brauchst du zusätzlich einen professionellen Security-Audit durch einen erfahrenen Senior-Entwickler. Automatisierte Scanner ersetzen keine menschliche Expertise.
Bei uns ist ein professioneller Security-Audit fester Bestandteil des Prozesses – bevor etwas live geht.
9. Das Ergebnis
Nach ca. 2 Wochen hast du eine funktionierende Business-App. Nicht weil du 2 Wochen durchgecodet hast, sondern weil du in kurzen Zyklen iteriert hast – und dich auf das konzentriert hast, was wirklich zählt.
Wohin deine 2 Wochen wirklich gehen
Was du gewonnen hast
- App, die zum echten Prozess passt
- Feedback-Schleifen statt Annahmen
- Varianten verglichen, nicht geraten
- Security von Anfang an geprüft
- Iterativer Muskel für die Zukunft
Was noch fehlt für Production
- Wartung, Updates & Monitoring
- Integration in echte Systeme
- DSGVO-konformes Hosting
- Skalierung & Performance
- Professionelle Fehlerbehandlung
Die wichtigste Erkenntnis
KI hat nicht das Programmieren ersetzt. Sie hat das Ausprobieren ersetzt: Statt wochenlang in Meetings zu diskutieren, baust du es einfach und schaust ob's passt.
Der Mensch, der den Prozess versteht, ist wichtiger als je zuvor. Die KI ist nur das Werkzeug – die richtigen Fragen stellst du.
10. Du willst das nicht selbst machen?
Wir machen genau das – nur professioneller, schneller und mit Enterprise-Qualität. Wir bauen individuelle Software für mittelständische Unternehmen. Was wir zusätzlich liefern:
Professionelle Prozessanalyse
Wir verstehen die Arbeitsabläufe deiner Mitarbeiter, bevor wir eine Zeile Code schreiben.
Integration in bestehende Systeme
ERP, E-Mail, Telefonie, Kalender – alles verbunden.
Enterprise-grade Security
DSGVO, Penetration Testing, Compliance – von Anfang an.
Langfristige Wartung & Support
Wir lassen dich nach dem Launch nicht im Stich.