Webdesign-Prompts: 22 Vorlagen für Claude Opus

Prompts für Landingpages, Hero-Sektionen, Dashboards und Komponenten mit Claude.

Claude Opus 5.522 Prompts · Landingpages und Hero, Preise, Formulare, Conversion, Dashboards und interne Tools

22 Prompts

Komplette Landingpage für einen B2B-Dienstleister

LandingpageB2BHTML

Beispielergebnis: Komplette Landingpage für einen B2B-Dienstleister — Ergebnis mit Claude Opus 5.5, unverändert übernommen.

Eine Angebotsseite für Google Ads oder LinkedIn-Kampagnen in einem Durchgang bauen.

Baue eine Landingpage als einzelne HTML-Datei mit eingebettetem CSS und wenig Vanilla-JavaScript, ohne Frameworks.
Angebot: [ANGEBOT]. Zielgruppe: [ZIELGRUPPE]. Ziel der Seite: Anfrage über das Formular am Seitenende.
Abschnitte in dieser Reihenfolge:
1. Hero im Split-Layout auf einem 12-Spalten-Raster: Headline mit Nutzenversprechen und Subline links über 7 Spalten, Bildfläche rechts über 5 Spalten, ein Primär-Button.
2. Logo-Laufband (Marquee, auch Logo-Walze genannt) mit Kundenlogos [LOGO_PFADE] in Graustufen: läuft endlos per CSS-Animation auf translateX, 40 s pro Durchlauf, linear, pausiert bei Hover und Fokus, Ränder per mask-image weich ausgeblendet.
3. Drei Ergebnisse für Kunden als Bento-Grid (eine große Kachel, zwei kleine), die Zahlen als Count-up-Zähler, die beim ersten Sichtkontakt in 1.200 ms hochzählen.
4. Ablauf der Zusammenarbeit in vier Schritten als Sticky-Scroll-Sektion (Pinned Section): Die Überschrift bleibt links stehen, rechts scrollen die Schritte vorbei, der aktive Schritt hat volle Deckkraft, die anderen 40 Prozent.
5. Leistungsumfang. 6. Häufige Fragen als Akkordeon mit details und summary. 7. Formular mit Name, Firma, E-Mail und Nachricht.
Bewegung: Inhalte erscheinen per Stagger-Reveal beim Scrollen (IntersectionObserver, Schwelle 0,2): Einblenden und 24 px nach oben, 600 ms, 80 ms Versatz pro Element, Easing cubic-bezier(.16,1,.3,1) (ease-out-expo). Buttons und Kacheln mit Hover-Lift: translateY(-2px) plus weicherer, größerer Schatten in 180 ms. Animiere nur transform und opacity. Bei prefers-reduced-motion: reduce ist alles sofort sichtbar und das Laufband steht still.
Gestaltung: Farben [MARKENFARBEN] als CSS-Variablen, Schrift [SCHRIFTART] lokal eingebunden, großzügige Abstände.
Vermeide: cremefarbenen Hintergrund, kursive Akzentwörter in Überschriften, nummerierte Labels wie „01“, Monospace-Labels, Pillen-Buttons, Verläufe in Lila.
Technik: mobil zuerst, funktioniert ab 320 px Breite. Auf dem Handy stapelt sich der Split-Hero (Text zuerst), die Sticky-Sektion wird zur normalen Liste. Semantisches HTML, Fokusring per :focus-visible (2 px Outline, 3 px Abstand), Kontrast WCAG AA. Platzhaltertexte klar als Platzhalter kennzeichnen.

Platzhalter ausfüllen 5

ANGEBOTZIELGRUPPELOGO_PFADEMARKENFARBENSCHRIFTART

Die größte Wirkung hat das Easing: Mit cubic-bezier(.16,1,.3,1) starten die Einblendungen schnell und landen weich, mit dem Standard „ease“ wirkt dieselbe Seite träge. Das Nutzenversprechen schreibst du trotzdem selbst, das kann Claude über dein Geschäft am wenigsten wissen.

Aus: Claude Opus 5.5-Prompts

Drei Hero-Varianten zum Vergleichen

HeroVariantenKonzept

Beispielergebnis: Drei Hero-Varianten zum Vergleichen — Ergebnis mit Claude Opus 5.5, unverändert übernommen.

Schnell mehrere Richtungen für den Kopfbereich sehen, bevor die ganze Seite entsteht.

Entwirf drei deutlich unterschiedliche Hero-Sektionen für [UNTERNEHMEN_UND_ANGEBOT] in einer HTML-Datei. Oben eine Umschaltleiste als Segmented Control, mit der ich zwischen Variante A, B und C wechsle; der Wechsel läuft als View Transition (document.startViewTransition, Überblendung 250 ms, ohne Unterstützung sofortiger Wechsel).
Alle Varianten nutzen dieselben Texte: Überschrift „[UEBERSCHRIFT]“, Unterzeile „[UNTERZEILE]“, Button „Termin anfragen“.
Variante A, typografisch: Headline in clamp(3rem, 8vw, 7rem), keine Bilder. Das letzte Wort der Headline ist eine Wort-Walze (Text-Rotator): Es wechselt alle 2,4 s zwischen [WECHSELWOERTER] als Slot-Machine-Wechsel, das alte Wort rollt nach oben aus, das neue von unten ein, 500 ms, ease-out-expo, in einer Zeile fester Höhe mit overflow: hidden. Die Breite der Zeile passt sich weich mit an. Screenreader lesen nur die Headline mit dem ersten Wort.
Variante B, Hero Split-Layout: Text links, Bildfläche rechts (Platzhalter 4:5). Das Bild erscheint beim Laden per Clip-Path-Reveal von inset(0 0 100% 0) auf inset(0) in 900 ms und bewegt sich beim Scrollen als Parallax-Ebene leicht langsamer als die Seite, umgesetzt mit CSS scroll-driven animations (animation-timeline: view()), ohne Unterstützung statisch.
Variante C, dunkel: Gradient-Mesh im Aurora-Stil aus drei weichgezeichneten radialen Verläufen in [MARKENFARBE] und zwei Nachbartönen, die sich in 20 s langsam verschieben, darüber ein Noise-Overlay (Grain) per SVG-Filter mit 4 Prozent Deckkraft. Der Button ist ein Magnetic Button: Im Umkreis von 80 px folgt er dem Mauszeiger um höchstens 8 px und federt beim Verlassen zurück (400 ms, leichtes Nachschwingen).
In allen Varianten: Headline beim Laden als Split-Text-Animation, Wörter einzeln mit 40 ms Versatz, je 0,4em von unten und eingeblendet. Nur transform und opacity animieren. Bei prefers-reduced-motion stehen Walze, Aurora und Magnet still.
Jede Variante muss auf 375 px und 1440 px Breite gut aussehen. Nenne unter jeder Variante in einem Satz, für welche Art Unternehmen sie passt.
Vermeide Pillen-Buttons, Kursiv-Akzente und Glas-Effekte.

Platzhalter ausfüllen 5

UNTERNEHMEN_UND_ANGEBOTUEBERSCHRIFTUNTERZEILEWECHSELWOERTERMARKENFARBE

Die Wort-Walze wirkt nur, wenn die Wechselwörter etwa gleich lang sind; sonst springt die Zeile bei jedem Wechsel. Leg die drei Varianten danach Kolleginnen ohne Kommentar vor und frag, welche sie zuerst anklicken würden.

Aus: Claude Opus 5.5-Prompts

Webinar- oder Event-Seite mit Agenda

EventWebinarFormular

Beispielergebnis: Webinar- oder Event-Seite mit Agenda — Ergebnis mit Claude Opus 5.5, unverändert übernommen.

Anmeldeseite für Webinare, Kundenabende oder Messeauftritte.

Erstelle eine Anmeldeseite für die Veranstaltung „[VERANSTALTUNGSTITEL]“ als einzelne HTML-Datei.
Daten: Datum, Uhrzeit und Ort: [DATUM_ZEIT_ORT]. Agenda (exakt übernehmen): [AGENDA].
Aufbau: Hero mit Titel, Datum als gut lesbarer Block und Button „Platz sichern“, der weich zum Formular scrollt (scroll-behavior: smooth, bei prefers-reduced-motion ohne Animation). Danach die Agenda als vertikale Zeitleiste, deren Verbindungslinie sich beim Scrollen füllt (CSS scroll-driven animation mit animation-timeline: view() auf scaleY, ohne Unterstützung ist die Linie voll). Darunter „Für wen“ mit zwei kurzen Absätzen, dann Sprechende als Karten mit Initialen statt Foto und Hover-Lift (translateY(-3px), Schatten, 200 ms). Zuletzt das Formular (Vorname, Nachname, Firma, E-Mail, Einwilligung zur Datenschutzerklärung als nicht vorausgewählte Checkbox).
Auf dem Handy erscheint nach dem Hero eine Sticky-CTA-Leiste am unteren Rand (fährt in 240 ms von unten ein), die verschwindet, sobald das Formular sichtbar ist.
Zusätzlich: Button „Zum Kalender hinzufügen“, der eine .ics-Datei aus den Daten erzeugt und danach einen Toast „Termin gespeichert“ zeigt (role=status, 4 s sichtbar). Strukturierte Daten als JSON-LD vom Typ Event.
Responsive ab 320 px, Kontrast WCAG AA, Schrift mindestens 16 px, sichtbarer Fokus an allen Bedienelementen.

Platzhalter ausfüllen 3

VERANSTALTUNGSTITELDATUM_ZEIT_ORTAGENDA

Den größten Effekt auf Anmeldungen hat die Sticky-CTA-Leiste auf dem Handy, weil der Button dort sonst nach dem ersten Wischen verschwindet. Prüfe die .ics-Datei einmal in Outlook und Google Kalender, Zeitzonen sind die häufigste Fehlerquelle.

Aus: Claude Opus 5.5-Prompts

Karriereseite mit Stellenliste

RecruitingKarriereJobPosting

Beispielergebnis: Karriereseite mit Stellenliste — Ergebnis mit Claude Opus 5.5, unverändert übernommen.

Employer Branding und offene Stellen auf einer eigenen Seite bündeln.

Baue eine Karriereseite für [FIRMENNAME] als einzelne HTML-Datei.
Abschnitte: Einstieg mit einem Satz, warum man hier arbeiten sollte (Platzhalter, den wir ersetzen). Fakten in Zahlen (Mitarbeitende, Standorte, Gründungsjahr als Platzhalter) als Count-up-Zähler, die beim Erscheinen in 1.000 ms hochzählen, mit Intl.NumberFormat für deutsche Schreibweise und tabular-nums gegen Zittern. Benefits als Bento-Grid mit einfachen Linien-Icons, Kacheln mit Hover-Lift. Ablauf der Bewerbung als horizontaler Stepper in vier Schritten, auf dem Handy senkrecht. Offene Stellen als filterbare Liste.
Stellen aus diesem Array (Titel, Bereich, Ort, Arbeitszeit): [STELLEN_ALS_LISTE]. Filter nach Bereich und Ort als Filter-Chips mit Anzahl, Ergebnisanzahl wird live per aria-live angezeigt. Beim Filtern ordnen sich die Einträge per View Transition neu (document.startViewTransition, 300 ms, ohne Unterstützung sofort). Leere Ergebnisse zeigen einen Hinweis mit Initiativbewerbung.
Abschnitte erscheinen per Stagger-Reveal beim Scrollen (IntersectionObserver, 500 ms, 60 ms Versatz, ease-out-expo cubic-bezier(.16,1,.3,1)). Nur transform und opacity animieren, bei prefers-reduced-motion alles sofort zeigen.
Jede Stelle bekommt strukturierte Daten als JSON-LD vom Typ JobPosting mit den vorhandenen Feldern, fehlende Felder als Kommentar markieren.
Keine Stockfoto-Platzhalter mit Personen, keine erfundenen Zitate von Mitarbeitenden.

Platzhalter ausfüllen 2

FIRMENNAMESTELLEN_ALS_LISTE

Am meisten bringen die Filter-Chips mit Anzahl, weil Bewerbende sofort sehen, ob es in ihrem Ort etwas gibt. Für Google for Jobs braucht jede Stelle zusätzlich eine eigene URL mit Detailseite.

Aus: Claude Opus 5.5-Prompts

Feature-Seite für eine Software

SaaSFeatureProduktseite

Beispielergebnis: Feature-Seite für eine Software — Ergebnis mit Claude Opus 5.5, unverändert übernommen.

Eine neue Funktion mit Screenshots, Vorteilen und Integrationen vorstellen.

Erstelle eine Feature-Seite für die Funktion „[FUNKTIONSNAME]“ unserer Software [PRODUKTNAME] als einzelne HTML-Datei.
Aufbau: Hero mit Überschrift und einem großen Screenshot-Platzhalter in einem Browser-Mockup (16:10), der beim Laden per Mask-Reveal von unten erscheint (900 ms) und dabei von 96 auf 100 Prozent skaliert.
Danach drei Teilfunktionen als Sticky-Scroll-Sektion (Pinned Section): Links scrollen drei Textblöcke mit Überschrift, zwei Sätzen und drei Details vorbei, rechts bleibt der Screenshot stehen und wechselt per Überblendung (300 ms) zum Bild des aktiven Blocks. Eine dünne Fortschrittsleiste am Bildrand zeigt, wo man in der Sektion steht. Auf dem Handy werden daraus abwechselnd Text und Bild untereinander.
Dann ein Raster „Funktioniert mit“ für bis zu zwölf Logos als graue Platzhalter, zum Schluss ein Abschnitt mit Button „Kostenlos testen“ mit Hover-Lift.
Technik der Bewegung: Auslöser per IntersectionObserver oder CSS scroll-driven animations, Easing cubic-bezier(.16,1,.3,1), nur transform und opacity. Bei prefers-reduced-motion keine Bewegung, nur harte Bildwechsel. Bilder mit width und height gegen Layoutsprünge, loading=lazy außer dem ersten.
Gestaltung: helle Seite, ein Akzent [MARKENFARBE], Überschriften in einer markanten Grotesk. Keine Lila-Verläufe, keine Emojis.

Platzhalter ausfüllen 3

FUNKTIONSNAMEPRODUKTNAMEMARKENFARBE

Die Sticky-Scroll-Sektion trägt die Seite, sie funktioniert aber nur, wenn jeder Textblock etwa eine Bildschirmhöhe Platz bekommt. Ersetze die Platzhalter durch echte Screenshots in doppelter Auflösung, sonst wirken sie auf Retina-Bildschirmen unscharf.

Aus: Claude Opus 5.5-Prompts

Preistabelle mit Monats- und Jahrespreis

PreiseTarifeTabelle

Beispielergebnis: Preistabelle mit Monats- und Jahrespreis — Ergebnis mit Claude Opus 5.5, unverändert übernommen.

Tarife übersichtlich darstellen und Jahresverträge sichtbar machen.

Baue eine Preistabelle als HTML-Komponente mit CSS und wenig JavaScript.
Tarife (Name, Monatspreis, Jahrespreis pro Monat, Leistungen): [TARIFE].
Oben ein Umschalter Monatlich / Jährlich als Segmented Control, technisch ein echtes Radio-Button-Paar mit Tastaturbedienung. Die Markierung (Thumb) gleitet per transform in 250 ms zur gewählten Option. Beim Umschalten rollen die Preise als Ziffern-Walze auf den neuen Wert (jede Ziffer läuft vertikal, 400 ms, ease-out-expo cubic-bezier(.16,1,.3,1)), mit tabular-nums, damit nichts springt. Beim Jahrespreis steht darunter die Ersparnis in Euro pro Jahr, die du aus den Zahlen berechnest.
Der empfohlene Tarif „[EMPFOHLENER_TARIF]“ ist hervorgehoben durch einen Rahmen in [MARKENFARBE], ein Etikett „Empfohlen“ und eine leicht erhöhte Karte. Alle Karten haben Hover-Lift (translateY(-4px), größerer Schatten, 200 ms).
Unter den Karten eine vollständige Vergleichstabelle mit allen Leistungen. Tabellenkopf sticky beim Scrollen. Häkchen als Icon mit verstecktem Text „enthalten“ / „nicht enthalten“ für Screenreader. Erklärungsbedürftige Leistungen bekommen ein Info-Icon mit Tooltip, der bei Hover und Fokus erscheint und mit Escape schließt. Auf dem Handy wird die Tabelle horizontal scrollbar mit fixierter erster Spalte.
Preise im deutschen Format mit Komma, Hinweis „zzgl. MwSt.“ unter jedem Preis. Bei prefers-reduced-motion wechseln die Preise ohne Walze.

Platzhalter ausfüllen 3

TARIFEEMPFOHLENER_TARIFMARKENFARBE

Die Ziffern-Walze beim Umschalten ist das Detail, das am meisten auffällt; tabular-nums verhindert dabei, dass die Karten wackeln. Lass dir die berechnete Ersparnis im Chat ausgeben und prüfe sie, Rundungsfehler fallen Kunden sofort auf.

Aus: Claude Opus 5.5-Prompts

Mehrstufiges Anfrageformular

FormularLeadsValidierung

Beispielergebnis: Mehrstufiges Anfrageformular — Ergebnis mit Claude Opus 5.5, unverändert übernommen.

Lange Anfragen in kleine Schritte zerlegen, damit mehr Menschen sie abschicken.

Erstelle ein mehrstufiges Anfrageformular (Multi-Step-Form) für [ANGEBOT] als einzelne HTML-Datei mit reinem JavaScript.
Schritt 1: Was wird gebraucht (Auswahlkarten mit Icon, Mehrfachauswahl, gewählte Karten mit Rahmen in [MARKENFARBE] und Häkchen). Schritt 2: Umfang und Zeitrahmen (Auswahlfelder). Schritt 3: Kontakt (Name, Firma, E-Mail, Telefon optional). Schritt 4: Zusammenfassung aller Angaben mit Bearbeiten-Links pro Abschnitt.
Fortschritt: Stepper mit Schrittnamen und einer Leiste, die per scaleX in 300 ms wächst.
Schrittwechsel: Der neue Schritt gleitet 24 px von rechts herein und blendet ein (280 ms, ease-out-expo cubic-bezier(.16,1,.3,1)), zurück spiegelbildlich von links. Danach springt der Fokus auf die Überschrift des neuen Schritts.
Validierung beim Verlassen eines Felds (on blur) mit verständlichen Fehlermeldungen direkt am Feld, Fehler werden per aria-live angesagt. Enter springt zum nächsten Schritt. Der Absenden-Button zeigt während des Sendens einen Ladezustand (Spinner, deaktiviert).
Datenschutz: Pflicht-Checkbox für die Datenschutzerklärung [LINK_DATENSCHUTZ], nicht vorausgewählt. Absenden schickt die Daten als JSON per fetch an [FORMULAR_ENDPUNKT]. Danach ein Erfolgszustand mit Häkchen, das sich per stroke-dashoffset in 600 ms zeichnet.
Design schlicht, Felder mindestens 48 px hoch, sichtbarer Fokusring, gut auf dem Handy bedienbar. Nur transform und opacity animieren, bei prefers-reduced-motion ohne Gleiten.

Platzhalter ausfüllen 4

ANGEBOTMARKENFARBELINK_DATENSCHUTZFORMULAR_ENDPUNKT

Frag in Schritt 1 nach dem Bedarf; leichte erste Fragen bringen mehr Menschen zum Weiterklicken als die Kontaktdaten am Anfang. Der Fokus-Sprung auf die neue Überschrift ist das Detail, das Tastatur- und Screenreader-Nutzer am meisten merken.

Aus: Claude Opus 5.5-Prompts

FAQ-Bereich mit strukturierten Daten

FAQSEOSchema

Beispielergebnis: FAQ-Bereich mit strukturierten Daten — Ergebnis mit Claude Opus 5.5, unverändert übernommen.

Häufige Fragen für Besucher und Suchmaschinen beantworten.

Baue einen FAQ-Bereich als Akkordeon-Komponente.
Fragen und Antworten (exakt übernehmen): [FRAGEN_UND_ANTWORTEN].
Umsetzung mit details- und summary-Elementen, damit es ohne JavaScript funktioniert. Die Höhe öffnet sich weich (interpolate-size: allow-keywords und ::details-content, 250 ms, ease-out-expo cubic-bezier(.16,1,.3,1)); Browser ohne Unterstützung öffnen ohne Animation. Ein Plus-Zeichen dreht sich beim Öffnen um 45 Grad zum Kreuz, 200 ms. Nur eine Frage gleichzeitig offen (name-Attribut an details).
Optional ein Suchfeld über der Liste, das Fragen live filtert, Treffer im Text mit mark hervorhebt und die Anzahl der Treffer per aria-live ansagt.
Füge die Fragen zusätzlich als JSON-LD vom Typ FAQPage ein, Antworten als reiner Text ohne HTML.
Gestaltung passend zu [MARKENFARBE], Trennlinien statt Karten, Frage in 18 px fett, Antwort in 16 px mit Zeilenhöhe 1,6, Hover-Zustand der Frage mit dezenter Hintergrundfarbe, sichtbarer Fokusring am summary. Ein Link „Frage nicht dabei? Schreib uns“ am Ende.
Bei prefers-reduced-motion öffnet sich alles ohne Animation.

Platzhalter ausfüllen 2

FRAGEN_UND_ANTWORTENMARKENFARBE

Übernimm Fragen wörtlich aus Kundenanfragen oder dem Vertrieb, so entsprechen sie dem, was Menschen wirklich suchen. Das name-Attribut an details spart dir das ganze JavaScript für „nur eine offen“.

Aus: Claude Opus 5.5-Prompts

Referenzen- und Kundenstimmen-Sektion
ReferenzenVertrauenKarussell
Live-Demo öffnen
Abweichung vom Prompt
Die Logos sind als Inline-SVG eingebettet statt als Dateipfade, weil die Beispielseite ohne externe Bilddateien auskommen muss.
Ergebnis mit Claude Opus 5.5, unverändert übernommen.
Eingesetzte Werte (2)
KUNDENSTIMMEN
Fünf fiktive Stimmen für Nordwerk IT-Service: Henrike Kaltenbach (Geschäftsführerin, Kaltenbach Maschinenbau, Kennzahl 73 % weniger Ausfallzeit); Dennis Brandt (Leiter Logistik, Brandt Logistik); Miriam Seewald (Kaufmännische Leiterin, Seewald Kliniken, Kennzahl 4 Standorte); Stefan Hofmeister (Geschäftsführer, Hofmeister Bau); Laura Vogt (Personalleiterin, Vogt Elektrotechnik, Kennzahl 1 Tag bis zum fertigen Arbeitsplatz)
LOGO_PFADE
Sechs fiktive Logos als Inline-SVG statt Dateipfaden: Kaltenbach Maschinenbau, Lumo Software, Brandt Logistik, Hofmeister Bau, Seewald Kliniken, Vogt Elektrotechnik
Vertrauen auf Angebotsseiten mit echten Kundenstimmen und Logos aufbauen.
```
Gestalte eine Referenzen-Sektion als HTML-Komponente.
Inhalt: Kundenstimmen (Zitat, Name, Funktion, Firma): [KUNDENSTIMMEN]. Logos als Dateipfade: [LOGO_PFADE].
Oben ein Logo-Laufband (Marquee, Logo-Walze): Die Logo-Liste steht zweimal hintereinander und läuft per CSS-Animation auf translateX(-50%) in 35 s linear endlos durch, ohne sichtbaren Sprung am Schleifenende. Pausiert bei Hover und Tastaturfokus, Ränder per mask-image mit linearem Verlauf ausgeblendet. Logos in Graustufen, beim Hover in Farbe (filter, 200 ms). Die zweite Kopie bekommt aria-hidden. Bei prefers-reduced-motion steht ein statisches Raster, auf dem Handy zweizeilig.
Darunter die Zitate als Testimonial-Slider mit Scroll-Snap (scroll-snap-type: x mandatory), Pfeil-Buttons und Punkte, bedienbar mit Tastatur, kein automatisches Weiterlaufen. Die aktive Karte hat volle Deckkraft, die angeschnittenen Nachbarkarten 50 Prozent. Jedes Zitat mit Initialen-Kreis statt Foto.
Optional eine Kennzahl pro Kunde als Count-up-Zähler, nur wenn sie im Material steht. Nichts ergänzen oder umformulieren, Zitate exakt so übernehmen, wie sie hier stehen.
Technik: Buttons mit aria-label, aktuelle Position wird angesagt („2 von 5“), nur transform und opacity animieren.
```
Platzhalter ausfüllen 2
KUNDENSTIMMENLOGO_PFADE
Beim Laufband entscheidet die Geschwindigkeit: Unter 25 s pro Durchlauf liest niemand mehr die Logos. Hol dir für jede Kundenstimme eine schriftliche Freigabe, bevor sie live geht.
Aus: Claude Opus 5.5-Prompts

HTML-Newsletter-Vorlage

E-MailNewsletterVorlage

Beispielergebnis: HTML-Newsletter-Vorlage — Ergebnis mit Claude Opus 5.5, unverändert übernommen.

Eine wiederverwendbare Vorlage für Kundennewsletter, die in Outlook und Gmail hält.

Erstelle eine HTML-E-Mail-Vorlage für unseren Newsletter, kompatibel mit Outlook (Windows), Gmail und Apple Mail.
Technik: tabellenbasiertes Layout mit Ghost-Tables für Outlook, maximale Breite 600 px, Inline-Styles, keine externen Skripte, Web-Schriften nur mit Fallback Arial. Versteckter Preheader-Text direkt nach dem body. Dunkelmodus mitdenken (prefers-color-scheme und die Selektoren für Outlook.com), Logo in einer Variante, die auf dunklem Grund funktioniert. Bilder in doppelter Auflösung für Retina, mit Alt-Text und festen Maßen.
Bausteine, die ich beliebig kombinieren kann (jeweils mit HTML-Kommentar markiert): Header mit Logo [LOGO_URL], Hero-Block (Aufmacher) mit Bild und Button, zweispaltige Artikelreihe, die auf dem Handy untereinander rutscht (Stacking per Media Query), Zitat-Block, Termin-Block, Footer mit Impressum, Abmeldelink-Platzhalter und Adresse.
Farben: [MARKENFARBEN]. Buttons als Bulletproof Buttons mit VML-Fallback für Outlook, Tippfläche mindestens 44 px hoch.
Bewegung: keine CSS-Animationen, viele Clients ignorieren sie. Falls Bewegung gewünscht ist, nur als GIF im Aufmacher, dessen erstes Bild allein verständlich ist, weil Outlook nur dieses zeigt.
Fülle die Vorlage mit Platzhaltertexten in Du-Form.

Platzhalter ausfüllen 2

LOGO_URLMARKENFARBEN

Der Preheader-Text hat den größten Einfluss darauf, ob die Mail geöffnet wird, weil er im Posteingang direkt neben dem Betreff steht. Teste die Vorlage vor dem ersten Versand an Testkonten in Outlook, Gmail und Apple Mail.

Aus: Claude Opus 5.5-Prompts

KPI-Dashboard für Vertrieb oder Marketing

DashboardKPISVG

Beispielergebnis: KPI-Dashboard für Vertrieb oder Marketing — Ergebnis mit Claude Opus 5.5, unverändert übernommen.

Ein internes Dashboard als Prototyp, bevor es in ein BI-Tool geht.

Baue ein KPI-Dashboard als einzelne HTML-Datei, Diagramme als selbst gezeichnetes SVG ohne Bibliothek.
Daten: [DATEN_ALS_CSV_ODER_JSON]. Kennzahlen oben als KPI-Kacheln: [KENNZAHLEN], jeweils mit Sparkline, Veränderung zum Vormonat in Prozent, Pfeil und Farbe (Grün nur zusammen mit Pfeil, damit es auch ohne Farbsehen lesbar ist). Die Werte zählen beim Laden per Count-up in 800 ms hoch.
Darunter: Liniendiagramm Verlauf der letzten 12 Monate, das sich beim Laden per stroke-dashoffset in 900 ms zeichnet. Balkendiagramm nach [DIMENSION], die Balken wachsen per scaleY von der Grundlinie, 40 ms Versatz pro Balken. Tabelle der zehn größten Einträge, sortierbar per Klick auf die Spaltenköpfe, Tabellenkopf sticky.
Zeitraum-Filter als Segmented Control (Monat, Quartal, Jahr) aktualisiert alle Elemente; während des Wechsels zeigen die Kacheln 300 ms einen Skeleton-Loader mit Shimmer. Tooltips mit Fadenkreuz (Crosshair) beim Hover und bei Tastaturfokus auf den Datenpunkten.
Layout: Seitenleiste links, einklappbar auf Icons, auf dem Handy als Bottom-Navigation. Zahlen in deutscher Schreibweise, Tabellenziffern mit font-variant-numeric: tabular-nums.
Bewegung: Easing cubic-bezier(.16,1,.3,1), nur transform, opacity und stroke-dashoffset. Bei prefers-reduced-motion stehen alle Werte sofort da.
Vermeide Neonfarben auf Schwarz, Glas-Effekte und Monospace-Überschriften.

Platzhalter ausfüllen 3

DATEN_ALS_CSV_ODER_JSONKENNZAHLENDIMENSION

Nimm für den Prototyp anonymisierte oder gerundete Echtdaten, dann siehst du sofort, ob die Diagramme die richtigen Fragen beantworten. Die Count-up-Animation nur beim ersten Laden laufen lassen, bei jedem Filterwechsel nervt sie.

Aus: Claude Opus 5.5-Prompts

Datentabelle mit Filter und Suche

TabelleInternFilter

Beispielergebnis: Datentabelle mit Filter und Suche — Ergebnis mit Claude Opus 5.5, unverändert übernommen.

Interne Listen wie Kunden, Aufträge oder Geräte übersichtlich bearbeiten.

Erstelle eine Datentabelle (Data Table) als HTML-Komponente mit reinem JavaScript für [DATENART].
Spalten: [SPALTEN]. Erzeuge 60 realistische Beispieleinträge mit erfundenen Firmennamen, keine echten Firmen oder Personen.
Funktionen: Volltextsuche über alle Spalten mit Hervorhebung des Treffers (mark), Filter je Status als Filter-Chips mit Badge für die Anzahl, Sortierung per Klick auf den Spaltenkopf (aria-sort setzen, Pfeil dreht sich in 150 ms), Pagination mit 20 Einträgen pro Seite, Tabellenkopf sticky.
Auswahl mehrerer Zeilen per Checkbox: Sobald etwas ausgewählt ist, fährt von unten eine Bulk-Action-Bar ein (translateY, 220 ms, ease-out-expo cubic-bezier(.16,1,.3,1)) mit Anzahl und „Exportieren als CSV“. Nach dem Export erscheint ein Toast mit der Zahl der exportierten Zeilen (role=status, 4 s).
Beim ersten Laden 500 ms Skeleton-Loader in Zeilenform. Leerer Zustand (Empty State) mit Hinweis und Button „Filter zurücksetzen“. Auf dem Handy wird jede Zeile zu einer Karte, die wichtigsten zwei Spalten oben.
Gestaltung ruhig: Zeilenhöhe 48 px, Statusfarben gedämpft, Hover-Zustand der Zeile dezent, Fokusring an jeder bedienbaren Zelle. Bei prefers-reduced-motion keine Fahrbewegung.

Platzhalter ausfüllen 2

DATENARTSPALTEN

Gib die echten Spaltennamen aus deinem System vor, dann lässt sich die Komponente später leichter an die Datenbank anschließen. Die Bulk-Action-Bar unten im Bild ist der Teil, den Teams im Alltag am meisten nutzen.

Aus: Claude Opus 5.5-Prompts

Interaktiver ROI-Rechner

RechnerROIInteraktiv

Beispielergebnis: Interaktiver ROI-Rechner — Ergebnis mit Claude Opus 5.5, unverändert übernommen.

Interessenten auf der Website selbst ausrechnen lassen, was sich lohnt.

Baue einen ROI-Rechner als einzelne HTML-Datei.
Eingaben als Range-Slider mit gekoppelten Zahlenfeldern: [EINGABEN_MIT_SPANNE]. Die Spur des Reglers füllt sich bis zum Thumb in [MARKENFARBE], der Thumb wächst beim Ziehen und bei Fokus leicht (scale 1,15, 120 ms).
Rechenweg: [FORMEL]. Ergebnis: Ersparnis pro Jahr in Euro, Amortisation in Monaten und ein Balkendiagramm Kosten heute gegen Kosten mit Lösung, alles live bei jeder Änderung. Die Ergebniszahl läuft per Count-up in 300 ms auf den neuen Wert (tabular-nums), die Balken ändern ihre Länge per scaleX mit ease-out-expo cubic-bezier(.16,1,.3,1).
Unter dem Ergebnis ein Akkordeon „So rechnen wir“, das die Formel mit den aktuellen Werten ausschreibt. Ein Button „Ergebnis per Link teilen“ schreibt alle Werte in die URL-Parameter, kopiert den Link in die Zwischenablage und bestätigt das mit einem Toast „Link kopiert“. Beim Laden werden die Werte aus der URL gelesen.
Erklärungsbedürftige Eingaben bekommen einen Tooltip, erreichbar per Hover und Fokus.
Barrierearm: jedes Eingabefeld mit Label, Ergebnis per aria-live angesagt (erst nach 500 ms Ruhe, damit es beim Ziehen nicht dauernd spricht), Regler per Pfeiltasten bedienbar. Bei prefers-reduced-motion springen Zahlen und Balken direkt.
Hinweis unter dem Rechner: „Beispielrechnung, deine Werte können abweichen.“

Platzhalter ausfüllen 3

EINGABEN_MIT_SPANNEMARKENFARBEFORMEL

Prüfe die Formel mit drei Rechenbeispielen von Hand, bevor der Rechner online geht. Die Verzögerung bei aria-live ist das Detail, das Screenreader-Nutzer den Rechner überhaupt bedienen lässt.

Aus: Claude Opus 5.5-Prompts

Projektboard mit Drag and Drop

KanbanProjektPrototyp

Beispielergebnis: Projektboard mit Drag and Drop — Ergebnis mit Claude Opus 5.5, unverändert übernommen.

Ein einfaches Kanban-Board als internes Werkzeug oder Prototyp.

Erstelle ein Kanban-Board als einzelne HTML-Datei mit reinem JavaScript.
Spalten: [SPALTEN]. Karten mit Titel, verantwortlicher Person als Initialen-Avatar, Fälligkeitsdatum und Priorität als Badge.
Drag and Drop: Eine aufgenommene Karte hebt sich an (scale 1,03, 1,5 Grad gedreht, stärkerer Schatten, 150 ms), an der Zielstelle erscheint ein gestrichelter Platzhalter. Die übrigen Karten rücken per FLIP-Animation in 200 ms nach, statt zu springen. Zusätzlich per Tastatur (Leertaste aufnehmen, Pfeiltasten bewegen, Leertaste ablegen, jeder Schritt per aria-live angesagt).
Neue Karte per Button in jeder Spalte, Bearbeiten im dialog-Element (Hintergrund abgedunkelt, Dialog blendet mit 8 px Weg in 200 ms ein, Fokus bleibt im Dialog, Escape schließt). Löschen zeigt einen Toast mit „Rückgängig“ für 5 s. Überfällige Karten bekommen einen roten Rand plus Text „überfällig“.
Speicherung im localStorage, Export und Import als JSON-Datei.
Auf dem Handy werden die Spalten zu Tabs mit gleitender Markierung. Erzeuge 12 Beispielkarten zum Thema [PROJEKTTHEMA].
Easing für alles cubic-bezier(.16,1,.3,1), nur transform und opacity, bei prefers-reduced-motion ohne Bewegung.

Platzhalter ausfüllen 2

SPALTENPROJEKTTHEMA

Die FLIP-Animation beim Nachrücken macht den Unterschied zwischen „fühlt sich an wie Trello“ und „fühlt sich an wie ein Formular“. Für mehrere Nutzer brauchst du später ein Backend; localStorage speichert nur im eigenen Browser.

Aus: Claude Opus 5.5-Prompts

Design-Tokens aus Markenfarben ableiten

Design-TokensFarbenDark Mode

Beispielergebnis: Design-Tokens aus Markenfarben ableiten — Ergebnis mit Claude Opus 5.5, unverändert übernommen.

Aus ein paar Markenfarben ein vollständiges, prüfbares Farbsystem für die Website machen.

Leite aus unseren Markenfarben ein Token-System ab. Ausgangswerte: Primärfarbe [PRIMAERFARBE], Sekundärfarbe [SEKUNDAERFARBE], Schriften [SCHRIFTEN].
Liefere:
1. CSS-Variablen für Farbskalen in 10 Abstufungen je Farbe plus Neutraltöne, berechnet in OKLCH.
2. Semantische Tokens (Hintergrund, Fläche, Text, Text gedämpft, Rahmen, Akzent, Erfolg, Warnung, Fehler, Fokusring) für hellen und dunklen Modus.
3. Typografie-Skala mit 7 Stufen in rem, fluid per clamp, dazu Zeilenhöhen und Laufweiten pro Stufe.
4. Abstände auf 4-px-Raster, Radien, Schatten als Elevation in vier Stufen (Ruhe, Hover-Lift, Dropdown, Dialog).
5. Motion-Tokens: Dauern (schnell 120 ms, normal 200 ms, langsam 400 ms, Reveal 600 ms), Easings (ease-out-expo cubic-bezier(.16,1,.3,1), ease-in-out für Wege hin und zurück, eine Feder-Kurve per linear()), Versatz für Stagger-Reveals. Unter prefers-reduced-motion setzen sich alle Dauern auf 0,01 ms.
6. z-index-Skala (Inhalt, Sticky-Header, Dropdown, Off-Canvas, Dialog, Toast).
Prüfe jede Kombination Text auf Hintergrund gegen WCAG AA und liste alle Paare mit Kontrastwert in einer Tabelle. Paare unter 4,5:1 für Fließtext markierst du und schlägst einen Ersatz vor.
Zusätzlich eine HTML-Vorschauseite, die alle Tokens zeigt, Motion-Tokens als kleine Demo-Kästen, die per Klick ihre Bewegung abspielen, und per Umschalter zwischen hell und dunkel wechselt.

Platzhalter ausfüllen 3

PRIMAERFARBESEKUNDAERFARBESCHRIFTEN

Die Motion-Tokens vergessen die meisten; ohne sie hat am Ende jede Komponente ein anderes Tempo. Lass die Markenfarbe selbst unverändert und passe nur die abgeleiteten Stufen an, sonst weicht die Website vom Logo ab.

Aus: Claude Opus 5.5-Prompts

Komponenten-Styleguide als Referenzseite

KomponentenStyleguideBarrierefreiheit

Beispielergebnis: Komponenten-Styleguide als Referenzseite — Ergebnis mit Claude Opus 5.5, unverändert übernommen.

Buttons, Felder und Karten einmal sauber definieren, damit alle Seiten gleich aussehen.

Baue eine Styleguide-Seite als einzelne HTML-Datei, die auf diesen Tokens aufbaut: [TOKENS_ALS_CSS].
Komponenten mit allen Zuständen (normal, Hover, Fokus, aktiv, deaktiviert, Fehler, Laden): Buttons in drei Varianten und zwei Größen mit Hover-Lift, Textfeld mit Floating Label, Textbereich, Auswahlfeld, Checkbox, Radio, Toggle-Schalter, Karte, Hinweisbox in vier Tönen, Tabs mit gleitender Markierung (Indicator), Akkordeon, Tooltip, Breadcrumb, Seitennavigation, Off-Canvas-Navigation, Toast-Meldung, Modal-Dialog, Skeleton-Loader.
Zu jeder Komponente: Live-Beispiel, darunter der HTML-Code in einem kopierbaren Block, ein Satz, wann man sie verwendet, und eine Zeile Mikro-Interaktion mit Dauer, Easing und Auslöser, zum Beispiel: Toast fährt 16 px von unten ein, 240 ms, ease-out-expo, verschwindet nach 4 s in 160 ms.
Anforderungen: Fokus immer sichtbar per :focus-visible mit 2 px Ring in [FOKUSFARBE], Tastaturbedienung für Tabs, Akkordeon, Tooltip, Dialog, Off-Canvas und Toast nach WAI-ARIA Authoring Practices, Ecken, Abstände, Dauern und Easings nur aus den Tokens. Nur transform und opacity animieren, bei prefers-reduced-motion nur Überblendungen.
Keine Pillen-Buttons, keine Monospace-Labels.

Platzhalter ausfüllen 2

TOKENS_ALS_CSSFOKUSFARBE

Die Zeile mit Dauer und Easing pro Komponente ist das, was Entwickler später am meisten nachschlagen. Speichere die Seite im Projekt und gib sie bei jeder neuen Seite als Referenz mit, dann bleiben Komponenten einheitlich.

Aus: Claude Opus 5.5-Prompts

Navigation und Footer, responsive

NavigationFooterMobil

Beispielergebnis: Navigation und Footer, responsive — Ergebnis mit Claude Opus 5.5, unverändert übernommen.

Kopf- und Fußbereich für eine Unternehmenswebsite mit vielen Unterseiten.

Erstelle Header-Navigation und Footer für unsere Website als HTML und CSS mit wenig JavaScript.
Menüstruktur: [MENUESTRUKTUR]. Logo: [LOGO_PFAD]. Rechts im Header ein Button „[CTA_TEXT]“.
Desktop: Hauptpunkte mit großen Untermenüs als Mega-Menü (mehrspaltiges Panel, rechts eine Teaser-Karte), öffnen per Klick und per Tastatur, schließen mit Escape und bei Klick außerhalb. Das Panel blendet mit 8 px Weg in 200 ms ein, ease-out-expo cubic-bezier(.16,1,.3,1).
Sticky Header: Beim Herunterscrollen wird er kompakter (Shrinking Header, Höhe 88 auf 64 px, Logo verkleinert per transform), versteckt sich beim weiteren Herunterscrollen und kommt beim Hochscrollen sofort zurück (Hide on Scroll). Am unteren Rand eine 2 px Scroll-Progress-Bar in [MARKENFARBE], umgesetzt mit animation-timeline: scroll() auf scaleX, ohne Unterstützung per requestAnimationFrame.
Mobil (unter 900 px): Hamburger-Button mit aria-expanded, dessen drei Linien sich in 250 ms zu einem X verwandeln. Off-Canvas-Navigation fährt von rechts ein (translateX, 320 ms), Untermenüs als Akkordeon, Fokus bleibt im Menü gefangen, solange es offen ist, Scrollen der Seite dahinter gesperrt.
Footer: vier Spalten (Unternehmen, Leistungen, Ressourcen, Kontakt), auf dem Handy als Akkordeon. Unten Impressum, Datenschutz, Cookie-Einstellungen.
Skip-Link „Zum Inhalt springen“ als erstes Element. Der Sticky Header darf fokussierte Elemente nie verdecken (scroll-padding-top). Bei prefers-reduced-motion nur Überblendungen.

Platzhalter ausfüllen 4

MENUESTRUKTURLOGO_PFADCTA_TEXTMARKENFARBE

Teste das mobile Menü einmal nur mit Tastatur und einmal mit VoiceOver, dort fallen die meisten Fehler auf. scroll-padding-top ist die eine Zeile, die verhindert, dass der Sticky Header Sprungziele und Fokus verdeckt.

Aus: Claude Opus 5.5-Prompts

Screenshot oder Skizze in HTML umsetzen

ScreenshotFigmaPrototyp

Einen Entwurf aus Figma, PowerPoint oder Papier schnell als klickbare Seite haben.

Setze den angehängten Entwurf [SCREENSHOT_ODER_SKIZZE] als einzelne HTML-Datei um.
Vorgehen: Beschreibe zuerst in Stichpunkten, was du im Bild erkennst. Benenne jeden Bereich mit dem gängigen Musternamen (zum Beispiel Hero Split-Layout, Bento-Grid, Feature-Raster, Logo-Laufband, Testimonial-Slider, Akkordeon, Sticky-CTA), dazu Raster (Spaltenzahl, Gutter, Containerbreite), Abstände und Schriftgrößen. Danach baue die Seite.
Anforderungen: Abstände und Größen möglichst nah am Entwurf, Farben als CSS-Variablen. Für Bilder im Entwurf graue Platzhalter im selben Seitenverhältnis. Texte übernehmen, wo lesbar, sonst als Platzhalter markieren.
Interaktion: Ergänze Hover-, Fokus- und aktive Zustände für alle Bedienelemente. Animationen nur dort, wo der Entwurf sie anmerkt; schlage weitere in einer getrennten Liste vor (Element, Animation, Dauer, Auslöser), ohne sie einzubauen.
Der Entwurf zeigt nur [DESKTOP_ODER_MOBIL]; leite die fehlende Ansicht sinnvoll ab und erkläre in drei Sätzen, was du dabei entschieden hast.
Am Ende: Liste der Stellen, an denen du unsicher warst.

Platzhalter ausfüllen 2

SCREENSHOT_ODER_SKIZZEDESKTOP_ODER_MOBIL

Die Musternamen in der Analyse sind dein Kontrollpunkt: Steht dort „Karussell“, wo du ein Raster gemeint hast, korrigierst du das, bevor Code entsteht. Exportiere den Entwurf in hoher Auflösung, Opus 5.5 erkennt Abstände dann deutlich genauer.

Aus: Claude Opus 5.5-Prompts

Barrierefreiheit prüfen und beheben

BarrierefreiheitWCAGAudit

Bestehende Seiten vor dem Barrierefreiheitsstärkungsgesetz-Check verbessern.

Prüfe den folgenden HTML- und CSS-Code auf Barrierefreiheit nach WCAG 2.2 Stufe AA: [CODE].
Gehe diese Punkte durch: Überschriften-Hierarchie, Alternativtexte, Kontraste, Fokusreihenfolge und sichtbarer Fokus, Bedienung per Tastatur, Formular-Labels und Fehlermeldungen, ARIA nur wo nötig, Zielgrößen mindestens 24 × 24 px, Sprache des Dokuments.
Achte besonders auf diese Muster: Logo-Laufband, Testimonial-Slider und Wort-Walzen brauchen eine Pause-Möglichkeit, wenn sie länger als 5 s automatisch laufen (2.2.2). Sticky Header und Cookie-Banner dürfen den Fokus nicht verdecken (2.4.11). Tooltips und Mega-Menüs müssen per Fokus erreichbar, mit Escape schließbar und beim Überfahren stabil sein (1.4.13). Off-Canvas-Navigation und Modal-Dialog halten den Fokus und geben ihn beim Schließen zurück. Parallax, Scroll-Reveals und Hintergrund-Loops respektieren prefers-reduced-motion.
Ausgabe: Tabelle mit Fundstelle, WCAG-Kriterium, Problem und Schweregrad (hoch, mittel, gering). Danach den korrigierten Code vollständig, Änderungen mit HTML-Kommentar markiert.
Was sich per Codeprüfung nicht klären lässt (etwa die Qualität von Alternativtexten), listest du getrennt als Aufgabe für einen manuellen Test.

Platzhalter ausfüllen 1

CODE

Die meisten neuen Verstöße stecken in bewegten Mustern wie Laufband und Slider, deshalb lohnt sich der eigene Prüfblock dafür. Ergänze die Prüfung mit einem automatischen Test wie axe DevTools und einem kurzen Test mit Screenreader.

Aus: Claude Opus 5.5-Prompts

Responsive-Fehler finden und reparieren

ResponsiveMobilBugfix

Eine Seite, die auf dem Handy bricht, gezielt in Ordnung bringen.

Diese Seite bricht auf kleinen Bildschirmen. Code: [CODE]. Screenshots der fehlerhaften Ansichten: [SCREENSHOTS].
Finde die Ursachen für horizontales Scrollen, abgeschnittene Texte, überlappende Elemente und zu kleine Tippflächen. Prüfe gedanklich die Breiten 320, 375, 768, 1024 und 1440 px.
Typische Verursacher, die du gezielt prüfst: Logo-Laufband und Horizontal-Scroll-Galerie ohne overflow-x: clip am Wrapper, Hero mit height: 100vh (auf dem Handy 100dvh), Sticky-Scroll-Sektionen, die mobil nicht entpinnt werden, Mega-Menüs, die nur per Hover öffnen, Bento-Grids mit festen Spaltenzahlen, Off-Canvas-Navigation, die geschlossen trotzdem Breite belegt.
Regeln für die Reparatur: mobile Basis, Breakpoints nur wo das Layout es verlangt (Container Queries, wo eine Komponente an verschiedenen Stellen sitzt), keine festen Breiten in px für Container, lange Wörter mit overflow-wrap, Bilder mit max-width 100 Prozent, Tabellen in einem scrollbaren Wrapper, Tippflächen mindestens 44 × 44 px.
Ausgabe: Liste der Ursachen mit Zeilenangabe, dann den korrigierten Code. Ändere nichts am Design, was nicht zur Reparatur nötig ist.

Platzhalter ausfüllen 2

CODESCREENSHOTS

Am häufigsten ist es ein Laufband oder ein verschobenes Off-Canvas-Menü, das unsichtbar Breite belegt. Teste danach im Browser mit Geräte-Emulation, schmale 320 px decken Fehler auf, die bei 375 px verborgen bleiben.

Aus: Claude Opus 5.5-Prompts

Redesign einer bestehenden Seite

RedesignRelaunchGestaltung

Eine veraltete Unternehmensseite modernisieren und Inhalte behalten.

Gestalte diese bestehende Seite neu: [URL_ODER_CODE]. Screenshot der aktuellen Fassung im Anhang.
Inhalte, Reihenfolge der Botschaften und Links bleiben erhalten. Neu sind Layout, Typografie, Abstände, Bildbehandlung und Bewegung.
Richtung: [GESTALTUNGSRICHTUNG]. Markenfarben: [MARKENFARBEN], als CSS-Variablen.
Lege für jeden Abschnitt fest, welches Muster er bekommt, und benenne es (zum Beispiel Hero Split-Layout, Bento-Grid, Sticky-Scroll-Sektion, Logo-Laufband, Testimonial-Slider mit Scroll-Snap, Akkordeon).
Bewegungskonzept: höchstens zwei Animationsarten auf der ganzen Seite (etwa Stagger-Reveal beim Scrollen und Hover-Lift), Dauern zwischen 150 und 600 ms, ein Easing für alles (cubic-bezier(.16,1,.3,1)), Auslöser per IntersectionObserver, nur transform und opacity, prefers-reduced-motion respektiert.
Vermeide diese Muster: cremefarbener Hintergrund, kursive Akzentwörter in Überschriften, nummerierte Abschnitte „01/02/03“, Monospace-Labels, Pillen-Buttons, Glas-Effekte, Lila-Blau-Verläufe, Emojis in Überschriften.
Liefere die neue Seite als einzelne HTML-Datei und eine kurze Liste: welches Muster jeder Abschnitt bekommen hat und warum, und welche Inhalte aus deiner Sicht fehlen.

Platzhalter ausfüllen 3

URL_ODER_CODEGESTALTUNGSRICHTUNGMARKENFARBEN

Die Begrenzung auf zwei Animationsarten und ein Easing wirkt hochwertiger als jeder einzelne Effekt. Schau dir den ersten Entwurf an und ergänze die Ausschlussliste um jedes Muster, das dich stört.

Aus: Claude Opus 5.5-Prompts

Seite für Core Web Vitals optimieren

PerformanceCore Web VitalsSEO

Ladezeit und Layout-Stabilität einer Landingpage verbessern, etwa für bessere Anzeigenqualität.

Optimiere diese Seite für die Core Web Vitals (LCP, INP, CLS): [CODE]. Lighthouse-Bericht oder Messwerte: [MESSWERTE].
Prüfe: größtes Element im sichtbaren Bereich und wie es schneller lädt (preload, fetchpriority, Bildformat AVIF oder WebP mit srcset), Layoutsprünge durch Bilder ohne Maße, Schriften (font-display, Teilmengen, lokal hosten), blockierendes CSS und JavaScript, Drittanbieter-Skripte, lange Tasks bei Interaktionen.
Prüfe die Animationen gesondert: Startet das LCP-Element (Hero-Headline oder Hero-Bild) mit opacity: 0 für eine Reveal-Animation, verzögert das den LCP; es soll sofort sichtbar sein. Animiert werden nur transform und opacity, keine Layout-Eigenschaften wie top, width oder height. scroll-Listener ersetzt du durch IntersectionObserver oder CSS scroll-driven animations. Laufband, Aurora-Hintergrund und Canvas-Loops pausieren außerhalb des Sichtbereichs. will-change nur gezielt und zeitweise.
Ausgabe: Liste der Maßnahmen nach erwartetem Effekt sortiert, jeweils mit Begründung aus dem Code. Danach der geänderte Code. Am Design ändert sich nichts.
Was nur im Server oder CDN lösbar ist (Caching, Komprimierung), nennst du getrennt.

Platzhalter ausfüllen 2

CODEMESSWERTE

Oft liegt der größte Gewinn in einer einzigen Zeile: dem Fade-in auf der Hero-Headline, der den LCP um die Dauer der Animation nach hinten schiebt. Miss vorher und nachher mit denselben Bedingungen, am besten mit Felddaten aus der Search Console.

Aus: Claude Opus 5.5-Prompts