Build and maintain Rayden UI components and screens in Figma via Figma MCP with full design token enforcement
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.
whoami@raydenui/ai MCP server or installed package/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.
/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.
/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.
/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.
/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.
balanced mode (default) for most use cases; conservative for dense admin UIs, expressive for marketing pages@raydenui/ai as an MCP server for the richest component data access| 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 |
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)