Agent-Friendly Website
mit Claude Code bauen
Deine Website kostet dich 50€/Monat und ist für ChatGPT unsichtbar.
So änderst du beides — mit Claude Code als Co-Entwickler.
Kein theoretischer Guide. Das ist der dokumentierte Ablauf, wie wir cegtec.net in unter 3 Wochen migriert, redesigned und agent-friendly gemacht haben.
Das Problem mit deiner aktuellen Website
Die meisten B2B-Websites im DACH-Raum haben drei Probleme gleichzeitig:
Deine Inhalte leben in einer proprietären Datenbank. Export ist Pain oder unmöglich. Du zahlst monatlich für den Zugang zu deinem eigenen Content.
Kein AI-Agent kann deine Website sinnvoll lesen. Kein llms.txt, kein Schema Markup, kein semantisches HTML. Für ChatGPT, Claude und Perplexity bist du unsichtbar.
Dein CMS lädt 100KB+ eigenes JavaScript. Jede Seite. Du zahlst 20–50€/Monat für Hosting. Anpassungen jenseits des Editors? Viel Glück.
Das Ergebnis: Du zahlst viel Geld für eine Website, die weder für Menschen schnell noch für AI-Agents lesbar ist.
Die Lösung: Static Site Generator + Claude Code + Agent-Readiness.
Der Stack
Warum Astro?
Es gibt viele Static Site Generators (Next.js, Hugo, Gatsby, 11ty). Für B2B-Websites empfehlen wir Astro:
Statische Seiten laden kein JS, außer du brauchst es explizit. Deine About-Seite wiegt 20KB statt 200KB.
Dein CMS sind Markdown-Dateien mit typsicheren Schemas. Kein Backend, kein Login, kein Vendor Lock-in. Jede Seite ist eine Datei in Git.
Interaktive Elemente (Rechner, Dashboards, Formulare) werden als "Inseln" geladen. Der Rest bleibt statisch.
Astro-Projekte sind klar strukturiert, dateibasiert und konsistent. Claude Code kann ganze Seiten aus einer Beschreibung bauen.
Der Workflow — 5 Phasen
Projekt-Setup
Bevor Claude Code eine Zeile schreibt, braucht es Kontext. Die CLAUDE.md-Datei ist dein Briefing — Claude liest sie bei jedem Session-Start.
Was reingehört:
- Firmenname, Branche, Zielgruppe
- Tech Stack (Astro + Tailwind + Deployment-Ziel)
- Design-System (Farben, Fonts, Spacing-Regeln)
- Agent-Readiness Constraints (semantisches HTML Pflicht, Schema Markup auf jeder Seite, llms.txt im Root)
- Verbote (z.B. keine div-Suppe, keine Bilder ohne Alt-Text, kein JS das Content versteckt)
Content-Struktur
Claude Code erstellt die komplette Sitemap mit Content Collections:
- Jede CMS-"Collection" (Blog, Case Studies, Services, Team) wird ein Ordner mit Markdown-Dateien
- Jede Datei hat ein typsicheres Schema (Frontmatter) — Titel, Beschreibung, Autor, Tags, Metriken
- Neue Inhalte hinzufügen = neue Markdown-Datei anlegen. Kein CMS-Backend nötig.
Blog → title, description, author, tags, publishedAt
Case Study → client, industry, heroMetric, metrics[], facts[]
Services → serviceCategory, services[], benefits[]
Projects → facts[], thumbnail, videoEmbed
FAQ → question, category, orderDesign & Build
Claude Code baut Komponenten aus Beschreibungen:
Navigation, Footer, Layouts — kein JS im Browser. Reine HTML-Ausgabe.
Preisrechner, Dashboards, Tab-Navigation — JS nur wo nötig.
Hover-States als CSS Transitions. Scroll-getriggerte Effekte wo sinnvoll.
Das Prinzip: Statisch wo möglich, interaktiv nur wo nötig. Das ergibt die schnellsten Ladezeiten.
Agent-Friendly machen
Claude Code implementiert den gesamten AI-Discovery-Layer in drei Stufen:
- Semantisches HTML: header, article, section, nav statt generischer divs
- Heading-Hierarchie: Exakt ein H1 pro Seite, keine übersprungenen Level
- Alt-Texte auf allen Bildern
- Meta-Descriptions auf allen Seiten
- JSON-LD Structured Data auf jeder Seite
- Organization, Article, Service, FAQPage, BreadcrumbList — je nach Seitentyp
- Im Base-Layout eingebettet, automatisch auf jeder Seite
- llms.txt im Root-Verzeichnis (maschinenlesbare Zusammenfassung)
- robots.txt explizit geöffnet für AI-Crawler (GPTBot, ClaudeBot, PerplexityBot)
- Optional: OpenAPI Spec, A2A Agent Card (.well-known/agent.json)
Deployment
Claude Code vs. Du
- Ganze Seiten aus einer Beschreibung bauen
- Content Collections mit typsicheren Schemas anlegen
- SEO-Meta, Schema Markup, Open Graph in einem Rutsch
- Bestehenden Code lesen und konsistent erweitern
- Accessibility-Audits durchführen und direkt fixen
- Design-Entscheidungen treffen (Farben, Layout, Tonalität)
- Content schreiben oder freigeben
- Visuell prüfen ob es gut aussieht
- Deployment-Pipeline einmalig einrichten
Vorher / Nachher
Häufige Fragen
"Muss ich coden können?"
Nein — aber du musst mit einem Terminal umgehen können. Claude Code schreibt den Code. Du beschreibst was du willst und prüfst das Ergebnis.
"Was ist mit Webflow/WordPress — muss ich migrieren?"
Nein. Wenn dein aktuelles CMS funktioniert, kannst du auch dort Agent-Readiness nachrüsten (siehe Agent-Friendly Content Guide). Die Migration lohnt sich vor allem wenn du: Content-Ownership willst, Hosting-Kosten senken willst, oder eine komplett neue Website baust.
"Wie aktualisiere ich Inhalte ohne CMS-Backend?"
Neue Markdown-Datei anlegen, Git pushen, fertig. Oder: Claude Code prompten "Erstelle einen neuen Blog-Post über X" — Claude erstellt die Datei, du committest.
"Kann ich das wirklich in 1–3 Wochen schaffen?"
Ja — wenn du den Content schon hast. Die technische Umsetzung ist mit Claude Code schnell. Was Zeit kostet ist Content-Erstellung und Design-Entscheidungen.
"Was kostet der gesamte Stack all-in?"
~$20–50/Monat für die Claude Code API-Nutzung während des Builds. Danach: $0/Monat Hosting. Deine laufenden Kosten sind im Grunde Null.
Du willst nicht selbst bauen?
Wir machen das für dich — Agent-Friendly Websites für B2B-Unternehmen im DACH-Raum. Migration, Templates, AI-Discovery, alles aus einer Hand.
Kostenloses ErstgesprächErstmal den AI-Layer verstehen?
Lies unseren Guide zu Agent-Friendly Content — die Grundlage für alles was in diesem Guide gebaut wird.
Agent-Friendly Content Guide