Wie man mit KI eine Immobilien-Website erstellt

Bevor du einen AI-Builder anstößt, definiere die kleinste nützliche Version der Website.

Für eine Immobilien-Website bedeutet das meist:

• eine Startseite
• eine Listings-Seite mit Filtern
• eine Immobilien-Detailseite
• ein Kontakt- oder Anfrageformular
• eine Über-uns-Seite für die Agentur oder den Makler

Lege dann fest, welche Daten jedes Listing enthalten soll. Bleib dabei konkret:

• Titel
• Preis
• Adresse oder Gegend
• Schlafzimmer, Badezimmer, Größe
• kurze Beschreibung
• Bildergalerie
• Immobilientyp
• Status wie zu verkaufen oder zu vermieten

Entscheide auch, wer die Website nutzt:

• Käufer oder Mieter, die Listings durchsuchen
• Makler, die Listings aktualisieren
• Admins, die Inhalte verwalten

Wenn du nur eine Marketing-Website mit ein paar Listings brauchst, kannst du mit statischen Beispieldaten starten. Wenn Makler sich anmelden und Listings verwalten sollen, plane eine Datenbank und einen Login ein. Moremade unterstützt Supabase für Datenbank, Anmeldung und Dateispeicher, daher ist das der naheliegende nächste Schritt, wenn das Projekt echte Datenverwaltung braucht.

Schreib diese Entscheidungen auf, bevor du etwas generierst. Das erste Ergebnis ist meist besser, wenn die Struktur klar ist.

Der erste Prompt sollte die Website, die Seiten, den Stil und die grundlegenden Interaktionen in einfacher Sprache beschreiben. Sei konkret bei Layout und Inhalt. Bitte um einen funktionierenden ersten Entwurf, nicht um Perfektion.

Hier ist ein guter Start-Prompt:

Erstelle eine moderne Immobilien-Listings-Website für eine lokale Agentur. Baue eine Startseite mit Hero-Bereich, hervorgehobenen Immobilien, Suchleiste, Highlights von Stadtvierteln und einem Kontaktbereich. Füge eine Listings-Seite mit Filteroptionen für Preis, Schlafzimmer, Immobilientyp und Standort hinzu. Ergänze eine Immobilien-Detailseite mit Bildergalerie, Preis, wichtigsten Fakten, Beschreibung, Karten-Platzhalter und Anfrageformular. Verwende saubere React + Tailwind-Komponenten, neutrale Farben und Beispieldaten für Immobilien. Mache das Layout responsiv und auf Mobilgeräten leicht scanbar.

Moremade generiert echten React + Tailwind-Code für Websites, du arrangierst also nicht nur Mockups. Du kannst die Live-Vorschau prüfen, per Chat bearbeiten, den visuellen Inspector verwenden und bei Bedarf die Code-Ansicht prüfen, um zu verifizieren, was erstellt wurde.

Nach dem ersten Build prüfst du die Live-Vorschau so, wie es ein Nutzer tun würde.

Achte zuerst auf diese Punkte:

• Ist die Startseite im ersten Bildschirm klar verständlich?
• Sind die Listings leicht zu scannen?
• Zeigen die Immobilienkarten die richtigen Fakten?
• Wirken die Filter glaubwürdig für den Markt?
• Ist der Kontaktweg eindeutig?

Vermeide es, die ganze App in einem einzigen Folge-Prompt umzuschreiben. Bitte stattdessen um gezielte Änderungen.

Nützliche Folge-Prompts:

• "Ändere die Listing-Karten so, dass das Foto größer ist, der Preis stärker gewichtet wird und Schlafzimmer, Badezimmer und Größe in einer Zeile unter der Adresse stehen."
• "Aktualisiere die Filter, sodass sie Kaufen oder Mieten, Mindestanzahl an Schlafzimmern und ein Dropdown für den Standort enthalten. Lass die Filter auf dem Desktop oben sichtbar und auf Mobilgeräten einklappbar."
• "Gestalte die Immobilien-Detailseite neu, sodass zuerst die Bildergalerie kommt, dann Preis und wichtigste Fakten, dann Beschreibung und zuletzt das Anfrageformular. Füge auf dem Desktop eine Sticky-Kontaktkarte hinzu."

Hier ist Moremades visueller Inspector besonders hilfreich. Zeige auf ein bestimmtes Element, beschreibe die Änderung und iteriere. Auch die Versionshistorie ist hier wichtig. Wenn eine Änderung die Website verschlechtert, kannst du einen Schritt zurückgehen, ohne alles neu aufzubauen.

Viele Immobilien-Websites können ohne komplexe Backend-Arbeit starten. Wenn das Ziel ist, Listings zu veröffentlichen und Anfragen zu erfassen, reichen für die erste Version oft Beispielinhalte oder manuell gepflegte Inhalte.

Füge Supabase hinzu, wenn du Dinge brauchst wie:

• eine Listings-Datenbank
• Login für Makler oder Admins
• Bild- und Dateispeicher
• Formulare, die Anfragen speichern

Ein sinnvoller Aufbau ist:

• properties-Tabelle für Listing-Daten
• agents-Tabelle, wenn mehrere Personen Listings verwalten
• enquiries-Tabelle für Kontaktanfragen

Wenn Besucher bezahlte Beratungen, Bewerbungsgebühren oder Premium-Listing-Platzierungen buchen sollen, wird Stripe relevant. Moremade enthält einen Stripe-Connector für Checkout mit von dir festgelegten Preisen. Für eine normale Immobilien-Suchseite ist Stripe beim Start oft unnötig.

Halte die erste Version schlank. Es ist einfacher, eine einfache funktionierende Website zu verbessern, als ein halbfertiges Portal mit zu vielen beweglichen Teilen zu reparieren.

Immobilien-Websites erhalten viel mobilen Traffic, daher ist ein Mobile-Review nicht optional.

Prüfe die generierte Website auf kleineren Bildschirmen und achte auf praktische Probleme:

• zu hoher oder zu vager Hero-Text
• Filter, die den Bildschirm dominieren
• Karten, bei denen wichtige Fakten unterhalb des sichtbaren Bereichs landen
• Anfrageformulare mit engen Feldern
• Bildergalerien, die schwer zu wischen oder anzutippen sind

Bitte direkt um Korrekturen. Zum Beispiel:

• "Reduziere die Höhe des Hero-Bereichs auf Mobilgeräten und halte das Suchformular ohne Scrollen sichtbar."
• "Mache die Listing-Karten auf dem Tablet zweispaltig und auf kleinen Phones einspaltig."
• "Wandle die Filter-Seitenleiste auf Mobilgeräten in ein Slide-over-Panel um."

Teste auch den Kontaktfluss. Sende das Formular ab, prüfe Labels und stelle sicher, dass die Buttons klar formuliert sind. Wenn die Website über Supabase Login oder gespeicherte Listings enthält, teste diese Zustände ebenfalls auf Mobilgeräten.

Sobald die grundlegenden Abläufe funktionieren, veröffentliche die Website.

Mit Moremade kannst du mit einem Klick auf einer kostenlosen yourname.moremade.ai-Subdomain veröffentlichen. Das ist nützlich für interne Reviews, Kundenfeedback oder frühe Tests. Bezahlte Pläne unterstützen eigene Domains, und Domains können auch direkt in Moremade gekauft werden.

Bevor du eine echte Domain auf das Projekt richtest, geh noch einmal alles durch:

• Platzhalterdaten der Agentur ersetzen
• unnötigen Fake-Testimonial-Text entfernen
• jede Immobilienseite auf fehlende Felder prüfen
• sicherstellen, dass Anfragen an die richtigen Ziele gehen
• Schreibweise von Stadtvierteln und Adressen prüfen

Wenn du das Projekt später außerhalb der Plattform behalten willst, exportiere den vollständigen Quellcode als ZIP oder pushe ihn zu GitHub. Moremade ist kein geschlossenes System. Der Website-Code ist echter React + Tailwind-Code, den du behalten und andernorts weiterbearbeiten kannst.

Der größte Fehler ist ein vager Prompt wie „mach mir eine Immobilien-Website“. Das führt meist zu einem generischen Layout mit schwacher Listing-Struktur.

Weitere häufige Probleme:

• Zu viele Funktionen zu früh. Starte mit Suchen, Anzeigen und Anfragen. Füge Dashboards oder gespeicherte Suchen später hinzu.
• Kein Datenmodell. Wenn Listings echt sein sollen, definiere die Felder, bevor du eine Datenbank verbindest.
• Schlechtes Mobile-Layout. Große Desktop-Filter und bildlastige Bereiche brechen oft zuerst auf Smartphones.
• Zielgruppen vermischen. Eine Website für Käufer und ein internes Agenten-Portal sind unterschiedliche Produkte.
• Export-Prüfung überspringen. Wenn Eigentum wichtig ist, prüfe früh die Code-Ansicht, den ZIP-Export oder den GitHub-Push.
• Zahlungen ohne Grund einbauen. Die meisten Immobilien-Websites brauchen Stripe am ersten Tag nicht.

Eine gute Regel ist, die kleinste Version auszuliefern, die eine echte Nutzeraufgabe unterstützt: eine Immobilie finden und eine Anfrage senden.