Eine komplette Website mit Claude bauen

curl -fsSL https://setup.mariusmueller.media | bash

irm https://setup.mariusmueller.media/win | iex

Bau mir meine Website nach einer Vorlage. Aber bevor du
irgendetwas anlegst: interviewe mich.

Referenz-Website: {ADRESSE-DER-WEBSITE}

Lade die Referenz zuerst herunter: Auf meinem Rechner liegt unser
Download-Werkzeug — die Datei websiteloader.py im Ordner mm-werkzeuge
in meinem Benutzerordner. Tiefe 2 reicht. Leg den Download in meinem
Projektordner unter referenz/ ab, schreib eine kurze
referenz/LIESMICH.md („Vorlage — wird nicht verändert, geht nicht mit
online") und trag referenz/ in die .gitignore ein, falls mein Projekt
ein Git-Repo ist.

Dann stell mir die Fragen NACHEINANDER, eine nach der anderen, und
warte jeweils auf meine Antwort. Frag nach, wenn eine Antwort zu vage
ist.

ZUR REFERENZ
- Ist das meine eigene Website, die ich mitnehmen oder verbessern
  will — oder eine fremde Seite, die mir einfach gefällt?
- Was genau gefällt mir daran: Aufbau, Farben, Sprache, Bilder?
- Wie viel soll übernommen werden — nur der Aufbau, auch Texte, auch
  Bilder? (Bei einer fremden Seite gilt: Texte und Bilder sind nur
  Platzhalter und werden später ersetzt.)

MEIN BETRIEB
- Wie heißt meine Firma, was mache ich genau, seit wann?
- Wo sitze ich und in welchem Umkreis arbeite ich?
- Was unterscheidet mich von den anderen in meiner Gegend?

MEINE KUNDEN
- Wer kommt zu mir: Privatleute, Firmen, beides?
- Was ist die typische Anfrage, mit der jemand zu mir kommt?
- Was soll jemand tun, der auf meiner Seite landet?

MEINE LEISTUNGEN
- Welche Leistungen biete ich an, und welche bringen das meiste Geld?
- Gibt es Leistungen, die ich NICHT mehr machen will?

AUFBAU
- Soll meine Seite genauso aufgebaut sein wie die Referenz — oder
  gibt es Abschnitte, die raus sollen oder dazukommen?

Wenn ich alles beantwortet habe:
1. Fass alles als kurzen Steckbrief zusammen — auch, wie viel von der
   Referenz übernommen wird — und lass mich bestätigen, bevor du
   weitermachst.
2. Leg dann eine neue, eigenständige Next.js-App an: React,
   TypeScript, App Router, Tailwind CSS. Der Ordner referenz/ bleibt
   dabei unverändert liegen.
3. Bau die erste Fassung nach der Referenz: gleicher Aufbau,
   ähnlicher Stil, ähnliche Sprache — aber mit meiner Firma drin.
   Nutz dabei die Skills „ui-ux-pro-max" und „frontend-design" als
   Maßstab: Die Referenz gibt die Richtung vor, die Skills die
   Handwerksregeln. Wo die Vorlage gegen sie verstößt — zu wenig
   Kontrast, zu enge Zeilen, unruhige Abstände — machst du es richtig
   statt originalgetreu und sagst mir hinterher, was du abweichend
   gelöst hast.
   Bilder aus referenz/ darfst du als Platzhalter in die Assets
   übernehmen, die tauschen wir später aus. Texte je nachdem, was ich
   oben geantwortet habe.
4. Sag mir in zwei Sätzen, was du gebaut hast und wie ich die Seite
   auf meinem Rechner anschaue.

Frag mich noch nichts zu Technik, Funktionen, Logo, SEO oder
rechtlichen Themen wie Impressum und Datenschutz — das machen wir
alles später, eins nach dem anderen. Erfinde nichts über meine Firma
dazu. Was ich nicht beantworte, lässt du weg oder fragst nochmal nach.

Bau mir meine Website. Aber bevor du irgendetwas anlegst:
interviewe mich.

Stell mir die Fragen NACHEINANDER, eine nach der anderen, und warte
jeweils auf meine Antwort. Frag nach, wenn eine Antwort zu vage ist.

MEIN BETRIEB
- Wie heißt meine Firma, was mache ich genau, seit wann?
- Wo sitze ich und in welchem Umkreis arbeite ich?
- Was unterscheidet mich von den anderen in meiner Gegend?

MEINE KUNDEN
- Wer kommt zu mir: Privatleute, Firmen, beides?
- Was ist die typische Anfrage, mit der jemand zu mir kommt?
- Was soll jemand tun, der auf meiner Seite landet?

MEINE LEISTUNGEN
- Welche Leistungen biete ich an, und welche bringen das meiste Geld?
- Gibt es Leistungen, die ich NICHT mehr machen will?
- Feste Preise, Stundensatz oder Angebot auf Anfrage?

UMFANG DER SEITE
- Eine Seite zum Runterscrollen oder mehrere Unterseiten?
- Wenn mehrere: welche sollen es sein?
- Welche Inhalte müssen drauf — Leistungen, Referenzen, Team,
  Öffnungszeiten, Anfahrt, Preise, Bewertungen?

Wenn ich alles beantwortet habe:
1. Fass alles als kurzen Steckbrief zusammen und lass mich bestätigen,
   bevor du weitermachst.
2. Leg dann eine neue Next.js-App an: React, TypeScript, App Router,
   Tailwind CSS.
3. Gestalte sie mit den Skills „ui-ux-pro-max" und „frontend-design".
   Such dir daraus Schriftpaarung, Farbpalette und Layout-Stil, die zu
   meiner Branche und meinen Kunden passen — und sag mir in einem Satz,
   warum du dich dafür entschieden hast.
4. Sag mir in zwei Sätzen, was du gebaut hast und wie ich die Seite auf
   meinem Rechner anschaue.

Frag mich noch nichts zu Technik, Funktionen, Bildern, Logo, SEO oder
rechtlichen Themen wie Impressum und Datenschutz — das machen wir alles
später, eins nach dem anderen. Erfinde nichts über meine Firma dazu.
Was ich nicht beantworte, lässt du weg oder fragst nochmal nach.

Bau meine eigenen Fotos in die Website ein.

Mein Bilder-Ordner: {PFAD-ZUM-ORDNER}

Den Pfad bekommst du so: Ordner im Finder beziehungsweise Explorer
suchen und einfach ins Chatfenster ziehen.

SCHRITT 1 — Schau dir den Ordner an
Geh alle Bilder durch und sag mir, was du gefunden hast: wie viele
Bilder, wie sie sortiert sind und was jeweils drauf zu sehen ist.
Wenn ein Bild unklar ist, frag mich, statt zu raten.

SCHRITT 2 — Einsortieren
Kopiere die Bilder in mein Projekt und benenn sie sinnvoll: kleine
Buchstaben, Bindestriche statt Leerzeichen, sprechender Name statt
IMG_4711. Die Originale im Ordner lässt du unangetastet.

SCHRITT 3 — Einbauen
Entscheide selbst, welches Bild wohin passt, und sag mir zu jedem
kurz, warum. Dabei gilt:
- Jedes Bild bekommt einen Alt-Text, der beschreibt, was wirklich
  drauf ist — kein Stichwort-Salat.
- Kein Bild wird verzerrt. Wenn ein Format nicht passt, schneidest du
  mittig zu, statt zu quetschen.
- Gleichartige Bilder in einer Reihe bekommen dasselbe Seitenverhältnis,
  damit die Kanten fluchten.
- Vorher-Nachher gehört nebeneinander und gleich groß, sonst kann man
  es nicht vergleichen.
- Liegt ein Video im Ordner, frag mich, wo es hin soll. Als
  Hintergrundvideo läuft es stumm, startet von selbst und wiederholt
  sich — und es bekommt ein Standbild als Ersatz, falls es auf dem
  Handy zu schwer ist.
- Nutz die eingebaute Bildkomponente von Next.js, damit die Bilder
  automatisch verkleinert und in modernen Formaten ausgeliefert
  werden. Das Bild ganz oben lädt sofort, alle anderen erst beim
  Runterscrollen.
- Für jedes Bild wird die Größe von vornherein reserviert, damit beim
  Laden nichts springt.

SCHRITT 4 — Logo
Ist mein Logo noch gar nicht auf der Seite, sag es mir — dann schick
ich es dir in den Chat, und du setzt es in die Navigationsleiste und
in die Fußzeile.

Steht es schon drin, prüf beide Stellen: Hebt es sich vom Hintergrund
ab? Wenn es irgendwo farblich untergeht, schlag mir vor, es an dieser
Stelle einfarbig zu setzen: nur die Silhouette in Weiß oder in
Schwarz, je nachdem was besser steht. Das kann auch nur eine Stelle
betreffen — zum Beispiel farbig oben und weiß unten im dunklen
Fußbereich.

Wichtig: Umfärben geht nur, wenn das Logo als PNG ohne Hintergrund
vorliegt. Hat meins einen festen Hintergrund, sag mir das — dann
besorge ich eine freigestellte Version.

Sag mir, welche Stelle du meinst, wie es aktuell wirkt und welche
Variante du empfiehlst. Warte auf mein Ja, bevor du das Logo
anfasst. Das farbige Original bleibt auf jeden Fall erhalten.

SCHRITT 5 — Danach prüfen
Sieh dir die fertige Seite auf Handy, Tablet und Rechner an. Achte
darauf, dass kein Bild abgeschnitten wird, an der falschen Stelle
zugeschnitten ist (Köpfe!), unscharf wirkt oder das Layout sprengt.
Sag mir, was du geprüft hast.

SCHRITT 6 — Ehrlich sein
Sag mir am Ende:
- Für welche Stellen auf der Website habe ich noch KEIN passendes
  Bild? Beschreib mir, was ich fotografieren soll.
- Welche Bilder sind zu klein oder zu schlecht aufgelöst für die
  Stelle, an der sie stehen?
- Welche Bilder hast du übrig gelassen und warum?

Setz kein Platzhalterbild und kein Bild aus dem Internet ein. Wenn
für eine Stelle nichts Passendes da ist, lass sie leer und sag es
mir — leere Stellen füllen wir gleich danach mit KI-Bildern.

Geh meine Website durch und schau, wo Bilder fehlen oder wo ein
Platzhalter steht.

Sortier das Ergebnis in zwei Listen:

ECHTES FOTO NÖTIG
Alles, wo man meinen Betrieb, meine Arbeit, meine Leute oder meine
Ergebnisse sieht. Dafür wird NICHTS erzeugt. Sag mir stattdessen
genau, was ich fotografieren soll: welches Motiv, welche
Tageszeit, hoch oder quer.

KI-BILD SINNVOLL
Alles, was nur Stimmung, Hintergrund oder Deko ist und niemanden
täuscht — Hintergrundflächen, abstrakte Muster, freigestellte
Symbolbilder, Produkt-Kategorien ohne eigenes Foto.

Für die zweite Liste: Nutz Higgsfield über die eingebaute
Verbindung und die Skills „higgsfield-generate" und
„higgsfield-product-photoshoot". Wenn ein Bild realistisch wirken
muss — Räume, Produkte, Stimmungen — nimm zusätzlich den Skill
„nanorealism", damit es nicht nach KI aussieht. Kein Schriftzug,
kein Wasserzeichen, kein KI-Label im Bild. Frag mich vorher, welche
Bildsprache passen soll, und richte dich nach den Farben und der
Stimmung, die meine Seite schon hat.

Erzeug pro Stelle zwei Varianten zur Auswahl. Zeig sie mir, ich
entscheide. Erst danach baust du sie ein — mit Alt-Text und im
richtigen Seitenverhältnis für die Stelle: Hintergründe im
Querformat, keine Hochkant-Fotos als Desktop-Hintergrund.

Die Gratis-Version von Higgsfield braucht manchmal länger. Wenn du
auf ein Bild wartest, sag mir das, statt still zu hängen — ich kann
in der Higgsfield-App nachsehen, ob es noch erstellt wird.

Regeln:
- Keine erfundenen Menschen, die wie meine Mitarbeiter oder Kunden
  aussehen sollen. Kein Bild, das eine Arbeit zeigt, die ich so nie
  gemacht habe.
- Keine erfundenen Räume, Baustellen oder Ergebnisse, die als meine
  durchgehen könnten.
- Wenn du unsicher bist, ob etwas in Liste eins oder zwei gehört,
  frag mich.

npx skills add higgsfield-ai/skills --skill higgsfield-generate --global --yes
npx skills add higgsfield-ai/skills --skill higgsfield-product-photoshoot --global --yes
npx skills add mariusmariusmariusmariusmarius/nanorealism --global --yes

Bau mir ein Logo für meine Website.

SCHRITT 1 — Erst anschauen, dann fragen
Sieh dir meine Website an: Branche, Leistungen, Tonfall. Lies aus
dem Code die Schriften und die Farbwerte aus, die schon im Einsatz
sind. Fass in fünf Zeilen zusammen, was du siehst — dann weiß ich,
ob wir vom Gleichen reden.

SCHRITT 2 — Frag mich, eine Frage nach der anderen
- Wie soll der Name im Logo stehen: voll ausgeschrieben, abgekürzt,
  oder nur ein Zeichen ohne Text?
- Wortmarke (nur Schrift), Bildmarke (nur Zeichen) oder beides
  nebeneinander?
- Gibt es ein Motiv, das zu mir gehört — Werkzeug, Tier, Form,
  etwas aus dem Ortsnamen?
- Welche Richtung: schlicht und geometrisch, handgezeichnet,
  klassisch mit Serifen, technisch, verspielt?
- Farben von der Website übernehmen oder etwas Eigenes?
- Gibt es ein altes Logo? Wenn ja, wo liegt es — was soll bleiben,
  was weg?
Warte jeweils auf meine Antwort. Erfinde nichts dazu.

SCHRITT 3 — Erst Vorschläge, dann erzeugen
Beurteile die Ideen mit dem Skill „ui-ux-pro-max": Passt die Form
zur Branche, funktioniert sie noch bei 24 Pixel Höhe in der
Kopfzeile, trägt sie in Schwarzweiß? Beschreib mir drei Richtungen
in Worten und lass mich eine auswählen. Erzeug erst danach.

SCHRITT 4 — Erzeugen
Nutz Higgsfield über die eingebaute Verbindung und den Skill
„higgsfield-generate". Nimm GPT Image 2 — das Modell setzt Schrift
und klare Kanten am saubersten um. Foto-Modelle taugen für Logos
nicht.

Zeichne das Logo NICHT selbst: kein SVG, kein HTML, kein Canvas,
keine Zeichensätze, die du zu einer Marke zusammensetzt. Das Bild
kommt aus Higgsfield, sonst gar nicht. Wenn Higgsfield nicht
erreichbar ist oder das Guthaben leer ist, sag mir das und warte —
bau mir keinen Ersatz.

SO MUSS DAS LOGO GEBAUT SEIN — halte dich daran, sonst kommt
das typische KI-Logo heraus, das man sofort erkennt:
- Erzeuge NUR das Zeichen, ohne Text. Bildmodelle verunstalten
  Buchstaben. Den Firmennamen setzt du danach als echte Schrift
  daneben, mit der Schrift, die meine Website schon benutzt.
- Eine einzige klare Grundform. Kein Sammelsurium aus drei Ideen.
- Flach: keine Farbverläufe, kein 3D, keine Schlagschatten, kein
  Glanz, keine Spiegelung, kein Hintergrundkreis „damit es voller
  wirkt".
- Höchstens zwei Farben aus meiner Palette, plus Schwarz oder Weiß.
- Dicke, gleichmäßig starke Linien. Dünne Striche verschwinden,
  sobald das Logo klein wird.
- Innen viel Luft, keine feinen Verzierungen. Was bei 24 Pixel
  Höhe zu Matsch wird, ist kein Logo.
- Keine abgegriffenen Motive: Zahnrad, Glühbirne, Handschlag,
  Weltkugel, Schwungfeder, aufsteigender Balken.

Prüf jeden Entwurf, bevor du ihn mir zeigst: in Graustufen und auf
24 Pixel verkleinert. Was dabei zerfällt, zeigst du mir gar nicht
erst, sondern erzeugst es neu.

Das muss stimmen, sonst ist die Datei unbrauchbar:
- PNG mit echt transparentem Hintergrund. Kein Weiß, kein
  Karomuster, keine Fläche unter dem Zeichen.
- KEINE Vektordatei, kein SVG. PNG ist das Ziel.
- Mindestens 2000 Pixel an der langen Kante, damit es auch groß
  scharf bleibt.
- Nur das Logo im Bild: kein Mockup, keine Visitenkarte, keine
  Präsentationsfläche, kein zweiter Entwurf daneben.
- Zur Transparenz: GPT Image 2 kann durchsichtige Hintergründe
  von Haus aus. Schau zuerst nach, ob das Modell dafür einen
  eigenen Schalter anbietet, und setz ihn — dann stimmt es sofort.
  Gibt es keinen, verlang die Transparenz im Bild-Prompt und
  entferne den Hintergrund danach mit Higgsfields
  Hintergrund-entfernen-Funktion.
- Zeig mir das Ergebnis erst, wenn der Hintergrund wirklich
  durchsichtig ist — nicht weiß, nicht kariert.

Erzeug zwei Varianten zur Auswahl. Ich entscheide, dann geht es
weiter.

SCHRITT 5 — Einbauen
Leg die Datei als public/logo.png ab und setz sie in die Kopfzeile,
verlinkt auf die Startseite, mit Alt-Text (Firmenname). Prüf den
Kontrast auf hellem UND dunklem Grund. Geht das Logo auf dunklem
Grund unter, erzeug eine zweite Fassung als public/logo-hell.png
und schalt zwischen beiden um.

Die Datei bleibt liegen — aus ihr bauen wir später das Favicon.

Sag mir zum Schluss in zwei Sätzen, was du gebaut hast und wo ich
es auf der Seite sehe.

npx skills add agricidaniel/claude-seo --global --yes
npx skills add mariusmariusmariusmariusmarius/akademie-seo-daten --global --yes

Mach einen vollständigen SEO-Audit für meine Website.

Meine Domain: {DEINE-DOMAIN}
Mein Einzugsgebiet: {EINZUGSGEBIET}

Branche, Leistungen und Standort stehen auf meiner Website — zieh dir
das selbst aus dem Projekt, das musst du mich nicht fragen. Das
Einzugsgebiet oben ist das Einzige, was nirgends steht.

MEIN ZUGANG ZU LIVE-SEO-DATEN
Suchvolumen, Rankings und Konkurrenzdaten stehen nicht auf meiner
Website — die holst du über die Kursplattform. Nutz dafür den Skill
„akademie-seo-daten": Der kennt alle Bereiche, die geprüften Abfragen
und die Kosten. Zur Sicherheit hier das Wichtigste:

Adresse: {PLATTFORM-URL}/api/bewertungen
Anmeldung: Kopfzeile "Authorization: Bearer {DEIN-API-KEY}"
POST mit { "pfad": "...", "daten": [...] } — dahinter steckt
DataForSEO, Doku: https://docs.dataforseo.com

DIESE ABFRAGEN SIND GEPRÜFT — nimm sie so, such nichts anderes:

  Seite prüfen (Technik, Meta, Score)        ~0,0002 USD
    pfad: "on_page/instant_pages"
    daten: [{"url":"https://meine-seite.de/unterseite"}]

  Meine Rankings                             ~0,013 USD
    pfad: "dataforseo_labs/google/ranked_keywords/live"
    daten: [{"target":"meine-domain.de","location_code":2276,
             "language_code":"de","limit":50}]

  Keyword-Ideen mit Suchvolumen              ~0,013 USD
    pfad: "dataforseo_labs/google/keyword_suggestions/live"
    daten: [{"keyword":"heizung reparatur","location_code":2276,
             "language_code":"de","limit":50}]

  Wer ist meine Konkurrenz                   ~0,012 USD
    pfad: "dataforseo_labs/google/competitors_domain/live"
    daten: [{"target":"meine-domain.de","location_code":2276,
             "language_code":"de","limit":10}]

location_code 2276 ist Deutschland, language_code "de".
Die Antwort steckt in tasks[0].result[0].items — status_code 20000
heißt in Ordnung.

GEH SPARSAM DAMIT UM
Seiten prüfen kostet fast nichts, da darfst du großzügig sein. Eine
Ranking- oder Keyword-Abfrage kostet rund achtzigmal so viel wie eine
Seite. Also: nur nötige Abfragen, mehrere parallel starten statt
nacheinander zu warten, nie dieselbe zweimal.

Finger weg von "keywords_data/google_ads/search_volume" — das kostet
0,09 USD pro Abfrage, also das Siebenfache. Suchvolumen bekommst du
günstiger über keyword_suggestions oben.

Ein GET auf dieselbe Adresse zeigt meinen Verbrauch und mein
Monatslimit. Schau am Ende nach und sag mir, was der Audit gekostet
hat.

Nutz die installierten SEO-Skills. Der Rundum-Audit ist „seo-audit" —
der verteilt selbst an Spezialisten. Zieh je nach Befund dazu:
„seo-technical", „seo-local", „seo-maps", „seo-images", „seo-schema",
„seo-sitemap", „seo-content", „seo-backlinks", „seo-geo" für die
KI-Suche und „seo-page" für einzelne Seiten.

Für die Auswertung und die Empfehlungen am Ende außerdem:
- „seo-plan" — um die Funde zu einem Fahrplan zu ordnen
- „seo-cluster" — welche Themen zusammengehören und welche Seiten
  sich Suchbegriffe streitig machen
- „seo-competitor-pages" — welche Seiten die Konkurrenz hat, die mir
  fehlen
- „seo-content-brief" — für die wichtigsten fehlenden Seiten gleich
  eine Gliederung vorschlagen (nur vorschlagen, nicht bauen)
- „seo-hreflang" — nur falls meine Website mehrsprachig ist

Die übrigen Skills aus dem Paket nimmst du nur, wenn ihr Thema
wirklich auftaucht.
Arbeite gründlich — ich will lieber zehn Minuten warten als eine
oberflächliche Liste.

WAS ICH GEPRÜFT HABEN WILL

Technik
- Ist die Seite für Google auffindbar und indexierbar? robots.txt,
  Sitemap, Weiterleitungen, Statuscodes.
- Ladezeit und Core Web Vitals, getrennt für Handy und Rechner.
- HTTPS, saubere Adressen, Handy-Tauglichkeit.

Auffindbarkeit auf jeder Seite
- Meta-Titel und Beschreibung: vorhanden, richtige Länge, nicht
  doppelt, mit dem Ort drin?
- Überschriftenstruktur: genau eine H1, sinnvolle Reihenfolge.
- Favicon vorhanden und in allen Größen?
- Open-Graph-Bild und -Text — was sieht man, wenn jemand meine Seite
  bei WhatsApp oder Facebook teilt? Zeig mir, wie die Vorschau
  aussieht.

Bilder
- Alt-Texte, Dateigrößen, moderne Formate, Bildmaße.
- Sprechende Dateinamen statt IMG_4711.

Strukturierte Daten
- Sind meine Firmendaten für Google maschinenlesbar hinterlegt
  (LocalBusiness): Name, Adresse, Telefon, Öffnungszeiten,
  Leistungen, Bewertungen?

Lokal
- Wie stehe ich für mein Einzugsgebiet da? Google-Unternehmensprofil,
  Einheitlichkeit von Name, Adresse und Telefonnummer, Bewertungen.
- Welche Ortsbezüge fehlen auf der Website?

KI-Suche
- Werde ich von KI-Suchen wie ChatGPT oder Perplexity gefunden und
  zitiert? Was fehlt dafür — llms.txt, klare Fakten, Quellenlage?

Keywords und Konkurrenz
- Wonach suchen meine Kunden wirklich? Gib mir die wichtigsten
  Suchbegriffe mit Suchvolumen und Schwierigkeit.
- Wer steht bei diesen Begriffen vor mir, und warum?
- Welche Seiten fehlen mir, die meine Konkurrenz hat?

SO WILL ICH DAS ERGEBNIS
1. Eine Gesamtnote mit einem Satz Begründung.
2. Eine Liste aller Funde, sortiert nach Wirkung: was bringt am
   meisten, was ist Kosmetik. Pro Punkt: was ist das Problem, warum
   ist es eins, was wäre zu tun, und wie aufwendig ist es.
3. Die fünf Dinge, die ich als Erstes angehen sollte.

Ändere noch NICHTS an meiner Website. Ich will erst die Liste sehen
und selbst entscheiden. Erfinde keine Zahlen — wenn du etwas nicht
messen kannst, schreib das hin.

Setz jetzt bitte alle Punkte aus dem Audit-Bericht (dem Artifakt)
um, einen nach dem anderen. Google My Business lässt du komplett
aus — darum kümmere ich mich später separat.

Nimm dir Zeit und arbeite gründlich; es dürfen auch neue Seiten
entstehen, wenn der Bericht sie empfiehlt. Zeig mir am Ende eine
Liste: was du umgesetzt hast, was du bewusst ausgelassen hast und
was noch von mir gebraucht wird.

Stell mir jetzt alle Fragen aus dem Audit, die nur ich beantworten
kann — nacheinander, eine nach der anderen. Das sind die Dinge, die
Leute laut Analyse wirklich suchen: Lieferzeiten, Maße, Materialien,
Zahlungsarten, Parkplätze und so weiter.

Bau meine Antworten dann an den passenden Stellen in die Website
ein. Widersprechen sich zwei Antworten, sag es mir, statt eine
davon stillschweigend zu nehmen. Was ich nicht beantworten kann,
bleibt offen — erfinde nichts.

Bring meine Website live. Ich hoste über meine Academy und brauche
dafür kein eigenes Cloudflare-Konto.

DEIN AUFTRAG IST NUR DAS HOCHLADEN.
Domain, DNS, Nameserver und Zertifikate gehören NICHT dazu. Fass sie
nicht an, richte nichts ein und stell auch keine Nachforschungen dazu
an — das macht die Plattform selbst, und meine Domain hängen wir in
einem eigenen Schritt davor.

MEIN ZUGANG
Adresse: {PLATTFORM-URL}/api/hosting
Anmeldung: Kopfzeile "Authorization: Bearer {DEIN-API-KEY}"

SO FUNKTIONIERT DIE SCHNITTSTELLE
Der Upload läuft in zwei Schritten, damit auch große Bilder durchgehen:
Die Dateien gehen nicht über die Academy, sondern direkt zu Cloudflare.

1. POST { "aktion": "start", "name": "meine-firma",
          "manifest": { "/index.html": { "hash": "…", "size": 1234 } } }
   Der hash ist sha256 aus dem base64-Inhalt der Datei plus der Endung
   ohne Punkt, als Hex auf 32 Zeichen gekürzt. size ist die Größe in
   Bytes. Zurück kommen uploadUrl, jwt und buckets.

2. Für jeden Eimer aus buckets ein POST auf uploadUrl:
   multipart/form-data, Kopfzeile "Authorization: Bearer <jwt>", je
   Datei ein Feld — Feldname ist der Hash, Inhalt ist die Datei als
   base64, den Content-Type der Datei mitgeben. Ist buckets leer,
   überspring diesen Schritt.

3. POST { "aktion": "fertig", "name": "meine-firma",
          "jwt": "<jwt aus der LETZTEN Upload-Antwort>",
          "manifest": { … dasselbe Manifest … } }
   Zurück kommt die Adresse, unter der meine Seite läuft.

GET auf dieselbe Adresse zeigt meine Seiten und wie viele ich noch frei
habe. DELETE mit { "name": "…" } schaltet eine ab.

SO GEHST DU VOR
1. Mach meine Seite fertig zum Hochladen: Eine reine HTML-Seite geht so;
   Next.js, Astro oder Vite baust du als statische Ausgabe. Eine
   /index.html muss dabei sein, sonst weist die Schnittstelle ab.
2. Als name nimm meinen Firmennamen, klein geschrieben und mit
   Bindestrichen. Daraus wird meine Adresse.
3. Lauf die drei Schritte oben durch. Kommt ein Fehler zurück, lies die
   Meldung — sie sagt, was fehlt — und behebe es, statt es blind noch
   einmal zu versuchen.
4. Ruf die Adresse danach EINMAL auf. Lädt sie, prüf kurz, ob die
   Bilder da sind, und sag mir Bescheid.
   Lädt sie nicht, kann das zwei harmlose Gründe haben: Die Adresse ist
   frisch und braucht ein paar Minuten, oder auf der Plattform fehlt
   noch etwas. Sag mir in einem Satz, was du gesehen hast, und hör dann
   auf. Geh dem nicht nach, prüf keine Nameserver und ändere nichts —
   die Dateien liegen dann schon oben, das ist der Teil, der zählt.
5. Gib mir die Adresse und sag mir in zwei Sätzen, wie ich künftig eine
   Änderung veröffentliche.

Fass keine anderen Seiten in meinem Konto an.

Bring meine Website live. Wir hosten sie bei Cloudflare Pages.

MEIN ZUGANG
Cloudflare-Token: {DEIN-CLOUDFLARE-TOKEN}

Das ist ein Cloudflare-API-Token. Behandle es wie ein Passwort: Leg
eine Datei .env.cloudflare in meinem Projektordner an, mit genau
einer Zeile
   CLOUDFLARE_API_TOKEN=<mein Token>
trag .env.cloudflare in die .gitignore ein, und schreib das Token
nirgendwo sonst hin — nicht in den Code, nicht in eine Doku, nicht
zurück in den Chat.

WICHTIG: Diese Datei liest wrangler NICHT von allein. Häng an JEDEN
wrangler-Befehl unten "--env-file .env.cloudflare" an, sonst
antwortet er nur, es sei keine CLOUDFLARE_API_TOKEN-Variable
gesetzt.

SO GEHST DU VOR

1. Prüf mit einem einzigen Befehl, ob das Token funktioniert, und
   zeig mir zugleich, was in meinem Konto schon liegt:
   npx wrangler pages project list --env-file .env.cloudflare
   Läuft er durch, ist das Token in Ordnung — auch wenn die Liste leer
   ist, das ist am Anfang richtig so. Kommt ein Fehler, sag mir in
   einem Satz, was fehlt, und hör dann auf.
   Prüf das NICHT über api.cloudflare.com/.../user/tokens/verify: Dieser
   Weg meldet bei kontoeigenen Tokens "Invalid API Token", obwohl das
   Token in Ordnung ist.

2. Mach meine Seite fertig zum Hochladen. Cloudflare Pages nimmt
   fertige Dateien entgegen. Schau in meinem Projekt nach, was
   nötig ist:
   - Reine HTML/CSS/JS-Seite: nichts zu bauen, der Ordner geht so.
   - Next.js, Astro, Vite und Ähnliches: bau die Seite als
     statische Ausgabe und nimm den Ordner, der dabei rauskommt.
   - Wenn etwas auf einem Server laufen muss, zum Beispiel mein
     Kontaktformular: bau das als Cloudflare-Pages-Function in
     einen Ordner "functions" im Projektstamm — der wird beim
     Hochladen automatisch mitgenommen.
   Sag mir in einem Satz, welchen Weg du nimmst und welcher Ordner
   hochgeladen wird.

3. Leg das Projekt an. Das ist ein eigener Schritt — beim Hochladen
   entsteht es NICHT von allein, du bekämst sonst nur die Meldung
   "The Pages project does not exist":
   npx wrangler pages project create NAME --production-branch=main
     --env-file .env.cloudflare
   Als NAME nimm meinen Firmennamen, klein geschrieben und mit
   Bindestrichen. Der Name steht später in der Adresse. Ist der Name
   weltweit schon vergeben, hängt Cloudflare von selbst drei Zeichen
   an — das ist kein Fehler.

4. Jetzt hochladen:
   npx wrangler pages deploy ORDNER --project-name=NAME
     --branch=main --commit-dirty=true --env-file .env.cloudflare

5. Wenn etwas schiefgeht: lies die Fehlermeldung, sag mir in einem
   Satz, was los ist, und behebe es. Häufig sind es Kleinigkeiten
   im Code, die auf meinem Rechner nicht auffallen.

6. Wenn es steht, ruf die Adresse selbst auf und prüf, ob die Seite
   wirklich lädt und die Bilder da sind — nicht nur, ob das
   Hochladen durchgelaufen ist.

7. Gib mir zum Schluss die Adresse, unter der meine Seite jetzt
   läuft (sie endet auf .pages.dev), und sag mir in zwei Sätzen,
   wie ich künftig eine Änderung veröffentliche.

Leg nur dieses eine Projekt an. Lösch keine Projekte, ändere nichts
an anderen Projekten in meinem Konto, und fass meine DNS-Einträge
nicht an — meine Domain hängen wir im nächsten Schritt davor.

Verbinde meine Domain mit meiner Website. Ich nutze den Schlüssel
meiner Academy, und meine Domain darf zu Cloudflare umziehen.

Meine Domain: {DEINE-DOMAIN}
Meine Seite: {DER-NAME-DEN-DU-BEIM-HOCHLADEN-BENUTZT-HAST}

MEIN ZUGANG
Adressen: {PLATTFORM-URL}/api/dns und {PLATTFORM-URL}/api/hosting
Anmeldung: Kopfzeile "Authorization: Bearer {DEIN-API-KEY}"

SO GEHST DU VOR

1. Melde meine Domain an:
   POST /api/dns mit { "domain": "meine-domain.de" }
   Zurück kommen zwei Nameserver.
   Kommt stattdessen die Antwort, die Domain liege schon bei Cloudflare:
   Dann war sie dort früher schon einmal, und das lässt sich nicht
   automatisch lösen. Sag mir das in einem Satz und hör auf.

2. Zeig mir die zwei Nameserver. Sag mir dazu, dass ich sie bei meinem
   Domain-Anbieter eintragen muss und dass dabei nichts verloren geht —
   Cloudflare übernimmt meine bestehenden Einträge, auch die für E-Mail.

3. Warte, bis ich sage, dass ich sie eingetragen habe. Prüf dann:
   GET /api/dns
   "pending" heißt, die Umstellung ist noch nicht durch — sag es mir und
   warte. Erst bei "active" geht es weiter. Das dauert je nach Anbieter
   ein paar Minuten bis ein paar Stunden.

4. Bei "active" verbinde Domain und Website:
   POST /api/hosting mit
   { "aktion": "domain", "name": "meine-seite",
     "domain": "meine-domain.de" }

5. Ruf danach https://meine-domain.de UND https://www.meine-domain.de auf.
   Beide müssen laden. Wenn nicht, sag mir in einem Satz, was du siehst.

Fass MX, SPF, DKIM und DMARC nicht an — meine E-Mail muss ohne
Unterbrechung weiterlaufen.

Verbinde meine Domain mit meiner Website. Ich nutze den Schlüssel
meiner Academy, und meine Domain bleibt bei meinem bisherigen Anbieter —
die Nameserver stelle ich NICHT um.

Meine Domain: {DEINE-DOMAIN}
Meine Seite: {DER-NAME-DEN-DU-BEIM-HOCHLADEN-BENUTZT-HAST}

MEIN ZUGANG
Adresse: {PLATTFORM-URL}/api/hosting
Anmeldung: Kopfzeile "Authorization: Bearer {DEIN-API-KEY}"

SO GEHST DU VOR

1. Schick:
   POST { "aktion": "domain", "name": "meine-seite",
          "domain": "meine-domain.de" }
   Zurück kommt eine Liste "eintraege" mit Typ, Name, Wert und Zweck,
   dazu ein Feld "status".

2. Zeig mir die Einträge als Tabelle, genau so, wie ich sie bei meinem
   Anbieter eintippen muss, mit einem Halbsatz zum Zweck.
   WICHTIG: Bei _acme-challenge kommen ZWEI Werte. Beide anlegen — der
   zweite ist keine Korrektur des ersten. Wer einen davon weglässt,
   bekommt nie ein Zertifikat.

3. Frag mich, ob ich die Einträge selbst setze oder ob du das machen
   sollst. Falls du sie setzt: Lass zwischen den einzelnen Einträgen ein
   paar Sekunden Pause. Viele Anbieter sperren kurzzeitig, wenn zu
   schnell hintereinander geschrieben wird — dann fehlt am Ende einer,
   und niemand weiß warum.

4. Wenn die Einträge stehen: Schick denselben Aufruf aus Schritt 1 noch
   einmal. Das Feld "status" sagt, wie weit Cloudflare ist; "aktiv" heißt
   fertig. Wiederholte Aufrufe schaden nicht, das ist der vorgesehene Weg.

5. Prüf zum Schluss selbst, ob meine Domain über https lädt. Wenn nicht,
   sag mir in einem Satz, was du siehst, und hör auf. Zwei harmlose
   Gründe sind üblich: Die Einträge brauchen ein paar Minuten, oder mein
   Anbieter gleicht seine beiden Nameserver verzögert ab — dann antwortet
   mal der eine, mal der andere.

Wenn mein Anbieter für die nackte Domain keinen CNAME zulässt: Sag mir
das und nimm www.meine-domain.de, die nackte leite ich dann dort um.

Ändere nichts an meinen bestehenden Einträgen, schon gar nicht an MX,
SPF oder DKIM.

Verbinde meine Domain mit meiner Website. Beides liegt in meinem
eigenen Cloudflare-Konto.

Meine Domain: {DEINE-DOMAIN}
Mein Pages-Projekt: {PROJEKTNAME}
Mein Cloudflare-Token: {DEIN-CLOUDFLARE-TOKEN}

Benutz die Cloudflare-API (api.cloudflare.com/client/v4, Kopfzeile
"Authorization: Bearer …"). Das Token liegt in .env.cloudflare; häng an
wrangler-Befehle "--env-file .env.cloudflare" an.

SO GEHST DU VOR

1. Prüf, ob meine Zone da ist und auf "active" steht:
   GET /zones?name=meine-domain.de
   Steht sie auf "pending", sind die Nameserver beim Registrar noch nicht
   durch — sag mir das und hör auf. Gibt es gar keine Zone, nimm den
   anderen Prompt (Weg 4), dann liegt meine Domain woanders.

2. Zeig mir die bestehenden DNS-Einträge, BEVOR du etwas änderst.

3. Melde die Domain beim Pages-Projekt an, einmal ohne www und einmal
   mit www:
   POST /accounts/<KONTO>/pages/projects/<PROJEKT>/domains
   mit { "name": "meine-domain.de" }

4. Setz danach die DNS-Einträge. Das ist ein eigener zweiter Schritt —
   aus Schritt 3 folgt er NICHT von allein:
   - CNAME für die nackte Domain auf <PROJEKT>.pages.dev
   - CNAME für www auf <PROJEKT>.pages.dev
   Beide MIT Proxy, die orange Wolke bleibt AN. Bei Cloudflare-Hosting
   ist das genau andersherum als bei fremden Hostern: ohne Proxy bekommt
   die Seite kein Zertifikat. Einen A-Eintrag brauchst du nicht.

5. Warte auf das Zertifikat — meist ein bis zwei Minuten. Prüf dann
   selbst, ob die Seite mit und ohne www über https lädt.

E-Mail: MX-, SPF- und DKIM-Einträge lässt du exakt so, wie sie sind.
Fehlen MX-Einträge ganz, frag mich, bevor du welche setzt.

Verbinde meine Domain mit meiner Website. Die Website liegt in meinem
eigenen Cloudflare-Konto, die Domain bleibt bei meinem bisherigen
Anbieter — die Nameserver stelle ich NICHT um.

Meine Domain: {DEINE-DOMAIN}
Mein Pages-Projekt: {PROJEKTNAME}
Mein Cloudflare-Token: {DEIN-CLOUDFLARE-TOKEN}

Das Token liegt in .env.cloudflare; häng an wrangler-Befehle
"--env-file .env.cloudflare" an.

SO GEHST DU VOR

1. Melde meine Domain beim Pages-Projekt an:
   POST /accounts/<KONTO>/pages/projects/<PROJEKT>/domains
   mit { "name": "meine-domain.de" }
   Das geht auch für Domains, die gar nicht bei Cloudflare liegen.

2. Frag den Stand ab:
   GET /accounts/<KONTO>/pages/projects/<PROJEKT>/domains
   Steht dort "CNAME record not set", fehlt genau ein Eintrag.

3. Gib mir diesen einen Eintrag als Tabelle:
     CNAME   meine-domain.de   ->   <PROJEKT>.pages.dev
   Mehr ist es nicht. Cloudflare prüft hier über HTTP, es sind also
   keine TXT-Nachweise nötig — anders als beim Academy-Weg.
   Zeig NICHT auf eine andere Adresse als <PROJEKT>.pages.dev.

4. Warte, bis ich sage, dass der Eintrag steht, und frag den Stand aus
   Schritt 2 erneut ab. "active" heißt fertig; das dauert meist ein bis
   zwei Minuten.

5. Prüf selbst, ob meine Domain über https lädt. Wenn nicht, sag mir in
   einem Satz, was du siehst, und hör auf.

Wenn ich www UND die nackte Domain will, mach beides: zwei Anmeldungen
in Schritt 1 und zwei CNAMEs. Lässt mein Anbieter für die nackte Domain
keinen CNAME zu, sag mir das — dann nehmen wir www und leiten die nackte
Domain dort um.

Ändere nichts an meinen bestehenden Einträgen, schon gar nicht an MX,
SPF oder DKIM.

npx skills add mariusmariusmariusmariusmarius/rechtstexte-de --global --yes

Erstelle die Rechtstexte für diese Website. Nutz dafür den Skill
„rechtstexte-de".

Wichtig dabei:

- Durchsuch zuerst mein Projekt und zeig mir als Tabelle, welche
  Dienste du gefunden hast — Hosting, Formular, Datenspeicher,
  Zeitpläne und Automationen, Schriften, Karten, WhatsApp,
  Tracking. Ich bestätige oder streiche, bevor du schreibst.
- Nimm NUR auf, was ich wirklich einsetze. Keine Bausteine für
  Dienste, die ich nicht nutze, und nichts weglassen, was ich nutze.
- Stell mir dann die Fragen, die im Code nicht stehen können —
  gesammelt in einer Nachricht, nicht einzeln.
- Erfinde nichts. Keine ausgedachte Steuernummer, keine geratene
  Handelsregisternummer, keine erfundene Aufsichtsbehörde. Was du
  nicht von mir hast, bleibt als deutlich markierte Lücke stehen,
  und du fragst mich am Ende gesammelt danach.
- Bau /impressum und /datenschutz im Stil meiner Seite und verlink
  beide im Fußbereich, sodass sie von jeder Seite aus in maximal
  zwei Klicks erreichbar sind. Der Link im Datenschutz-Häkchen
  meines Anfrage-Formulars zeigt bisher ins Leere — der muss jetzt
  auf die neue Seite zeigen.
- Setz ein Stand-Datum unter jede Seite.
- Gib mir am Ende eine Checkliste: was erledigt ist, und was ich
  selbst noch tun muss.

Und sag mir zum Schluss in einem Satz, was diese Texte sind und was
sie nicht sind.

Ich möchte zusätzlich Allgemeine Geschäftsbedingungen für meinen
Betrieb. Nutz den Skill „rechtstexte-de".

Schau dir zuerst meine Website an, damit du weißt, was ich anbiete.
Dann frag mich NACHEINANDER durch meinen Ablauf:
- Wie läuft ein Auftrag bei mir — vom ersten Kontakt bis zur
  fertigen Leistung?
- Angebot, Preise, Zahlung: wann wird wie bezahlt? Gibt es
  Anzahlungen, Materialkosten, Anfahrt?
- Termine und Absagen: was gilt, wenn der Kunde kurzfristig absagt?
- Gewährleistung und Garantien: was verspreche ich — und was
  ausdrücklich nicht?

Danach schreibst du die AGB und sagst mir ehrlich dazu:
- ob sie auf die Website sollen oder besser jedem Angebot beiliegen —
  beides ist üblich, ich entscheide.
- was du nicht sicher abdecken kannst und wo im Zweifel doch ein
  Anwalt draufschauen sollte.

Erfinde nichts — was ich nicht beantwortet habe, bleibt draußen.

Prüf meine Rechtstexte auf den aktuellen Stand. Nutz den Skill
„rechtstexte-de" — der wird laufend aktualisiert.

- Vergleich mein Impressum und meine Datenschutzerklärung mit dem
  heutigen Stand des Skills: Hat sich etwas geändert, das mich
  betrifft?
- Durchsuch auch mein Projekt: Sind seit dem letzten Mal Dienste
  dazugekommen — neue Verbindungen, neue Speicher, neue
  Automationen —, die in der Datenschutzerklärung fehlen?
- Wenn nichts zu tun ist, sag mir das in einem Satz. Wenn doch:
  zeig mir, was du ändern willst, und warte auf mein OK.
- Aktualisiere danach das Stand-Datum auf beiden Seiten.