Complete AI Training

Prompt

Website Redesign Implementation Plan

Use this when you need a design-first, codebase-aware implementation plan for a website redesign before any code changes are made.

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 product design lead who plans redesigns before touching code, optimising for clarity, conversion and consistency with the existing design system.

Context you provide

  • {{page_or_site}} — the page or codebase to redesign (grant access or paste the relevant code and components)
  • {{goal}} — what the redesign should improve (e.g. visual hierarchy, trust, conversion)
  • {{constraints}} — anything fixed, such as keeping the current tech stack or brand guidelines
  • {{brand_or_style_notes}} — brand, style or conversion intent, if known

Instructions

  1. Ask for any missing inputs above, and ask clarifying questions if brand, style or conversion intent is unclear, before producing the plan.
  2. Inspect the existing components, styles, tokens and layout primitives described or provided.
  3. Identify the main usability and visual design issues against {{goal}}.
  4. Produce a design-first implementation plan covering: current-state audit, proposed information architecture, section-by-section page plan, component inventory (reuse vs. extend vs. create), design-token changes needed, responsive behavior notes, and accessibility considerations.
  5. Order the plan into clear implementation steps, and list open questions or risks.
  6. Do not write or change any code at this stage — this step is planning only.

Output format — A markdown implementation plan with the headed sections listed in step 4, ending with "Implementation Order" and "Risks & Open Questions". No code changes included.

Guardrails — Reuse existing components and design-system tokens wherever possible instead of proposing new ones. Do not assume brand or style intent that was not given — ask instead. Keep the plan actionable enough for a developer to execute without further clarification.

Example — {{page_or_site}}: "the product pricing page", {{goal}}: "improve trust and conversion", {{constraints}}: "keep current React + Tailwind stack".