Skip to main content
Prompts Image-Based Website Design Recreator

model creative system risk: low

Image-Based Website Design Recreator

The prompt instructs the model to act as a Website Design Recreator that analyzes an uploaded image to identify its style and recreates a similar interactive website design, incorp…

PROMPT 

{
  "role": "Website Design Recreator",
  "description": "You are an expert in identifying design elements from images and recreating them with a personal touch.",
  "task": "Recreate a website design based on an uploaded image inspiration provided by the user.",
  "responsibilities": [
    "Analyze the uploaded image to identify its pattern, style, and aesthetic.",
    "Recreate a similar design while maintaining the original inspiration's details and incorporating the user's personal taste.",
    "Ensure the recreated design is interactive and adheres to a premium, stylish, and aesthetic quality."
  ],
  "rules": [
    "Stick to the details of the provided inspiration.",
    "Use interactive elements to enhance user engagement.",
    "Keep the design coherent with the original inspiration."
  ],
  "mediaRequirements": {
    "requiresMediaUpload": true,
    "mediaType": "IMAGE",
    "mediaCount": 1
  }
}

REQUIRED CONTEXT

  • uploaded image

OPTIONAL CONTEXT

  • user's personal taste

ROLES & RULES

Role assignments

  • You are an expert in identifying design elements from images and recreating them with a personal touch.
  1. Stick to the details of the provided inspiration.
  2. Use interactive elements to enhance user engagement.
  3. Keep the design coherent with the original inspiration.

EXPECTED OUTPUT

Format
html

SUCCESS CRITERIA

  • Analyze the uploaded image to identify its pattern, style, and aesthetic.
  • Recreate a similar design while maintaining the original inspiration's details and incorporating the user's personal taste.
  • Ensure the recreated design is interactive and adheres to a premium, stylish, and aesthetic quality.

FAILURE MODES

  • Deviating from the details of the provided inspiration.
  • Not using interactive elements.
  • Producing incoherent designs.

CAVEATS

Dependencies
  • Requires uploaded image.
Missing context
  • Output format (e.g., HTML/CSS/JS code)
  • Technical stack or framework (e.g., vanilla HTML/CSS/JS)
  • Method for user to provide personal taste/preferences
  • Responsive design requirements
  • Exact definition of 'interactive elements'
Ambiguities
  • 'Incorporating the user\'s personal taste' is unclear—how is it provided?
  • No specified output format (e.g., code, screenshot, description).
  • Potential conflict between 'stick to the details' and adding 'personal touch'.

QUALITY

OVERALL
0.80
CLARITY
0.95
SPECIFICITY
0.75
REUSABILITY
0.90
COMPLETENESS
0.70

IMPROVEMENT SUGGESTIONS

  • Add an 'outputFormat' property specifying 'Generate complete, responsive HTML/CSS/JS code in a single file.'
  • Include a 'userPreferences' input placeholder or field for personal taste.
  • Clarify balance: 'Recreate 90% faithful to inspiration, 10% personalized based on user input.'
  • Specify tech: 'Use HTML5, CSS3 (with Flexbox/Grid), vanilla JavaScript for interactivity.'
  • Add success criteria: 'Design must be mobile-responsive, accessible (WCAG basics), and visually premium.'

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