The designer is in control
Keep the tool flexible, without an enforced workflow. Designers can use Figma or leave it out.
HiFiveUI should connect code, Figma and prototypes, while remaining useful without requiring every part of that setup.
Product building · Design tooling
HiFiveUI
From “which screen?” to feedback you can act on.
A client needed to experience the behaviour, not just see the screens. HiFiveUI connects working prototypes with feedback that keeps its context.
Visit hifiveui.com- Contribution
- Solo product designer & builder · AI-assisted
- Period
- Recent product work
- Status
- Early access
- Solo
- product design and build with AI assistance
- Early access
- product stage
- Working demo
- Grocery design-to-review workflow
HiFiveUI · Product workflow illustrationThe challenge
New AI tools bring new challenges. Not every project allows the use of Claude Design, and Figma Make’s capabilities were still too limited for the workflow I needed.
As lead designer, I ran into a practical problem: we had started in Figma and now needed to take the design further. We needed more variants and more realistic prototypes that we could share and discuss with the client online.
We also needed to work faster while improving the quality of the design: use the right components in the right places, keep tokens and variables consistent, and give the client a prototype they could understand, access and use without friction.
There were several ways to solve parts of the problem, but none covered all our needs in a simple, elegant and affordable way. So I decided to design and build my own tool, with six goals:
- Help designers create better designs and maintain consistency through the right components, tokens and variables.
- Move from Figma to a working prototype built with AI coding agents, keep designing with agents, and return to Figma for precise control, manual refinement or archiving.
- Make prototypes easy to share with stakeholders and clients, with straightforward access.
- Let reviewers explore the prototype and leave comments in context.
- Make those comments available to agents so they can process the feedback and act on it.
- Preserve the prototype’s version history.
My role
I designed and built HiFiveUI entirely myself, using AI tools and workflows. A need from my client work as lead designer shaped the product: make behaviour reviewable and keep feedback tied to the screen, state and version.
The decisions
Figma is still in the game
Agents should be able to read code and create designs in Figma too.
The workflow should support bringing work back into Figma, where designers can continue refining it.
Support multiple agents
Let users choose the AI agents they want to work with.
The tool should not tie them to a single agent or provider.
Keep it familiar
Use established patterns for version history and feedback.
Reviewing changes and leaving comments should feel natural, simple and easy to use.
The result
I delivered an early-access product with a working review environment, demonstrated with Grocery. It connects Figma, coded prototypes and contextual feedback. Adoption and review-time savings remain to be measured.
HiFiveUI desktop
The Figma plugin
What I’d measure next
- Measure
- Time from feedback to an agreed change, and comments needing clarification.
- How
- Run comparable review rounds with and without the workflow. Track time to reproduce an issue, clarification requests per comment and time to an accepted revision. Include reviewer setup time and team count.
- Check alongside it
- Check that reviewers can revisit the right version and state, not just submit a comment quickly.
A working review environment.
The Grocery prototype brings the workflow into view: table and card views, filtering, contextual comments, immutable version history, and cloud sharing.
