Design Rayden UI Components and Screens in Figma

Rayden UI Design Skill builds and maintains Rayden UI components and full screens directly in Figma using the Figma MCP server. It enforces the Rayna UI design system through resolved design tokens, craft rules, anti-pattern detection, and visual validation, ensuring every output is mechanically correct and visually premium. The skill supports three style modes (conservative, balanced, expressive) and includes a dedicated subagent for full-page screen composition.

Use this skill when you need to build a new Rayden UI component with all its variants in Figma, compose a full screen (dashboard, landing page, auth form, settings, data table) from Rayden patterns, audit an existing Figma file for design system compliance, add new variants to an existing Figma component, or sync React component updates back to Figma.

Do not use this skill when the task falls outside the scope described above. Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.

You provide a Figma file URL as the last argument, along with the component name or screen type. Optionally specify a style mode (conservative, balanced, or expressive). For example:

/rayden-use Button https://figma.com/file/abc123

/rayden-use dashboard-screen balanced https://figma.com/file/abc123

/rayden-compose landing expressive https://figma.com/file/abc123

The skill verifies the Figma MCP connection, loads Rayden component specs and tokens from the @raydenui/ai MCP server or installed package, applies the selected style mode, generates Figma Plugin API code using mandatory helper functions (hexToRgb, loadFonts, applyShadow, applyBorder) with auto layout on every frame, and validates output against 8 acceptance criteria (alignment, spacing, color accuracy, hierarchy, radius, shadow, primary action count). You receive Figma components or screens built with consistent Rayden tokens and spacing.

This skill uses the tools mcp__claude_ai_Figma__use_figma, mcp__claude_ai_Figma__get_screenshot, and mcp__claude_ai_Figma__whoami. It reads Rayden component data from the @raydenui/ai MCP server or installed package. The skill only reads local supporting files and calls the Figma MCP - no external network requests beyond Figma's API.

This skill is for designers and developers who need to build Rayden UI components or screens in Figma with enforced design system compliance. It requires a Figma Dev or Full seat with write access to the target file. Use balanced mode (default) for most use cases, conservative mode for dense admin UIs, and expressive mode for marketing pages. Install @raydenui/ai as an MCP server for the richest component data access. The skill validates mechanically but human judgment on aesthetics is still valuable. Related skills include rayden-code for generating React code with Rayden UI components and rayden-compose for composing full-page Figma screens (both included in the same package).