Mockup tool for Prototype Feedback
What is it?
The https://labs.waytohealth.org/mockups/login tool allows our team to upload prototype files and share them with others so that they can review the prototypes, click through the different pages and interactions, and then document their comments on specific components, pages, or overall. The comments appear on the right hand side of the page for all to see, similar to reviewing a live Microsoft word document.
Creating new & modifying existing projects
Wherever you are working on your prototype (e.g., in Visual Studio Code), ask Claude to:
“Take a look at @mockup-prep-developer_guide.md and update the mockups to implement the functions for this repo”
Then ‘npm run build’
Go to https://labs.waytohealth.org/mockups/login and sign in. Request a new account with @Kyle McGrogan if you don’t already have one.
If you’re starting a new project, click on the new project button. Otherwise, click on the existing project to which you want to add files.
Upload the folder called dist from your repo (i.e., engage-crm) to add any new pages to the mockup. Note that you need only upload new files each time you’ve created new pages in the mockup. If you’re making updates to files/pages that have already been attributed to the mockup, those should be automatically reflected when you run ‘npm run build’.
You may add patterns to ignore if there are certain file types or folders that are contained within your repo that have no direct bearing on the prototype. For example, if you have a screenshots folder that you’ve asked Claude to reference when building out a prototype, those files don’t need to be reviewed by the mockup tool.
Notes
The README.md for our projects will ideally contain a section about prepping the build for use with the mockup tool, as is shown in the screenshot below for engage. You can use this instead of referring to this document for instructions in item #1