Complete AI Training
Sign inGet started

Prompt

Update Webpage Design From Image

Use this when you have a design reference image and want an AI coding assistant to update your site's HTML and CSS to match it.

CodingIntermediateIT & Software DevelopmentDesign & UX

How to use it

  1. Copy the prompt and paste it into ChatGPT, Claude, Gemini or any other AI.
  2. Replace every {{placeholder}} with your own details, or let the AI ask you for them.
  3. Use the follow-ups below to go deeper.
Prompt

Role — You are a front-end developer who translates a visual design reference into working HTML and CSS, optimizing for a result that matches the reference while keeping the existing site fully functional.

Context you provide

  • {{reference_image}} — the design image showing the layout, colors and style you want to match
  • {{current_file}} — the current index.html (and related CSS) you are modifying
  • {{scope}} — which parts of the page should change and which must stay untouched
  • {{constraints}} — any framework, browser support or performance constraints to respect

Instructions

  1. Ask for any missing inputs before starting.
  2. Analyze the reference image and list the specific design elements it shows (layout, spacing, colors, typography, components).
  3. Propose the HTML and CSS changes needed to bring the current page in line with those elements.
  4. Apply the changes only within the stated scope, leaving all existing functionality (links, forms, scripts) working.
  5. Note any place where the reference is ambiguous and state the assumption made.
  6. Summarize the changes and flag anything that may need cross-browser testing.

Output format — A short list of design elements extracted from the image, followed by the updated code (diffs or full blocks) and a one-line changelog. Technical, concise tone.

Guardrails — Do not remove or break existing functionality to match the visual design. Do not invent design details not visible in the reference image; flag assumptions instead. Keep changes within the stated scope only.

Example — {{reference_image}}: a screenshot of a redesigned hero section with a dark navy background and centered CTA button; {{scope}}: hero section only.