Prompt für den Mobile-Check einer Landingpage in Codex

Lass Codex eine 390px breite Version deiner Landingpage bauen, mit Call-to-Action ohne Scrollen, 44px großen Tap-Zielen und einer Liste der Weglassungen.

Erstelle eine 390px breite Version dieser Seite als separate Datei. Staple die Abschnitte in einer sinnvollen Reihenfolge, halte den Call-to-Action auf dem ersten Screen ohne Scrollen sichtbar, mach jedes Tap-Ziel mindestens 44px hoch und sag mir, welche Desktop-Elemente du weggelassen oder vereinfacht hast und warum.

Funktioniert mit

Codex, ChatGPT

Aus der Sammlung

Landingpages

Über diesen Prompt

Codex erstellt eine separate, 390px breite Datei der Seite, stapelt die Abschnitte für ein Smartphone neu, hält den Call-to-Action auf dem ersten Screen ohne Scrollen sichtbar und macht jedes Tap-Ziel mindestens 44px hoch. Außerdem listet es die Desktop-Elemente auf, die es weggelassen oder vereinfacht hat, mit je einer Begründung, und diese Liste ist der Teil, den du am ehesten lesen solltest.

In dieser Liste verstecken sich Designentscheidungen: ein dreispaltiges Feature-Raster, das zu einem langen Scroll wurde, eine Logoleiste, die auf vier Logos gekürzt wurde, ein Preis-Umschalter, der nicht mehr passt. Nimm jeden Punkt an, lehne ihn ab oder überarbeite ihn, statt die Datei unbesehen zu übernehmen. Kommen die meisten deiner Besucher von Android, ändere 390px auf 412px, eine typische Android-Breite.

Mach das, bevor du das Desktop-Layout verfeinerst, nicht danach. Ein Desktop-Detail, das auf dem Smartphone nicht überlebt, findest du besser früh, und weil die mobile Version eine separate Datei ist, bleibt die Desktop-Seite unberührt, bis du entscheidest, welche Änderungen du zurückübernimmst.

Weitere Prompts aus dieser Sammlung

• 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.
• 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.