Vom Prompt zum Portal – Ein ganzes Portal nur mit Vibe Coding

Vibe Coding – Spielerei oder echte Methode?

Diese Frage hat mich lange gereizt. Ich wollte wissen: Kann ich mit KI nicht nur Code‑Schnipsel erzeugen, sondern ein komplettes Projekt bauen? Also habe ich es ausprobiert. Das Ergebnis ist lagepilot.de.

Kurz zu mir

Ich bin Informatiker. Programmieren war mal mein Alltag, aber schon lange nicht mehr mein Beruf. Python? Für mich lange ein Fremdwort. Frontend? Noch fremder. Trotzdem habe ich mir gesagt: Ich probiere es. Schritt für Schritt. In einfachen Worten. Mit KI an meiner Seite.

Was ist Vibe Programming – ganz einfach erklärt

Für mich bedeutet es: im Flow mit einer KI arbeiten. Keine perfekten Prompts. Stattdessen kleine, klare Schritte:

  1. Ein Ziel formulieren (ein Feature, eine Frage, ein UI‑Baustein).
  2. Prompt schreiben. Ergebnis prüfen.
  3. Anpassen. Nächster kleiner Schritt.

So entsteht aus vielen kleinen Runden ein stabiles Produkt. Ich nenne das: Zerlegen → Generieren → Testen → Nachschärfen. Klingt simpel. Ist es auch.

Die Idee hinter lagepilot.de

Mieten oder kaufen ist eine große Entscheidung. Die Lage zählt. Aber wie gut ist die Mikrolage wirklich? Laut? Praktisch? Familienfreundlich?
Auf lagepilot.de gibst du eine Adresse ein. Im Hintergrund sucht das System nach relevanten Punkten in der Nähe – Einkauf, Kitas, Schulen, Freizeit, Verkehr.
Und es weist auf mögliche Risiken hin. Zum Beispiel:

  • Feuerwehrwache in der Nähe (Sirenen, Einsatzlärm)
  • Industriebetrieb (mehr LKW, Verkehr)
  • Hauptstraße (Luftbelastung, Dauerlärm)

Am Ende bekommst du eine sachliche Einordnung: nicht marktschreierisch, sondern unabhängig und klar.
Wichtig: Es ist eine Analyse und danach eine vorsichtige Bewertungkeine Garantie.

Mein Weg ohne Python‑Praxis

Ich habe mit null Python‑Erfahrung gestartet. Wirklich null. Mein Plan: Die KI liefert, ich orchestriere (also: ordnen, prüfen, entscheiden).
So bin ich vorgegangen – einfach und ehrlich:

1) Ziel aufschreiben

Eine Seite Text. Was soll die App können? Wer nutzt sie? Was ist die eine Sache, die funktionieren muss? (Adresse rein, Lage erklärt raus.)

2) Rollen festlegen

Ich habe die KI abwechselnd als Architekt:in, Entwickler:in, QA und UX‑Designer:in arbeiten lassen. Kurz und klar, jeweils mit Leitplanken: lesbare Namen, Logging, einfache Tests, barrierearme UI.

3) Kleine Sprints

Kein Big‑Bang. Ein Sprint pro Thema: Geocoding, Umgebungssuche, Scoring‑Logik, Karten‑Layer, Ergebnisanzeige, Responsive Design (also: klappt auf Handy und Desktop).

4) Review – jedes Mal

Nach jedem Output: kurz testen, zwei bis drei Korrekturen, wiederholen. Viele kleine Entscheidungen schlagen eine große, unklare.

5) Dokumentation nebenbei

Zu jedem Baustein ließ ich mir eine Mini‑Doku erzeugen: Was macht es? Welche Kantenfälle? Wie testen? Das spart später Zeit.

Die größte Baustelle: Responsive Design

Hier habe ich die meiste Zeit gelassen. Kleine Dinge machen den Unterschied: Zeilenlänge, Abstände, Karten‑Zoom auf kleinen Screens, Touch‑Gesten.
Was mir geholfen hat:

  • Prompts nur für eine Änderung pro Runde
  • Regelmäßig mit Lighthouse prüfen (Ladezeit, Interaktivität)
  • „Vorher/Nachher“ vergleichen und das bessere Muster beibehalten

Typische Stolpersteine – meine Lösungen

  • Prompt‑Drift: Nach langen Sessions wurden Antworten unscharf. Lösung: Kontext resetten, Kernvorgaben wiederholen.
  • Zu große Prompts: Viel Text, wenig Qualität. Lösung: kleiner schneiden, ein Ziel pro Runde.
  • „Magische Änderugnen“: Unklar, warum etwas geändert wurde. Lösung: Erklärungen mit anfordern: „Warum so?“

Was Nutzer:innen heute schon sehen

  • Adresssuche mit direkter Analyse
  • Umgebungsindikatoren (Einkauf, Bildung, Freizeit …)
  • Hinweise auf Risiken (soweit ableitbar)
  • Einfache Einordnung der Mikrolage
  • Saubere Darstellung auf Handy und Desktop

Einfach und verständlich.

Was ich gelernt habe

  1. Produkt vor Technik. KI hin oder her… Ohne klares, gut definiertes Ziel wird’s nix.
  2. Kurze Schleifen gewinnen. Kleine Prompts, schnelle Tests, genaue Vorgaben.
  3. Begründungen anfordern. Das macht es einfacher.
  4. UI ist Gefühl. Man muss testen. Auf echten Geräten. Da hilft nichts anderes..
  5. Dokumentation nebenbei. Spart Tage, nicht Stunden.
  6. Transparenz. Datenlage und Grenzen offen benennen.

Verantwortung & Ethik

Lageeinschätzungen sind Hinweise, keine Wahrheiten. Sie ersetzen nicht die Besichtigung, nicht die Gespräche mit Nachbar:innen und nicht die eigene Recherche. lagepilot.de setzt auf Transparenz statt Marketing‑Sprech.