[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-60ed0d3d-432a-414a-93d5-bb4eb99d3831":3,"$flK3TeTeujOGFFFTVOQROAdZrIgzApJdGgiolEU4h63M":43},{"id":4,"title":5,"description":6,"categoryId":7,"moduleId":8,"tags":9,"prompt":10,"icon":11,"source":12,"sourceUrl":13,"authorId":14,"authorName":15,"isPublic":16,"stars":17,"runs":18,"createdAt":19,"updatedAt":19,"module":20,"category":27,"packages":34},"60ed0d3d-432a-414a-93d5-bb4eb99d3831","rayden-use","构建和维护Figma中的Rayden UI组件和屏幕，通过Figma MCP执行完整的设计令牌强制","cat_design_ui","mod_design","sickn33,design","---\nname: rayden-use\ndescription: Build and maintain Rayden UI components and screens in Figma via Figma MCP with full design token enforcement\ncategory: design\nrisk: safe\nsource: https:\u002F\u002Fgithub.com\u002FplaybookTV\u002Frayden-ui-design-skill\nsource_type: community\ndate_added: 2026-04-10\nauthor: Leslie Williams\ntags: figma, design-system, ui, components, mcp, rayden, rayna-ui\ntools: mcp__claude_ai_Figma__use_figma, mcp__claude_ai_Figma__get_screenshot, mcp__claude_ai_Figma__whoami, Read\n---\n\n# Rayden UI Design Skill\n\n## Overview\n\nBuild 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.\n\n## When to Use This Skill\n\n- You need to build a new Rayden UI component with all its variants in Figma\n- You're composing a full screen (dashboard, landing page, auth form, settings, data table) from Rayden patterns\n- You want to audit an existing Figma file for design system compliance\n- You need to add new variants to an existing Figma component\n- You're syncing React component updates back to Figma\n\n## How It Works\n\n1. **Verifies environment** — Checks Figma MCP connection and write access via `whoami`\n2. **Loads component data** — Reads Rayden component specs, anatomy, and tokens from the `@raydenui\u002Fai` MCP server or installed package\n3. **Loads craft rules** — Reads supporting files: resolved token values, craft rules, anti-patterns, and screen layout patterns\n4. **Identifies task type** — Determines if building a single component, composing a screen, auditing, or adding variants\n5. **Applies style mode** — Adjusts spacing, shadow, typography, and visual weight based on conservative\u002Fbalanced\u002Fexpressive mode\n6. **Builds with helpers** — Generates Figma Plugin API code using mandatory helper functions (hexToRgb, loadFonts, applyShadow, applyBorder) with auto layout on every frame\n7. **Visual validation** — Takes screenshots after each build stage and validates against 8 acceptance criteria (alignment, spacing, color accuracy, hierarchy, radius, shadow, primary action count)\n\n## Examples\n\n### Build a component with all variants\n\n```\n\u002Frayden-use Button https:\u002F\u002Ffigma.com\u002Ffile\u002Fabc123\n```\n\n**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.\n\n### Design a SaaS dashboard\n\n```\n\u002Frayden-use dashboard-screen balanced https:\u002F\u002Ffigma.com\u002Ffile\u002Fabc123\n```\n\n**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.\n\n### Build a marketing landing page\n\n```\n\u002Frayden-compose landing expressive https:\u002F\u002Ffigma.com\u002Ffile\u002Fabc123\n```\n\n**Use case:** You need a high-impact landing page with bolder typography, stronger shadows, and asymmetric layouts that avoid the generic \"AI-generated\" look.\n\n### Audit an existing design for compliance\n\n```\n\u002Frayden-use audit https:\u002F\u002Ffigma.com\u002Ffile\u002Fabc123\n```\n\n**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.\n\n### Add variants to an existing component\n\n```\n\u002Frayden-use add-variants Input https:\u002F\u002Ffigma.com\u002Ffile\u002Fabc123\n```\n\n**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.\n\n## Best Practices\n\n- Always provide a Figma file URL as the last argument\n- Use `balanced` mode (default) for most use cases; `conservative` for dense admin UIs, `expressive` for marketing pages\n- Let the skill take screenshots between build stages — this is how it validates output quality\n- Install `@raydenui\u002Fai` as an MCP server for the richest component data access\n- Review the generated output in Figma after completion — the skill validates mechanically but human judgment on aesthetics is still valuable\n\n## Security & Safety Notes\n\n- This skill only reads local supporting files and calls the Figma MCP — no external network requests beyond Figma's API\n- Requires Figma Dev or Full seat with write access to the target file\n- Does not modify files outside of the target Figma document\n- All design tokens are bundled in the skill's supporting files — no secrets or credentials involved\n\n## Common Pitfalls\n\n| Problem | Solution |\n|---------|----------|\n| \"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 |\n| Components don't combine as variants | All components must share the same parent frame before calling `combineAsVariants` |\n| Colors look wrong | Verify you're using resolved token hex values from tokens.md, not approximations |\n| Figma permission denied | Check that your Figma seat is Dev or Full (not Viewer) and the file isn't view-only |\n\n## Related Skills\n\n- `rayden-code` — Generate React code with Rayden UI components (included in the same package)\n- `rayden-compose` — Dedicated subagent for composing full-page Figma screens (included in this skill package)\n\n## Limitations\n- Use this skill only when the task clearly matches the scope described above.\n- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.\n- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.\n","","imported","https:\u002F\u002Fgithub.com\u002Fsickn33\u002Fantigravity-awesome-skills","user_system_seed","SkillOPIC",true,95,1501,"2026-05-16 13:36:17",{"id":8,"name":21,"slug":22,"icon":23,"description":24,"sort":25,"createdAt":26},"设计创意","design","mdi-palette-outline","UI 设计、生成艺术、品牌视觉等创意 Skill",3,"2026-05-16 12:53:40",{"id":7,"name":28,"slug":29,"icon":30,"description":31,"moduleId":8,"sort":32,"skillCount":33,"createdAt":26},"UI 设计","ui-design","mdi-monitor-cellphone","界面设计、交互规范、设计系统",1,36,[35],{"id":36,"skillId":4,"version":37,"fileName":38,"fileSize":39,"filePath":40,"fileHash":41,"manifest":42,"createdAt":19},"9c9b5e27-eb4e-4c02-a4d4-d99c8c246877","1.0.0","rayden-use.zip",2572,"uploads\u002Fskills\u002F60ed0d3d-432a-414a-93d5-bb4eb99d3831\u002Frayden-use.zip","657ebbfbe566039bf50621b03063a343c18769de401e7b35ed56712f56352b6a","[{\"path\":\"SKILL.md\",\"isDirectory\":false,\"size\":5782}]",{"code":44,"message":45,"data":46},200,"success",{"items":47,"stats":48,"page":51},[],{"averageRating":49,"totalRatings":49,"ratingCounts":50},0,[49,49,49,49,49],{"limit":52,"offset":49,"hasMore":53,"nextOffset":52,"ratedOnly":16},15,false]