Design Rayden UI Components and Screens in Figma

Rayden UI Design Skill

Overview

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

When to Use This Skill

• You need to build a new Rayden UI component with all its variants in Figma
• You're composing a full screen (dashboard, landing page, auth form, settings, data table) from Rayden patterns
• You want to audit an existing Figma file for design system compliance
• You need to add new variants to an existing Figma component
• You're syncing React component updates back to Figma

How It Works

1. Verifies environment - Checks Figma MCP connection and write access via whoami
2. Loads component data - Reads Rayden component specs, anatomy, and tokens from the @raydenui/ai MCP server or installed package
3. Loads craft rules - Reads supporting files: resolved token values, craft rules, anti-patterns, and screen layout patterns
4. Identifies task type - Determines if building a single component, composing a screen, auditing, or adding variants
5. Applies style mode - Adjusts spacing, shadow, typography, and visual weight based on conservative/balanced/expressive mode
6. Builds with helpers - Generates Figma Plugin API code using mandatory helper functions (hexToRgb, loadFonts, applyShadow, applyBorder) with auto layout on every frame
7. Visual validation - Takes screenshots after each build stage and validates against 8 acceptance criteria (alignment, spacing, color accuracy, hierarchy, radius, shadow, primary action count)

Examples

Build a component with all variants

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

Use case: You're starting a new design system file and need the Button component with all variants (primary, secondary, grey, destructive) in solid and outlined appearances across SM and LG sizes.

Design a SaaS dashboard

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

Use case: You're designing an analytics dashboard and need a sidebar layout with KPI cards, a data table, and an activity feed - all using consistent Rayden tokens and spacing.

Build a marketing landing page

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

Use case: You need a high-impact landing page with bolder typography, stronger shadows, and asymmetric layouts that avoid the generic "AI-generated" look.

Audit an existing design for compliance

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

Use case: You have an existing Figma file and want to check that all colors match Rayden tokens, spacing is on the 4px grid, and radius is concentric.

Add variants to an existing component

/rayden-use add-variants Input https://figma.com/file/abc123

Use case: The Input component exists in your Figma file but is missing error and success states - the skill reads the existing structure and extends it.

Best Practices

• Always provide a Figma file URL as the last argument
• Use balanced mode (default) for most use cases; conservative for dense admin UIs, expressive for marketing pages
• Let the skill take screenshots between build stages - this is how it validates output quality
• Install @raydenui/ai as an MCP server for the richest component data access
• Review the generated output in Figma after completion - the skill validates mechanically but human judgment on aesthetics is still valuable

Security & Safety Notes

• This skill only reads local supporting files and calls the Figma MCP - no external network requests beyond Figma's API
• Requires Figma Dev or Full seat with write access to the target file
• Does not modify files outside of the target Figma document
• All design tokens are bundled in the skill's supporting files - no secrets or credentials involved

Common Pitfalls

Problem	Solution
"Font not found" error	The skill falls back to Roboto if Inter is unavailable - ensure Inter is loaded in your Figma file for best results
Components don't combine as variants	All components must share the same parent frame before calling combineAsVariants
Colors look wrong	Verify you're using resolved token hex values from tokens.md, not approximations
Figma permission denied	Check that your Figma seat is Dev or Full (not Viewer) and the file isn't view-only

Related Skills

• rayden-code - Generate React code with Rayden UI components (included in the same package)
• rayden-compose - Dedicated subagent for composing full-page Figma screens (included in this skill package)

Limitations

• Use this skill only when the task clearly matches the scope described above.
• Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
• Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.