What problem does it solve? Designing UI components and full screens in Figma while keeping them consistent with a design system is slow and error-prone. This Skill automates building, extending, and auditing Rayden UI components in Figma so every output follows resolved design tokens, spacing rules, and craft standards. ## Core Features & Use Cases - Component & Variant Building: Generate Rayden UI components (e.g., Button, Input) with all variants, sizes, and states directly in a Figma file using the Figma MCP. - Screen Composition: Compose full screens such as dashboards, landing pages, auth forms, and data tables in conservative, balanced, or expressive style modes. - Design System Auditing: Check an existing Figma file for token compliance, 4px grid spacing, and concentric radius rules. - Visual Validation: Takes screenshots after each build stage and validates against 8 acceptance criteria including alignment, color accuracy, and hierarchy. - Use Case: You are starting a new design system file and need the Button component with primary, secondary, grey, and destructive variants in solid and outlined appearances — invoke the skill with the component name and your Figma file URL. ## Quick Start Ask the AI to build the Button component with all variants in your Figma file by providing the component name and your Figma file URL.
