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
— Checks Figma MCP connection and write access via
Related Skills
Verifies environment
whoami
Loads component data — Reads Rayden component specs, anatomy, and tokens from the @raydenui/ai MCP server or installed package
Identifies task type — Determines if building a single component, composing a screen, auditing, or adding variants
Applies style mode — Adjusts spacing, shadow, typography, and visual weight based on conservative/balanced/expressive mode
Builds with helpers — Generates Figma Plugin API code using mandatory helper functions (hexToRgb, loadFonts, applyShadow, applyBorder) with auto layout on every frame
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.
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.
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.
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.