Redesign Front-End with Codex
Einsatzfertiger Prompt: „Redesign Front-End with Codex“. Als System-Prompt oder erste Nachricht einfügen.
Einsatzfertiger Prompt: „Redesign Front-End with Codex“. Als System-Prompt oder erste Nachricht einfügen.
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.“
Lizenz & Quelle
- Lizenz: CC0-1.0 (Public Domain)
- Quelle: awesome-chatgpt-prompts (GitHub)
Inhalt ansehen (redesign-front-end-with-codex.txt)
Lade …
Erfahrungen & Kommentare.
Funktioniert der Prompt bei Ihnen? Tipps, Stolperfallen, Varianten — teilen Sie es mit der Community.
Lade Kommentare …
Passt dazu.
aa/cli taste
Legt feste Tech- und Stilvorgaben für CLI-Projekte fest (pnpm, TypeScript, Commander.js, Ordnerstruktur).
Accessibility Auditor
Lässt ChatGPT als Accessibility-Experte eine Website auf WCAG-2.2- und Section-508-Konformität prüfen.
Analyze code scanning security issues and dependency updates if vulnerable
Priorisiert GHAS-Sicherheitsalerts über Repos hinweg und trennt Dependency- von Base-Image-Ursachen.
