--- title: "Webseite in 4 Stunden mit Claude AI: Ganz ohne Technik-Kenntnisse" description: "Unternehmerin erstellt professionelle Website mit Claude AI in nur vier Stunden – ohne Webdesigner, ohne Programmierkenntnisse. So funktioniert der Ablauf." url: https://zimmwriter.de/webseite-in-4-stunden-mit-claude-ai-ganz-ohne-technik-kenntnisse type: "post" language: "de" site: "ZimmWriter KI SEO Texte schreiben" published: 2026-10-28T19:53:59+00:00 modified: 2026-10-28T20:03:45+00:00 author: "Zimmi" categories: "Artikel" tags: "automatisierung, Claude AI, Designsystem statt Standard-KI-Optik, entscheidende Unterschied, entscheidende Unterschied Designsystem, fertigen Code, KI-Tools, statt Standard-KI-Optik, Unterschied Designsystem, webdesign, Website erstellen" image: https://zimmwriter.de/wp-content/uploads/2026/10/webseite-in-4-stunden-mit-claude-ai-ganz-ohne-technik-kenntnisse.jpg --- # Webseite in 4 Stunden mit Claude AI: Ganz ohne Technik-Kenntnisse Eine Unternehmerin hat in nur vier Stunden eine professionelle Website erstellt , komplett ohne Programmierkenntnisse und ohne Webdesigner. Elke Greß nutzte dafür Claude AI, das KI-Modell von Anthropic. In einem [detaillierten Guide](https://claude-website.ai-mindflow.com/guide-claudewebsite/) zeigt sie den kompletten Ablauf zum Nachbauen. Der Prozess basiert auf einem besonderen Trick: Statt Claude einfach „eine Website” bauen zu lassen, erstellt die KI zuerst ein individuelles Designsystem aus einem Beispielbild. ## Der entscheidende Unterschied: Designsystem statt Standard-KI-Optik ### Visuelles Beispiel als Ausgangspunkt Der Prozess startet mit der Suche nach einer visuellen Vorlage. Das kann eine alte eigene Website sein, ein Pinterest-Pin, ein Canva-Design oder ein Screenshot einer Website, die dir gefällt. Claude kopiert nichts , das Bild dient nur als Stilrichtung für Farben, Schriften, Aufbau und Stimmung. ### Automatische Ableitung des Designsystems Im zweiten Schritt lädt man das Beispielbild in Claude Chat hoch und gibt den Prompt: „Erstelle mir aus diesem Beispielbild ein Designsystem in einem HTML-File und eine design.md-Datei.” Claude analysiert dann Farben, Schriften, Abstände und visuelle Hierarchie. Das Ergebnis sind zwei Dateien: ein HTML-File mit visueller Übersicht und eine design.md-Datei mit Stilregeln in Textform, inklusive Hex-Codes, Schriften und Komponenten. Dieser Schritt macht laut Greß den entscheidenden Unterschied: Ohne ihn baut Claude „einfach eine Webseite”. Mit dem Designsystem entsteht eine Website, die nach dem eigenen Stil aussieht, nicht nach Standard-Claude. ![Claude AI erstellt individuelles Designsystem für Website](https://zimmwriter.de/wp-content/uploads/2026/10/claude-ai-erstellt-individuelles-designsystem-fuer-website.jpg) ## Von der Struktur zum fertigen Code ### Aufbau planen und Texte erarbeiten Bevor die Texte entstehen, braucht die Website eine klare Struktur. Typische Abschnitte sind Hero, Vorteile, Über mich, Angebot, Kundenstimmen, FAQ und Call-to-Action. Die Reihenfolge hängt vom Angebot, der Zielgruppe und dem Ziel der Seite ab. Für die Texte arbeitet man Abschnitt für Abschnitt mit Claude im Chat. Wichtig: Claude muss wissen, wie du klingst. Dafür gibst du zwei bis drei Beispieltexte mit , Newsletter, LinkedIn-Posts oder alte Website-Texte. Dann lässt du Claude jeden Abschnitt einzeln schreiben und schärfst die Vorschläge in mehreren Durchgängen. Die fertigen Texte speicherst du in einer Datei in der Reihenfolge des Aufbaus. ### Claude Code baut die Website Für den Bau der Website brauchst du die Claude Desktop App und einen Claude Pro Account. Die Browserversion hat weniger Funktionen. Du legst einen Ordner mit allen Materialien an: Designsystem, design.md-Datei, Texte und Bilder. In der Desktop App wechselst du in den Code-Modus und verknüpfst den Ordner über das Ordner-Symbol. Der Prompt lautet: „Bau mir aus den Texten in [Dateiname] eine Webseite. Nutze die Stilregeln aus design.md und das Designsystem aus [Dateiname]. Bau die Seite responsive.” Claude Code erstellt dann die HTML-Datei, was einige Minuten dauert. ## Korrekturschleifen und Online-Stellung ### Anpassungen in normaler Sprache Die erste Version ist selten die finale. Typische Anpassungen: Abstände ändern, Button-Farben anpassen, Header-Bereich verstärken, mobile Ansicht optimieren oder Anmeldeformulare einbauen. Claude Code versteht Anweisungen in normaler Sprache, etwa „Mach den Header-Bereich größer” oder „Die Buttons sollen in der Akzentfarbe aus dem Designsystem sein”. ### Hosting über Netlify Für die Veröffentlichung nutzte Greß Netlify, das für einfache Websites kostenlos ist. Der Ablauf: Account anlegen, Ordner mit der Website per Drag-and-Drop hochladen, die Seite ist online unter einer kostenlosen Subdomain. Bei Bedarf lässt sich eine eigene Domain verknüpfen. | Schritt | Aktion | Tool | Zeitaufwand | | --- | --- | --- | --- | | 1 | Visuelles Beispiel finden | Pinterest, eigene Seite | 15-30 Min. | | 2 | Designsystem erstellen | Claude Chat | 10 Min. | | 3 | Struktur planen | Claude Chat | 30 Min. | | 4 | Texte erarbeiten | Claude Chat | 1-2 Std. | | 5 | Website bauen | Claude Code | 30 Min. | ## Voraussetzungen und praktische Grenzen ### Was du brauchst Für den Prozess sind ein Claude Pro Account und die Claude Desktop App nötig. Die Browserversion reicht nicht aus, weil sie weniger Funktionen hat und keinen Code-Modus bietet. Wenn du mehrere Seiten am Stück baust oder viel mit Claude Code arbeitest, kann der größere Account (Claude Max) für den Erstellungsmonat sinnvoll sein. Du brauchst außerdem eine klare Vorstellung davon, was die Seite tun soll: Warteliste sammeln, Produkt verkaufen, auf einen Workshop einladen. Fertige Texte sind nicht nötig, aber das Ziel der Seite sollte klar sein. ### Was Claude kann und was nicht Claude schreibt Website-Code schnell und erstellt responsive HTML-Seiten. Es kann aber nicht hosten, deployen oder Backend-Funktionen ausführen. Für komplexe Funktionen wie Zahlungsabwicklung, Datenbanken oder Nutzer-Login brauchst du zusätzliche Tools oder Entwickler. Claude eignet sich für Landingpages, Portfolio-Seiten, Wartelisten-Seiten und einfache Business-Websites. ## Geschäftsmodell und Einsatzmöglichkeiten für Unternehmer Die Methode senkt die Einstiegshürde für professionelle Web-Präsenz erheblich. Kleine Unternehmen, Berater, Coaches und Freelancer können ohne Webdesigner-Budget und ohne Technik-Kenntnisse eine individuelle Website erstellen. Die Zeitersparnis ist beträchtlich: Statt Wochen oder Monaten dauert der Prozess wenige Stunden bis maximal einen Tag. Besonders wertvoll ist die Methode für Tests und schnelle Launches. Du kannst ein neues Angebot mit einer Landingpage testen, bevor du in eine aufwendige Website investierst. Oder du erstellst für verschiedene Zielgruppen separate Seiten mit angepassten Texten und Designs. Die Korrekturschleifen laufen schneller als bei klassischen Webdesignern, weil du direkt mit der KI kommunizierst. Die vier Stunden von Greß waren ihr Ergebnis bei einer Landingpage. Die tatsächliche Dauer hängt davon ab, wie klar dein Angebot ist, wie viele Korrekturschleifen du drehst und wie viele Abschnitte die Seite hat. Der zeitaufwendigste Teil ist die Textarbeit , hier entscheidet sich, ob die Seite nach dir klingt und das gewünschte Ergebnis bringt. ## Quellen - [How To Build A Small Business Website With Claude AI](https://www.forbes.com/sites/rahuldogra/2026/10/28/how-small-businesses-can-design-a-creative-website-with-claude/) - [Can Claude build a website? Here’s what it can (and can’t) do](https://www.wix.com/blog/can-claude-build-a-website) - [I asked Claude to explain Anthropic’s IPO. I laughed out loud and scratched my head | CNN Business](https://www.cnn.com/2026/10/26/business/claude-anthropic-ipo-summary) - [What is Claude Duet, Anthropic’s personal AI agent for the small business owner? | Technology News – The Indian Express](https://indianexpress.com/article/technology/artificial-intelligence/claude-duet-anthropic-personal-ai-agent-explained-10937958/) - [Claude plans for business: which to choose and how to set it up](https://groath.ai/en/guides/claude-plans-for-business)