Mit KI zur eigenen Unternehmenswebsite
„Ich hatte nur einen Webserver, mein Wissen über mein Unternehmen – und den Wunsch, etwas Modernes und Dynamisches zu schaffen.“
Ganz ohne CMS, Baukasten oder Templates habe ich eine Unternehmenswebsite von Grund auf selbst entwickelt – nur mit einem leeren Server und der Unterstützung von KI. Entstanden ist eine digitale Visitenkarte mit den notwendigen Funktionalitäten, die technisch sauber und authentisch zeigt, was möglich wird, wenn KI als Werkzeug und nicht als Zauberstab eingesetzt wird.
Das Setup: Was ich zur Verfügung hatte
Einen Webserver mit PHP-Unterstützung
Absolute Basiskenntnisse in HTML, CSS, JavaScript und PHP
Eine klare Vorstellung von meinem Unternehmen
Zugriff auf KI-Tools zur Unterstützung bei Code, Design und Text
Hard- und Software: Mein MacbookPro, Visual Studio Code
Das Kochrezept: Schritt-für-Schritt zur eigenen Website
Ziel und Struktur definieren
Designideen mit KI brainstormen
HTML/CSS/JS Grundgerüst erstellen
Dynamik mit PHP und JavaScript einbauen
Content erstellen – mit KI als Co-Autor
Testing & Optimierung
Launch & Feedback
DEIN STUFEN MEGA PROMPT FÜR MODERNE WEBSITES
Bitte den folgenden Text je nach individuellem Bedarf anpassen und in dein KI einfügen:
„Versetze dich in die Rolle eines Senior Web Designers, UX Architekten, Usability Experten und Senior Frontend Engineers einer renommierten Digitalagentur. Du arbeitest auf dem Niveau der Design Teams hinter Apple, Stripe, Linear, Vercel und Pitch.
Deine Aufgabe ist es, eine komplette Website in mehreren Stufen zu entwickeln. Jede Stufe folgt diesem Ablauf:
Ablauf jeder Stufe:
1. Stelle mir 5 präzise Fragen, die notwendig sind, um die Stufe korrekt auszuführen.
2. Stelle mir 5 Rückfragen, die mögliche Unklarheiten beseitigen.
3. Warte auf meine Antworten.
4. Erstelle danach die vollständige Umsetzung der Stufe.
Gesamtstruktur der Stufen:
STUFE 1 — Zielgruppenanalyse & Value Proposition
– Wer besucht die Website? – Welche Bedürfnisse haben diese Personen? – Welche klare Nutzenbotschaft soll die Website transportieren? – Stilreferenzen: apple.com, stripe.com, linear.app
STUFE 2 — Informationsarchitektur & Navigationslogik
– Hauptnavigation – Unterseiten – Footer Struktur – interne Verlinkungslogik – Breadcrumb Konzept
STUFE 3 — Modulares, kachelbares Layout System
Für jede Kachel: – Name – Zweck – Inhalt – Varianten – Mobile Optimierung – Animationsempfehlungen Stilreferenzen: pitch.com, superlist.com, notion.so
STUFE 4 — Moderne Website Texte (SEO + UX)
– H1–H3 – Teaser – Absätze – CTAs – Meta Descriptions Tonalität: klar, modern, professionell
STUFE 5 — Design System / Styleguide
– Farbpalette – Typografie – Grid – Spacing – Buttons – Formulare – Icon Stil – Bildsprache – Animationen Stilreferenzen: framer.com, vercel.com, dropbox.design
STUFE 6 — UX Optimierung
– Orientierung – Lesbarkeit – mobile Nutzung – Barrierefreiheit – Interaktionsdesign – Conversion – Performance
STUFE 7 — HTML/CSS/JS Code
– sauberes, semantisches HTML – modernes, responsives CSS – CSS Variablen – klare Klassenstruktur – optional Vanilla JS Stilreferenzen: vercel.com, stripe.com
WICHTIG: – Beginne immer mit Stufe 1. – Starte jede Stufe mit 5 Fragen + 5 Rückfragen. – Warte auf meine Antworten. – Setze danach die Stufe vollständig um. – Frage mich am Ende jeder Stufe, ob du mit der nächsten Stufe fortfahren sollst.“
Fazit: KI als Werkzeug, nicht als Zauberstab
Die KI war für mich kein Ersatz für Kreativität – sondern ein Verstärker. Sie hat mir geholfen, schneller zu iterieren, bessere Texte zu schreiben und technische Hürden zu überwinden. Besonders beim Generieren von Code-Snippets war sie unschlagbar schnell und präzise.
Aber: Sobald es darum ging, bestehenden Code weiterzuentwickeln – vor allem wenn dieser über mehrere Dateien verteilt war – stieß die KI an ihre Grenzen. Ohne den aktuellen Code als Kontext liefert sie oft nur generische Vorschläge. Deshalb gilt: Immer den relevanten Codeabschnitt mitliefern und klar sagen, was verändert werden soll. Nur dann wird das Feedback wirklich brauchbar.
Ein entscheidender Erfolgsfaktor war außerdem, die KI explizit zu bitten, Schritt für Schritt zu arbeiten. Ohne diese Anweisung neigt sie dazu, mehrere Dinge gleichzeitig zu verändern – was schnell zu Fehlern oder unerwünschten Seiteneffekten führt. Strukturierte Prompts mit klaren Teilaufgaben bringen deutlich bessere Ergebnisse.
Auch bei der Fehlersuche braucht man Geduld. Manchmal dreht man sich im Kreis, manchmal hilft ein zweiter oder dritter Prompt mehr als der erste. Beharrlichkeit zahlt sich aus.
Nach rund 15 Stunden Arbeit hatte ich eine Website, die technisch solide ist, meine Inhalte transportiert und meine Handschrift trägt. Die KI hat mir viel abgenommen – aber die Seele der Seite? Die kam von mir.
Mit wenig Know-how lassen sich dank KI heute erstaunlich viele Funktionen umsetzen. Aber ganz ohne eigenes Denken, Struktur und Ausdauer geht es nicht. KI ist kein Baukasten – sie ist ein Werkzeug. Und wie bei jedem Werkzeug entscheidet der Mensch, was daraus entsteht.