figma-to-mobile
将Figma设计转换为移动端UI代码，支持Android/iOS/Flutter
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：figma-to-mobile。 它的用途是：将Figma设计转换为移动端UI代码，支持Android/iOS/Flutter 完整的 Skill 内容见：https://321skill.com/skills/figma-to-mobile/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
‘请将我的Figma设计稿链接 https://www.figma.com/file/... 转换为Android Jetpack Compose代码，并复用本地项目中的自定义Button组件。’它会自动提取设计令牌、扫描本地资源，生成包含颜色、字体、间距的Compose UI代码，并标注已复用的组件，支持多帧对比和手动修正反馈。
介绍
Figma-to-Mobile 解决的是从设计稿到移动端代码的重复劳动问题。设计师交付的 Figma 链接，开发者需要手动还原每个像素、每个间距、每个颜色变量，耗时且易出错。该 Skill 通过 Figma REST API 自动提取设计令牌（颜色、字体、间距等），并生成对应平台的 UI 代码，大幅缩短设计到开发交付的周期。
使用方法很简单：你将 Figma 设计稿链接发给 AI，并指定目标平台（Android Jetpack Compose/XML、iOS SwiftUI/UIKit、Flutter），AI 会自动调用 Figma API 获取设计数据，同时扫描你本地项目已有的资源文件，识别可复用的组件和样式，生成结构清晰、可直接运行的 UI 代码。支持多帧设计稿对比，方便处理多页面场景。
适合移动端前端开发者、全栈工程师以及 UI 设计师。开发者可以快速拿到代码骨架，减少重复工作；设计师可以用它验证设计落地效果；全栈工程师在需要同时维护多平台时能大幅提升效率。
使用前请确保 Figma 链接为公开可访问或已配置 API Token；本地项目应保持良好结构以便扫描复用；生成的代码建议作为起点，结合项目实际微调。该 Skill 支持捕获手动修正反馈并记录，后续转换会逐步优化输出质量。
核心特点
同类工具仅做简单代码生成，而 Figma-to-Mobile 具备项目感知扫描能力，能识别本地已有资源并复用，同时支持多帧对比和用户修正反馈闭环，持续提升转换质量。
注意事项
仅支持移动端平台（Android/iOS/Flutter），不适用于 Web 或桌面端代码生成；需要 Figma 在线链接，无法处理离线设计文件。
常见问题
支持哪些平台？
支持 Android（Jetpack Compose、XML）、iOS（SwiftUI、UIKit）和 Flutter。
需要提供什么？
需要 Figma 设计稿的分享链接（公开或可访问）以及目标平台类型。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/figma-to-mobile/raw/index.md 读取 figma-to-mobile 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/figma-to-mobile/raw/index.md（查看排版版本）