Wie man mit AI ein Jobboard erstellt

Bevor du Prompts schreibst, definiere die kleinste nützliche Version. Die meisten Jobboards brauchen am ersten Tag kein komplexes Arbeitgeber-Dashboard.

Eine praktische erste Version umfasst meist:

• eine Startseite mit Suche und hervorgehobenen Stellen
• eine Listing-Seite mit Filtern
• eine Job-Detailseite
• ein Bewerbungsformular oder einen externen Bewerbungslink
• eine Über-uns- oder Preisseite, falls du Arbeitgebern etwas berechnen willst

Lege fest, wer die Nutzer sind:

• Kandidaten, die Stellen durchsuchen und sich bewerben
• Arbeitgeber, die Jobs einstellen, falls du später Self-Service-Publishing anbieten willst
• ein Admin, falls du Einreichungen prüfen möchtest

Dann liste die Daten für jede Stellenanzeige auf. Häufige Felder sind:

• Jobtitel
• Firmenname
• Standort
• Remote- oder Vor-Ort-Status
• Gehaltsspanne
• Beschäftigungsart
• Kategorie oder Team
• Beschreibung
• Bewerbungs-URL oder Bewerbungsformular
• Veröffentlichungsdatum

Wenn du nur ein kuratiertes Board möchtest, brauchst du zu Beginn möglicherweise kein Login. Wenn Arbeitgeber Jobs selbst einreichen sollen, füge Datenbank und Anmeldung später mit Supabase hinzu.

Dein erster Prompt sollte wie eine kurze Spezifikation klingen. Sei konkret bei Seiten, Feldern, Layout und Interaktionen. Moremade verwandelt eine Beschreibung in natürlicher Sprache in eine Live-App-Vorschau und schreibt dafür den Quellcode.

Ein guter erster Prompt nennt:

• die Art der Website
• die benötigten Seiten
• die Datenfelder für Jobs
• die Filter- und Suchlogik
• den visuellen Stil
• was passieren soll, wenn jemand auf Bewerben klickt

Beispielprompt:

Erstelle eine Jobboard-Website für Tech- und Design-Rollen. Verwende ein sauberes, schlichtes Layout mit einer Startseite, einer Job-Listing-Seite und einer Job-Detailseite. Jede Stelle soll Titel, Firma, Standort, Remote-Status, Gehaltsspanne, Beschäftigungsart, Kategorie, Veröffentlichungsdatum und eine kurze Zusammenfassung anzeigen. Füge eine Suche nach Stichworten sowie Filter für Standort, Kategorie, Remote-Status und Beschäftigungsart hinzu. Auf der Detailseite soll eine vollständige Beschreibung und ein Bewerben-Button enthalten sein. Mache Bewerben vorerst zu einer Bewerbungsformular-Seite statt zu einem externen Link. Verwende klare Typografie sowie mobilfreundliche Karten und Formulare.

Sobald Moremade die erste Version erzeugt hat, prüfe sie wie einen funktionierenden Prototyp und nicht wie ein fertiges Produkt. Klicke dich durch die Seiten, überprüfe Abstände, teste die Filter und achte darauf, ob sich die Jobinfos leicht überblicken lassen.

Gib lieber kleine, konkrete Folgeanfragen statt den gesamten Prompt neu zu schreiben. Das führt meist zu saubereren Iterationen.

Drei Beispiel-Follow-up-Prompts:

• "Ändere die Listing-Seite auf Desktop zu einem zweispaltigen Layout mit Filtern in einer linken Seitenleiste und Ergebnissen rechts. Auf Mobile sollen die Filter in einem Drawer bleiben."
• "Füge auf jeder Job-Karte Badges für Remote, Vollzeit und Gehaltsspanne hinzu und mache den Firmennamen sowie das Veröffentlichungsdatum visuell weniger prominent als den Titel."
• "Verschiebe auf der Job-Detailseite den Bewerben-Button weiter nach oben, füge auf Desktop ein Sticky-Summary-Panel hinzu und zeige Standort, Beschäftigungsart und Gehalt in einer kompakten Metadatenzeile an."

Wenn ein bestimmtes Element nicht passt, nutze den visuellen Inspector, um es direkt anzuklicken und die Änderung zu beschreiben. Wenn du Implementierungsdetails direkt prüfen oder anpassen willst, nutze die Codeansicht.

Ein statisches Beispiel-Board reicht für Design und Struktur, aber ein echtes Board braucht meist gespeicherte Jobdaten. In Moremade ist Supabase die eingebaute Option für Datenbank, Anmeldung und Dateispeicher.

Nutze Supabase, wenn du Folgendes brauchst:

• Arbeitgeber, die Jobs einreichen
• Admins, die Listings prüfen oder bearbeiten
• Kandidaten, die Konten anlegen
• hochgeladene Logos oder Anhänge

Ein sinnvoller nächster Schritt ist, eine Jobs-Tabelle und einen einfachen Einreichungsablauf anzufordern. Du könntest Moremade zum Beispiel bitten, Supabase zu verbinden und ein Formular zu erstellen, das neue Jobposts in die Datenbank schreibt.

Du brauchst keine Zahlungen, außer Arbeitgeber sollen fürs Einstellen zahlen. Wenn dein Board kostenlos ist, lass Stripe vorerst weg.

Füge Stripe nur hinzu, wenn du einen kostenpflichtigen Veröffentlichungsablauf möchtest, zum Beispiel:

• Arbeitgeber wählt einen Posting-Tarif
• Checkout mit einem von dir festgelegten Preis
• Arbeitgeber erhält nach der Zahlung Zugriff auf ein Einreichungsformular

Halte die erste Version einfach. Suche, Filter und ein zuverlässiger Bewerbungsablauf sind wichtiger als Kontosysteme, die viele frühe Boards nie wirklich nutzen.

Jobboards bekommen viel mobilen Traffic, also prüfe die Experience auf kleinen Bildschirmen sorgfältig. Ein Layout, das auf Desktop gut aussieht, bricht oft zusammen, wenn Filter, lange Titel und Formulare um Platz konkurrieren.

Teste diese Punkte:

• Suchfeld und Filtersteuerung lassen sich mit dem Daumen gut bedienen
• Karten werden nicht zu hoch oder visuell unruhig
• Gehalt, Standort und Remote-Status bleiben auf schmalen Bildschirmen lesbar
• Der Bewerben-Button ist auf der Detailseite gut sichtbar
• Das Bewerbungsformular ist kurz und mobil gut nutzbar

Wenn etwas zu eng wirkt, fordere gezielte Korrekturen an. Zum Beispiel:

• "Reduziere das vertikale Padding auf mobilen Job-Karten und halte die Metadaten in zwei kompakten Zeilen."
• "Wandle die Desktop-Filter-Chips auf Mobile in ein Slide-over-Filterpanel um."
• "Mache das Bewerbungsformular auf allen Bildschirmgrößen einspaltig und erhöhe die Eingabehöhe für Touch-Bedienung."

Teste auch leere Zustände. Ein Jobboard braucht eine gute Keine-Ergebnisse-Meldung und eine klare Aktion zum Zurücksetzen der Filter.

Wenn das Board funktioniert, veröffentliche es. Moremade kann mit einem Klick auf einer kostenlosen yourname.moremade.ai-Subdomain live gehen. Das ist praktisch für Reviews, internes Testen oder einen frühen Launch.

Wenn du einen kostenpflichtigen Plan hast, kannst du eine eigene Domain verbinden. Domains kannst du auch direkt in Moremade kaufen.

Ein sinnvoller Rollout sieht so aus:

• auf einer Moremade-Subdomain veröffentlichen
• die Live-Seite auf Desktop und Mobile testen
• Formulare, Links und Ladeverhalten prüfen
• die eigene Domain verbinden, sobald die Struktur passt

Da das Projekt echter React + Tailwind-Code ist, kannst du den vollständigen Quellcode jederzeit als ZIP exportieren oder zu GitHub pushen. Das ist wichtig, wenn du das Hosting wechseln, den Code an einen Entwickler übergeben oder das Projekt später außerhalb des Editors weiter ausbauen willst.

Die meisten Probleme entstehen dadurch, dass im ersten Durchgang zu viel verlangt wird oder Systeme hinzugefügt werden, bevor sie nötig sind.

Achte auf diese Fehler:

• Zu viele Nutzertypen am Anfang. Wenn du Kandidaten, Arbeitgeber und Admins gleichzeitig einführst, wird die App schnell kompliziert.
• Unklare Prompts. "Erstelle ein modernes Jobboard" reicht nicht. Benenne Seiten, Felder und Aktionen.
• Zahlungen zu früh überbauen. Wenn noch niemand zahlt, füge Stripe erst hinzu, wenn der Posting-Ablauf bewiesen ist.
• Die Datenstruktur für Jobs ignorieren. Filter funktionieren nur gut, wenn Felder wie Standort, Beschäftigungsart und Kategorie konsistent definiert sind.
• Mobile Review überspringen. Dichte Metadaten und Filtersteuerungen wirken auf dem Handy oft umständlich.
• Zu viel auf einmal bearbeiten. Kleine Änderungen lassen sich leichter validieren als ein komplettes Redesign in jeder Iteration.

Für den ersten Launch gilt: Klarheit vor Komplexität. Guter Search, nützliche Filter, lesbare Detailseiten und ein funktionierender Bewerbungsablauf.