AI can speed up early exploration in automotive Human-Machine Interface (HMI) design, but turning AI-generated concepts into interactive experiences connected to physical vehicle hardware remains a challenge. ProtoPie MCP helps design and engineering teams generate, refine, and validate HMI interactions from Product Requirement Documents (PRDs), with precise control over interaction logic and hardware connections.
In our recent webinar, Rapid Automotive HMI Prototyping with ProtoPie MCP, our Creative Technologist Eric Joseph Lee demonstrated how AI can generate interactions from a written spec, then connect the ProtoPie prototype to a Logitech G29 steering wheel to test the interactions with real hardware.
Read on for the key highlights, or watch the full webinar recording below.
What is ProtoPie?
ProtoPie enables high-fidelity, production-like interactive prototypes without writing custom code, built on a modular three-part framework: Object, Trigger, and Response.
ProtoPie Studio: The desktop application where designers build visual logic, condition trees, variables, and multi-screen interactive flows.
ProtoPie Connect: The runtime engine that coordinates real-time messaging between multiple running prototypes, secondary displays, and physical hardware rigs (e.g., steering wheels, pedals, microcontrollers, and custom button arrays).
ProtoPie Player & Cloud: Native iOS, Android, and HarmonyOS apps for on-device testing with native sensors and haptics, paired with cloud-based browser sharing for stakeholder review.
Unlocking Design & Handoff Speed with ProtoPie MCP
Building complex interactive behaviors manually often requires days or weeks. ProtoPie MCP reduces this phase by introducing two AI integrations:
Studio MCP | The Intelligent Co-Pilot: Connects ProtoPie Studio directly to an AI agent or LLM (such as Claude Code, Cursor, VS Code). By supplying a PRD and visual assets from Figma, the AI constructs native, fully editable ProtoPie logic—including conditions, formulas, and signals—directly inside the Studio canvas.
Code MCP & Dev View | The Automated Handoff: Exposes internal layer structures, state parameters, and logic trees directly to developer AI tools. Developers can generate accurate code targeted at platforms like React, React Native, Qt / QML, Flutter, and more, from validated interaction models.
Learn more about ProtoPie MCP.
From AI-Generated Interactions to Hardware-Validated HMI: A Step-by-Step Workflow
Step 1: Enable Studio MCP
Inside ProtoPie Studio (v10.3.0 or later), navigate to Preferences > Labs and toggle ProtoPie MCP. Copy the configuration command into your local AI environment (e.g., Claude Code or Cursor) to establish a active connection with Studio.
Step 2: Import your UI Assets
Export static design layers directly from Figma into ProtoPie Studio. In your AI chat interface, submit:
A detailed Product Requirement Document (PRD) defining state logic, variables, and expected behavior.
A hardware skill map file (e.g.,
G29 skill map) outlining message structure for physical controls.
An execution prompt instructs the LLM to process the Figma layer tree, map signals, construct triggers and responses, and verify logic through automated acceptance checks directly inside Studio.
Step 3: Wire to Physical Controls via ProtoPie Connect
Launch ProtoPie Connect and import the generated prototype file (Cluster.pie). Connect physical inputs—such as a Logitech G29 steering wheel and pedal set—to test live hardware responsiveness:
Accelerator & Brake Logic: Pressing the accelerator increases power output; switching gears requires holding the brake pedal first.
Speed & Vehicle State Rules: Speed in Reverse is capped at 20 km/h; exceeding 120 km/h in Drive triggers an automated visual speed limit warning.
Hardware Signals & Multi-Display Sync: Turning the physical steering wheel translates into real-time visual movement on screen, while steering buttons activate indicators, hazard lights, ACC modes, and media controls synchronized across both the cluster and central display.
Step 4: Streamline Handoff with Dev View and Code MCP
Save the validated prototype to ProtoPie Cloud to generate a Dev View link. Designers and developers can inspect scene structures, formulas, and timing curves in a browser. Supplying the Dev View link to an AI coding agent via Code MCP allows the LLM to inspect the exact interaction definitions and write matching UI code for target automotive platforms.
Resources and Reference Files
Want to try this workflow yourself? Use the resources below to explore the instrument cluster prototype and set up your own AI-powered prototyping workflow.
Skills library: ProtoPie AI Build Skills on GitHub
ProtoPie prototype: Explore the instrument cluster demo
Use the PRD as a starting point, the skills library to guide your AI agent, and the prototype to see the interaction design in action.
Frequently Asked Questions
Q. How much manual refinement is required after AI builds the initial logic?
Eric: Manual effort depends on PRD clarity, task scope, and model capability. While single interactions often succeed on the first attempt, full-scale instrument clusters may require minor logic adjustments. Because Studio MCP builds native ProtoPie logic instead of hard-coded video files, designers can adjust triggers, responses, or conditions directly in Studio without re-prompting.
Q. How are multiple displays kept synchronized?
Eric: Multi-screen synchronization is handled by ProtoPie Connect. Connect acts as a central hub, receiving trigger messages from one screen or input device and instantly broadcasting updates to other running prototypes to modify shared variables and visual states.
Q. Can ProtoPie MCP integrate with custom automotive design systems?
Eric: Yes. As long as the connected AI agent has access to design guidelines or component libraries—via local Markdown files, design system MCP servers, or Figma plugins—it can generate interaction logic that adheres to custom design system conventions.
For the full Q&A check out the webinar replay.
From AI-Generated Interactions to Real-World Validation
AI can help teams move faster from requirements to interactive prototypes, but automotive HMI design requires more than generating UI logic. Teams need to test how interactions behave with physical controls, across multiple displays, and under different driving conditions before moving into development.
With ProtoPie MCP, designers can accelerate interaction building while keeping control over the logic, hardware integration, and validation process. This helps teams identify issues earlier, refine ideas faster, and give developers a clearer reference for implementation.
Interested in exploring this workflow for your automotive HMI projects? Talk to our team to learn how ProtoPie can support your prototyping and validation needs.
