Eine Website mit KI erstellen: Praktischer Leitfaden zur Prompt-Engineering für Entwickler

Einseitiges Portfolio in einem Wochenende mit KI-Assistenten bauen: Entwickler-Guide

Die Erstellung einer einseitigen Portfolio-Seite mit Hilfe eines KI-Assistenten wie Claude Code bringt frischen Wind in die Webentwicklung. So baust du in kürzester Zeit ein voll funktionales Projekt – ohne externe Experten, nur mit Grundkenntnissen in HTML/CSS und Prompt-Engineering.

Vorbereitungsphase: Inhalte und Struktur

Bevor du Code schreibst, sammle deine Inhalte und skizziere die Projektarchitektur. Die KI kann Texte generieren, wenn du genug Kontext gibst: Chat-Verläufe, Vortragsmaterialien, Projektbeschreibungen. Für die Bio lass dir drei Varianten erstellen – kurz, mittel, ausführlich –, um Zeit zu sparen.

Festlege die Seitenstruktur vor dem ersten Prompt. Hier ein empfohlenes Layout für eine Speaker-Portfolio-Seite:

• Feste 300px-Seitenleiste
• Hauptinhalt mit Abschnitten
• Hero-Bereich mit Foto und Schlüsseldaten
• Bio-Block
• Vortragsthemen als Karten
• Erfolge mit Statistiken
• Foto- und Videogalerie
• Kontaktinformationen

Prompts gestalten: Vom Gerüst zum Feinschliff

Goldene Regel für KI-Assistenten: Beschreibe das Endergebnis, nicht die Schritte. Der erste Prompt erzeugt das Grundgerüst mit korrekter Struktur und Semantik.

Beispiel für einen effektiven Startprompt:

Erstelle eine einseitige Portfolio-Seite für einen Speaker.

Stil: Dunkles Theme (Hintergrund #0a0a0a), Raleway-Schriftart via Google Fonts, Akzentfarbe #3182CE.

Layout: Zwei Spalten. Links: Feste 300px-Seitenleiste mit rundem Foto, Name, Titel, Social-Links. Rechts: Hauptinhaltsabschnitte – Bio, Vortragsthemen (Karten), Erfolge (Stats), Galerie (Foto-Gitter), Kontakte.

Anforderungen: Reines HTML, CSS und vanilla JS. Keine Frameworks oder externe Abhängigkeiten außer Google Fonts.

Sobald das Gerüst steht, iteriere zur Verfeinerung. Jeder Durchlauf bearbeitet eine spezifische Aufgabe:

• Typografie und Farbschema
• Responsives Design
• Interaktive Elemente
• Animationen und Mikrointeraktionen

Technische Umsetzungsdetails

Responsives Layout und Browser-Kompatibilität

Mobile-Anpassung erfordert extra Aufmerksamkeit. Nach Desktop-Anpassungen explizit Mobile-Fixes anfordern:

Auf Mobile (<768px) bricht das Layout: Seitenleiste und Inhalt nebeneinander, Inhalt überläuft. Fix: Seitenleiste oben stapeln (Foto und Kontakte nebeneinander), Hauptinhalt darunter volle Breite.

Wichtige Cross-Browser-Tipps:

• Testen in Chrome, Safari, Firefox
• Vendor-Prefixe für CSS-Eigenschaften hinzufügen
• Tablets prüfen (768-1024px)

Performance-Optimierung

Nach dem visuellen Feinschliff optimieren. Häufige Probleme und Lösungen:

• Bildoptimierung:

- PNG zu WebP konvertieren

- Auf benötigte Größen skalieren

- Lazy Loading hinzufügen

• Ressourcenladen:

- Google Fonts asynchron

- Kritische Assets preloaden

- Iframe-Laden verzögern

• Performance-Metriken:

- LCP (Largest Contentful Paint)

- FID (First Input Delay)

- CLS (Cumulative Layout Shift)

Beispiel-Optimierungs-Prompt:

Seite erzielt 38 bei PageSpeed Insights. Probleme: Große Bilder (12MB Profilfoto), render-blockierende Ressourcen, kein Lazy Loading für Videos. Optimieren: Bilder zu WebP konvertieren, Hero-Bild preloaden, Iframe-Laden verzögern.

Deployment und Hosting

Hosting-Optionen

• Netlify/GitHub Pages – kostenlos, kinderleicht
• Eigener VPS – volle Kontrolle, Setup nötig

VPS-Deployment-Fallen

• Groß-/Kleinschreibung bei Dateinamen (Linux ist pingelig)
• Absolute vs. relative Pfade
• Dateirechte und User-Isolation
• Projektstruktur-Organisation

Tipps gegen Kopfschmerzen:

• Nur Kleinbuchstaben für Dateinamen
• Keine Leerzeichen oder Sonderzeichen
• Setup dokumentieren
• Git für Versionskontrolle nutzen

Wichtige Erkenntnisse

• Iterativer Prozess: Entwicklung in kleine Aufgaben zerlegen; jede Iteration löst ein Problem
• Qualitätschecks: Über Browser testen, Performance-Tools laufen
• Dokumentation: Änderungen und Entscheidungen protokollieren für einfache Rollbacks
• Optimierung: Performance als separate Phase nach Visuellem behandeln

Code-Best Practices

Projektstruktur

Dateien logisch organisieren:

project/
├── index.html
├── styles/
│   ├── main.css
│   ├── mobile.css
│   └── animations.css
├── scripts/
│   └── main.js
├── images/
│   ├── optimized/
│   └── original/
└── assets/
    └── fonts/

CSS-Methodik

Bedeutungsvolle BEM-Klassennamen verwenden:

.speaker-card {
    /* Card-Styles */
}

.speaker-card__image {
    /* Bild-Styles in Card */
}

.speaker-card__image--rounded {
    /* Modifier für rundes Bild */
}

JavaScript für Interaktionen

Basis-Interaktionen ohne Frameworks hinzufügen:

// Scroll-Trigger-Animationen
const observerOptions = {
    threshold: 0.1,
    rootMargin: '0px 0px -50px 0px'
};

const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            entry.target.classList.add('animate-in');
        }
    });
}, observerOptions);

// Auf alle .animate-on-scroll-Elemente anwenden
document.querySelectorAll('.animate-on-scroll').forEach(el => {
    observer.observe(el);
});

Häufige Fehler und Lösungen

• Undeutliche Prompts – KI spuckt generische Vorlagen aus
• Keine Einschränkungen – KI schleppt unerwünschte Bibliotheken ein
• Optimierung überspringen – Schön, aber lahm
• Mobile ignorieren – Hälfte der Nutzer verpassen

Qualitätskontroll-Tools

• PageSpeed Insights – Performance-Audits
• Lighthouse – Komplette Site-Checks
• BrowserStack – Cross-Browser-Tests
• Git – Versionskontrolle und Rollbacks

— Editorial Team