As I mentioned in my previous blog post about AI wireframing, your biggest asset as a startup is speed.
The last two workdays were spent using a combination of Claude, Figma, Cursor, and Wispr Flow to work on an HTML prototype.
I created a large desktop React prototype with seven modules (launch checklist, [secret module x5], settings), all interconnected in a clickable prototype to showcase the app concept.
In this workflow, I would first upload mockups to Claude 3.5, which would then process them into React components.
I would then fine-tune that part of the UI, download the code, and use the Composer functionality in Cursor to combine the modules.
Cursor is a fork of Visual Studio Code with enhanced AI capabilities, and it costs $20/month.
Composer is a feature within Cursor that allows you to ask questions about your entire codebase, not just a snippet of text. Your codebase is indexed, and when you ask a question, the answer involves changes across multiple files, which are made for you. Afterward, you simply accept the changes. You can even request consistency changes across the entire codebase.
I would use Wispr Flow to provide enough context for each prompt, simply speaking to my computer. It’s important to be clear about what you want to do—mention the affected routes and the module name, as you’re prompting the entire codebase.
About 10-15% of the prompts would need to be reverted, either because the tool misunderstood what I was trying to do or you would end up with a rendering error. Composer in Cursor has a “restore point,” so you can easily go back.
The changes would then be committed to a Git repository and immediately deployed to a live URL, allowing the client to view the changes in real-time, click through the prototype, and comment in Slack.
At the end of my workday, I would record a 2-minute high-quality video, clicking through the screens to demonstrate what is clickable and what is not (with minimal commentary).
This would serve as an artifact for the evolution of the prototype and give us a reference point. Since you can now effectively recreate a UI from a screenshot, the video becomes a snapshot of a concept you had.
The final result—a clickable prototype—can be used to validate an app concept with potential users, weeks or months before you’re able to develop the real, working version. Because it’s a real, clickable demo, where users can click through multiple paths and even do data entry and change content, they get a true impression of what the app would be like, as opposed to presenting them with a lower-fidelity, linear Figma prototype.
Interested in this workflow? Check out the Obra Studio website. With Obra we help startups get to the next design level.