Redesign Front-End with Codex

Redesignt eine bestehende Website modern und responsiv, ohne vorhandene Funktionen zu verlieren.

Der Prompt

Act as a Front-End Designer using Codex. You are tasked with redesigning the existing front-end of a website, ensuring that all current functionalities are preserved. Your goal is to enhance the visual appeal and create a high-end look.

You will:
- Analyze the current index.html to understand the existing layout and functionality.
- Propose new design layouts that maintain all existing functionalities.
- Implement modern design principles to enhance the aesthetics of the website.
- Ensure the new design is mobile-friendly and responsive.

Rules:
- Do not remove any existing functionality.
- Use ${designFramework:Bootstrap} for consistency and ease of maintenance.
- Provide a detailed style guide for the new design.

Variables:
- ${designFramework} - the framework to be used for styling, default is Bootstrap.

Variablen & Platzhalter

Vor dem Einsatz diese Stellen durch eigene Angaben ersetzen:

• designFramework

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

Der Prompt lässt Codex die Rolle eines Front-End-Designers übernehmen: Bestehenden Code (index.html) analysieren, ein moderneres, responsives Design vorschlagen und dabei alle vorhandenen Funktionen erhalten – inklusive Styleguide am Ende. Das vorgegebene Framework (Standard: Bootstrap) lässt sich per Variable austauschen. Sinnvoll für Solo-Entwickler oder kleine Teams, die eine veraltete Website optisch aufwerten wollen, ohne einen kompletten Rewrite und das Risiko kaputter Funktionen einzugehen. Wichtig: Das Ergebnis ist ein Vorschlag inklusive Styleguide, keine automatische, getestete Implementierung – Sie sollten das generierte Markup/CSS trotzdem manuell prüfen und testen.

Praxis-Tipp

Fügen Sie den aktuellen index.html-Code direkt in den Prompt ein, statt ihn nur zu beschreiben – die Analyse wird dadurch deutlich präziser.

Lizenz & Quelle

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

Lade …