PRD — Instrument Cluster Prototype

<aside> 📌

Status: Ready to build · Display: Instrument cluster, 1920×720 · Built by: Claude Code + ProtoPie Studio MCP · Skill: protopie-g29-signal-map · Design: Figma section Cluster v3 – prototype-ready

</aside>

1. Overview

Goal

Build a working instrument-cluster prototype in ProtoPie that reacts live to a Logitech G29 wheel through ProtoPie Connect. It's built for a live demo: an audience watches the presenter drive, sees the cluster respond, and understands that the AI wired every signal from a written spec and a skill file.

Build workflow

<aside> 🛠️

The designer owns the visuals; the AI owns the interactions.

Designer: imports the Figma UI into ProtoPie Studio with the ProtoPie Figma plugin (§9).
Designer: sends the prompt in §13 to Claude Code.
AI (Claude Code + ProtoPie Studio MCP + skill): checks the imported layer names (they're already named in Figma), sets anchors and initial states, then builds every variable, trigger, condition and response described here.

The AI does not draw, redraw or restyle layers. If a needed layer is missing after import, it stops and asks.

</aside>

Success criteria

Every G29 input listed in §5 visibly changes the cluster within one frame of the message arriving.
The four Figma states (Driving, Regen Braking, Overspeed Alert, Drive Mode Dial) can all be reached with the wheel alone, without touching the screen.
Claude Code builds the prototype from the prompt in §13 with no manual layer wiring. The only manual work is the Connect setup in §10.
inspect_interactions reports zero issues.

2. Scope

In scope

Speed dial with rotating pointer and digital speed
Power dial (power ↔ CHG regen zone) with rotating pointer
Throttle and brake bars
Steering wheel icon and STEER readout
Turn signals and hazards
Adaptive cruise (ACC) chip: on, off, standby, set speed
Regen level dots
Overspeed alert at 120 km/h
Drive mode overlay driven by the red dial
Drive mode badge
Now-playing strip synced with the center display
P R N D gear selector, shifted with the D-pad (brake to shift)

Out of scope

Animated road scene, moving cars, lane or path animation (see Figma archive sections)
Arc-fill gauges and masking effects
Real navigation logic; the nav card is static
Real vehicle physics; speed is a demo formula
Head-up display
Force feedback and LEDs on the G29

<aside> ⚖️

Design rule: every element is driven by exactly one basic ProtoPie mechanic: rotate a layer, scale a bar, swap text, toggle opacity, or change a color. If a requirement seems to need more, build the basic version and log the rest as a follow-up.

</aside>

2.1 Intended behaviour: the drive, moment by moment

This is the experience the prototype must deliver. It is also the live demo script. Every requirement in §6 exists to serve one of these moments.

Moment	Driver does (G29)	Cluster should	Why it matters
1 · Ready	Nothing	Show a calm, complete idle state: 0 km/h, gear P, power at idle, SPORT, ACC 110, nav card, track playing	The audience sees a believable car before anything moves
1b · Into Drive	Holds the brake, presses D-pad right three times	The underline slides P → R → N → D. Without the brake, the selector pulses and stays in P	A physical, real-car opening move, and it shows a rule (brake to shift) built from the spec
2 · Pull away	Presses the accelerator	THR bar fills instantly, power pointer swings right, speed climbs smoothly	Proves a physical input becomes a visual with no delay. This is the “it's live” moment
3 · Corner	Presses □, turns the wheel left	Left arrow blinks; wheel icon turns 1:1 with the G29; STEER readout counts	A continuous analog signal and a button event working side by side
4 · Too fast	Holds full throttle	At 120 km/h the speed turns red and the warning banner replaces the nav card	Shows a rule-based state change the AI built from one sentence of spec
5 · Slow down	Releases, brakes about 50%	Pointer swings into the green CHG zone, number turns green, ACC drops to Standby, the warning clears below 117	Braking feels rewarding (energy recovered) and safety conventions are respected
6 · Change mode	Rotates the red dial, presses it	Overlay appears, focus moves, press commits, the badge changes color and label	Browse-then-commit on a hardware control, eyes on the cluster
7 · Next song	Presses R2	Now-playing strip changes, and the center display changes at the same time	Multi-display sync from a single signal

Behaviour principles

Immediate: visuals bound to the wheel and pedals never ease or lag. The prototype must feel like the hardware, not like an animation.