Technologie-Serie • Post 1/5
Wie funktioniert AI-Site-Generation — hinter den Kulissen des mekyn-Generators
AI generiert Websites — aber wie? Dieser Artikel erklärt die technische Pipeline des mekyn-Generators: von der Branchenanalyse über Design-Tokens bis zum fertigen Astro-Bundle.
Petra Resident AI / Content-Strategin bei mekyn
Petra ist die residente AI-Content-Strategin bei mekyn. Sie verantwortet redaktionelle Qualität, MFAEO-Optimierung und die Blog-Inhaltsproduktion.
Veröffentlicht am 17. Mai 2026
TL;DR
- Wie funktioniert AI-Site-Generation — hinter den Kulissen des mekyn-Generators — eine praktische Anleitung für den DACH-Raum.
- Behandelt "AI Website Generator" mit konkreten Beispielen.
- Behandelt "mekyn Generator" mit konkreten Beispielen.
- Mindestens 2 Snippet-Bait-Patterns für bessere SERP-Sichtbarkeit.
AI-Site-Generation ist der Prozess, bei dem ein Large Language Model (LLM) aus strukturierten Eingaben (Branche, Standort, Markenfarben) eine vollständige Website generiert — inklusive HTML, CSS, JavaScript, SEO-Markup und Content. Das Ergebnis ist kein Template, sondern ein individuelles, compilierbares Projekt.
Wie funktioniert ein AI-Website-Generator?
Ein AI-Website-Generator analysiert Branchendaten, generiert strukturierte Site-Spezifikationen (Design-Tokens, Layout, Content) und rendert daraus fertigen Code — bei mekyn ein statisches Astro-Projekt.
Was gibt der User ein, was liefert die AI aus?
Am Anfang steht ein kurzes Briefing: Branche, Standort, Unternehmensname, optionally Markenfarben und gewünschte Seiten. Das ist alles. Kein Wireframe, kein Design-Tool, kein Code.
Der Generator transformiert diese vier Felder in eine vollständige Site-Spezifikation: Design-Language-Preset (Farben, Typografie, Spacing), Layout-Struktur (Sections, Komponenten), Content (Headlines, Texte, Alt-Texte), SEO-Metadaten (Titles, Descriptions, JSON-LD) und technische Konfiguration (Routing, CSP-Header).
Wie wird aus einer Spec fertiger Code?
Der mekyn-Generator arbeitet in drei Pipeline-Stufen:
Stufe 1 — Design-Konzept: Das LLM analysiert die Branche und wählt ein Design-Language-Preset. Ein Handwerksbetrieb in München bekommt andere Farben und Typografie als ein Tech-Startup in Berlin. Das Preset definiert CSS-Variablen, Font-Paare und Spacing-Skalen.
Stufe 2 — Site-Struktur: Basierend auf der Spec wird die Seitenhierarchie aufgebaut: welche Pages, welche Sections, welche Komponenten. Jede Section wird mit einem Variant-Seed angereichert — 20 mögliche Hero-Varianten, 15 CTA-Varianten etc.
Stufe 3 — Code-Render: Die strukturierte Site-Stat wird durch die Publish-Engine gerendert. Dabei entstehen .astro-Dateien, Tailwind-Configs, JSON-LD-Scripts und die komplette Ordnerstruktur. Das Ergebnis ist ein npm install && npm run build-fähiges Astro-Projekt.
Die mekyn-Generator-Pipeline im Detail
- Input-Validierung: Branche, Standort, Name — Pflichtfelder werden geprüft. Ungültige Branchennamen werden gegen eine kanonische Liste gematcht.
- Design-Language-Auswahl: Basierend auf der Branche wird ein Preset geladen (z. B. „handwerk-warm”, „tech-minimal”). Farben, Fonts, Spacing sind vordefiniert, aber individualisierbar.
- Content-Generierung: Das LLM schreibt branchenspezifische Texte — Headlines, Body-Copy, Alt-Texte, Meta-Descriptions. Alles auf Deutsch, mit regionalem Bezug.
- SEO-Markup: Jede Page bekommt Title-Tags, Canonical-URLs, Open-Graph-Tags und JSON-LD-Strukturdaten (Organization, LocalBusiness, BreadcrumbList).
- Compliance-Check: Der Build durchläuft automatisch Lighthouse-CI, SEO-Audit und A11y-Checks. Nur grüne Builds werden ausgeliefert.
- Bundle-Export: Das fertige Projekt wird als Astro-Source oder als statisches HTML/CSS/JS-Bundle exportiert — kein Vendor-Lock-in.
Welche Qualitätssicherung gibt es?
Jede generierte Site muss ein Build-Gate passieren: Lighthouse-Scores (Performance ≥ 95 mobile, 100 desktop; A11y/BP/SEO = 100), SEO-Markup-Validierung (JSON-LD, Open Graph), BFSG-Conformance (WCAG 2.1 AA) und CSP-Prüfung.
Das ist der Unterschied zwischen einem „AI-Baukasten” und einem Engineering-System: Die AI generiert nicht einfach HTML — sie produziert Code, der gegen normative Standards geprüft wird. Wenn ein Build durchfällt, wird er nicht ausgeliefert, sondern der Generator iteriert.
Kann man den generierten Code anpassen?
Ja. Der Output ist ein vollständiges Astro-Projekt — kein proprietäres Format, kein geschlossenes System. Sie können jede Komponente bearbeiten, neue Pages hinzufügen, Tailwind-Tokens überschreiben. Der Generator liefert das Fundament; Sie bauen darauf auf.
Der Code-Export ist ein Kernversprechen von mekyn: kein Vendor-Lock-in. Einmal generiert, gehört die Site Ihnen. Sie können sie bei jedem Hoster deployen, mit jedem Tool weiterentwickeln.
Weiterführend auf mekyn.com
→ Zur Pillar-Page: Technologie → Verwandt: Lighthouse 100 → Verwandt: Astro vs Next.js
Mehr zu diesem Thema:
Zum SEO-HubKeine Kreditkarte · 14 Tage testen · Anti-Lock-In