Exploring Bolt for Quick Ideation and Rapid Prototyping
Creating a simple application using Bolt.new that allows researchers to tap into AlphaFold to view protein folding, as well as to identify potential binding locations.
Project Summary
Challenge
Core Problems
Simple design tools, such as Figma, are slow for ideation and prototyping more sophisticated workflows that lab researchers typically require.
Are there better and faster ways to ideate, visualize, prototype, and test concepts?
Role & Approach
Role
UX/Product designer as experimenter.
Duration
1 hour
Approach Included:
Prompt writing with Claude Sonnet 4 and building the prototype with Bolt.
Solutions
Designed & Delivered:
A functional prototype that can be used for further ideation and sharing with users.
Impacts
AI tools, such as Bolt, can provide a quick means for creating functional prototypes. This shortens the design and development process, as well as the overall time to ship software products.
This project, an experiment designed to test the feasibility of using AI tools for more complex projects, was highly successful.
Writing and Modifying Prompts
Rather than learning the nuances of how Bolt wants its prompts, I used Claude Sonnet 4 to help me craft an optimal prompt that I could copy and paste into Bolt.
Before this experiment, I also explored Lovable and v0 as possible options by doing some quick tests. Bolt produced the best results and required the least amount of fixes and adjustments.
My initial prompt was for Bolt to create a protein folding viewer by tapping into AlphaFold and to render the UI in dark mode.
Then, I forked the project and built on the existing app design. I also wanted my app to identify potential binding sites and their relative quality.
Apart from requesting dark mode and some minor color adjustments, no effort was made to fine-tune the UI design, typography, or UI language. This experiment was limited to functionality.
Start with a Protein
The workflow begins by entering a UniProt ID number or amino acid sequence.
View Protein Folding and Binding Sites
The app loads the protein and displays its structure, along with binding sites (represented by blue spheres). No specific binding site is selected by default.
Selecting a Specific Binding Site
The binding site is selected from the scrolling pane on the right. Its location is highlighted in the 3D viewport as well as the amino acid sequence below.
Rotating and Zooming In/Out
The user can easily rotate, pan, zoom in, and zoom out of the protein in the 3D viewport.
Switch View Display
The user can easily switch the binding view off and see the basic folding model in cartoon, stick, sphere, or line representations.
