Der Claude-Code-Werkzeugkasten
für Agent-Friendly Websites
Ein Guide erklärt dir was zu tun ist. Dieses Repo macht es dir vor.
CLAUDE.md-Vorlage, Design-Skill, Slash-Commands und Prompt-Bibliothek — öffentlich auf GitHub.
Kein Theorie-Post über Prompting. Das ist das exakte Tooling, mit dem wir cegtec.net gebaut haben — als klonbares Repo, MIT-lizenziert.
Ein Guide reicht nicht — du brauchst die Werkzeuge
Unser Build Guide erklärt den kompletten Workflow: Migration, Content-Struktur, Design, Agent-Readiness, Deployment. Was er nicht liefert: die tatsächlichen Dateien, die Claude Code bei jedem Schritt konsistent und schnell machen.
Ohne die richtige Vorbereitung passiert das Übliche: Jede Session mit Claude Code startet bei null. Du erklärst das Corporate Design zum zehnten Mal. Die Migration läuft mal per Copy-Paste, mal per Crawling, nie nach demselben Muster. Agent-Readiness wird "am Ende noch schnell gemacht" — und vergessen.
Die Lösung: ein Repo, das den Prozess selbst mitbringt — nicht nur den fertigen Code.
Was im Repo steckt
Fünf Bausteine, jeder für sich klein — zusammen der Unterschied zwischen "Claude Code irgendwie benutzen" und einem wiederholbaren Prozess.
Das Briefing, das Claude Code bei jeder Session liest. Marke, Stack, Design-Tokens, Agent-Readiness-Pflichten — einmal ausfüllen, nie wieder wiederholen.
Hält jede gebaute Seite visuell konsistent mit den anderen — ohne diesen Skill erfindet ein Coding-Agent für jede Seite sein eigenes Layout neu.
/migrate-page und /audit-agent-friendly — die zwei mechanischsten Aufgaben des gesamten Prozesses, einmal sauber definiert statt jedes Mal neu erklärt.
Copy-Paste-Prompts für jede Phase — von der Migration bis zum Deployment-Check. Kein Rätselraten, was du wie formulieren sollst.
Die Bausteine im Detail
CLAUDE.md — das Briefing
Eine Markdown-Datei im Projekt-Root, die Claude Code am Anfang jeder Session liest. Enthält: Firmenname, Stack, Design-System als Token-Tabelle, und eine Liste nicht verhandelbarer Agent-Readiness-Regeln (semantisches HTML, ein H1 pro Seite, Schema Markup, aktuelle llms.txt).
Der Unterschied zu einer normalen README: Eine README erklärt Menschen das Projekt. CLAUDE.md instruiert den Agenten, der daran arbeitet — inklusive eines expliziten "Was NICHT tun"-Abschnitts, weil das genauso wichtig ist wie die Anforderungen selbst.
Der frontend-design Skill
Ein Claude-Code-Skill ist eine Anleitung, die der Agent gezielt lädt, wenn eine bestimmte Art von Aufgabe ansteht — hier: eine neue Seite oder Komponente bauen. Der Skill definiert Typografie, Farb-Tokens, Motion-Regeln und konkrete Component-Patterns (Card-Radius, Button-Padding, Tag-Styling) an einem Ort.
Ohne diesen Skill baut ein Coding-Agent jede Seite mit einer eigenen Interpretation von "sieht gut aus" — die zehnte Landingpage passt dann nicht mehr zur ersten. Mit dem Skill bleibt jede Seite auf derselben Design-Sprache, weil die Regel einmal geschrieben und danach nur noch referenziert wird.
Slash-Commands: /migrate-page & /audit-agent-friendly
/migrate-page <url> crawlt eine Seite deiner alten Website per Playwright MCP, extrahiert Content und Bilder, entscheidet ob sie in eine Content Collection oder eine eigene Seite gehört, und protokolliert die alte URL für den späteren Redirect. Fragt außerdem einmalig: Design 1:1 übernehmen oder neu gestalten?
/audit-agent-friendly [pfad] arbeitet die AGENT_READINESS_CHECKLIST.md gegen die tatsächliche HTML-Antwort ab (nicht das gerenderte DOM im Browser) und behebt mechanische Verstöße direkt — Level 3 (llms.txt, robots.txt) wird nur mit Rückfrage angefasst, weil das die ganze Website betrifft.
Die Prompt-Bibliothek
Nicht jede Aufgabe verdient einen eigenen Slash-Command — für alles andere gibt es PROMPT_LIBRARY.md: fertig formulierte Prompts für jede Phase, von "Crawle diese Website und speichere jede Seite mit sourceUrl im Frontmatter" bis "Vergleiche diese Seite mit einer, die richtig aussieht, und erkläre den tatsächlichen Unterschied — bau sie nicht einfach neu."
"Ich will unser aktuelles Design behalten, nicht neu gestalten.
Untersuche das tatsächliche gerenderte CSS von [alte-seite.de] —
Primär- und Akzentfarben, Headline- und Body-Font, Border-Radius
auf Cards/Buttons, Section-Abstände — und schreib sie als CSS-
Variablen in src/styles/global.css. Spiegle dieselben Werte in
CLAUDE.md und im frontend-design Skill, damit jede später gebaute
Seite zur bestehenden Marke passt statt eine neue zu erfinden."Wie die drei Guides zusammenspielen
Das Werkzeug: CLAUDE.md-Vorlage, Design-Skill, Slash-Commands, Prompt-Bibliothek. Zum Klonen und Ausfüllen mit deiner eigenen Marke.
Der Prozess: die 6 Phasen von der Migration bis zum Deployment, mit Zeitschätzungen und dem exakten Ablauf. Siehe Agent-Friendly Website mit Claude Code bauen.
Das Warum und der Standard dahinter: semantisches HTML, Schema Markup, llms.txt, MCP — mit Daten dazu, warum das für AI-Sichtbarkeit zählt. Siehe Agent-Friendly Content.
Reihenfolge zum Einstieg: erst den Build Guide lesen für den Überblick, dann dieses Repo klonen um tatsächlich anzufangen, und den Agent-Readiness Guide griffbereit halten für Phase 5.
Häufige Fragen
"Ist das ein Claude-Code-Plugin, das ich installieren muss?"
Nein. Es ist ein normales Git-Repository. Du klonst es, öffnest es mit Claude Code, und die .claude/-Ordnerstruktur (Skill + Slash-Commands) wird automatisch erkannt, sobald du im Projektordner arbeitest.
"Funktioniert das auch ohne die Astro-Starter-Struktur zu übernehmen?"
Die Slash-Commands und die Prompt-Bibliothek sind generisch genug, um sie in ein bestehendes Projekt zu kopieren. Der Astro-Starter selbst ist optional — nützlich, wenn du komplett neu baust, nicht zwingend, wenn du nur den Prozess willst.
"Muss ich Playwright separat installieren?"
Du brauchst den Playwright MCP Server für Claude Code, nicht Playwright selbst als npm-Paket. Ein Befehl (claude mcp add playwright -- npx -y @playwright/mcp@latest), einmalig, und Claude Code kann danach Seiten öffnen und lesen.
"Ist da CegTec-Branding oder Zugangsdaten drin, die ich rausnehmen muss?"
Nein. Das Repo ist bewusst neutral gehalten — Platzhalter-Firma, Platzhalter-Farben, keine echten Keys oder Tracking-IDs. Es ist der Prozess, nicht unser Branding.
Klonen und loslegen
MIT-lizenziert, funktionierender Astro-Starter inklusive. Fülle CLAUDE.md aus und starte mit Phase 1.
Repo auf GitHub öffnenLieber machen lassen?
Wir migrieren, bauen und machen deine Website agent-friendly — mit genau diesem Tooling, aber ohne dass du selbst ins Terminal musst.
Kostenloses Erstgespräch