---

name: rayden-use description: 通过 Figma MCP 在 Figma 中构建和维护 Rayden UI 组件和页面，并完整执行设计令牌规范 category: design risk: safe source: https://github.com/playbookTV/rayden-ui-design-skill source_type: community date_added: 2026-04-10 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 设计技能

概述

通过 Figma MCP 直接在 Figma 中构建和维护 Rayden UI 组件和页面。该技能强制执行 Rayna UI 设计系统——已解析的设计令牌、工艺规则、反模式检测和视觉验证——确保每个输出在机械层面正确且视觉上优质。支持三种风格模式（保守、平衡、表现力），并包含一个专用子代理用于全页面屏幕组合。

适用场景

• 你需要在 Figma 中构建一个包含所有变体的新 Rayden UI 组件
• 你正在从 Rayden 模式组合完整页面（仪表盘、落地页、认证表单、设置、数据表格）
• 你想审计现有 Figma 文件的设计系统合规性
• 你需要为现有 Figma 组件添加新变体
• 你正在将 React 组件更新同步回 Figma

工作原理

1. 验证环境 — 通过 whoami 检查 Figma MCP 连接和写入权限
2. 加载组件数据 — 从 @raydenui/ai MCP 服务器或已安装包中读取 Rayden 组件规格、结构和令牌
3. 加载工艺规则 — 读取支持文件：已解析的令牌值、工艺规则、反模式和页面布局模式
4. 识别任务类型 — 确定是构建单个组件、组合页面、审计还是添加变体
5. 应用风格模式 — 根据保守/平衡/表现力模式调整间距、阴影、排版和视觉权重
6. 使用辅助函数构建 — 使用强制辅助函数（hexToRgb、loadFonts、applyShadow、applyBorder）生成 Figma Plugin API 代码，每个 frame 都使用 auto layout
7. 视觉验证 — 在每个构建阶段后截图，并根据 8 项验收标准（对齐、间距、颜色准确性、层次、圆角、阴影、主操作数量）进行验证

示例

构建包含所有变体的组件

/rayden-use Button https://figma.com/file/abc123

用例： 你正在启动一个新的设计系统文件，需要 Button 组件包含所有变体（primary、secondary、grey、destructive），以 solid 和 outlined 外观呈现，涵盖 SM 和 LG 尺寸。

设计 SaaS 仪表盘

/rayden-use dashboard-screen balanced https://figma.com/file/abc123

用例： 你正在设计一个分析仪表盘，需要带侧边栏的布局，包含 KPI 卡片、数据表格和活动动态——全部使用一致的 Rayden 令牌和间距。

构建营销落地页

/rayden-compose landing expressive https://figma.com/file/abc123

用例： 你需要一个高冲击力的落地页，使用更大胆的排版、更强的阴影和非对称布局，避免通用的"AI 生成"外观。

审计现有设计的合规性

/rayden-use audit https://figma.com/file/abc123

用例： 你有一个现有的 Figma 文件，想检查所有颜色是否匹配 Rayden 令牌、间距是否在 4px 网格上、圆角是否同心。

为现有组件添加变体

/rayden-use add-variants Input https://figma.com/file/abc123

用例： Input 组件已存在于你的 Figma 文件中，但缺少 error 和 success 状态——该技能会读取现有结构并扩展它。

最佳实践

• 始终提供 Figma 文件 URL 作为最后一个参数
• 大多数用例使用 balanced 模式（默认）；密集管理 UI 使用 conservative，营销页面使用 expressive
• 让技能在构建阶段之间截图——这是它验证输出质量的方式
• 安装 @raydenui/ai 作为 MCP 服务器以获得最丰富的组件数据访问
• 完成后在 Figma 中审查生成的输出——技能进行机械验证，但美学方面仍需人工判断

安全与安全说明

• 此技能仅读取本地支持文件并调用 Figma MCP——除 Figma API 外无外部网络请求
• 需要具有目标文件写入权限的 Figma Dev 或 Full 席位
• 不会修改目标 Figma 文档之外的文件
• 所有设计令牌都打包在技能的支持文件中——不涉及密钥或凭证

常见问题

| 问题 | 解决方案 | |------|----------| | "Font not found" 错误 | 如果 Inter 不可用，技能会回退到 Roboto——确保你的 Figma 文件中加载了 Inter 以获得最佳效果 | | 组件不能合并为变体 | 所有组件在调用 combineAsVariants 之前必须共享同一父 frame | | 颜色看起来不对 | 验证你的 Figma 文件是否使用 sRGB 颜色配置文件——P3 配置文件会导致令牌值偏移 |