Was Sie gerade lesen, wurde "vibe-coded". Den Artikel hat ein KI-Agent entworfen. Den Editor, in dem er getippt wurde, hat ein anderer Agent gerüstet. Und die Next.js-Website, auf der er liegt, wird genauso gepflegt — jeden Arbeitstag.

Wir bekommen eine Frage häufiger als jede andere von Teams, die sich unsere Open-Source-KI-Plattform anschauen: "Kann KI wirklich eine echte Webseite bauen? Keine Ein-Seiten-Demo aus einem Prompt — eine richtige, mehrsprachige, SEO-optimierte Produktivseite, die man jede Woche aktualisiert?"

Kurze Antwort: ja, aber nicht so, wie es die Screenshots auf X aussehen lassen. Der Trick ist nicht das Modell. Der Trick sind die Regeln, die direkt neben dem Code liegen.

Was "Vibe Coding" bei Synaplan wirklich bedeutet

"Vibe Coding" klingt nach einer Erlaubnis, Disziplin zu überspringen. In der Praxis ist das Gegenteil der Fall. Ohne Regeln schreibt ein KI-Agent fröhlich Ihr Designsystem um, tauscht Ihre i18n-Bibliothek aus und erfindet Ihren Auth-Layer am Freitagnachmittag neu.

Unser Setup ist absichtlich langweilig:

Eine AGENTS.md pro Repository. Sie ist die Verfassung des Projekts: der Stack, die Ordnerstruktur, die Konventionen, die Dinge, die niemand anfassen darf.
Ein Coding-Agent (Cursor + Claude / Codex), der AGENTS.md vor jeder Änderung liest.
Ein Human-Review auf jedem Pull Request, plus CI mit Lint, Type-Check und Vitest.

Mehr nicht. Keine Prompt-Engineering-Rituale, keine Agenten-Schwärme. Der Agent vibt innerhalb der Linien, die wir gezogen haben.

Hier ist der reale Anfang der AGENTS.md dieser Website:

# This is NOT the Next.js you know

This version has breaking changes — APIs, conventions, and file structure
may all differ from your training data. Read the relevant guide in
`node_modules/next/dist/docs/` before writing any code.

Dieser eine Absatz spart Stunden pro Woche. Ohne ihn würde jede frische Agenten-Session fröhlich Next.js-13-Muster in unsere Next.js-16-Codebasis schreiben.

Die Website auf GitHub

metadist/synaplan-website ist die komplette Marketingseite, der Blog und das Admin-CMS — Open Source, gerne forken.

Layer	Technologie
Framework	Next.js 16.2 (App Router, Turbopack)
React	19.2 mit Server Components
Styling	Tailwind CSS v4 + shadcn/ui v4 (Base UI)
Animationen	Framer Motion
i18n	`next-intl` — EN (Default) + DE (`/de/`)
Datenbank	PostgreSQL 16 via Prisma ORM 7
Auth (Admin)	HMAC-signierte Session-Cookies (keine JWT-Bibliothek)
Tests	Vitest
Container	Docker + Docker Compose

Die Marketingseiten werden zur Build-Zeit als statisches HTML gerendert. Der Blog und /admin werden serverseitig gegen Postgres gerendert. Die Middleware (proxy.ts, nicht middleware.ts — das hat sich in Next 16 geändert) verkettet einen Admin-Guard mit dem next-intl-Routing. Zwei Sprachen — Englisch am Root, Deutsch unter /de/ — teilen sich dieselben Komponenten.

Der Blog und das Admin, das Sie gerade sehen

Als die Marketingseite stand, brauchten wir einen Ort zum Schreiben. Die Optionen waren offensichtlich: Sanity, Contentful, Ghost, Strapi, ein Markdown-Ordner. Wir haben die langweilige fünfte Option genommen — und uns dann gefragt: Was, wenn der Agent, der unseren Code schreibt, auch unsere Drafts schreiben kann?

Also haben wir ein kleines CMS direkt in die Seite eingebaut:

/admin — geschützt durch HMAC-signierte Session-Cookies, keine JWT-Bibliothek nötig.
Ein Markdown-Editor mit Live-Preview, Auto-Slug, Tags und Cover-Image-Upload.
Ein "AI Write"-Panel, das vom Synaplan-API streamt. Modi: Full post, Outline, Continue, Rewrite, Improve, Translate.
Eine Post-Zeile pro Sprache, verbunden über einen translationKey, damit jeder deutsche Beitrag einen englischen Zwilling haben kann.

Den Translate-Modus nutzen wir am häufigsten. Beitrag auf Deutsch schreiben, Translate → English klicken, gegenlesen, beide veröffentlichen. Der Artikel, den Sie gerade lesen, ist genau diese Pipeline zweimal durchlaufen — Deutsch zuerst, Englisch danach, beide vom Menschen abgenommen, beide als Markdown in Postgres gespeichert.

// Pro-Sprache-State im Editor
// (echter Code aus src/components/admin/post-editor.tsx)
const [localeData, setLocaleData] = useState<Record<string, LocaleData>>({
  [primaryLocale]:   makeDefaultLocaleData(primaryLocale, initial),
  [secondaryLocale]: makeDefaultLocaleData(secondaryLocale, initial),
})

Öffentliche Beiträge bekommen BlogPosting-JSON-LD für SEO, Aufrufzähler und einen /de/blog-Spiegel. Dieselbe Postgres-Zeile speist sowohl den menschlich lesbaren Artikel als auch die maschinenlesbaren strukturierten Daten — kein doppelter Inhalt, kein Drittanbieter-CMS dazwischen.

Warum wir die ganze Website Open Source gestellt haben

Drei Gründe, in der Reihenfolge ihrer Wichtigkeit:

Sie sollten keine Open-Source-KI-Plattform von einer Firma kaufen, deren Marketingseite eine Blackbox ist. Wenn wir unseren eigenen Stack verstecken, warum sollten Sie unserem trauen?
Es ist die ehrlichste Demo von Synaplan, die wir veröffentlichen können. Das "AI Write"-Panel ruft genau das API auf, das jeder Kunde nutzen kann. Das Streaming, das Model-Routing, die Auth — das ist alles das öffentliche Produkt, das sich selbst frisst.
Forks sind gut. Wer ein Next.js-16-+-Prisma-7-Starter-Kit mit kleinem Markdown-CMS und zweisprachigem SEO sucht, kann das Repo nehmen.

Lehren aus einem Jahr Vibing

Ein paar Dinge, die wir auf die harte Tour gelernt haben:

AGENTS.md schlägt Prompts. Eine 50-Zeilen-Datei im Repository ist besser als jeder clevere System-Prompt. Agenten wechseln das Modell; die Datei bleibt.
CI ist der Sicherheitsgurt. Lint, Types, Vitest — laufen auf jedem Pull Request. Der Agent ist schnell; CI ist die Bremse.
Halten Sie die Oberfläche klein. Eine Sprache, eine Framework-Version, ein Styling-System. Jede Option, die Sie dem Agenten geben, verdoppelt die Fehlerfälle.
Menschen auf jedem PR. Der Agent ist ein schneller Junior mit unendlicher Geduld. Er braucht trotzdem einen Senior, der nickt.

Selbst ausprobieren

Klonen Sie das Website-Repo, geben Sie ihm einen kostenlosen Synaplan-Token — und Sie haben eine komplette vibe-codete Marketingseite, die in etwa zehn Minuten lokal läuft:

git clone https://github.com/metadist/synaplan-website
cd synaplan-website
cp .env.example .env.local
docker compose up -d

Oder eröffnen Sie einfach einen kostenlosen Synaplan-Account und stecken Sie dasselbe API in Ihren eigenen AGENTS.md-Workflow. So oder so: der nächste Blogbeitrag, den Sie hier lesen, ist mit hoher Wahrscheinlichkeit auch wieder vibe-codet — und genau das ist der Punkt.