让 AI 自动在 Figma 构建 Rayden UI 组件
解决设计开发协作痛点：利用 AI 结合 Rayden 设计体系，直接在 Figma 中生成合规 UI 组件、整屏页面，并自动执行视觉规范验证。
为什么需要这个技能
传统的 UI 开发流程中，设计师需要在 Figma 中手动构建组件，耗时且容易偏离设计规范。而本技能通过集成 Rayden 设计令牌（Design Tokens）和工艺规则（Craft Rules），让 AI 能够像专家一样思考，直接在 Figma 中生成符合品牌调性的组件和页面。
无论是构建新的按钮、输入框，还是设计复杂的仪表盘和着陆页，AI 都能自动处理排版、阴影和层级，确保输出结果在机械和视觉上均达到高品质要求。
适用场景
- 快速生成组件：需要创建带有多种状态（主色、灰色、破坏性等）和尺寸变体的完整组件库。
- 整屏页面设计：快速搭建包含侧边栏、数据表格和活动流的销售或数据看板。
- 设计合规性审计：检查现有 Figma 文件是否严格遵循 Rayden 的色彩网格和半径规范。
- 扩展现有组件：为已有的组件添加缺失的状态或变体，保持设计系统的一致性。
核心工作流
- 连接 Figma 环境：通过 MCP 工具验证身份和写入权限，确保 AI 可以操作目标文件。
- 加载设计规范：读取 Rayden 的组件规格、解剖结构和设计令牌数据，作为生成的基准。
- 执行构建指令：根据命令（如
/rayden-use）执行具体任务，包括加载布局模式（保守/平衡/表现）。 - 辅助函数增强：调用内置辅助函数自动处理字体、阴影、边框和自动布局，避免基础语法错误。
- 视觉质量验证：在构建阶段自动截取屏幕快照，并对照 8 项验收标准（对齐、间距、色彩准确度等）进行验证。
下载和安装
解压后将目录放入你的 AI 工具 skills 文件夹，确保已安装 @raydenui/ai MCP 服务器以获取最丰富的组件数据。
你可能还需要
暂无推荐