Wie man ein CRM mit AI baut

Ein einfaches CRM ist leichter richtig umzusetzen, wenn du nicht versuchst, alle Vertriebsprozesse auf einmal abzubilden. Starte mit dem Minimum, das einem Team erlaubt, Beziehungen und nächste Schritte zu verfolgen.

Für eine erste Version definiere:

• Nutzer: nur du oder ein kleines internes Team
• Kernobjekte: Kontakte, Unternehmen, Deals
• Aktionen: erstellen, bearbeiten, suchen, filtern, Notizen hinzufügen
• Ansichten: Dashboard, Kontakte, Unternehmen, Deals, Detailansicht für Kontakte

Schreibe auf, was jeder Screen tun soll.

Ein praktischer erster Satz von Screens sieht so aus:

• Dashboard: Summen für Kontakte, offene Deals, Deals, die diesen Monat abgeschlossen werden
• Kontakte: Tabelle mit Name, Unternehmen, E-Mail, Telefon, Status, Datum für den nächsten Follow-up
• Unternehmen: Liste von Unternehmen mit Branche und Verantwortlichem
• Deals: Pipeline-Ansicht oder einfache Tabelle mit Phase und Wert
• Detailansicht eines Datensatzes: Notizen, letzte Aktivitäten, zugehöriges Unternehmen oder Deal

Entscheide außerdem, was in Version eins nicht enthalten sein muss. Häufige Beispiele sind E-Mail-Sync, Kalender-Sync, Rollenberechtigungen, Import-Tools und Reporting über einige Zusammenfassungskarten hinaus.

AI kann einen guten ersten Entwurf der Oberfläche schreiben, aber die App lässt sich leichter verbessern, wenn die Datenstruktur von Anfang an klar ist.

Für ein leichtgewichtiges CRM halte das Schema einfach:

• contacts: id, first_name, last_name, email, phone, company_id, status, next_follow_up, notes
• companies: id, name, industry, website, owner, notes
• deals: id, name, company_id, contact_id, stage, value, expected_close_date, notes

Wenn mehr als eine Person das CRM nutzt, füge Anmeldung hinzu und denke über Ownership-Felder wie created_by oder assigned_to nach.

Wenn das CRM nur intern genutzt wird und keine Kunden bezahlt, brauchst du wahrscheinlich keine Zahlungen. Stripe ist nur relevant, wenn dein CRM selbst bezahlten Zugang, Rechnungen oder einen Checkout-Flow benötigt.

Das ist auch der Punkt, um Web oder Mobile First zu wählen. Die meisten CRM-Aufgaben lassen sich auf dem Desktop leichter prüfen, daher ist eine Website der sinnvolle Startpunkt. In Moremade werden Websites als echter React- + Tailwind-Code generiert.

Der erste Prompt sollte das Produkt, die wichtigsten Screens, den Stil und das Verhalten beschreiben. Sei präzise genug, damit die generierte App Struktur hat, aber nicht so detailliert, dass du länger am Prompt schreibst als am Testen des Ergebnisses.

Ein guter erster Prompt nennt:

• den App-Typ
• wer sie nutzt
• die wichtigsten Entitäten
• die Screens
• die anzuzeigenden Felder
• den visuellen Stil
• ob zuerst Mock-Daten verwendet oder direkt echte Daten verbunden werden sollen

Beispiel für einen ersten Prompt:

Erstelle eine einfache interne CRM-Web-App für ein kleines Vertriebsteam. Verwende ein sauberes, professionelles Layout mit linker Seitenleiste und oberer Suchleiste. Erstelle Screens für Dashboard, Kontakte, Unternehmen, Deals und eine Kontakt-Detailansicht. Verwende zuerst Mock-Daten. Kontakte sollen Name, Unternehmen, E-Mail, Telefon, Status und Datum für den nächsten Follow-up enthalten. Unternehmen sollen Name, Branche, Website und Verantwortlichen enthalten. Deals sollen Name, Unternehmen, Kontakt, Phase, Wert und erwartetes Abschlussdatum enthalten. Füge Formulare zum Erstellen und Bearbeiten von Datensätzen hinzu sowie Such- und Filterfunktionen. Verwende React und Tailwind mit einer praktischen Business-UI.

In Moremade beschreibst du die App in natürlicher Sprache, der AI-Agent schreibt den Quellcode, und du kannst sofort eine Live-Vorschau ansehen.

Die erste Version ist meistens ein Entwurf, nicht die endgültige Form. Die nützliche Gewohnheit ist, jeweils nur einen Bereich zu ändern: Layout, Tabellenspalten, Formulare, Navigation oder Detailansicht.

Moremade bietet dir eine Live-Vorschau, einen visuellen Inspektor, mit dem du auf Elemente zeigen und sie ändern kannst, und eine Code-Ansicht. Dadurch lässt sich die UI leichter schärfen, ohne das gesamte Briefing neu zu schreiben.

Verwende kurze, spezifische Folge-Prompts. Zum Beispiel:

• "Ändere den Kontakte-Screen in ein dichteres Tabellenlayout mit sortierbaren Spalten für Name, Unternehmen, Status und Datum für den nächsten Follow-up. Behalte Zeilenaktionen zum Bearbeiten und Anzeigen bei."
• "Füge eine Detail-Schublade hinzu, wenn man auf eine Kontaktzeile klickt. Zeige Notizen, das zugehörige Unternehmen, zugehörige Deals und eine Zeitleiste der letzten Aktivitäten mit Mock-Einträgen."
• "Mache die Deals-Seite zu einem Kanban-Board mit Spalten für Lead, Qualified, Proposal, Negotiation und Won. Behalte einen Tabellen-Umschalter für Nutzer, die die Listenansicht bevorzugen."

Einige praktische Prüfungen in dieser Phase:

• Sind die Bezeichnungen auf allen Screens konsistent?
• Nutzen Erstell- und Bearbeitungsformulare dieselben Feldnamen?
• Kannst du nach Person und Unternehmen suchen?
• Sind wichtige Informationen sichtbar, ohne jeden Datensatz öffnen zu müssen?
• Wirkt die App wie ein internes Tool und nicht wie eine Marketing-Website?

Wenn in einer Komponente etwas falsch ist, bitte um diese konkrete Korrektur statt um einen kompletten Neuaufbau.

Sobald sich die Mock-Daten-Version richtig anfühlt, verbinde echte Daten. Moremade hat einen eingebauten Connector für Supabase, der Datenbank, Anmeldung und Dateispeicherung abdeckt.

Für die meisten CRMs ist Supabase der nächste logische Schritt, weil du dauerhafte Datensätze und meist irgendeine Form von Authentifizierung brauchst.

Bitte in dieser Phase um:

• Supabase-Tabellen für Kontakte, Unternehmen und Deals
• Formulare, die zum Erstellen und Aktualisieren von Datensätzen verbunden sind
• Listen-Seiten, die Daten abrufen
• einfache Anmeldung, wenn mehr als eine Person die App nutzt
• Beziehungen zwischen Datensätzen, etwa ein Kontakt, der zu einem Unternehmen gehört

Halte das erste Auth-Setup einfach. E-Mail/Passwort reicht für ein internes CRM oft aus.

Füge Stripe nur hinzu, wenn deine App tatsächlich Zahlungen braucht. Ein internes CRM braucht das normalerweise nicht. Wenn du ein kundenorientiertes CRM oder ein bezahltes Portal baust, kann Moremade Stripe-Checkout mit von dir festgelegten Preisen verbinden, aber es sollte nicht Teil des Standard-Builds sein, außer es gibt eine klare Anforderung.

Auch wenn die Hauptnutzung auf dem Desktop stattfindet, werden Leute ein CRM trotzdem auf dem Handy öffnen, um eine Nummer zu prüfen, einen Deal zu aktualisieren oder nach einem Meeting eine Notiz hinzuzufügen.

Führe in der Vorschau ein paar realistische Aufgaben aus:

• einen neuen Kontakt hinzufügen
• nach einem Unternehmen suchen
• eine Deal-Phase aktualisieren
• ein Datum für den nächsten Follow-up bearbeiten
• eine Detailseite öffnen und Notizen hinzufügen

Auf Mobile solltest du dich auf die Basics konzentrieren:

• Navigation ist erreichbar
• Tabellen werden nicht unlesbar
• wichtige Aktionen sind möglichst ohne horizontales Scrollen sichtbar
• Formulare sind mit Touch-Eingaben nutzbar
• Datumsfelder und Dropdowns lassen sich leicht antippen

Wenn Mobile besonders wichtig ist, bitte die AI, das Layout für kleine Bildschirme anzupassen. Wenn du später eine dedizierte mobile App brauchst, kann Moremade React Native (Expo)-Apps generieren, aber viele Teams sollten das CRM zuerst als Web-App validieren.

Wenn die App nutzbar ist, veröffentliche sie. Moremade kann mit einem Klick auf einer kostenlosen yourname.moremade.ai-Subdomain veröffentlichen. In kostenpflichtigen Plänen kannst du eine eigene Domain verbinden, und Domains können auch direkt in Moremade gekauft werden.

Prüfe vor dem Veröffentlichen:

• Seitentitel und Navigationslabels
• leere Zustände, wenn es keine Kontakte oder Deals gibt
• Fehlerzustände in Formularen
• ob Testdaten noch sichtbar sind
• ob für private Daten eine Anmeldung erforderlich ist

Häufige Fehler, die du vermeiden solltest:

• Zu groß anfangen: Teams fragen im ersten Durchlauf oft nach Pipelines, Reports, Berechtigungen, Importen und Automatisierung. Baue zuerst einen sauberen Kern.
• Das Datenmodell überspringen: Wenn Kontakte und Unternehmen nicht klar definiert sind, wird die UI schnell inkonsistent.
• Vage Prompts verwenden: Formulierungen wie "mach es besser" liefern schwächere Ergebnisse als eine genaue Benennung von Screen und Änderung.
• Zahlungen ohne Grund hinzufügen: Stripe ist nützlich, wenn es gebraucht wird, aber viele CRMs brauchen es nicht.
• Mock-Daten versehentlich veröffentlichen: Wechsle vor dem Teilen intern zu echten Supabase-Daten.

Du kannst den vollständigen Quellcode jederzeit als ZIP exportieren oder nach GitHub pushen, sodass du nicht an das Hosting der App nur innerhalb von Moremade gebunden bist.