Leveraging Claude AI for Rapid Baseline Prototyping
Are you a solopreneur or small startup who enjoys leveraging AI to bring your ideas to life? Meet Claude 3.5 Sonnet, your rapid prototyping helper.
Setting the Scene
As mentioned in this recent post, I am building a digital tracking tool to go with my OCD group therapy.
To start, I briefed Claude on the project outline:
“I want this to be a tool for someone who is working with a therapist. The goal of the app is to digitalize or streamline the current recording method which can be cumbersome (pen and paper).”
With the foundation in place, I described a partial User Flow:
“When a trigger happens, the user immediately opens the app, presses "Start Timer", then inputs the trigger using one of 3 methods - select from a pre-entered list of triggers, or use voice (AI will convert to text), or write.”
Instantly, Claude generated code to meet my requirements.
What I did not expect was that it also automatically created a visual React component to demonstrate how the User Flow would look like (essentially a mockup, see below).
This User Interface (UI) is partly function: the timer works, and clicking on List, Voice, or Text will bring up additional fields, as shown below.
Building it out
The mockups produced by Claude so far were sufficient for a quick user review! I decided to build out the MVE (Minimal Viable Experience) before sharing with a few target users for feedback. Additional screens include:
A revised logging screen that allows multiple scorings per session
A daily summary screen
A progress visualization screen
Everything followed the same simple, professional-looking style.
Testing Claude’s mockups with target audience - my plan
My (future) initial test aims to gauge target users’ reactions to using a digital tracking app (web or mobile) compared to their existing analogue methods i.e. typing in a Word template or handwriting on printed sheets. The current mockups generated by Claude are sufficient for this purpose.
However, based on my experience user-testing with static mockups, it is important not to hold unrealistic expectations about test participants’ ability or willingness to “visualize” the final product. Beyond this early concept testing, a more realistic, interactive prototype — ideally one connected to a live database —will be needed. I plan to develop mine using Adalo or Softr combined with Airtable (more on no-code building in future posts).
Pros and Cons
Initially I checked out Claude to see how it compares with ChatGPT which is my go-to and trusty work partner. My experience confirmed what I read in various reviews about Claude 3.5 Sonnet:
Pros:
Coding Capability and its ability to generate React components
Can double as a rapid prototyping tool (within limit) - completing some groundwork before moving onto dedicated prototyping tools
Offers a useful feature - a separate window for artifacts (such as the codes and screens produced in my experiment), away from the conversations with Claude Note: ChatGPT just rolled out a similar feature called “Canvas” to its plus members so this is not longer unique to Claude.
I cannot comment on the quality of the codes but do appreciate Claude’s comprehensive recommendations on different routes I can take to go from here to a full product, considering I am not a developer.
Cons:
But there is one big Con. It is easy to run out of Claude’s processing limit quickly, even on a paid plan. One way to get around it is to pick the right version of Claude for the tasks at hand, as depicted by the infographics below:
Final Thoughts
Claude does not and should not replace your prototyping tools. However, it is very useful in quickly producing basic, static mockups to assist in visualizing or explaining a concept. With iterations in mind, it’d be foolish not to leverage this AI’s capability whenever and wherever appropriate, such as during the initial concept testing stage.
With a positive first experience with Claude, I expect to discover more of its capability in the near future.
I enjoy identifying tools that help single practitioners or small teams to incorporate the principle of Design Thinking into their innovation process. I would love to know if this article has inspired you to try AI as a prototyping partner!