Deine Website.
Mit klarer Richtung.

Deine Website. Mit klarer Richtung.

Von einer visuellen Referenz zur eigenen Website: drei Tools, ein vollständiger Start-Prompt und eine klare Prüfung vor dem Veröffentlichen.

Das brauchst du

Einen Computer, Claude Code mit passendem Zugang (z. B. Pro oder Max), Node.js in einer aktuellen LTS-Version und einen neuen Ordner meine-website. Lege eigene Texte, Logo und Bilder bereit.

Dieses Playbook verwendet Claude Code im Terminal. Die Erweiterungen sind frei verfügbar; Claude-Nutzung, Hosting oder gekaufte Vorlagen können kostenpflichtig sein. „Premium“ beschreibt das Gestaltungsziel, keinen garantierten Marktwert.

Zwei Werkzeuge für gutes Design.

Taste Skill hilft bei Layout, Schrift und visueller Richtung. Öffne das Terminal im Ordner meine-website und führe aus:

npx skills add Leonxlnx/taste-skill

Wähle design-taste-frontend, Claude Code und die Installation für dieses Projekt. Der aktuelle Standard v2 ist als experimentell gekennzeichnet.

Impeccable unterstützt gezielten Feinschliff. Im selben Terminal:

npx impeccable install

Wähle Claude und Projektinstallation. Starte danach claude neu und führe /impeccable init aus. Beschreibe dein Angebot.

Claude bekommt einen Browser.

Mit Playwright MCP kann Claude Seiten öffnen, Buttons bedienen und Abläufe prüfen. Der MCP ist eine Verbindung zum Browser; du gibst den Prüfauftrag.

Im Terminal deines Website-Ordners

claude mcp add playwright npx @playwright/mcp@latest

Starte anschließend claude. Öffne darin /mcp und prüfe, ob Playwright verbunden ist. Falls ein Browser fehlt, lass Claude den benötigten Playwright-Browser installieren.

Einmal die Verbindung testen

Öffne mit Playwright MCP https://example.com und nenne mir die sichtbare Überschrift. Wenn der Browser nicht verfügbar ist, melde den konkreten Fehler.

Erfolg: Claude hat die Seite tatsächlich geöffnet und nennt „Example Domain“. Eine bloße Textantwort ohne Browseraufruf belegt keine Verbindung.

Die Vorlage macht den Unterschied.

Öffne 21st.dev oder MotionSite. Wähle eine Referenz, die zu deinem Angebot passt. Speichere einen Screenshot als assets/referenz.png in deinem Website-Ordner.

Bei Animationen ergänze den Seitenlink und beschreibe die Bewegung: Ein Screenshot zeigt nur einen Moment. Vorlagen können kostenpflichtig sein; eigene Bilder verwenden.

Lege briefing.txt im Website-Ordner an

Name / Marke: [dein Name]
Angebot: [was du für wen anbietest]
Zielgruppe: [wer die Seite besucht]
Hauptaktion + Link: [z. B. Termin buchen + URL]
Inhalte: [Leistungen, Ablauf, Über mich, Kontakt]
Bilddateien: [deine Dateien im Ordner assets/]
Referenz: assets/referenz.png
Das gefällt mir: [Schrift, Bildaufbau, Farben]
Eigene Markenfarben: [Farben oder freie Wahl]
Pflichtlinks: [Impressum, Datenschutz, falls vorhanden]

Ersetze die eckigen Klammern. Konkret wäre etwa: „Business-Fotos für Selbstständige; Termin anfragen; große Portraits, ruhige Schrift und viel Weißraum“. Nutze deine echten Angebotsdaten.

Kopieren. Anpassen. Bauen lassen.

Starte Claude Code mit claude im Ordner meine-website. Lege briefing.txt und assets/referenz.png bereit und kopiere den gesamten Auftrag:

ROLLE
Du bist Webdesigner und Frontend-Entwickler. Arbeite sorgfältig und prüfe dein Ergebnis kritisch.

KONTEXT UND SETTING
Meine Website soll Besuchern mein Angebot erklären und sie zur Hauptaktion führen. Arbeite im aktuellen Projekt. Lies briefing.txt, assets/referenz.png und meine Texte und Bilder. Behalte vorhandene Technik bei; starte bei leerem Ordner mit HTML, CSS und JavaScript. Frage bei blockierenden Lücken nach, kennzeichne sonst Annahmen.

KONKRETE AUFGABE
Baue eine vollständige Website für die Zielgruppe aus meinem Briefing: Einstieg mit Hauptbutton, Angebot, Nutzen, Ablauf, Über mich und Kontakt. Lass unnötige Abschnitte weg. Nutze design-taste-frontend. Analysiere Schrift, Farben, Abstände und Bildaufbau der Referenz; übertrage die drei gewünschten Merkmale auf meine Marke. Mein Briefing hat Vorrang vor Skill-Regeln.

ANFORDERUNGEN UND GRENZEN
Gestalte lesbar, kontrastreich und für Handy und Desktop. Verwende konsistente Abstände, dezente Animationen und beachte reduzierte Bewegung. Verbinde Buttons mit echten Zielen. Kopiere keine fremden Texte oder Marken. Erfinde keine Bewertungen, Zahlen oder Logos. Täusche keine funktionierenden Formulare vor. Lösche keine bestehenden Inhalte ohne Auftrag. Veröffentliche erst nach meiner Freigabe.

TESTEN UND VERBESSERN
Starte die Vorschau, nutze Impeccable zum Feinschliff. Teste mit Playwright MCP bei 390 und 1440 Pixeln Breite:
1. Menü und Hauptaktion führen zum richtigen Ziel; Links sind erreichbar.
2. Kein horizontaler Überlauf, abgeschnittener Text oder überdeckter Button.
3. Tastaturbedienung und sichtbarer Fokus funktionieren; Formulare haben verständliche Beschriftungen und Fehlermeldungen.
4. Angebundene Formulare melden Erfolg erst nach erfolgreicher Übertragung. Verwende eine Testumgebung; sende keine echten Anfragen ohne Erlaubnis.
5. Keine eigenen Konsolenfehler; reduzierte Bewegung funktioniert.
Behebe Probleme und wiederhole betroffene Tests. Melde nicht verfügbare Tests.

PRÜFUNG AUS BESUCHERSICHT
Prüfe als unbeteiligter Besucher ohne Vorwissen: Sind Angebot, Zielgruppe, Nutzen und nächste Aktion sofort klar? Sind Aussagen glaubwürdig und alle Anforderungen aus briefing.txt erfüllt? Verbessere konkrete Schwächen und prüfe erneut. Kennzeichne diese Prüfung als simuliert, nicht als echten Nutzertest.

ERGEBNIS
Liefere Dateien, Vorschau-Adresse und Prüfbericht: Anforderung, durchgeführter Test, Ergebnis, offene Punkte. Nenne fehlende Inhalte, Pflichtlinks oder Anbindungen. Trenne bestanden, fehlgeschlagen und nicht geprüft. Behaupte keine garantierte Rechtskonformität oder einen bestimmten Marktwert.

Prüfen. Verfeinern. Veröffentlichen.

Öffne die lokale Vorschau, die Claude dir nennt. Prüfe, ob dein Angebot sofort verständlich ist und der Hauptbutton zur richtigen Aktion führt.

Gezielt nachbessern

/impeccable polish

Nenne anschließend eine konkrete Korrektur, etwa: „Der Titel bricht am Handy ungünstig um. Passe Breite und Zeilenumbruch an und prüfe erneut.“

• Menü, Buttons und Links funktionieren.
• Keine seitlichen Überläufe auf Handy und Desktop.
• Tastaturfokus sichtbar, Texte gut lesbar.
• Formulare tatsächlich angebunden und getestet.
• Eigene Inhalte, Bildrechte und Pflichtangaben geprüft.

So kommt die Seite online

Nenne Claude deinen Hosting-Anbieter und die gewünschte Domain. Lass die passenden Veröffentlichungsdateien und Schritte vorbereiten. Gib die Veröffentlichung erst frei, wenn Vorschau und Tests passen; prüfe danach auch die Live-Adresse.

Stand 17.09.2026: Ich habe Quellen und Bedienwege geprüft, aber nicht jedes Werkzeug vollständig neu getestet. Die Bilder sind echte Screenshots der jeweils genannten Anbieter.

Alles bereit zum Mitnehmen.

Lade das PDF für die Anleitung herunter. Den Prompt und die Briefing-Vorlage bekommst du auch als Textdateien.