Hinweis: Diese Inhalte wurden mit Unterstützung von Künstlicher Intelligenz erstellt und redaktionell überprüft (Transparenzhinweis gemäß Art. 50 EU AI Act).

Websites entwickeln mit KI¶

Hinweis zur Software-Auswahl:
Diese Dokumentation priorisiert Open-Source-Software, die unter Ubuntu läuft.
Bei kostenpflichtiger Software wird immer eine Open-Source-Alternative mit gleichem Funktionsumfang gegenübergestellt.
LLM-Modelle werden unabhängig vom Preis gelistet – sie sind die Grundlage KI-gestützter Webentwicklung.

Legende¶

Lernpfad-Übersicht¶

graph LR
    A["🟢 Phase 1\nGrundlagen"] --> B["🟡 Phase 2\nUmsetzung"]
    B --> C["🔴 Phase 3\nOptimierung"]
    A --> A1["KI & Web verstehen\nErste Seiten mit KI"]
    B --> B1["Design · Frontend\nBackend · CMS"]
    C --> C1["Testing · SEO\nPerformance · Deployment"]

Inhaltsverzeichnis¶

• 🟢 Phase 1 – Grundlagen & Konzeption
  • 1.1 Was bedeutet KI-gestützte Webentwicklung?
  • 1.2 Konzept: KI als Coding-Assistent verstehen
  • 1.3 Thema: Entwicklungsumgebung mit KI aufsetzen
  • 1.4 Thema: Website-Konzeption & Wireframing mit KI
  • 1.5 Thema: UI/UX-Design mit KI
• 🟡 Phase 2 – Umsetzung
  • 2.1 Konzept: Der KI-gestützte Entwicklungsworkflow
  • 2.2 Thema: HTML & CSS mit KI generieren
  • 2.3 Thema: JavaScript & Interaktivität mit KI
  • 2.4 Thema: Backend & APIs mit KI entwickeln
  • 2.5 Thema: CMS & Website-Builder mit KI
  • 2.6 Thema: Datenbanken mit KI-Unterstützung
  • 2.7 Thema: Barrierefreiheit (Accessibility) mit KI
• 🔴 Phase 3 – Optimierung & Deployment
  • 3.1 Konzept: Von der Entwicklung zum produktiven Betrieb
  • 3.2 Thema: Testing & Debugging mit KI
  • 3.3 Thema: Performance-Optimierung mit KI
  • 3.4 Thema: SEO-Optimierung mit KI
  • 3.5 Thema: Deployment & Hosting mit KI-Unterstützung
  • 3.6 Thema: Sicherheit & Datenschutz mit KI
• 📋 Praxisprojekte
• 📦 Vollständige Softwareübersicht & Vergleich

🟢 Phase 1 – Grundlagen & Konzeption¶

Was lerne ich hier?
Wie KI in der Webentwicklung eingesetzt wird, welche Werkzeuge es gibt und wie man eine Website konzipiert und designed – mit KI als Assistent.
Voraussetzungen: Grundlegendes Verständnis von Websites (kein Code nötig).

1.1 Was bedeutet KI-gestützte Webentwicklung?¶

Konzept: Drei Rollen von KI in der Webentwicklung¶

Konzept: Was KI in der Webentwicklung (noch) nicht kann¶

• Komplexe Architekturentscheidungen eigenständig treffen
• Sicherheitslücken vollständig erkennen und schließen
• Nutzerbedürfnisse aus eigener Erfahrung verstehen
• Designgeschmack und ästhetisches Urteilsvermögen entwickeln

Konzept: KI-Typen in der Webentwicklung¶

Einstiegs-Software (LLM – immer gelistet):¶

1.2 Konzept: KI als Coding-Assistent verstehen¶

Konzept: Wie ein KI-Code-Assistent arbeitet¶

KI-Code-Assistenten sind auf Milliarden von Code-Zeilen aus öffentlichen Repositories trainiert. Sie erzeugen statistisch wahrscheinlichen Code – nicht unbedingt korrekten oder sicheren Code.

Wichtige Regel: KI-generierten Code immer verstehen,
bevor man ihn einsetzt – nie blind copy-pasten!

Konzept: Prompt-Engineering für Code¶

Konzept: Der KI-Entwicklungszyklus¶

graph LR
    A["💡 Anforderung\nbeschreiben"] --> B["🤖 KI generiert\nCode-Entwurf"]
    B --> C["👤 Entwickler\nversteht & prüft"]
    C --> D["🔧 Anpassen &\nVerfeinern"]
    D --> E["🧪 Testen"]
    E --> F{"Fehler?"}
    F -->|Ja| B
    F -->|Nein| G["✅ Fertig"]

Konzept: Lokale LLMs vs. Cloud-LLMs für Code¶

1.3 Thema: Entwicklungsumgebung mit KI aufsetzen¶

Konzept: Was ist eine IDE und warum ist die Wahl wichtig?¶

Eine IDE (Integrated Development Environment) ist der Arbeitsplatz des Entwicklers – Editor, Terminal, Debugger und KI-Assistent in einem.

Konzept: KI-Plugins vs. KI-native Editoren¶

Software – Open Source zuerst:¶

Vergleich: Open Source vs. Kommerziell¶

1.4 Thema: Website-Konzeption & Wireframing mit KI¶

Konzept: Was ist ein Wireframe?¶

Ein Wireframe ist eine schematische Skizze einer Webseite – ohne Farben oder finales Design. Es zeigt nur: Wo ist was?

Idee → Wireframe (Struktur) → Mockup (Design) → Prototyp (Interaktion) → Code

Konzept: Informationsarchitektur mit KI planen¶

Informationsarchitektur (IA) definiert, wie Inhalte einer Website strukturiert werden. KI kann: - Sitemaps aus Zielgruppen-Beschreibungen generieren - Nutzerflüsse (User Flows) vorschlagen - Navigationsstrukturen auf Usability prüfen

Konzept: User Flows & KI¶

graph LR
    A["🏠 Startseite"] --> B["📦 Produktseite"]
    B --> C["🛒 Warenkorb"]
    C --> D["📝 Checkout"]
    D --> E["✅ Bestellung"]
    A --> F["🔍 Suche"]
    F --> B

Software – Open Source zuerst:¶

Vergleich: Open Source vs. Kommerziell¶

1.5 Thema: UI/UX-Design mit KI¶

Konzept: Was ist der Unterschied zwischen UI und UX?¶

Konzept: Design Tokens – KI-freundliches Design-System¶

Design Tokens sind Variablen für Farben, Abstände, Schriftgrößen als CSS Custom Properties. KI kann sie aus einem Briefing generieren:

:root {
  --color-primary: #2563eb;
  --font-heading: 'Inter', sans-serif;
  --spacing-md: 1.5rem;
  --border-radius: 0.5rem;
}

Konzept: Wichtige Begriffe für KI-Design-Prompts¶

Software – Open Source zuerst:¶

Vergleich: Open Source vs. Kommerziell¶

🟡 Phase 2 – Umsetzung¶

Was lerne ich hier?
Den gesamten Entwicklungs-Stack mit KI umsetzen – von HTML/CSS bis Backend und CMS.
Voraussetzungen: Phase 1 abgeschlossen. Erste HTML-/CSS-Kenntnisse hilfreich.

2.1 Konzept: Der KI-gestützte Entwicklungsworkflow¶

Der vollständige KI-Webentwicklungs-Stack¶

graph TD
    A["🎨 Design\n(Penpot)"] --> B["📄 HTML / CSS\n(VSCodium + Continue.dev)"]
    B --> C["⚡ JavaScript\n(Ollama + Continue.dev)"]
    C --> D["🔧 Backend / API\n(FastAPI / Express.js)"]
    D --> E["🗄️ Datenbank\n(PostgreSQL)"]
    E --> F["📝 CMS\n(Strapi / Hugo)"]
    F --> G["🧪 Testing\n(Playwright)"]
    G --> H["🚀 Deployment\n(Docker + Nginx)"]

Konzept: Vibe Coding – was steckt dahinter?¶

Vibe Coding bezeichnet das Entwickeln durch natürlichsprachliche Beschreibungen – ohne selbst Code zu schreiben:

• ✅ Sehr nützlich für Prototypen und MVPs
• ✅ Senkt die Einstiegshürde für Nicht-Entwickler
• ❌ Erzeugt oft technische Schulden (schwer wartbarer Code)
• ❌ Sicherheitslücken bleiben unbemerkt ohne Code-Verständnis

2.2 Thema: HTML & CSS mit KI generieren¶

Konzept: Semantisches HTML – warum es für KI-Code wichtig ist¶

Semantisches HTML verwendet bedeutungsvolle Tags – nicht nur <div>. KI tendiert ohne explizite Anweisung zu unsemantischem Code:

<!-- ❌ Nicht semantisch (häufiger KI-Output ohne Anweisung) -->
<div class="header"><div class="nav">...</div></div>

<!-- ✅ Semantisch (mit explizitem Prompt-Hinweis) -->
<header><nav aria-label="Hauptnavigation">...</nav></header>

Konzept: CSS-Methodologien für KI-generierten Code¶

Software – Open Source zuerst:¶

Vergleich: Open Source vs. Kommerziell¶

2.3 Thema: JavaScript & Interaktivität mit KI¶

Konzept: Vanilla JS vs. Frameworks¶

KI empfiehlt oft Frameworks – auch wenn sie nicht nötig sind:

Konzept: TypeScript – warum KI-Code davon profitiert¶

TypeScript fügt JavaScript Typen hinzu – KI-generierter Code ist damit selbstdokumentierender und weniger fehleranfällig.

Software – Open Source zuerst:¶

Vergleich: Open Source vs. Kommerziell¶

2.4 Thema: Backend & APIs mit KI entwickeln¶

Konzept: Wann brauche ich ein Backend?¶

Konzept: KI-generierter Backend-Code – Sicherheits-Checkliste¶

KI vergisst häufig kritische Sicherheitsaspekte:

• ✅ Input-Validierung – Alle Nutzereingaben prüfen
• ✅ SQL-Injection-Schutz – Prepared Statements verwenden
• ✅ CORS – Korrekt konfigurieren
• ✅ Rate Limiting – Brute-Force-Schutz aktivieren
• ✅ Authentifizierung – JWT oder Session korrekt implementieren

Software – Open Source zuerst:¶

Vergleich: Open Source vs. Kommerziell¶

2.5 Thema: CMS & Website-Builder mit KI¶

Konzept: CMS-Typen im Überblick¶

Konzept: Statische Websites – unterschätzte KI-Anwendung¶

# Hugo + KI-Workflow
ollama run llama3 "Schreibe einen Blogartikel über..." > content/posts/artikel.md
hugo build  # Statische Seite wird generiert

Software – Open Source zuerst:¶

Vergleich: Open Source vs. Kommerziell¶

2.6 Thema: Datenbanken mit KI-Unterstützung¶

Konzept: Welche Datenbank für welchen Anwendungsfall?¶

Konzept: KI generiert SQL – aber Vorsicht!¶

-- ❌ KI-generiert ohne Sicherheitshinweis (SQL-Injection-Risiko)
SELECT * FROM users WHERE name = '" + userInput + "'";

-- ✅ Korrekt: Prepared Statement
SELECT * FROM users WHERE name = $1  -- PostgreSQL

Software – Open Source zuerst:¶

Vergleich: Open Source vs. Kommerziell¶

2.7 Thema: Barrierefreiheit (Accessibility) mit KI¶

Konzept: WCAG-Richtlinien – die vier Prinzipien¶

Konzept: Was KI-Code typisch vergisst¶

• alt-Attribute bei Bildern
• aria-label bei Icon-Buttons
• Ausreichende Farbkontraste (WCAG 4,5:1)
• label-Verknüpfungen bei Formularen
• Focus-Styles für Tastaturnavigation

Lösung: Im Prompt immer „WCAG 2.1 AA konform" als Anforderung nennen!

Software – Open Source zuerst:¶

Vergleich: Open Source vs. Kommerziell¶

🔴 Phase 3 – Optimierung & Deployment¶

Was lerne ich hier?
Websites testen, optimieren und produktiv betreiben – mit KI als Analyse-Assistent.
Voraussetzungen: Phase 1 & 2 abgeschlossen.

3.1 Konzept: Von der Entwicklung zum produktiven Betrieb¶

Der Web-Produktions-Stack (vollständig Open Source)¶

graph TD
    A["💻 Entwicklung\n(VSCodium + Continue.dev)"] --> B["🧪 Testing\n(Playwright, Vitest)"]
    B --> C["🔍 Code-Review\n(Gitea)"]
    C --> D["⚙️ CI/CD\n(Woodpecker CI)"]
    D --> E["📦 Build\n(Docker)"]
    E --> F["🌐 Webserver\n(Nginx / Caddy)"]
    F --> G["🔒 SSL\n(Let's Encrypt)"]
    G --> H["📊 Monitoring\n(Grafana + Prometheus)"]

3.2 Thema: Testing & Debugging mit KI¶

Konzept: Test-Typen im Überblick¶

Konzept: KI-Debugging-Workflow¶

graph LR
    A["🐛 Fehler tritt auf"] --> B["📋 Fehlermeldung kopieren"]
    B --> C["🤖 KI fragen\n(Ollama lokal)"]
    C --> D["💡 Erklärung & Fix"]
    D --> E["🧪 Test ausführen"]
    E --> F{"Behoben?"}
    F -->|Nein| B
    F -->|Ja| G["✅ Fertig"]

Software – Open Source zuerst:¶

Vergleich: Open Source vs. Kommerziell¶

3.3 Thema: Performance-Optimierung mit KI¶

Konzept: Core Web Vitals¶

Konzept: KI-gestützte Lighthouse-Analyse¶

Prompt: "Hier ist mein Lighthouse-Bericht: [Bericht].
         Erkläre die drei wichtigsten Probleme und wie ich sie löse."

Konzept: Wichtige Performance-Techniken¶

Software – Open Source zuerst:¶

Vergleich: Open Source vs. Kommerziell¶

3.4 Thema: SEO-Optimierung mit KI¶

Konzept: Technisches SEO vs. Content-SEO¶

Konzept: Structured Data (Schema.org) mit KI¶

// Prompt: "Erstelle JSON-LD für einen Blogartikel"
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Websites entwickeln mit KI",
  "datePublished": "2026-07-15"
}

Software – Open Source zuerst:¶

Vergleich: Open Source vs. Kommerziell¶

3.5 Thema: Deployment & Hosting mit KI-Unterstützung¶

Konzept: Hosting-Optionen¶

Konzept: KI generiert Docker & CI/CD-Konfigurationen¶

# Prompt: "Erstelle ein Dockerfile für FastAPI + PostgreSQL"
FROM python:3.12-slim
WORKDIR /app
COPY requirements.txt .
RUN pip install -r requirements.txt
COPY . .
CMD ["uvicorn", "main:app", "--host", "0.0.0.0"]

Konzept: CI/CD – automatisiert deployen¶

graph LR
    A["git push"] --> B["Woodpecker CI:\nTests laufen"]
    B --> C{"Tests OK?"}
    C -->|Ja| D["Docker Image\nbauen & deployen"]
    C -->|Nein| E["❌ Push abgelehnt"]

Software – Open Source zuerst:¶

Vergleich: Open Source vs. Kommerziell¶

3.6 Thema: Sicherheit & Datenschutz mit KI¶

Konzept: Häufige Sicherheitslücken in KI-generiertem Code¶

Konzept: DSGVO-konforme Webentwicklung¶

Software – Open Source zuerst:¶

Vergleich: Open Source vs. Kommerziell¶

📋 Praxisprojekte¶

🟢 Einsteiger: Portfolio-Website mit KI¶

graph LR
    A["📋 Konzept\nOllama + draw.io"] --> B["🎨 Design\nPenpot"]
    B --> C["💻 HTML/CSS\nVSCodium + Continue.dev"]
    C --> D["🧪 Audit\nLighthouse"]
    D --> E["🚀 Deploy\nCaddy + Let's Encrypt"]
    E --> F["✅ Portfolio online"]

Software (alle Open Source): Ollama · draw.io · Penpot · VSCodium · Continue.dev · Lighthouse · Caddy

🟡 Fortgeschritten: Blog mit Hugo & KI-Content¶

graph LR
    A["💡 Keyword\nGoogle Search Console"] --> B["📝 Artikel\nOllama + Markdown"]
    B --> C["🏗️ Build\nHugo"]
    C --> D["🖼️ Bilder\nComfyUI"]
    D --> E["🔍 SEO\nLighthouse"]
    E --> F["🚀 Deploy\nWoodpecker CI + Nginx"]
    F --> G["✅ Blog live"]

Software (alle Open Source): Google Search Console · Ollama · Hugo · ComfyUI · Lighthouse · Woodpecker CI · Nginx

🟡 Fortgeschritten: Headless CMS Website¶

graph TD
    A["📝 Inhalte\nStrapi CMS"] --> B["🔌 API\nStrapi REST/GraphQL"]
    B --> C["🎨 Frontend\nAstro + Alpine.js"]
    C --> D["🧪 E2E-Tests\nPlaywright"]
    D --> E["🚀 CI/CD\nWoodpecker CI"]
    E --> F["🐳 Docker + Coolify"]
    F --> G["✅ Website live"]

Software (alle Open Source): Strapi · Astro · Alpine.js · VSCodium · Continue.dev · Playwright · Woodpecker CI · Docker · Coolify

🔴 Experte: KI-Web-App mit Vektor-Suche¶

graph TD
    A["💡 KI-Suche Website"] --> B["🔧 Backend\nFastAPI + Python"]
    B --> C["🗄️ Datenbank\nPostgreSQL + pgvector"]
    C --> D["🤖 Embeddings\nOllama lokal"]
    D --> E["🎨 Frontend\nAstro + Alpine.js"]
    E --> F["🧪 Tests\nPlaywright + pytest"]
    F --> G["🚀 Deploy\nDocker + Coolify"]
    G --> H["✅ KI-Suche live"]

Software (alle Open Source): FastAPI · PostgreSQL · pgvector · Ollama · Astro · Alpine.js · Playwright · pytest · Docker · Coolify

📦 Vollständige Softwareübersicht & Vergleich¶

LLM-Modelle (immer gelistet – unabhängig vom Preis)¶

Entwicklungsumgebung & Code-Assistenten¶

Design & Prototyping¶

Frontend¶

Backend & Datenbank¶

CMS & Static Generators¶

Testing & Qualität¶

Performance & SEO¶

Deployment & Hosting¶

Sicherheit & Datenschutz¶

Weiterführende Ressourcen¶

• MDN Web Docs – Offizielle Web-Referenz (Open Source) 🟩
• web.dev – Google-Ressource für moderne Webentwicklung
• OWASP Top 10 – Die 10 häufigsten Sicherheitslücken
• WCAG 2.1 – Barrierefreiheits-Richtlinien
• Ollama Library – Verfügbare lokale Code-LLMs 🟩
• awesome-selfhosted – Self-hosted Open-Source-Apps 🟩

Letzte Aktualisierung: Juli 2026

Hinweis: Diese Inhalte wurden mit Unterstützung von Künstlicher Intelligenz erstellt und redaktionell überprüft (Transparenzhinweis gemäß Art. 50 EU AI Act).