ux-collab

Sync React components to Figma designs. Use when: 'sync component to Figma', 'generate Figma from code', 'create design system in Figma', 'export React to Figma'. Parses React/TSX with Babel AST, resolves Tailwind classes, outputs Figma-compatible JSON for loading via Figma Desktop plugin.

Visual-first UI/UX collaboration loop using agent-browser (primary), Playwright MCP (alternative), Figma MCP (design system/specs), and Lucid (wireframes). Use when designing or iterating on UI, reviewing the live app visually, creating wireframes, making layout decisions, discussing design before building, or running a design→build→verify loop. Trigger phrases: 'let's work on the UI', 'show me what it looks like', 'create a wireframe', 'design the layout', 'take a screenshot', 'browser view', 'before we build let's decide'.

Install and configure all ux-collab dependencies. Use when: setting up ux-collab for the first time, something isn't working, check.sh reports failures, agent-browser is missing, Playwright MCP is missing, ImageMagick is missing, or the user asks to 'set up ux-collab', 'fix the dependencies', or 'get ux-collab ready'.