Skip to main content
Prompts Image-Reference Front-End HTML Redesigner

model coding system risk: low

Image-Reference Front-End HTML Redesigner

The prompt instructs the model to act as a Front-End Developer using Codex to modify the project's index.html based on a provided image. It requires analyzing the image for design…

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.

REQUIRED CONTEXT

  • current project's index.html
  • provided reference image

ROLES & RULES

Role assignments

  • Act as a Front-End Developer using Codex.
  1. Maintain all current functionalities.
  2. Use clean and efficient code practices.
  3. Ensure cross-browser compatibility.

EXPECTED OUTPUT

Format
code
Constraints
  • maintain all current functionalities
  • use clean and efficient code practices
  • ensure cross-browser compatibility

SUCCESS CRITERIA

  • Analyze the provided image to extract design elements.
  • Implement changes in the HTML and CSS to reflect the design shown in the image.
  • Ensure that the functionality of the webpage remains intact.
  • Use modern design principles to enhance the user interface.

FAILURE MODES

  • May break existing functionalities.
  • Might produce unclean or inefficient code.
  • Could fail cross-browser compatibility.
  • May not accurately match the image design.

CAVEATS

Dependencies
  • Provided image.
  • Current project's `index.html`.
Missing context
  • Current index.html code
  • Reference image (or its description)
  • List of existing functionalities
  • Target browsers for compatibility
Ambiguities
  • What is 'Codex'?
  • 'Current project's index.html' and 'provided image' are referenced but not included.
  • 'Current functionalities' are not specified.

QUALITY

OVERALL
0.70
CLARITY
0.90
SPECIFICITY
0.70
REUSABILITY
0.80
COMPLETENESS
0.60

IMPROVEMENT SUGGESTIONS

  • Add placeholders for inputs, e.g., 'using the provided image: [IMAGE_URL_OR_DESCRIPTION]' and 'current index.html: [HTML_CODE]' to make it template-ready.
  • Specify output format, e.g., 'Output the complete modified index.html with inline CSS and any necessary JS.'
  • Clarify or remove 'using Codex' if it's not essential, or define it.
  • List or describe expected functionalities to maintain explicitly.

USAGE

Copy the prompt above and paste it into your AI of choice — Claude, ChatGPT, Gemini, or anywhere else you're working. Replace any placeholder sections with your own context, then ask for the output.

MORE FOR MODEL