Use a live website as context for a functional redesign prototype while preserving the product’s real content and flows.
Source episode · 35:37
How I AI: Yash Tekriwal on Taming Slack with a Custom AI-Built Dashboardwith Claire Vo
35:37 to 38:30: Yash points an AI with browser access at the live ChatPRD site and uses the rendered product as source material for a redesign prototype.
A clickable redesign prototype that demonstrates the proposed information structure and key interaction.
AI search engine
Step by step
Follow the sequence once, then adapt the prompts, checks, and handoffs to your own setup.
5 steps
Start by articulating the new vision for the website. For example, you might want to create 'persona-based learning journeys for different user types' such as Rev Ops, SDRs, and Marketing Ops.
State the current problem, target user, desired behavior, and pages that must remain recognizable.
Use an AI tool with browser access, such as Perplexity Computer. Provide the URL of the website you want to redesign. The AI will use its browser access to analyze the live site's current structure and content as a starting point.
Open [live URL], inspect its content and navigation, then build a separate prototype rather than editing production.
Describe the new layout and features you envision. For example, explain that the homepage should feature different persona tracks and specify what should happen when a user clicks on one.
Restructure the experience around [new hierarchy and functions] while preserving [required content and actions].
Refine the prototype through a back-and-forth conversation with the AI. Ask it to mock up specific pages or states. For example, request a 'logged-in view for a user, showing their progress and next suggested courses.'
Revise [specific view] to address [observed issue], keeping the rest of the prototype unchanged.
Use the generated functional prototype as a visual artifact to show designers and engineers the intended redesign. This interactive mock-up helps communicate the look and feel of the new user experience more effectively than a written description.
Package the clickable path and a concise current-versus-proposed comparison for stakeholder review.
Turn an idea into a PRD, user stories, and a plan.
After the steps
How to recover when the loop fails and where human judgment helps.
Recover
Keep building
Log your workouts effortlessly without ever opening a spreadsheet. This workflow uses the Claude mobile app to parse a simple voice note and automatically update your workout tracking spreadsheet in the background.
Create a custom email management interface within Claude to read, triage, and draft replies without opening the Gmail tab. This workflow helps you reclaim focus and compound your learnings by training your AI on every interaction.
Build a fully automated system in Claude to generate personalized, interactive HTML proposals and client onboarding materials, saving hours on administrative work and creating a high-touch experience.
Join 100,000+ product managers who use ChatPRD to write better docs, align teams faster, and build products users love.