beauty.but.a.nerd 0 von 7
Hier findest du
alle 7 Schritte
Kostenloser Guide

Keine 0815-Seite, sondern deine Seite zum Durchklicken.

Das brauchst du dafür
Claude Code

Damit arbeitet Claude direkt in deinem Ordner mit Logo, Fotos und Preisen. Im normalen Claude-Chat geht das so nicht.

Noch nicht installiert? Lade dir die Claude-Desktop-App auf deinen Computer (Windows oder Mac), melde dich an und öffne den Tab Code. Dann kannst du starten.

Dafür reicht das Pro-Abo für rund 20 € im Monat. Im kostenlosen Tarif ist Claude Code nicht enthalten.

Desktop-App herunterladen → Den aktuellen Preis siehst du auf claude.com/pricing.

Ihr habt mich so oft gefragt, wie ich meine Info- und Preisliste gebaut habe. Hier ist alles, was du zum Nachbauen brauchst: sieben Schritte, fertige Prompts zum Kopieren und Beispiele, die du direkt hier ausprobieren kannst.

Los geht's →
Bevor du startest

Das legst du dir bereit.

Je mehr Claude von dir bekommt, desto weniger musst du später korrigieren. Leg einen neuen Ordner an und sammle darin:

  • dein Logo und deine Fotos
  • deine Leistungen mit allen Preisen, am besten schon als Tabelle
  • deine Farben und Schriften, wenn du welche hast
  • deine Texte: über dich, deinen Laden, Abläufe, häufige Fragen
  • deine WhatsApp-Nummer und deine Social-Media-Links

Programmierkenntnisse brauchst du nicht. Du beschreibst in normaler Sprache, was du willst, und Claude schreibt den Code.

Ehrlich gesagt

Claude baut nicht jedes Mal exakt das Gleiche. Sieh die Prompts als Startpunkt, schau dir das Ergebnis an und sag einfach, was anders werden soll.

Schritt 1

Chat starten und Grundgerüst bauen.

Das Format heißt One-Pager mit fester Sidebar-Navigation: alles liegt auf einer einzigen Seite, und links steht dauerhaft ein Menü, das zum passenden Abschnitt springt. Genau so ist auch dieser Guide gebaut.

  1. Öffne die Claude-Desktop-App auf deinem Computer und wechsle zum Tab Code.
  2. Wähle den Ordner aus, den du gerade angelegt hast.
  3. Füll die eckigen Klammern im Prompt aus, füge ihn ein und schick ihn ab.
Prompt 1: Grundgerüst
Erstelle mir in diesem Ordner eine Info- und Preisliste für mein [Business] als One-Pager in einer einzigen index.html.

Aufbau: Links eine feste Sidebar mit Logo, Menüpunkten mit Icons, darunter Instagram, TikTok und ein WhatsApp-Button. Rechts liegen die Inhalte als Abschnitte untereinander. Ein Klick im Menü scrollt sanft zum Abschnitt, und beim Scrollen wird der aktuelle Menüpunkt markiert.

Farben: [deine Farben]. Schriften: [deine Schriften]. Stil: [z. B. edel, verspielt].

Stell mir zuerst alle Fragen, die du brauchst, bevor du loslegst.
So schaust du dir die Seite an

Doppelklick auf die Datei index.html in deinem Ordner. Sie öffnet sich im Browser, auch wenn sie noch gar nicht online ist.

Schritt 2

Passend fürs Handy.

Deine Kundinnen kommen fast immer übers Handy. Dort ist kein Platz für eine feste Sidebar, deshalb klappt sie über einen Burger-Button oben links seitlich auf. Das Fachwort dafür ist Off-Canvas-Menü.

Prompt 2: Handy-Menü
Mach die Seite handytauglich. Unter 900 px Breite wird die Sidebar ausgeblendet, und oben links erscheint ein fester Burger-Button. Beim Tippen fährt die Sidebar von links herein und der Rest der Seite wird abgedunkelt. Das Menü schließt sich beim Tippen auf einen Menüpunkt oder auf den dunklen Bereich. Der Burger-Button darf das Logo nicht überdecken.

Alle Spalten stehen auf dem Handy untereinander, nichts läuft seitlich aus dem Bild, auch keine Formularfelder. Setz auf die Startseite einen Hinweis, dass alle Infos und Preise im Menü oben links sind.

Prüfe das Ergebnis danach selbst in Handybreite.
Probier es aus
Dein Salon
Alle Infos und Preise im Menü oben links

Tippe auf den Burger. Das Menü fährt von links herein, der Rest wird dunkel. Ein Tipp auf den dunklen Bereich schließt es wieder.

Den Hinweis auf der Startseite solltest du nicht weglassen: Ohne ihn übersehen viele den Button.

Schritt 3

Inhalte und Optik: alles geht.

Hier wird die Seite zu deiner. Stell dich und deinen Laden vor, erklär deine Vorgehensweise und beschreib jede Leistung so, wie es zu dir passt. Damit Claude genau weiß, was du meinst, helfen dir diese Begriffe:

Startbereich mit Name und Buttonsagst du: Hero-Bereich
Ablauf in nummerierten Schrittensagst du: Schrittkarten
Leistungen oder Farben als Kachelnsagst du: Karten-Raster mit Icons
Preise mit Detailssagst du: Preiskarten oder Preistabelle
Fragen zum Aufklappensagst du: Akkordeon
WhatsApp immer sichtbar in der Eckesagst du: schwebender Button
Prompt 3: Inhalte
Füge diese Abschnitte hinzu: [z. B. Über mich, Mein Laden, Leistungen, Ablauf, Preise, Fragen, Termin]. Stelle jede Leistung als eigene Karte mit Icon, Überschrift und kurzem Text dar. Baue die häufigsten Fragen als Akkordeon zum Aufklappen, und lange Antworten dürfen nicht abgeschnitten werden.

Hier sind meine Texte: [deine Texte]. Meine Bilder liegen in diesem Ordner: [Dateinamen].
So einfach sehen die Bausteine aus
🌿

Rooted

Mit natürlichem Farbansatz.

☀️

Balayage

Sanfte Farbübergänge.

🤎

Unifarben

Ein Ton, zeitlos elegant.

Wie läuft die Beratung ab?
So sieht ein Akkordeon aus. Die Antwort steht erst da, wenn jemand sie wirklich lesen will, und die Seite bleibt trotzdem kurz.
Muss ich etwas anzahlen?
Auch Regeln zu Anzahlung, Absagen oder Pflege passen perfekt hier hinein.
Mein Trick bei den Icons

Die Icons bei meinen Farbkarten sind ganz normale Emojis. Kostet nichts und sieht trotzdem besonders aus.

Bonus: Video und Sprachnachricht

Das unterscheidet deine Seite wirklich von einer normalen Preisliste: Zeig in einem kurzen Video, wie etwas aussieht, oder sprich deine Kundinnen direkt an.

Bonus-Prompt: Video und Audio
Baue im Abschnitt [Name] mein Video [datei.mp4] ein. Es läuft stumm in Schleife und auch auf dem iPhone direkt in der Seite. Füge außerdem meine Sprachnachricht [datei.mp3] als kleinen Audio-Player mit Play-Button und einem Satz dazu ein.

Prüfe die Dateigrößen und sag mir, wenn ich etwas verkleinern sollte.

Mit Ton startet ein Video nicht von selbst, das blockieren die Browser. Speichere die Dateien außerdem direkt in deinem Ordner, statt sie von YouTube einzubetten. Warum, erfährst du in Schritt 6.

Schritt 4

Der Preisfinder.

Hier stellen sich Kundinnen ihren Preis selbst zusammen, schon bevor sie dir schreiben. Technisch ist das einfacher, als es aussieht: Es wird nichts gerechnet, sondern nachgeschlagen. Zwei Auswahlen ergeben einen festen Preis aus deiner Tabelle.

Probier es aus: Beispiel aus meiner Preisliste
Dein Gesamtpreis, all-ininkl. Haare, Einsetzen, Schnitt und Styling
wähle oben
Prompt 4: Preisfinder
Baue im Preisbereich einen Preisfinder mit zwei Auswahlfeldern: [Merkmal 1] und [Merkmal 2]. Sobald beide gewählt sind, erscheint sofort der Gesamtpreis, darunter klein, was enthalten ist: [Leistungen]. Hier sind alle Preise als Tabelle: [deine Tabelle].

Zeige die Preise darunter zusätzlich als Tabellen und setz einen auffälligen Balken dazu: "All-in-Preis" plus Aufzählung. Füge über dem Preisfinder einen Link zu einem Abschnitt "Warum dieser Preis?" ein.

Was deinen Preisbereich stark macht

  • Orientierung: Bei mir steht direkt dabei, wofür welche Grammzahl gedacht ist.
  • Klartext: Schreib genau dazu, was im Preis drin ist. Bei mir ist es ein All-in-Preis aus Haaren, Einsetzen, Schnitt und Styling. Nur wenn eine Kundin zusätzlich etwas bucht, kommt etwas dazu.
  • Erklärung: Sag, warum der Preis so ist, bevor jemand die Zahlen sieht. Das nimmt viele Fragen vorweg.
Wichtig bei Preisänderungen

Sag immer dazu: „Ändere den Preis überall auf der Seite.“ Die Preise stehen meist doppelt im Code, einmal in der Tabelle und einmal im Preisfinder.

Schritt 5

Das Formular mit WhatsApp.

Das Lieblingsstück! Und es ist viel unkomplizierter, als alle denken: Du brauchst dafür nur deine WhatsApp-Nummer, keine Datenbank und kein zusätzliches Tool. Das nennt sich Click-to-Chat.

  1. Die Kundin füllt dein Formular aus.
  2. Die Seite baut daraus einen fertigen Text und öffnet damit WhatsApp, direkt im Chat mit dir.
  3. Die Kundin tippt in WhatsApp auf Senden.

Der Link dahinter sieht so aus: https://wa.me/4917612345678?text=Hallo. Die Nummer steht im internationalen Format, also ohne +, ohne führende 0 und ohne Leerzeichen.

Probier es aus: Hier wird nichts verschickt
Prompt 5: WhatsApp-Formular
Baue am Ende ein Anfrage-Formular mit diesen Feldern: Vorname, [Leistung], [z. B. Länge], [z. B. Variante], [z. B. Farbwunsch], Nachricht. Alle Felder sind freiwillig.

Der Button "Anfrage per WhatsApp senden" öffnet WhatsApp über einen wa.me-Link an meine Nummer [49…], mit einem fertig formulierten Text, der nur die ausgefüllten Felder enthält. Ist alles leer, kommt ein freundlicher Standardtext.

Füge außerdem unten rechts einen schwebenden WhatsApp-Button ein. Die Formularfelder dürfen auf dem Handy nicht aus der Box ragen.
Das solltest du wissen

Die Anfrage geht nicht automatisch raus. Die Kundin sieht den fertigen Text in WhatsApp und tippt selbst auf Senden. Teste es einmal mit einem zweiten Handy.

Bonustipp für Salons

Eine eigene Nummer und WhatsApp am Empfang

Die Anfragen müssen nicht auf deinem privaten Handy landen. So sieht dein ganzes Team, was reinkommt, und kann direkt antworten:

  1. Hol dir für den Salon eine eigene Handynummer und richte damit die App WhatsApp Business ein.
  2. Trag genau diese Nummer in Prompt 5 ein.
  3. Öffne am Empfang WhatsApp Web oder die WhatsApp-App für den Computer und verknüpfe sie über den QR-Code mit dem Salon-Handy.

Laut WhatsApp-Hilfe kannst du bis zu vier Geräte mit dem Haupttelefon verknüpfen. Nach 30 Tagen Inaktivität wird ein verknüpftes Gerät automatisch abgemeldet.

Bitte beachten: Stell den Bildschirm so auf, dass Kundinnen nicht mitlesen können. Dort stehen Namen und persönliche Haarthemen. Sperr ihn, wenn niemand am Empfang ist.
Schritt 6

Impressum, Datenschutz und die Sache mit den Cookies.

Bevor deine Seite online geht, muss das hier stehen. Wer geschäftlich eine Seite betreibt, braucht in Deutschland ein Impressum, das leicht erkennbar und direkt erreichbar ist (§ 5 DDG), und eine Datenschutzerklärung.

Die Texte kommen nicht von Claude

Lass dir deine Texte von einem Generator erstellen (zum Beispiel eRecht24 oder datenschutz-generator.de) oder von einer Kanzlei. Gib dort alles an, was du nutzt: dein Hosting, WhatsApp und alle anderen Dienste. Claude baut die fertigen Texte dann nur noch ein.

Prompt 6a: Rechtstexte einbauen
Füge meiner Seite Impressum und Datenschutz hinzu. Hier sind meine fertigen Texte: [deine Texte].

Lege dafür zwei eigene Seiten im gleichen Design an: impressum.html und datenschutz.html. Übernimm meine Texte unverändert und erfinde keine rechtlichen Angaben. Verlinke beide unten im Menü und im Footer, die Datenschutzerklärung zusätzlich direkt am Formular.

Google Fonts: erlaubt, aber nicht direkt von Google laden

Die Schriften sind kostenlos und du darfst sie benutzen. Das Problem ist nur, von wo sie geladen werden. Holt deine Seite sie beim Öffnen direkt von Googles Servern, bekommt Google die IP-Adresse deiner Besucherin, ohne dass sie zugestimmt hat. Das Landgericht München hat dafür 2022 einer Klägerin 100 € Schadensersatz zugesprochen (Az. 3 O 17493/20).

Meine Empfehlung

Schriften neben der Seite speichern

Du lädst sie einmal herunter und legst sie in deinen Ordner. Sie sehen genauso aus, bleiben kostenlos, und es gibt keine Verbindung zu Google. Dafür brauchst du keinen Cookie-Button.

Der umständliche Weg

Von Google laden, mit Cookie-Button

Der Button muss die Schrift wirklich blockieren, bis jemand zugestimmt hat. Wer ablehnt, sieht eine Ersatzschrift und dein Design ist weg.

Wann brauche ich einen Cookie-Button?

Dann schon

  • Tracking wie Google Analytics oder Meta-Pixel
  • eingebettete YouTube-Videos
  • eingebettete Instagram- oder TikTok-Posts
  • eingebettete Google Maps

Dafür nicht

  • lokal gespeicherte Schriften und Icons
  • normale Links zu Instagram oder TikTok
  • dein WhatsApp-Button, denn WhatsApp öffnet sich erst beim Tippen
  • Videos und Audios, die in deinem Ordner liegen

Die Regel dahinter: Sobald etwas auf dem Gerät gespeichert oder ausgelesen wird, das für deine Seite nicht unbedingt nötig ist, braucht es eine Einwilligung (§ 25 TDDDG). Und was du einbettest, schickt oft schon beim Öffnen Daten an den Anbieter.

Prompt 6b: Schriften und Cookie-Check
Binde alle Schriften und Icons lokal in meinem Ordner ein, sodass beim Öffnen der Seite keine Verbindung zu Google oder anderen fremden Servern entsteht. Das Aussehen soll gleich bleiben.

Prüfe danach, ob meine Seite Cookies setzt, Tracking nutzt oder fremde Inhalte einbettet, und liste mir alles auf. Sag mir, ob ich deshalb einen Cookie-Button brauche und ob meine Datenschutzerklärung dazu passt. Ändere meine Rechtstexte nicht ohne mein OK.
Kurz und ehrlich

Das hier ist meine Erfahrung und keine Rechtsberatung. Auch Claude ersetzt keine. Bei Unsicherheit frag eine Kanzlei.

Schritt 7

Ab ins Internet.

Bis hierhin liegt deine Seite nur auf deinem Computer. Damit Kundinnen sie öffnen können, muss sie auf einen Server. Ich empfehle dir Cloudflare Pages: Es hat einen kostenlosen Tarif, und deine Seite bekommt eine eigene Adresse, zum Beispiel deinname.pages.dev. Cloudflare führt Pages gerade mit seinem Produkt Workers zusammen, deshalb können Menüs und Adresse bei dir etwas anders aussehen. Claude führt dich trotzdem durch.

Prompt 7: Online stellen
Meine Seite liegt fertig in diesem Ordner. Hilf mir, sie kostenlos über Cloudflare Pages online zu stellen. Ich kenne mich damit nicht aus: Gib mir immer nur einen Schritt auf einmal, erkläre ihn einfach und warte, bis ich ihn bestätige.

1. Prüfe zuerst, ob alles bereit ist: index.html liegt im Hauptordner, alle Bilder werden gefunden, die Schreibweise der Dateinamen stimmt, Impressum und Datenschutz sind verlinkt. Sag mir, wenn Bilder oder Videos zu groß sind.
2. Erkläre mir, wie ich ein kostenloses Cloudflare-Konto anlege. Die Anmeldung mache ich selbst im Browser. Frag mich nie nach meinem Passwort.
3. Prüfe, ob die nötigen Programme installiert sind, und installiere fehlende erst nach meinem OK. Melde mich mit wrangler an und lade die Seite als Projekt "[projektname]" hoch.
4. Lade nur die Dateien hoch, die zur Seite gehören, keine privaten Dateien aus dem Ordner.
5. Gib mir am Ende die Adresse und prüfe, ob die Seite erreichbar ist. Erkläre mir dann, wie ich spätere Änderungen online stelle und wie ich eine eigene Domain verbinde.
Lieber von Hand hochladen? So geht's ohne Claude
Melde dich bei Cloudflare an, öffne Workers & Pages und wähle Create application, dann Get started und Drag and drop your files. Gib einen Projektnamen ein, zieh deinen Seiten-Ordner hinein und klicke auf Deploy site. Eine einzelne Datei darf höchstens 25 MiB groß sein. Die Beschriftungen können sich ändern, die aktuelle Anleitung steht in der Cloudflare-Dokumentation.
Für später

Änderst du etwas, bleibt das erst mal nur auf deinem Computer. Sag Claude danach: „Stelle meine Änderungen online.“

Denk außerdem daran, Cloudflare in deiner Datenschutzerklärung zu nennen, wenn du dort hostest.

Abschluss-Check

Bevor du den Link verschickst.

  • Menü am Handy getestet: Es öffnet und schließt sich, nichts ist verdeckt.
  • Preisfinder durchgeklickt: Jede Kombination zeigt den richtigen Preis.
  • Formular getestet: Die Nachricht kommt auf der richtigen Nummer an.
  • Impressum und Datenschutz sind von überall erreichbar.
  • Fremde Dienste geprüft, Datenschutzerklärung passt dazu.
  • Seite einmal auf einem fremden Handy geöffnet.

Viel Spaß beim Bauen!

Stand: November 2026. Quellen: WhatsApp Click-to-Chat · WhatsApp verknüpfte Geräte · Cloudflare Pages · Claude-Tarife · § 5 DDG · § 25 TDDDG