So erstellen Sie mit KI eine Verzeichnis-Website

Bevor Sie den Builder öffnen, schreiben Sie die kleinste nützliche Version der Website auf.

Für die meisten Verzeichnis-Websites bedeutet das:

• eine Homepage, die die Nische erklärt
• eine Listing-Seite mit Karten
• Suche und einige Filter
• eine Detailseite für jeden Eintrag
• eine Seite für Einreichungen oder Kontakt, wenn Leute Listings vorschlagen können
• grundlegende Navigation und Footer-Seiten

Definieren Sie außerdem die Datenstruktur. Ein Verzeichnis besteht hauptsächlich aus Datensätzen, also seien Sie bei den Feldern konkret. Beispiel-Felder:

• Name
• Kategorie
• Stadt oder Region
• kurze Beschreibung
• Website-URL
• Bild
• Preismodell
• Tags
• Kontakt-E-Mail

Entscheiden Sie dann, wer was tun darf:

• Besucher können browsen und suchen
• Redakteure können Listings hinzufügen oder aktualisieren
• Unternehmen können ihren eigenen Eintrag einreichen

Wenn die erste Version nur ein kuratiertes Verzeichnis ist, brauchen Sie vielleicht noch kein Login. Wenn Nutzer Konten, gespeicherte Elemente oder Einreichungen benötigen, planen Sie das vor dem Build ein.

Der erste Prompt ist wichtig, weil er die Struktur, die Technik und den Ton des Projekts festlegt. In Moremade beschreiben Sie die Website in einfacher Sprache, und der KI-Agent schreibt den Quellcode und zeigt dann eine Live-Vorschau.

Ein guter erster Prompt sollte Folgendes abdecken:

• die Art des Verzeichnisses
• die Seiten, die Sie brauchen
• die wichtigsten Felder für jeden Eintrag
• den visuellen Stil
• ob Inhalte vorerst statisch sind oder später mit Daten verbunden werden
• eventuelle Anforderungen für Mobilgeräte

Bleiben Sie konkret. Bitten Sie nicht gleich um alles auf einmal, wenn Sie den Workflow noch festlegen.

Erstelle eine Verzeichnis-Website mit React + Tailwind für unabhängige Cafés in Lissabon. Füge eine Homepage, eine Browse-Seite mit durchsuchbaren Listing-Karten, Filter für Viertel und Preis sowie eine Detailseite für jedes Café hinzu. Jeder Eintrag soll Name, Foto, kurze Beschreibung, Adresse, Öffnungszeiten, Website und Tags wie wifi oder brunch zeigen. Verwende ein klares redaktionelles Layout mit einfacher Navigation und einem mobilfreundlichen Kartenraster. Starte mit Beispieldaten. Füge eine Seite zum Café-Einreichen mit Formular-Layout hinzu, aber noch kein Backend.

Nach dem ersten Build prüfen Sie die Live-Vorschau so, als würden Sie einen Frontend-Entwurf eines Teammitglieds reviewen. Achten Sie auf Seitenhierarchie, Abstände, Filterverhalten, Lesbarkeit der Karten und darauf, ob die Detailseite die richtigen Informationen zeigt.

Moremade erlaubt Änderungen per Chat, außerdem gibt es einen visuellen Inspektor und eine Code-Ansicht. Verwenden Sie kurze, konkrete Anfragen, statt das gesamte Briefing neu zu schreiben.

Drei nützliche Folge-Prompts:

• "Ändere die Listing-Karten so, dass das Bild 4:3 ist, die Tags unter die Beschreibung kommen und der Website-Link ein sekundärer Button wird."
• "Füge eine sticky Filterleiste auf der Browse-Seite mit Suche, Viertel- und Preisfilter hinzu. Auf Mobilgeräten sollen die Filter in einem Drawer zusammenklappen."
• "Schreibe den Hero- und Intro-Text der Homepage neutraler und sachlicher um. Füge einen Abschnitt hinzu, der erklärt, wie Shops ausgewählt werden."

Diese Phase dauert meist mehrere Runden. Konzentrieren Sie sich jeweils auf eine Art von Änderung:

• Layout und Navigation
• Filterlogik und Karteninhalt
• Texte und Bezeichnungen
• Abstände auf Mobilgeräten
• Barrierefreiheit, etwa Button-Text und Kontrast

Wenn eine Seite gut funktioniert, bitten Sie den Builder, dieses Muster auf den Rest der Website zu übertragen.

Viele Verzeichnisse können zunächst mit Beispiel- oder kuratierten Inhalten starten. Fügen Sie Backend-Bausteine nur hinzu, wenn es einen echten Bedarf gibt.

Nutzen Sie Supabase, wenn Sie Folgendes brauchen:

• eine Datenbank für Listings
• Admin- oder Nutzer-Login
• Dateispeicher für Bilder
• von Nutzern eingereichte Listings

Beispiel-Fälle:

• ein lokales Branchenverzeichnis, bei dem Redakteure Datensätze in einer Datenbank anlegen
• ein Mitgliederverzeichnis, bei dem sich Nutzer einloggen, um ihr Profil zu verwalten
• ein Verzeichnis mit Einreichungs-Workflow

Nutzen Sie Stripe, wenn das Verzeichnis für etwas Gebühren verlangt, zum Beispiel für:

• bezahlte Listing-Einreichungen
• gesponserte Platzierungen
• Abo-Zugang zu Premium-Daten

Halten Sie den Umfang schlank. Wenn Ihre erste Version nur öffentliches Browsen ist, fügen Sie noch keine Kontosysteme oder Zahlungen hinzu. Moremade enthält Connectoren für Supabase und Stripe, sodass Sie diese einbinden können, sobald das Produktmodell klar ist.

Ein gängiges Vorgehen ist:

• zuerst das öffentliche Browsing-Erlebnis bauen
• Supabase für Listings und Admin-Bearbeitung anbinden
• Stripe später hinzufügen, wenn es einen bezahlten Einreichungsprozess gibt

Verzeichnis-Websites wirken auf dem Desktop oft ordentlich, auf dem Smartphone aber holprig. Die typischen Probleme sind lange Karten, gedrängte Filter und Detailseiten mit zu vielen schlecht gestapelten Abschnitten.

Prüfen Sie in der Vorschau diese Punkte:

• Breite der Suchleiste und Touch-Ziele
• ob Filter korrekt zusammenklappen
• Bildbeschnitt in Karten
• Lesbarkeit von Adressen, Tags und Metadaten
• Abstände rund um Buttons und Formulare
• ob die Detailseite die nützlichsten Infos oben hält

Falls nötig, bitten Sie um präzise mobile Anpassungen wie:

• Karten-Text auf zwei Zeilen reduzieren
• sekundäre Metadaten unterhalb des sichtbaren Bereichs platzieren
• Filter-Chips in eine horizontal scrollbare Reihe verwandeln
• den Call-to-Action-Button auf kleinen Bildschirmen über die volle Breite setzen

Das ist auch ein guter Zeitpunkt, den visuellen Inspektor zu nutzen, um ein Element anzuklicken und direkt anzupassen.

Wenn Struktur und Inhalte stabil genug sind, veröffentlichen Sie die Seite. Moremade kann mit einem Klick auf eine kostenlose yourname.moremade.ai-Subdomain veröffentlichen. Wenn Sie einen kostenpflichtigen Plan haben, können Sie eine benutzerdefinierte Domain verbinden. Domains können auch direkt in Moremade gekauft werden.

Ein praktischer Weg zum Launch ist:

• zuerst auf der kostenlosen Subdomain veröffentlichen
• Links, Formulare und Seitentitel testen
• die Seite mit einigen Personen teilen und Feedback sammeln
• die eigene Domain verbinden, sobald die Website bereit ist

Wenn Sie eine Kopie außerhalb der Plattform behalten möchten, exportieren Sie den vollständigen Quellcode als ZIP oder pushen Sie ihn zu GitHub. Websites bestehen aus echtem React + Tailwind-Code, Sie sind also nicht an ein proprietäres Format gebunden.

Die meisten Probleme entstehen durch eine unklare Struktur, nicht durch den Builder selbst.

Vermeiden Sie diese Fehler:

• Zu viele Filter zu früh. Starten Sie mit den zwei oder drei Feldern, die Nutzer wirklich zur Eingrenzung verwenden.
• Kein Datenmodell. Wenn Listing-Felder vage sind, wird jede Seite inkonsistent.
• Kurierung und Einreichungen ohne Regeln mischen. Entscheiden Sie, ob Listings redaktionell, nutzergeneriert oder beides sind.
• Login hinzufügen, bevor er nötig ist. Öffentliche Verzeichnisse funktionieren zum Start oft auch ohne Konten.
• Ein riesiger Prompt für jede Funktion. Bauen Sie zuerst den Kern-Flow und verfeinern Sie dann in kleinen Schritten.
• Mobile-Prüfung ignorieren. Der Großteil des Verzeichnis-Browsings findet auf dem Smartphone statt.
• Ohne Ownership-Plan live gehen. Exportieren Sie den Code oder pushen Sie ihn zu GitHub, wenn Sie später eine saubere Übergabe wollen.

Die Versionshistorie hilft hier. Wenn eine Änderungsrunde die Website verschlechtert, setzen Sie zurück und versuchen Sie eine enger gefasste Anweisung.