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/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
'请根据这个Figma设计稿链接 https://www.figma.com/... 生成一个Flutter页面布局代码，要求复用项目中已有的颜色样式。' 它会提取设计令牌，扫描本地项目资源，生成对应的Flutter组件代码，并标注可复用的部分，你可以直接复制到项目中。
介绍
将Figma设计稿转化为移动端UI代码是一项繁琐且容易出错的工作，手动编写代码不仅耗时，还难以保证与设计稿一致，并且缺乏对已有项目资源的复用意识。本Skill通过Figma REST API自动提取设计令牌（颜色、间距、字体等），并结合项目感知扫描，识别本地已有组件和资源，极大提升从设计到代码的转化效率。
使用方式非常简单：你只需提供Figma设计稿链接，并指定目标平台（Android的Jetpack Compose/XML、iOS的SwiftUI/UIKit或Flutter），Skill会自动拉取设计稿数据，解析各帧布局，生成对应的移动端UI代码。同时，它支持多帧对比，方便你批量生成多个页面，并通过反馈日志记录手动修正，持续优化生成质量。
本Skill适用于移动端前端开发者、全栈开发者以及UI设计师，特别是那些需要频繁将设计稿转化为代码的团队。无论是开发新App、迭代版本，还是统一设计系统，都能显著减少重复劳动。
建议在使用前确保Figma设计稿已设置好公开或团队可访问权限，并提前梳理本地项目中的可复用资源（如颜色变量、组件库），以获得最佳生成效果。生成代码后仍需根据实际业务逻辑进行微调，但整体框架和样式可节省大量初稿时间。
核心特点
与同类工具相比，本Skill的核心优势在于项目感知扫描：它能自动识别本地项目中的已有组件和资源，避免重复生成，并支持多平台（Android/iOS/Flutter）同时输出，配合多帧对比和反馈日志，持续提升生成准确性。
注意事项
不适合生成包含复杂交互逻辑、后端调用或动态数据的完整业务页面，仅输出布局和样式代码，且依赖Figma API的可用性和设计稿的规范程度。
常见问题
如何获取Figma设计稿链接？
打开Figma文件，点击右上角「Share」复制链接，确保链接权限为「Anyone with the link」或团队可访问。
支持哪些移动端平台？
支持Android（Jetpack Compose、XML）、iOS（SwiftUI、UIKit）和Flutter，可在使用时指定。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/figma-to-mobile-x/raw/index.md 读取 figma-to-mobile 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/figma-to-mobile-x/raw/index.md（查看排版版本）