KI Maestra Claude Cowork Crashkurs
Modul 11 · Tag 2

Webseite + Netlify: Deine eigene Live-URL.

Aus dem Claude-Design-Konzept eine vollständige HTML-Seite in Cowork, dann via Netlify-Connector live deployen. Eigene URL am Ende des Tages.

Von der Idee zur Live-URL. Infografik im KI-Maestra-Brand: Ein Webseiten-Layout wird über Netlify deployed und erscheint als Live-Link auf einer Weltkugel.
↓ Infografik (PNG)
Erst mal: Was passiert hier?

Aus deiner Seite wird eine echte Adresse.

Bisher liegt deine Seite auf deinem Rechner. In diesem Modul machst du daraus eine echte Webseite im Internet — mit einer eigenen Adresse (URL), die jede:r aufrufen kann.

Das Veröffentlichen übernimmt Netlify — ein kostenloser Dienst, der deine Seite ins Netz stellt. Einmalig vorab: Leg dir ein kostenloses Konto auf netlify.com an und verbinde Netlify als Connector (wie in Modul 05). Danach macht Claude den Rest: Du sagst „deploy", Claude veröffentlicht, die Live-URL erscheint im Chat.

Ideen

Drei Webseiten.

Verkauf

Verkaufsseite

Für dein nächstes Programm. Hero, Sektionen, Testimonials, Buchungs-CTA.

Buchung

Buchungs-Landingpage

Für Erstgespräche. Klare CTA, kurze Erklärung, Calendly-Einbettung.

Lieblingsangebot

Mini-Site

Für dein aktuelles Lieblingsangebot. Eine Seite, klare Sprache, eine Entscheidung.

Bauflow

Drei Schritte.

  1. Ausgangspunkt: Dein Design-Konzept aus Modul 09 oder direkt in Cowork starten. Deine Marke kennt Claude schon aus deinem Brand-Setup — die musst du im Prompt nicht erklären.
  2. Verfeinern in Cowork: Texte schärfen (dein Brand-Skill aus Modul 04 hilft), Platzhalter durch deine eigenen Bilder ersetzen — leg Bilder und Logos vorher gut benannt in deinen Templates-Ordner, dann setzt Claude sie direkt ein. Hero-Headline final, CTA prüfen.
  3. Deployen via Netlify-Connector: „Deploy diese Seite auf Netlify" — Cowork legt die Site an und deployt. Live-URL erscheint im Chat.
Breakout-Übung

Landingpage-Prompt.

Dieser Prompt folgt dem StoryBrand-Prinzip (Donald Miller): deine Kundin ist die Heldin, du bist ihr Guide — im Zentrum steht ihre Transformation (vorher → nachher).

Webseiten-Prompt 
Bau mir eine Landingpage für [Programm / Angebot] nach dem
StoryBrand-Prinzip (Donald Miller) — meine Kundin ist die
Heldin, ich bin ihr Guide:

- Hero: eine klare Aussage, WAS meine Kundin erreicht
  (ihre Transformation), eine Subline und ein deutlicher
  CTA-Button — ohne Fachjargon
- Das Problem: wo meine Kundin gerade steht und woran
  sie scheitert (auch das Gefühl dahinter)
- Ich als Guide: kurz Empathie + Kompetenz, dazu ein
  Testimonial-Block (Platzhalter)
- Der Plan: drei einfache Schritte, wie es mit mir abläuft
- Die Transformation: vorher → nachher — wer meine Kundin
  heute ist und wer sie nach der Zusammenarbeit wird
- Was auf dem Spiel steht, wenn sie nichts ändert (sanft)
- Abschluss-CTA mit [meine Calendly-URL]
- Footer mit Impressum

Nutze meine Bilder und Logos aus meinem Templates-Ordner
statt Platzhalter.

Design: klar, hochwertig, mobile-first.
Wenn fertig: Deploy auf Netlify, gib mir die URL.
Output Eine Live-URL für dein aktuelles Lieblings-Angebot — heute Abend im Newsletter teilbar.
Empfehlung — deine eigene Domain: Statt der netlify.app-Adresse kannst du deine eigene Domain verbinden. Dann steht z.B. angebot.deine-domain.de in der URL — genau so läuft diese Kursseite als Subdomain unter claude-crashkurs.maestra.de. Das ist ein eigenes Thema (die Schritte stehen in der Vertiefung unten), aber sehr zu empfehlen. Das Gleiche geht auch mit Vercel als Alternative zu Netlify. Und bei größeren Projekten: GitHub unbedingt dazunehmen (Versionierung + Backup) — sag Claude, den Code in einem GitHub-Repo zu speichern und über Netlify zu deployen.
Hintergrund — warum dieses Modul wichtig ist

Das ist das Highlight-Finale. Eine Live-URL für dein Angebot, die du heute Abend im Newsletter schreibst, ist anders als ein Slidedeck in deiner Schublade. Live-URLs werden geklickt, geteilt, gespeichert.

Stolpersteine
  • Datei nicht index.html genannt: Die Startseite muss zwingend index.html heißen — sonst zeigt Netlify nur „Page not found". Häufigster Stolperstein.
  • Netlify-Connector nicht aktiviert: Cowork kann nicht deployen. In Cowork-Capabilities prüfen.
  • Build-Fehler bei komplexem HTML: Statisches HTML + CSS + JS reicht für 90 % der Use-Cases.
  • URL teilen ohne Test: Vor dem Newsletter-Versand: URL auf Handy aufrufen, prüfen ob mobile-tauglich, dann teilen.
Vertiefung

Netlify hat einen Free Tier (100 GB Bandwidth pro Monat) — für Solo-Unternehmerinnen reicht das problemlos. Wenn du eine eigene Domain hast, kannst du eine Sub-Domain wie programm.dein-name.de einrichten: beim Domain-Anbieter einen DNS-Eintrag auf die .netlify.app-Adresse setzen, dann in Netlify unter Site Settings → Domain Management verknüpfen. Das Sicherheitszertifikat braucht danach rund 30 Minuten, bis die Seite sicher erreichbar ist.

← Modul 10 Quick-Reference →