用途:把 Figma 设计 URL、原型 URL 或设计截图转换为 Nuxt 3 落地页,页面由 @rds-vue-ui/* 组件拼装,并生成 pages/<page-name>.vue 与 assets/content/<page-name>.json 两个配套文件。
主要能力:采用双路径策略。Dev+ 账号调用 get_design_context 获取完整布局树、字体、颜色与组件结构,走富路径;Basic 账号或图片输入则走截图路径,用视觉模型识别页面区块、布局、文案与配色。两条路径都通过 rds-component-mapper 决策树选择 RDS 组件,并把 Figma 令牌映射为 RDS 主题 CSS 变量。
使用方式:需先确认 Figma MCP、Playwright MCP、rds-component-mapper 技能可用,并提供 Figma 设计 URL、原型 URL 或截图之一。设计 URL 需解析 fileKey 与 nodeId;富路径会下载 Figma 资源、处理超大响应(先用 get_metadata 再逐个获取子节点);截图路径对无法读取的文案使用占位符并明确标记。最后用 Playwright MCP 截图与原设计逐一比对。
适用场景:需要把设计稿快速落地为基于 RDS 组件库的营销落地页、活动页等。
限制:输出必须翻译为 Vue 3 + Bootstrap 5 + scoped SCSS 栈,禁止使用 Tailwind、React 语法或硬编码十六进制颜色;RDS 组件为 Nuxt 自动导入,不得手写 import;仅提供桌面端时按 Bootstrap 响应式栅格补全移动端默认表现。具体收费、价格、支持平台及组件清单资料未提供。