
关于
通过 Figma MCP 在 Figma 中构建和维护 Rayden UI 组件和界面,完全强制设计令牌。
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
工作原理
- 验证环境 — 通过
whoami检查 Figma MCP 连接和写入权限 - 加载组件数据 — 从
@raydenui/aiMCP 服务器或已安装包中读取 Rayden 组件规格、结构和令牌 - 加载工艺规则 — 读取支持文件:已解析的令牌值、工艺规则、反模式和页面布局模式
- 识别任务类型 — 确定是构建单个组件、组合页面、审计还是添加变体
- 应用风格模式 — 根据保守/平衡/表现力模式调整间距、阴影、排版和视觉权重
- 使用辅助函数构建 — 使用强制辅助函数(hexToRgb、loadFonts、applyShadow、applyBorder)生成 Figma Plugin API 代码,每个 frame 都使用 auto layout
- 视觉验证 — 在每个构建阶段后截图,并根据 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 配置文件会导致令牌值偏移 |