rayden-use – Design & UI skill for AI agents

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

This catalog entry does not bundle tokens.md, helper implementations, craft references or rayden-compose subagent. Locate a separately reviewed installation and actual Figma tool schemas before dependent steps; do not claim token/visual compliance from this overview. Confirm target file/page/nodes and edit scope, preserve originals/variants, and inspect screenshots after writes. Native connector seat/tool capability is determined by current account permissions, not the static tool names listed here.

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

• Review the actual Figma/token integration network behavior; this file cannot guarantee that calls are limited to Figma.
• Requires Figma Dev or Full seat with write access to the target file
• Does not modify files outside of the target Figma document
• Supporting token files are not bundled in this catalog copy; Figma content and external token-server calls may disclose private design data. Verify actual destinations and authorized scope.

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.