Skip to main content
Prompts Bootstrap Front-End Website Redesigner

developer coding template risk: low

Bootstrap Front-End Website Redesigner

Act as a Front-End Designer using Codex to redesign an existing website's index.html, preserving all functionalities while enhancing visual appeal with modern, mobile-friendly, res…

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.

INPUTS

designFramework

the framework to be used for styling, default is Bootstrap

e.g. Bootstrap

REQUIRED CONTEXT

  • index.html

ROLES & RULES

Role assignments

  • Act as a Front-End Designer using Codex.
  1. Do not remove any existing functionality.
  2. Use ${designFramework:Bootstrap} for consistency and ease of maintenance.
  3. Provide a detailed style guide for the new design.
  4. Analyze the current index.html to understand the existing layout and functionality.
  5. Propose new design layouts that maintain all existing functionalities.
  6. Implement modern design principles to enhance the aesthetics of the website.
  7. Ensure the new design is mobile-friendly and responsive.

EXPECTED OUTPUT

Format
structured_report
Constraints
  • preserve all existing functionality
  • use Bootstrap
  • mobile-friendly and responsive
  • include detailed style guide

SUCCESS CRITERIA

  • Preserve all existing functionalities.
  • Enhance visual appeal to create a high-end look.
  • Ensure mobile-friendly and responsive design.
  • Use Bootstrap framework.
  • Provide detailed style guide.

FAILURE MODES

  • May remove existing functionality.
  • May not use specified design framework.
  • May produce non-responsive design.
  • May provide incomplete style guide.

CAVEATS

Dependencies
  • Requires current index.html file.
Missing context
  • The actual index.html code to analyze.
  • Desired output format (e.g., full HTML/CSS files, wireframes).
  • Specific design preferences (colors, fonts, target audience).
Ambiguities
  • Unclear what 'using Codex' means.
  • Assumes 'current index.html' is provided but not specified how.
  • Ambiguous whether output should be descriptive proposals or actual code implementation.
  • Vague 'high-end look' without criteria.

QUALITY

OVERALL
0.75
CLARITY
0.80
SPECIFICITY
0.75
REUSABILITY
0.85
COMPLETENESS
0.65

IMPROVEMENT SUGGESTIONS

  • Add 'The index.html code will be provided below:' as a placeholder.
  • Specify output structure: e.g., 1. Analysis summary, 2. Redesigned HTML/CSS, 3. Style guide.
  • Clarify 'Codex' or remove it; replace with 'AI coding capabilities'.
  • Define success criteria for 'high-end look', e.g., 'minimalist, with smooth animations and premium typography'.

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 DEVELOPER