developer planning system risk: low

Web Page Redesign Plan Generator

The prompt directs the model to plan a redesign for a web page by inspecting the existing codebase, identifying UX/UI issues, asking clarifying questions if needed, and producing a…

PROMPT

Plan a redesign for this web page before making any edits.

Goal:
Improve visual hierarchy, clarity, trust, and conversion
while keeping the current tech stack.

Your process:
1. Inspect the existing codebase, components, styles, tokens, and layout primitives.
2. Identify UX/UI issues in the current implementation.
3. Ask clarifying questions if brand/style/conversion intent is unclear.
4. Produce a design-first implementation plan in markdown.

Include:
- Current-state audit
- Main usability and visual design issues
- Proposed information architecture
- Section-by-section page plan
- Component inventory
- Reuse vs extend vs create decisions
- Design token changes needed
- Responsive behavior notes
- Accessibility considerations
- Step-by-step implementation order
- Risks and open questions

Constraints:
- Reuse existing components where possible
- Keep design system consistency
- Do not implement yet

REQUIRED CONTEXT

existing codebase
components
styles
tokens
layout primitives

OPTIONAL CONTEXT

brand/style/conversion intent

ROLES & RULES

Inspect the existing codebase, components, styles, tokens, and layout primitives.
Identify UX/UI issues in the current implementation.
Ask clarifying questions if brand/style/conversion intent is unclear.
Produce a design-first implementation plan in markdown.
Reuse existing components where possible.
Keep design system consistency.
Do not implement yet

EXPECTED OUTPUT

Format

markdown

Schema

markdown_sections · Current-state audit, Main usability and visual design issues, Proposed information architecture, Section-by-section page plan, Component inventory, Reuse vs extend vs create decisions, Design token changes needed, Responsive behavior notes, Accessibility considerations, Step-by-step implementation order, Risks and open questions

Constraints

include current-state audit
include main usability and visual design issues
include proposed information architecture
include section-by-section page plan
include component inventory
include reuse vs extend vs create decisions
include design token changes
include responsive behavior notes
include accessibility considerations
include step-by-step implementation order
include risks and open questions
reuse existing components where possible
keep design system consistency
do not implement yet

SUCCESS CRITERIA

Improve visual hierarchy
Improve clarity
Improve trust
Improve conversion
Keep the current tech stack

FAILURE MODES

Implementing code instead of just planning.
Not reusing existing components.
Breaking design system consistency.
Overlooking accessibility considerations.

CAVEATS

Dependencies

Existing codebase, components, styles, tokens, and layout primitives.
The web page to redesign.

Missing context

Actual web page codebase, URL, or description.
Details on current tech stack.
Brand/style guidelines or conversion goals specifics.

Ambiguities

'This web page' assumes provided context like code or URL, but not specified in prompt.
'Current tech stack', 'design system', 'components, styles, tokens, layout primitives' undefined without input.

QUALITY

OVERALL: 0.86
CLARITY: 0.92
SPECIFICITY: 0.94
REUSABILITY: 0.75
COMPLETENESS: 0.82

IMPROVEMENT SUGGESTIONS

Add input placeholders e.g., 'Given the following codebase: {CODE}'.
Provide example output markdown structure for sections.
Clarify how to 'inspect' codebase if no code provided (e.g., assume pasted HTML/CSS/JS).
List common UX/UI issues to check for consistency.

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.