| name | rayden-use |
| description | Build and maintain Rayden UI components and screens in Figma via Figma MCP with full design token enforcement |
| category | design |
| risk | safe |
| source | https://github.com/playbookTV/rayden-ui-design-skill |
| source_type | community |
| date_added | "2026-04-10T00:00:00.000Z" |
| author | Leslie Williams |
| tags | figma, design-system, ui, components, mcp, rayden, rayna-ui |
| tools | mcp__claude_ai_Figma__use_figma, mcp__claude_ai_Figma__get_screenshot, mcp__claude_ai_Figma__whoami, Read |
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
- Verifies enprojectnment — Checks Figma MCP connection and write access via
whoami
- Loads component data — Reads Rayden component specs, anatomy, and tokens from the
@raydenui/ai MCP server or installed package
- Loads craft rules — Reads supporting files: resolved token values, craft rules, anti-patterns, and screen layout patterns
- 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.
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.
