What problem does it solve? Designing UI inside a real React project often produces generic, hand-rolled markup that ignores the project's existing components, tokens, and visual language. This Skill guides an AI assistant to act as a senior product designer on the Bingo canvas, deriving the project's visual language first and building with real components instead of improvised HTML. ## Core Features & Use Cases - Project-First Design: Derives tokens, components, and style sources from the actual project before writing any JSX, so output matches the existing design system. - Structured Design Loop: Enforces a mandatory workflow of gathering context, naming design nouns, resolving them to real components, drafting visibly, and verifying with screenshots. - Surgical Edits: Supports precise modifications to @-mentioned elements using grep, query, and targeted edits without rebuilding surrounding markup. - Use Case: Ask the assistant to build an order overview page using your project's card and button components; it will resolve each element to a real export, compose the page in visible chunks, screenshot the result, and critique it against a design checklist. ## Quick Start Ask the assistant to design a dashboard page on the canvas using the project's existing components and theme.
