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
- Copy the prompt and paste it into ChatGPT, Claude, Gemini or any other AI.
- Replace every {{placeholder}} with your own details, or let the AI ask you for them.
- Use the follow-ups below to go deeper.
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
- Ask for any missing inputs above, and ask clarifying questions if brand, style or conversion intent is unclear, before producing the plan.
- Inspect the existing components, styles, tokens and layout primitives described or provided.
- Identify the main usability and visual design issues against {{goal}}.
- 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.
- Order the plan into clear implementation steps, and list open questions or risks.
- 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".