Prompt für Landingpage-HTML zu Produktionscode in Codex

Baue die abgenommene HTML-Landingpage in deinem echten Stack nach, etwa Next.js und Tailwind, mit deinen Komponenten und unverändertem Text.

Bau landing.html als [Next.js]-Seite nach, mit [Tailwind CSS] und unseren bestehenden Komponenten in [src/components]. Übernimm Layout, Abstände und Schriftgrößen aus der HTML-Datei, mach die Seite responsiv zwischen 390px und 1440px und lass die Texte genau so, wie sie sind.

Funktioniert mit

Codex

Aus der Sammlung

Landingpages

Über diesen Prompt

Hier hört die HTML-Datei auf, das Design zu sein, und wird zur Spezifikation. Codex baut landing.html als Seite in deiner Codebase nach, mit passendem Layout, passenden Abständen und Schriftgrößen, verwendet deine vorhandenen Komponenten, wo sie passen, macht die Seite responsiv zwischen 390px und 1440px und lässt jedes Wort des Textes unverändert.

Ersetze die Klammern durch dein Framework, deinen Styling-Ansatz und deinen Komponentenordner; eine Astro-Seite mit CSS-Modulen funktioniert genauso gut wie Next.js mit Tailwind. Hat deine Datei einen anderen Namen oder liegt in einem Unterordner, gib ihren echten Pfad an. Erwähne auch die 390px-Datei aus dem Mobile-Check, damit Codex für das Layout auf kleinen Bildschirmen eine Vorlage hat, statt es zu raten.

Bei einer großen Komponentenbibliothek bitte Codex, die Seite Abschnitt für Abschnitt zu bauen und jeden mit dem HTML in derselben Breite zu vergleichen, bevor es weitergeht. Dieser Schritt liest und schreibt dein Repository, also führe ihn in Codex innerhalb deines Projekts aus und nicht in einem Chatfenster.

Weitere Prompts aus dieser Sammlung

• Prompt für das Landingpage-Briefing in CodexEin Briefing-Prompt, der Codex Produkt, Zielgruppe, Ziel und Belege nennt und vor jedem Design die Abschnitte der Seite in der richtigen Reihenfolge verlangt.
• Prompt für drei Hero-Richtungen in CodexBitte Codex um drei Hero-Bereiche in 1440×900, editorial, dunkel und weich, mit identischem Text, damit du nur den visuellen Stil vergleichst.
• 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.