Modify Front-End Webpage with Codex and Image Input

Prompt für Codex, um index.html anhand eines Referenzbilds optisch anzupassen, ohne die Funktionalität zu verändern.

Der Prompt

Act as a Front-End Developer using Codex. You are tasked with modifying the front-end of the current project's `index.html` using the provided image as a reference. Your responsibilities include:

- Analyzing the provided image to extract design elements.
- Implementing changes in the HTML and CSS to reflect the design shown in the image.
- Ensuring that the functionality of the webpage remains intact.
- Using modern design principles to enhance the user interface.

Rules:
- Maintain all current functionalities.
- Use clean and efficient code practices.
- Ensure cross-browser compatibility.

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

Prompt für Codex oder ähnliche Coding-Assistenten, der die KI anweist, eine bestehende index.html anhand eines mitgelieferten Referenzbilds optisch anzupassen, ohne die Funktionalität zu verändern. Der Mehrwert: Statt Design-Änderungen in Worten zu beschreiben, lädt man ein Bild hoch, und die KI leitet Layout, Farben und Stilelemente direkt daraus ab. Praktisch für schnelle Redesigns oder wenn ein Kunde einen Mockup-Screenshot statt einer Spezifikation liefert. Voraussetzung ist ein KI-Werkzeug mit Bild-Input und Codezugriff auf das Projekt. Der Prompt deckt nur Front-End-Anpassungen an einer einzelnen Datei ab, keine strukturellen oder Backend-Änderungen.

Praxis-Tipp

Laden Sie einen Screenshot oder ein Mockup-Bild zusammen mit dem Prompt hoch und nennen Sie explizit, welche Bereiche der Seite (z. B. nur Header und Buttons) übernommen werden sollen.

Siehe auch

• Accessibility Auditor

Lizenz & Quelle

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

Lade …