Claude Web Page Redesign Planning Prompt — Claude & Claude.ai prompt
A prompt that makes the model audit the current markup and code first, then hand back a redesign plan in markdown. No edits get made.
Open on GitHubWhat Claude Web Page Redesign Planning Prompt does
The prompt tells the model to inspect what already exists: components, styles, tokens, layout primitives. From there it lists the UX and UI problems in the current implementation, and if the brand or conversion intent is unclear it asks clarifying questions instead of guessing. What comes back is an implementation plan in markdown, not code.
The plan covers a current-state audit, usability and visual design issues, a proposed information architecture, a section-by-section page plan, and a component inventory. Each component gets a call: reuse, extend, or create. Design token changes, responsive behaviour notes, accessibility considerations, a step-by-step implementation order, and a list of risks and open questions round it out.
The constraints are strict. Reuse existing components where possible, keep the design system consistent, and do not implement anything yet. So if you want working code out of this, look elsewhere — it stops at the plan. On an unfamiliar codebase that is exactly the point: you can check whether the model actually read your components or invented them.
What it helps with
- audit existing markup and components before a redesign
- surface usability problems in the current implementation
- get a section-by-section page plan before touching code
- decide which components to reuse and which to build fresh
- collect design token changes and open risks in one place
Example prompts for the agent
- Inspect this page's code and write a redesign plan in markdown, make no changes
- Audit the current components and styles, then propose an information architecture
- List the UX and UI issues on this page and lay out the implementation order
How to install Claude Web Page Redesign Planning Prompt
How to use
Paste the text at the start of a chat or into project instructions
Manually: put the files in place
.claude/commands/prompts.csv.mdQuestions about Claude Web Page Redesign Planning Prompt
How do I install Claude Web Page Redesign Planning Prompt in Claude?
Copy .claude/commands/prompts.csv.md into your project. The prompt then runs as a slash command.
What does Claude Web Page Redesign Planning Prompt do?
It has the model inspect the page's code and styles, identify UX and UI issues, and produce a redesign plan in markdown. Implementation is explicitly off the table.
Does it work in Claude?
Yes, it targets Claude and Claude.ai. Paste the prompt into the chat and attach the page code or markup.
Source text
prompts.csv · CC0-1.0
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
© [email protected] · CC0-1.0 · f/prompts.chat
