figma-to-mobile
Figma 设计稿一键转移动端 UI 代码
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：figma-to-mobile。 它的用途是：Figma 设计稿一键转移动端 UI 代码 完整的 Skill 内容见：https://321skill.com/skills/figma-to-mobile-x-5/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
对 AI 说：'帮我将 Figma 链接 https://www.figma.com/file/xxx 中的登录页面转换为 Flutter 代码，并扫描本地项目中的现有按钮组件进行复用。'，它会自动提取设计稿中的颜色、字体、间距等设计令牌，结合本地项目资源生成可直接运行的 Flutter UI 代码，并输出多帧对比结果。
介绍
设计师交付 Figma 设计稿后，开发人员需要手动还原 UI 代码，耗时且易出错。本 Skill 通过 Figma REST API 自动提取设计令牌（颜色、字体、间距等），并扫描本地项目已有资源实现复用，直接生成 Android（Jetpack Compose / XML）、iOS（SwiftUI / UIKit）和 Flutter 的布局代码，大幅缩短设计到开发的交付周期。
使用方式很简单：只需提供 Figma 设计稿链接，并指定目标平台（如“Android Compose”或“Flutter”），Skill 即可自动分析设计稿中的图层结构、尺寸、间距等属性，结合项目本地已有的组件和资源，输出可直接运行的 UI 代码。支持多帧对比，方便同时生成多个页面。
适合前端开发、移动端开发、全栈开发者以及 UI 设计师。尤其适合需要快速将设计稿转化为可交互原型的团队，或希望在多个移动平台间保持 UI 一致的场景。
建议在使用前确保 Figma 设计稿的图层命名规范（如使用自动布局、定义组件），以便更准确地提取设计令牌。生成的代码可能需要根据项目实际依赖进行微调，同时建议通过反馈日志收集手动修正，持续优化转换效果。
核心特点
不同于通用的设计转代码工具，本 Skill 具备项目感知扫描能力，能自动识别本地已有组件和资源并复用，避免重复生成；同时支持多框架（Android、iOS、Flutter）和多帧对比，覆盖更全面的移动端开发场景。
注意事项
不适用于复杂交互逻辑（如动画、手势）的转换，仅生成静态 UI 布局代码。
常见问题
支持哪些移动平台？
支持 Android（Jetpack Compose 和 XML）、iOS（SwiftUI 和 UIKit）以及 Flutter。
如何提取设计令牌？
通过 Figma REST API 自动获取设计稿中的颜色、字体、间距等设计令牌，并映射到目标平台的代码中。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/figma-to-mobile-x-5/raw/index.md 读取 figma-to-mobile 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/figma-to-mobile-x-5/raw/index.md（查看排版版本）