Turn Ideas into Prototypes, Faster.
A Product Manager's framework for leveraging AI to accelerate prototyping, validate ideas, and make tangible progress in minutes, not weeks.
"A picture tells a story. But a prototype? It makes decisions real, tradeoffs visible, and vision tangible."
The 60-Minute Prototyping Workflow
This proven workflow streamlines the process from a simple idea to a working prototype, consistently delivering results in about an hour.
Prompt (20 min)
Fill in the structured prompt template to give the AI all the context it needs.
Test & Ideate (10 min)
Run the initial prototype locally. Identify new ideas and refinements for user flows.
Refine UI (15 min)
Provide specific visual feedback on colors, placement, and layout to polish the UI.
QE Review (10 min)
Run a final prompt asking the AI to act as a QE manager, testing all flows and fixing bugs.
Deploy (5 min)
Perform a final check and prepare the prototype for sharing via deployment.
Prompt (20 min)
Fill in the structured prompt template to give the AI all the context it needs.
Test & Ideate (10 min)
Run the initial prototype locally. Identify new ideas and refinements for user flows.
Refine UI (15 min)
Provide specific visual feedback on colors, placement, and layout to polish the UI.
QE Review (10 min)
Run a final prompt asking the AI to act as a QE manager, testing all flows and fixing bugs.
Deploy (5 min)
Perform a final check and prepare the prototype for sharing via deployment.
The Interactive Prompt Recipe
This isn't just a template; it's a tool. Fill out the sections below to construct your perfect prompt. We've pre-filled it with an example to guide you.
Briefly explain your product's core functionality (ideally in 1-2 sentences).
Clearly explain what your user should be able to achieve with the prototype.
Specify UI requirements.
Explain a high-level user flow, detailing the steps across screens.
Describe your prototype screen by screen. Or, ask the AI to propose a flow.
Prompt copied to clipboard!
Test and Ideate: Refining Your Prototype
Running your prototype on a local server allows for immediate interaction and a realistic user experience. This phase is crucial for identifying initial bugs, usability issues, and unexpected user behaviors. It also serves as a fertile ground for new ideas and feature enhancements that may not have been apparent during the initial prompting.
Refine UI: Visualizing Perfection
As the adage goes, "A picture speaks a thousand words." When refining your UI, visual examples are far more effective than lengthy descriptions. Utilize screenshots to precisely highlight areas needing improvement or to showcase desired aesthetic changes.
Additional QE Prompt
After giving the AI some inputs and asking it to make edits, this prompt can be your final step before deployment. It instructs the AI to perform a thorough quality review.
Expert Guidance & Considerations
Go deeper with best practices, strategic integration, and important limitations to keep in mind.
See the Framework in Action
Want to see a sample result from this prototyping framework? Explore real prototypes built using this exact process.