Agent Skills
返回列表
Figma 移动端 UI 代码生成

Figma 移动端 UI 代码生成

开发编程 更新于 2026.08.30

将以下提示词粘贴到你的 AI 对话框中：

请根据 https://skillhub.cn/install/skillhub.md，安装 @user_15292d5a/yjkj-figma-to-mobile。

技能介绍

解决的问题

Figma 设计稿到移动端代码之间常有一层“人工翻译”成本：节点层级需要映射为 RecyclerView、Compose、SwiftUI 等真实组件，列表、状态、组件复用也容易被简化成静态布局。figma-to-mobile 面向这种场景，把 Figma 链接作为输入，通过脚本拉取节点数据，再结合用户确认生成可继续迭代的 UI 代码。

工作方式与适用边界

  • 输入：单个 Figma frame 链接；如果链接指向整页，会提示先选择具体 frame。
  • 平台：支持 Android XML、Android Compose、iOS UIKit、iOS SwiftUI。
  • 关键步骤：先做结构摘要，再确认输出格式、动态列表、自定义组件等歧义，然后生成带文件名的代码。
  • 多链接处理：可识别同一页面的不同状态、主页面与抽屉/弹层、独立页面，并给出代码组织建议。
  • 迭代：支持局部修改，例如间距、颜色、组件替换；已落盘文件时倾向最小 patch，而不是整体重生成。
  • 注意：需要本地设置 FIGMA_TOKEN，不要把 token 粘贴到聊天；复杂渐变、深层组件、超大 frame 可能需要人工确认或拆分。

使用场景

  • 收到 Figma 单 frame 链接，需要生成 Android XML 布局并确认卡片是否为 RecyclerView 列表。
  • 收到两个首页 frame，需要区分有 banner 与无 banner 状态并生成条件显隐代码。
  • 收到 iOS 设计稿链接，需要输出 SwiftUI 布局并处理导航栏、列表和底部按钮结构。
  • 本地项目已有 CompactSwitch，需要在生成 Android 代码时替换默认 Switch 组件。

适合人员

  • 维护 Android XML 的移动端开发，需将 Figma 页面转成可编辑布局。
  • 使用 Jetpack Compose 的开发，需从 Figma 获取结构并生成 Compose UI。
  • iOS SwiftUI 开发，需把设计稿映射成导航栏、列表、卡片等视图。
  • 负责 UI 组件规范的移动端工程师，希望把自定义组件替换进生成代码。