YouMind
ÜbersichtAnwendungsfälleFähigkeitenPromptsPreiseBlogUpdates

Reproduktion einer Landingpage von Bild zu Next.js

Ein komplexer Workflow zur Reproduktion einer Landingpage anhand eines Bildes unter Verwendung von Next.js, Bildgenerierung für Assets und Playwright zur Validierung.

Eingabe
/goal Implementieren Sie die LP im angehängten Bild mit Next.js, bis die Reproduktionsgenauigkeit über 95 % liegt. Für Teile, die schwer anders als durch Bilder zu reproduzieren sind, erstellen Sie diese durch entsprechende Generierung von Materialien mit image_gen. - Icons und Bilder sollten so weit wie möglich dem Originalbild entsprechen. Schneiden Sie relevante Teile aus dem Originalbild aus und übergeben Sie diese als Referenzbilder an image_gen (verwenden Sie codex exec -i, um Referenzbilder zu übergeben, und geben Sie den Prompt über die Standardeingabe ein). - Stellen Sie die Responsivität sicher. Überprüfen Sie Breiten von 375 bis 1440 px und stellen Sie sicher, dass kein horizontales Scrollen, keine Überlappung von Elementen oder Abschneiden auftritt (verwenden Sie w-full max-w-[Npx] für Karten mit fester Breite und absolute Positionierung nur für große Breiten). - Führen Sie eine Schleife aus Playwright-Screenshots durch -> mit dem Original vergleichen -> korrigieren. Schließen Sie den Vorgang ab, sobald npm run build erfolgreich durchläuft.

So verwendest du diesen Prompt

  1. 1

    Kopiere den vollständigen Prompt oben.

  2. 2

    Öffne eine Plattform, die claude-fable-5 unterstützt, etwa YouMind, und füge den Prompt ein.

  3. 3

    Tausche Motiv, Stil oder Details nach deiner Idee aus und generiere dann.

Dies ist ein kostenloser AI-Prompt aus der Prompt-Bibliothek von YouMind. Entdecke Tausende weitere webseite-Prompts, alle frei zum Kopieren und Anpassen.

Mehr webseite-Prompts entdecken

Mehr von claude-fable-5

Claude Code Fable 5 Sitzungsanweisung

Claude Code Fable 5 Sitzungsanweisung

@オカムラ | 株式会社メイク・ア・チェンジ CEO
Python-Code zur Ampelsimulation

Python-Code zur Ampelsimulation

@Diego | AI 🚀 - e/acc
Hochgeschwindigkeits-Kampfjet-Webanimation

Hochgeschwindigkeits-Kampfjet-Webanimation

@Musolsol.𝟎𝐱𝐔
Futuristisches KI-Modell-Landingpage

Futuristisches KI-Modell-Landingpage

@AYi
Browser-Synthesizer mit Web Audio API

Browser-Synthesizer mit Web Audio API

@Alex Prompter
BMW M4 CS SVG-Illustration

BMW M4 CS SVG-Illustration

@Harshith

Mehr entdecken

KI-Bibliothek

KI-Prompt-Suche

Lass die KI Zehntausende Prompts durchsuchen. Filtere nach Modell, Zeitraum und Keywords und sortiere nach Engagement — Aufrufe, Lesezeichen, Reposts und mehr.

Kostenlos testen
Vision-Tools

Bild zu Prompt

Verwandeln Sie jedes Foto in einen detaillierten AI-Bild-Prompt. Der kostenlose Image-to-Prompt-Konverter analysiert Komposition, Stil und Licht, damit Sie jeden Look in Sekunden nachbauen können.

Bild in Prompt umwandeln

Für Kreative gebaut. Für immer kostenlos.

YouMind ist der KI-Kreativ-Copilot, dem Kreative weltweit vertrauen. Jeder Prompt hier ist kuratiert, damit du schneller und besser gestalten kannst.

Mehr Prompts entdecken

© 2026 MIND MOTOR PTE. LTD.

Prompts
Nano Banana Pro EingabenGPT Image 2 EingabenSeedance 2.0 EingabenGPT Image 1.5 EingabenSeedream 4.5 EingabenGemini 3 Pro Eingaben
Ressourcen
NotebookLM-AlternativenGPT Image 2 Folien𝕏 virale Artikel verfolgenNano Banana 2 vs. ProBild zu PromptLenny Career CoachABTI Persönlichkeitstest
Produkt
SkillsErweiterungAppPreiseBlogsUpdates
Unternehmen
Kontaktieren Sie uns
DatenschutzerklärungNutzungsbedingungen