SuperAPI AI 工具集

figma-to-landing-page

设计与创作

查看项目

更新于 10-16 08:34

技能介绍

用途:把 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 响应式栅格补全移动端默认表现。具体收费、价格、支持平台及组件清单资料未提供。