HMI prototype - AI pet
AI prototype on HMI
Over the past few decades, the prototyping phase for HMIs has always involved presenting hardware and software separately.
Traditional-
‍Design → Engineering → Firmware → Hardware → Final Demo
AI-assisted-
Concept → Interactive Prototype → Rapid Iteration
‍
This approach to HMI prototyping addresses the previous inability to view the entire user experience flow between hardware and software at a glance. It enables smoother iteration and refinement during UX reviews, thereby reducing communication and operational costs.
Here is my End-to-End Workflow-

‍Product Concept Hypothesis
↓
Define UX / HMI Requirements
↓
Use GPT to Generate AI-readable PRD
↓
Build Prototype Framework in Cursor
↓
Develop Interactive UI with Next.js
↓
Connect Supabase Database & APIs
↓
Validate UX Flow Locally
↓
Deploy to Vercel
↓
Cross-functional Team Review
↓
Rapid Iteration & Optimization

Full video link watch here!!
AI agent created
AI Study
Since NZXT relies on Reddit forums for user feedback, our PM previously reviewed posts periodically, which often proved inefficient for development or debugging purposes. Therefore, we developed an AI agent tool to regularly crawl, analyze, and report on forum content. By building it via the Gemini CLI, we can also understand its differences from standard Gemini implementations. This tool will significantly enhance the efficiency of future feature definition research phases.
Rive
Design + Frontend Tools
UI motion design is often delivered as standalone videos, which cannot capture or respond to real-time value interactions from backend users. Rive, however, minimizes repetitive frontend development and extends the influence of design into production.
Figma
Rive
Recently, I've been try to explore the possibility of integrating Rive with n8n.
ComfyUI
Flexible AI model reder tool
ComfyUI AI render can serve as more than just a design tool—it also offers insights into how render models operate. I've applied it to develop ideas for various software projects, such as NZXT's RGB/Wallpaper content. Its frontend and backend operations can be referenced to build your own AI architecture, interface designs, and more, drawing inspiration from computational nodes.
Model Template
Workflow to UI content
DATE
July 2025 - Now
Creator
Jim Chen, Jay
Rive
Design + Frontend Tools
UI motion design is often delivered as standalone videos, which cannot capture or respond to real-time value interactions from backend users. Rive, however, minimizes repetitive frontend development and extends the influence of design into production.
Figma
Rive
Recently, I've been try to explore the possibility of integrating Rive with n8n.
ComfyUI
Flexible AI model reder tool
ComfyUI AI render can serve as more than just a design tool—it also offers insights into how render models operate. I've applied it to develop ideas for various software projects, such as NZXT's RGB/Wallpaper content. Its frontend and backend operations can be referenced to build your own AI architecture, interface designs, and more, drawing inspiration from computational nodes.
Model Template
Workflow to UI content
DATE
July 2025 - Now
Creator
Jim Chen, Jay
Copyright © 2025  Z Chun
Gmail
Linkedin