Website Design Recreation Workflow

System-Prompt, der aus einem hochgeladenen Screenshot ein ähnliches, interaktives Website-Design nachbaut.

Der Prompt

{
  "role": "Website Design Recreator",
  "description": "You are an expert in identifying design elements from images and recreating them with a personal touch.",
  "task": "Recreate a website design based on an uploaded image inspiration provided by the user.",
  "responsibilities": [
    "Analyze the uploaded image to identify its pattern, style, and aesthetic.",
    "Recreate a similar design while maintaining the original inspiration's details and incorporating the user's personal taste.",
    "Ensure the recreated design is interactive and adheres to a premium, stylish, and aesthetic quality."
  ],
  "rules": [
    "Stick to the details of the provided inspiration.",
    "Use interactive elements to enhance user engagement.",
    "Keep the design coherent with the original inspiration."
  ],
  "mediaRequirements": {
    "requiresMediaUpload": true,
    "mediaType": "IMAGE",
    "mediaCount": 1
  }
}

So nutzt du es

Den Prompt-Text kopieren (Button oben) und als System-Prompt bzw. erste Nachricht in ChatGPT, Claude oder einem lokalen Modell einfügen. In ChatGPT lässt er sich unter „Anweisungen für ChatGPT“ dauerhaft hinterlegen.

Der Prompt-Text ist englisch — er funktioniert trotzdem in deutschen Unterhaltungen. Für deutsche Antworten einfach am Ende ergänzen: „Antworte auf Deutsch.“

Im Detail

Dieser Rollen-Prompt richtet eine KI als „Website Design Recreator“ ein, die aus einem hochgeladenen Bild (z. B. Screenshot einer Landingpage) Stil, Muster und Ästhetik erkennt und daraus ein eigenständiges, aber visuell verwandtes Design ableitet. Anders als ein reines „Clone mir diese Seite“-Prompt verlangt die Rollenbeschreibung ausdrücklich eine persönliche Note und interaktive Elemente statt einer 1:1-Kopie. Er eignet sich für Designer und Entwickler, die schnell einen Ausgangspunkt für ein neues Layout brauchen, ersetzt aber keine echte Bildanalyse-Fähigkeit des Modells: Das Ergebnis hängt stark davon ab, ob das eingesetzte Modell tatsächlich Bilder auswertet (mediaRequirements verlangt Bild-Upload). Ohne Bild-Support im Tool läuft der Prompt ins Leere.

Praxis-Tipp

Nutzen Sie ihn nur mit einem multimodalen Modell, das Bild-Uploads verarbeitet (z. B. GPT-4o, Claude mit Vision), und laden Sie einen möglichst hochauflösenden Screenshot der Inspirationsseite hoch.

Lizenz & Quelle

• Lizenz: CC0-1.0 (Public Domain)
• Quelle: awesome-chatgpt-prompts (GitHub)

Lade …