Instead of being an observer, I will document my journey to learn and apply different AI tools as a designer.

Today I attended the workshop ⚡️ Maven LIVE: AI Prototyping for Product Managers in 2025 by Colin Matthews which promises to show non-technicals how to build a prototype with AI tool (Bolt.new) in 10 mins. It was a very productive session and I’ve been great connections with AI enthusiasts and product folks, some of whom are very experiences and whom I can learn a lot from afterwards.

I decided to try out my new found knowledge on a Figma concept that I’ve been trying out using Bolt. The concept is for a Coaching Assistance platform leveraging NPL and LLM to surface actionable recommendations to coaches.

I uploaded a screenshot and after a few iterations and using TailwindCSS (I’d say 10 mins), I got to this prototype. The prompts I used were:

I want to create a prototype using this screenshot. Talk me through how would you approach it. No coding yet.
- [AI Generated list of step-by-step tasks]
  - Generate prototype [AI generated code]
    - Under left hand side, add a messaging field anchored to the bottom of the page
    - When user expands the Assignments Status by clicking on the down arrow chevron, show an expanded state to represent the 2 missing assignments: User Interview and Interview Synthesis. This state should invert the chevron so that user can close the expanded state
    - On the top right hand corner, when user clicks on the Filter icon, shows a pop up modal with learner filters. These filters should include: Program dates, locations, and other relevant filters
      - [The results of #1 and #2 are pretty good, #3 did not come through]

CLICK HERE TO VIEW LIVE PROTOTYPE >

Next, I plan to iterate on this prototype, specifically some of the Filtering and Agent functionalities. Until tomorrow!