Prompt für drei Hero-Richtungen in Codex

Bitte Codex um drei Hero-Bereiche in 1440×900, editorial, dunkel und weich, mit identischem Text, damit du nur den visuellen Stil vergleichst.

Gestalte den Hero-Bereich in drei Richtungen, jede als eigenständige HTML-Datei in 1440×900 mit Inline-CSS und Systemschriften:
A – warm und editorial, mit einer Serifen-Überschrift
B – kräftig und dunkel, mit einer einzigen leuchtenden Akzentfarbe und großen Zahlen
C – weich und freundlich, mit abgerundeten Karten und einem hellen Verlauf
Verwende in allen dreien dieselbe Überschrift, dieselbe Unterzeile und denselben Call-to-Action. Zeichne Produktvisuals mit HTML und CSS, keine externen Bilder.

Funktioniert mit

Codex, ChatGPT

Aus der Sammlung

Landingpages

Über diesen Prompt

Codex schreibt drei eigenständige HTML-Dateien, eine pro Richtung: A ist warm und editorial mit einer Serifen-Überschrift, B ist dunkel mit einer einzigen leuchtenden Akzentfarbe und großen Zahlen, C ist weich mit abgerundeten Karten und einem hellen Verlauf. Überschrift, Unterzeile und Button sind in allen dreien gleich, die einzige Variable ist also der visuelle Ansatz, und genau über den entscheidest du in dieser Phase.

Die drei Stilzeilen schreibst du am besten um. Schließt deine Marke eine dunkle Seite ohnehin aus, ersetze B durch etwas anderes, das sich wirklich unterscheidet, etwa ein dichtes, datenlastiges Layout, statt durch eine zweite helle Variante. Behalte die Größe 1440×900 und die Vorgabe ohne externe Bilder: Mit HTML und CSS gezeichnete Produktvisuals bleiben editierbar und gehen nicht kaputt, wenn die Datei umzieht.

Beurteile die Richtungen gemeinsam statt in einem Browser-Tab nach dem anderen. Auf einem Codex-Design-Canvas liegen die drei Dateien als Live-HTML nebeneinander, und Unterschiede in Hierarchie und Dichte fallen auf einen Blick auf. Notiere den Buchstaben, den du wählst, oder die Teile, die du kombinieren willst, denn der nächste Prompt für die ganze Seite bezieht sich mit dem Buchstaben auf die Richtung.

Weitere Prompts aus dieser Sammlung

• Prompt für die komplette Landingpage in CodexBaue die gewählte Hero-Richtung zur kompletten Landingpage aus, mit acht benannten Abschnitten in fester Reihenfolge, damit Codex keine Füllinhalte ergänzt.
• Prompt für den Feature-Bereich einer Landingpage mit echtem InhaltSchreib die Features einer Landingpage neu: je mit konkreter Überschrift, bestimmtem Detail oder einer Zahl und kleinem HTML-Visual statt Icon.
• Prompt für den Preisbereich einer Landingpage in CodexGestalte einen Preisbereich mit deinen Plänen, hervorgehobenem empfohlenem Plan, Umschalter monatlich/jährlich und einer Zeile zum häufigsten Einwand.
• Prompt für den Mobile-Check einer Landingpage in CodexLass Codex eine 390px breite Version deiner Landingpage bauen, mit Call-to-Action ohne Scrollen, 44px großen Tap-Zielen und einer Liste der Weglassungen.
• Prompt, damit eine KI-Landingpage weniger generisch aussiehtEin Review-Prompt: Codex findet, was eine Seite KI-generiert wirken lässt, von zentrierten Layouts bis zu vagen Texten, und behebt die fünf größten Probleme.
• Prompt für Landingpage-HTML zu Produktionscode in CodexBaue die abgenommene HTML-Landingpage in deinem echten Stack nach, etwa Next.js und Tailwind, mit deinen Komponenten und unverändertem Text.