Communitygithub.com

cartcodes/website-builder

Erstellen, erweitern und überprüfen Sie eine schnelle Lead-Generierungs-Website und Lead-Magnete für jedes Unternehmen, betrieben von Claude Code für einen nicht-technischen Inhaber.

Was ist website-builder?

Der Skill 'Website Builder' von cartcodes ist ein umfassendes Werkzeug, das Claude Code in die Lage versetzt, eine komplette Lead-Generierungs-Website für jedes Unternehmen zu erstellen, zu erweitern und zu überprüfen, ohne dass der Inhaber technische Kenntnisse benötigt. Der Skill folgt einem klaren Prozess: Zunächst wird die Arbeitsweise ausgewählt – entweder eine geführte 'Normales Interview'-Routine oder ein flexibler 'Freiform'-Modus. Im Kern erstellt der Skill einzelne Landingpages mit einem einzigen Conversion-Ziel (z. B. Buchung, Formular, Download), die in Archivseiten organisiert sind, auf die über die Fußzeile zugegriffen werden kann. Jede Aktion führt zu einer Erfolgsseite mit einem Vertrag. Der Skill integriert die Erstellung von Lead-Magneten (PDFs, Anzeigen, E-Mails), eine echte Keyword-Recherche, überzeugende Copywriting-Richtlinien ohne KI-Erkennungsmerkmale, vollständige SEO, GEO/AEO sowie Indexierungs- und Geschwindigkeitsprüfungen. Eine kostenlose Hosting-Lösung über Cloudflare wird angeboten, und der 'Lead Desk', ein kostenloses CRM auf dem Cloudflare-Konto des Unternehmens, verfolgt Leads, Ergebnisse und sendet Warnungen. Der Skill ist für eine Vielzahl von Unternehmen geeignet, von Zahnärzten über Anwaltskanzleien bis hin zu Softwarefirmen und gemeinnützigen Organisationen. Der gesamte Arbeitsablauf ist darauf ausgelegt, den nicht-technischen Benutzer Schritt für Schritt zu führen, indem Entscheidungen angeboten und komplexe Aufgaben automatisiert werden, während die Kontrolle und das Verständnis beim Benutzer bleiben.

Funktioniert mit✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/cartcodes/claude-website-builder/tree/HEAD/skills/website-builder

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

Dokumentation

Website-Baukasten

Dieser Skill funktioniert für jedes Unternehmen: einen Zahnarzt, eine Anwaltskanzlei, einen Bauunternehmer, einen Coach, ein Softwareunternehmen, eine Bäckerei, eine Kirche, einen Kursersteller. Gehen Sie niemals von einem Gewerbe, einem Ort oder einem Seitentyp aus. Alles Spezifische stammt aus dem Interview und aus der Recherche. Die Beispiele in diesen Dateien sind lediglich Beispiele, nichts weiter.

Die Person ist wahrscheinlich nicht technisch versiert. Sie beantwortet Fragen, klickt auf von Ihnen beschriebene Schaltflächen und genehmigt das, was Sie ihr zeigen. Sie erledigen alles andere.

Arbeitsweise wählen (einmal zu Beginn fragen)

Sofern die Anfrage der Person es nicht bereits offensichtlich macht, fragen Sie mit dem AskUserQuestion-Tool (in einfachen Worten, falls dieses Tool nicht verfügbar ist). Frage: "Wie möchten Sie arbeiten?" Zwei Optionen:

  1. Normales Interview. "Ich führe Sie Schritt für Schritt: was Ihre Seiten verschenken, Keyword-Recherche, eine vollständige Website mit Verträgen und Prüfungen, kostenlos auf Cloudflare veröffentlicht."
  2. Freiform. "Sie sagen mir, was Sie wollen, und ich baue es auf Ihre Art, auf jedem von Ihnen gewählten Setup oder Host. Ich verwende weiterhin gutes Copywriting, Conversion, SEO und KI-Suchgewohnheiten, aber ich werde nicht widersprechen oder Sie auf einen bestimmten Weg festlegen."

Merken Sie sich die Antwort in content/notes.md (oder der Notizendatei des Projekts), damit Sie nicht noch einmal fragen müssen. Die Person kann jederzeit wechseln, indem sie dies sagt.

Freiform-Modus

Folgen Sie references/any-stack.md. Kurz gesagt:

  • Ihre Worte entscheiden. Bauen Sie das, was sie verlangen, in der Reihenfolge, in der sie es verlangen, auf dem Stack, der Plattform und dem Host, den sie nennen oder bereits haben. Nennen sie keinen, wählen Sie etwas Sinnvolles für die Aufgabe aus und sagen Sie in einem Satz, was Sie gewählt haben. Führen Sie nicht das Interview durch, verlangen Sie keine Verträge oder Archive und diskutieren Sie nicht über Layout- oder Designentscheidungen.
  • Die Konventionen sind Ihre Standardeinstellungen, keine Regeln. Schreiben Sie Copy mit references/copywriting.md (einschließlich der KI-Erkennungsbereinigung), gestalten Sie Seiten mit references/conversion.md und wenden Sie references/technical-seo.md, references/geo-aeo.md und references/indexing.md an, wo immer sie passen. Wenn eine Anfrage offensichtlich gegen ihr eigenes Ziel arbeitet (zwei konkurrierende Schaltflächen, ein blockierter KI-Crawler, eine vor der Suche verborgene Seite), erwähnen Sie es einmal, in einem Satz, und machen Sie es dann auf ihre Art.
  • Der Lead Desk funktioniert auch im Freiform-Modus für jede Website auf jedem Host: Formulare senden an ihn und ein Skript-Tag wird in die Fußzeile der Website eingefügt (references/lead-desk.md).
  • Lead-Magnete funktionieren im Freiform-Modus genauso. "Erstellen Sie mir einen Lead-Magneten" geht direkt zu references/lead-magnets.md und scripts/build-magnet.mjs, für jede Website oder auch ohne.
  • Verwenden Sie jede andere Referenz, wenn sie hilfreich ist (Keyword-Recherche, Archive, Erfolgsseiten, Verträge), und nur, wenn danach gefragt wird oder sie offensichtlich dem dient, was verlangt wurde.
  • Prüfungen laufen trotzdem, wo sie können: weisen Sie scripts/check-site.mjs --freeform auf den Ordner mit dem erstellten HTML der Website oder holen Sie zuerst eine Live-Site mit scripts/fetch-site.mjs ab. Im Freiform-Modus erscheinen Layout-Konventionen als Vorschläge, nicht als Fehler.
  • Weiterhin immer: die unten stehenden Regeln "Wie man mit der Person arbeitet", keine erfundenen Fakten, kein Umgang mit Passwörtern oder Schlüsseln und Fragen vor allem, was Geld kostet, eine Domain ändert oder etwas löscht.

Alles ab "Den Job auswählen" ist das normale Interview. Verwenden Sie diese Abschnitte im Freiform-Modus nur als Referenz.

Das Ziel: die Aktion konvertieren

Jede Landingpage existiert, um eine einzige Aktion zu erreichen: die Buchung, das Formular, der Download, die Registrierung, der Kauf. Suche, KI-Antworten, soziale Beiträge und Anzeigen bringen nur Leute auf die Seite. Die Seite funktioniert, wenn sie handeln. Wenn eine Wahl dem Ranking hilft, aber der Conversion schadet, gewinnt die Conversion. Lesen Sie references/conversion.md, bevor Sie eine Seite entwerfen oder schreiben, und messen Sie jede Seite an ihrer Conversion-Rate.

Die Idee hinter der Website (in diesen Worten erklären)

Ihre Website ist eine Sammlung von Landingpages. Jede Landingpage ist für eine Art von Besucher gebaut, der eines will, und sie bittet ihn, eines zu tun: einen Anruf buchen, ein Angebot einholen, einen Leitfaden herunterladen, einen Platz reservieren, kaufen. Alles, was sie zur Entscheidung brauchen, ist auf dem ersten Bildschirm, und es gibt kein Menü, das sie ablenkt. Nachdem sie gehandelt haben, landen sie auf einer Erfolgsseite, die liefert, was sie verlangt haben, und einen nächsten Schritt anbietet.

Landingpages derselben Art werden in einem Archiv gruppiert, einer einfachen Seite, die sie alle auflistet. Ihre Archive hängen davon ab, was Sie verschenken oder verkaufen. Es könnten Ihre Einsatzorte, Ihre Dienstleistungen, die Menschen, denen Sie helfen, kostenlose Leitfäden, Veranstaltungen oder etwas ganz anderes sein. Die Fußzeile am Ende jeder Seite verlinkt auf jedes Archiv. Besucher, die sich umsehen möchten, können nach unten scrollen und alles finden, und Google und KI-Assistenten folgen diesen Fußzeilenlinks, um jede Seite zu entdecken.

Die Website wächst durch das Hinzufügen von Landingpages, niemals durch das Hinzufügen von Menüpunkten. Jede Seite folgt einem Vertrag (einer Checkliste mit erforderlichen Fakten und Regeln), sodass neue Seiten schnell hinzugefügt werden können und immer dem Standard entsprechen.

Wie man mit der Person arbeitet (immer)

  • Selbstbedienung: Denken Sie selbst und bieten Sie kurze Menüs mit konkreten Optionen zur Auswahl an (AskUserQuestion), wobei Ihre Empfehlung an erster Stelle steht. Stellen Sie offene Fragen nur zu Fakten, die nur sie wissen.
  • Ein Schritt nach dem anderen. In einfachen Worten. Warten Sie auf "erledigt", bevor Sie zum nächsten Schritt übergehen.
  • Wenn sie auf etwas klicken müssen, sagen Sie genau, was auf der Schaltfläche steht und wo sie sich auf dem Bildschirm befindet.
  • Gehen Sie niemals mit Passwörtern, API-Schlüsseln oder Tokens um. Fragen Sie niemals danach im Chat, und lesen Sie sie niemals aus Dateien oder vom Computer aus. Dienste, die eine Anmeldung erfordern, werden von der Person selbst verbunden: Cloudflare über seinen Browser-Login, andere Tools über ihre eigenen Claude-Connectoren oder CSV-Exporte. Lead Desk-Passwörter und Webhook-Links werden von der Person auf ihren eigenen Lead Desk-Seiten eingegeben, niemals im Chat.
  • Fragen Sie vor allem, was Geld kostet, eine Domain ändert oder etwas löscht.
  • Sagen Sie nach jedem Schritt in einem Satz, was Sie getan haben. Kein Fachjargon.
  • Zeigen, nicht beschreiben: Starten Sie die lokale Vorschau und geben Sie ihnen den Link, wann immer es etwas zu sehen gibt.
  • Erfinden Sie keine Fakten: keine erfundenen Zahlen, Bewertungen, Orte, Qualifikationen oder Suchvolumina. Wenn eine Tatsache fehlt, fragen Sie.

Den Job auswählen (Normales Interview)

  1. Eine neue Website erstellen. Jede Phase, der Reihe nach.
  2. Einen Lead-Magneten erstellen (und, falls gewünscht, dessen Landingpage, Erfolgsseite, Beiträge, Anzeigen und E-Mails). Befolgen Sie references/lead-magnets.md.
  3. Eine Landingpage hinzufügen jeder Art, in einem beliebigen bestehenden Archiv. Befolgen Sie "Seite hinzufügen" in references/contracts.md.
  4. Ein neues Archiv hinzufügen (eine neue Art von Landingpage). Befolgen Sie "Archiv hinzufügen" in references/contracts.md.
  5. Keywords und Orte finden und neue Seiten planen. Phase 4, dann den Seitenplan zurückgeben.
  6. Eine bestehende Website prüfen, reparieren und indexieren. Phasen 8, 9 und 10.
  7. Den Lead Desk einrichten, das eigene Lead-Postfach des Unternehmens mit Admin-Logins, Ergebnissen und Warnungen, auf seinem Cloudflare-Konto. Befolgen Sie references/lead-desk.md. Funktioniert mit jeder Website.
  8. Eine Routine einrichten, die Seiten nach einem Zeitplan hinzufügt. Siehe "Routinen" in references/contracts.md.

Phase 1: Was soll ich für Sie erstellen? (immer zuerst im Interview)

Befolgen Sie references/offers-and-archives.md. Bleiben Sie bei der Selbstbedienung: Sie denken nach und bieten Menüs zur Auswahl an.

  • Fragen Sie, was sie verkaufen, dann "Welche Lead-Magnete möchten Sie, dass ich für Sie erstelle?" mit 3-4 für ihr Unternehmen ausgearbeiteten Ideen (references/lead-magnets.md), dann welche Seiten erstellt werden sollen.
  • Erstellen Sie das Angebotsinventar aus ihren Auswahlen: alles, was die Website anbieten oder verschenken wird, und die eine Aktion, um die jeweils gebeten wird.
  • Lernen Sie das Geschäftsmodell kennen, woher die Kunden kommen und den Social-Media-Plan. Jeder Social-Media-Beitrag, der etwas verspricht, braucht eine Landingpage, die es liefert.
  • Entscheiden Sie, ob Orte überhaupt eine Rolle spielen. Viele Unternehmen haben keine Standortseiten.
  • Wählen Sie die Archive aus den Vorlagen aus. Benennen Sie sie in den eigenen Worten des Unternehmens und holen Sie die Zustimmung der Person ein.

Phase 2: Fakten sammeln

Lesen Sie zuerst about.md und voice.md, falls vorhanden, und überspringen Sie alles, was sie bereits beantworten. Fragen Sie dann, eine Frage nach der anderen, nur nach dem, was die gewählten Archive benötigen:

  • Nachweise: Jahre im Geschäft, bediente Zahlen, Qualifikationen oder Lizenzen, Garantien, Auszeichnungen, Bewertung und Anzahl der Bewertungen sowie 3+ Testimonials mit Name, Ort (falls relevant) und einem konkreten Ergebnis.
  • Preise oder Spannen, die sie gerne veröffentlichen möchten, und wie lange Dinge dauern.
  • Für jedes Angebot die spezifischen Fakten, die seine Seite benötigt (die Felder des Vertrags sagen Ihnen, welche).
  • Wohin Leads gehen. Bieten Sie ein Menü an: ihren eigenen Lead Desk (empfohlen: kostenlos, auf ihrem Cloudflare-Konto, zeigt, woher jeder Lead kam und welche zu Kunden wurden; references/lead-desk.md), das CRM oder E-Mail-Tool, das sie bereits verwenden (der Lead Desk kann Leads an es weiterleiten), oder ein Buchungstool für Anrufe.
  • Marke: Logo, Farben, echte Fotos ihrer Arbeit und ihrer Mitarbeiter.
  • Name, Adresse (falls öffentlich) und Telefonnummer genau wie in ihrem Google Business-Profil, plus Links zu jedem offiziellen Profil.
  • Ob sie eine Domain besitzen und wo sie sie gekauft haben.

Speichern Sie alles in content/business.yaml, content/offers.md und content/notes.md, damit nichts zweimal gefragt wird.

Phase 3: Cloudflare einrichten und verbinden

Befolgen Sie references/cloudflare-setup.md: Node (falls fehlend), ein kostenloses Cloudflare-Konto, Wrangler, installiert in der Website in einer festen Version, npm run cf:login, dann npm run cf:whoami zur Bestätigung.

Phase 4: Keyword-Recherche, Ortsfindung und Seitenplan

Befolgen Sie references/keyword-research.md:

  • Erstellen Sie Kandidaten aus dem Angebotsinventar, den eigenen Worten der Kunden und (nur wenn Orte eine Rolle spielen) den entdeckten Orten im richtigen Detailgrad.
  • Holen Sie echte Nachfrage aus einer benannten Quelle und überprüfen Sie die echte Konkurrenz in den tatsächlichen Suchergebnissen.
  • Gruppieren Sie Keywords, die sich Suchergebnisse teilen, in eine Seite und führen Sie jede Seite durch das Gate.
  • Speichern Sie research/keywords.csv, research/places.csv (falls Orte eine Rolle spielen) und research/page-plan.md. Zeigen Sie der Person den Plan in einfachen Worten und holen Sie ihre Zustimmung ein.

Phase 5: Verträge einrichten

Befolgen Sie references/contracts.md:

  • Erstellen Sie contracts/archives/<id>.json für jedes gewählte Archiv aus assets/contracts/archive-templates/, mit der eigenen ID, Bezeichnung, Pfad und Ziel des Unternehmens.
  • Kopieren Sie die Erfolgsverträge, die die Website benötigt, aus assets/contracts/success/.
  • Kopieren Sie scripts/contracts.mjs, scripts/new-page.mjs, scripts/check-site.mjs und scripts/build-magnet.mjs in den scripts/-Ordner der Website.
  • Erstellen Sie mit node scripts/new-page.mjs ein Grundgerüst für jede geplante Seite.

Phase 6: Website erstellen

Befolgen Sie references/site-structure.md. Der Stack ist Astro + Tailwind mit statischer Ausgabe. Inhaltsammlungen werden aus den Verträgen generiert, sodass der Build jede Seite ablehnt, die ihren Vertrag bricht.

Die wichtigsten Regeln:

  • Ein Conversion-Ziel pro Landingpage. Jede Schaltfläche und jedes Formular führen zur gleichen Aktion, gekennzeichnet mit data-cta="<ziel>" und data-success="/thanks/<ziel>/". Ein zweites Angebot bekommt eine eigene Seite.
  • Alles Wichtige auf dem ersten Bildschirm: Logo, eine Überschrift, die das Problem nennt und das Haupt-Keyword der Seite enthält, höchstens zwei Zeilen Untertext, die eine Conversion und Vertrauen (Abzeichen plus 2-3 kurze Testimonials). Die Seite darf scrollen, aber niemand sollte es müssen.
  • Kein oberes Navigationsmenü. Der Header enthält nur das Logo und den Call-to-Action.
  • Archive listen jede Landingpage ihrer Art auf. Die Fußzeile auf jeder Seite verlinkt auf jedes Archiv.
  • Jedes Archiv hat eine Rolle. search-Archive sind darauf ausgelegt, zu ranken und von KI zitiert zu werden (Keyword-Gate, volles SEO/AEO/GEO). resource-Archive enthalten Dinge, auf die von Inhalten, Social-Media-Beiträgen und E-Mails verlinkt wird; ihre Seiten konzentrieren sich darauf, genau das zu zeigen, was der Besucher bekommt (eine Vorschau ist erforderlich) und überspringen das Keyword-Gate. both bedeutet eine Ressource, die auch das Gate passiert hat.
  • Erfolgsseiten folgen ihrem Erfolgsvertrag: liefern, was versprochen wurde, bieten einen nächsten Schritt, werden nie indexiert.

Phase 6b: Lead-Magnete erstellen

Befolgen Sie für jeden bestellten Lead-Magneten references/lead-magnets.md: schreiben Sie lead-magnets/<slug>/magnet.md, führen Sie node scripts/build-magnet.mjs lead-magnets/<slug> --site public aus, zeigen Sie ihnen das PDF und das Cover und verwenden Sie das Cover als Vorschau der Landingpage. Schreiben Sie promo.md (Beiträge, Comment-to-DM-Flow, Anzeigen und Follow-up-E-Mails), wenn sie es wünschen.

Phase 7: Copy schreiben

Befolgen Sie references/copywriting.md und references/conversion.md: problembewusst, lösungsorientiert, aufgebaut um das Keyword der Seite, kurze einfache Sätze, Fakten statt Adjektive. Führen Sie vor dem Zeigen jeder Seite die KI-Erkennungsbereinigung durch.

Phase 8: Prüfungen

  • references/geo-aeo.md: die vollständige KI-Such-Checkliste. Wenden Sie alles an.
  • references/technical-seo.md: Metadaten, strukturierte Daten, Sitemap, robots.txt, llms.txt, Geschwindigkeit.
  • Fügen Sie "check": "node scripts/contracts.mjs check && astro build && node scripts/check-site.mjs dist" zu package.json hinzu und führen Sie nach jeder Änderung npm run check aus. Veröffentlichen Sie niemals mit einer FEHLER-Zeile. Beheben Sie Warnungen, es sei denn, es gibt einen genannten Grund, dies nicht zu tun, und teilen Sie der Person mit, welche Sie hinterlassen haben und warum.

Phase 8b: Lead Desk

Wenn sie sich für den Lead Desk entschieden haben, richten Sie ihn vor der Veröffentlichung mit references/lead-desk.md ein: Datenbank, Adresse (ihre Subdomain, wenn die Domain bei Cloudflare ist), Einladung des Eigentümers, Formulare, die mit _success auf die Erfolgsseite jeder Seite gesetzt daran senden, das Hilfsskript auf jeder Seite und mindestens eine Warnung. Senden Sie einen Test-Lead aus der lokalen Vorschau und zeigen Sie sein Eintreffen.

Phase 9: Veröffentlichen

  1. Zeigen Sie die lokale Vorschau und warten Sie auf ihre Zustimmung.
  2. npm run deploy (es führt zuerst die Prüfungen durch; beim ersten Mal erstellen Sie das Projekt wie im Setup-Guide).
  3. Geben Sie ihnen den Live-Link, öffnen Sie dann jedes Archiv, eine Landingpage mit ihrer Erfolgsseite, /sitemap-index.xml und /llms.txt.
  4. Bieten Sie an, ihre eigene Domain zu verbinden (Setup-Guide, Teil 5). Die Indexierung benötigt die endgültige Domain, also tun Sie dies vor Phase 10, wenn sie eine möchten.
  5. Führen Sie nach der Veröffentlichung den Live-Geschwindigkeitscheck in references/technical-seo.md durch.

Phase 10: Indexieren lassen

Befolgen Sie references/indexing.md: Pre-Flight-Checks, Google Search Console, Bing Webmaster Tools, IndexNow, Brancheneinträge und die .pages.dev-Kopie aus der Suche heraushalten. Überprüfen Sie den Fortschritt mit der Person an den Tagen 3, 7 und 14.

…[für die Übersetzung gekürzt]

Verwandte Skills