playbook-builder

Translate a Figma design into view-layer Playbook components. Fetches design data via playbook-builder (terminal `npx`/binary or equivalent plugin or marketplace wrapper); reads the optimized spec as the single source of truth; generates modular UI (React TSX or ERB partials) with client-side interactivity. Also use for Path C — add, edit, or extend existing nitro-web pages or features from a scoped Figma delta, reconciling the spec into existing code. Does NOT generate application logic, Turbo wiring, or backend data processing. Use when the user provides a Figma URL (and often a target component directory) and asks to build, create, implement, extend, edit, or add UI.

Generate UI code using Playbook design system components with validated props. Use when creating React/Rails UI, processing Figma handoffs, building forms, cards, dialogs, tables, or any user interface. Reads structured metadata from playbook-ui package to ensure correct component usage.