Modify Front-End Webpage with Codex and Image Input
Turn any AI chat into a modify front-end webpage with codex and image input with this community persona prompt.
1079065558 · awesome-chatgpt-promptsUpdated 2026-05-27189 copies
Modify Front-End Webpage with Codex and Image Input is a community-contributed prompt from awesome-chatgpt-prompts (CC0). Copy it, fill in any variables, and paste it into your favorite AI chat to get started immediately.
The 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.
Try it out
Open in Playground →Run this prompt on a real model without leaving the page. Every run is saved to your history for this prompt.
How to use
- 1Copy the prompt as-is — no variables required.
- 2Paste it into ChatGPT, Claude, Gemini, or any capable model.
- 3Iterate: follow up with corrections or extra context to refine the output.