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-2/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
‘这是我的Figma设计链接：[链接]，请帮我生成Android Jetpack Compose的UI代码。’ 它会调用Figma API解析设计稿，扫描你本地Android项目的资源文件，生成可复用的Compose组件代码，并支持你对比不同画框的差异。如果你对生成的代码做了手动调整，可以通过反馈日志记录下来，帮助工具在下一次为你生成时进行优化。
介绍
该Skill旨在解决设计师与移动端开发者之间的协作断层问题。当设计师在Figma中完成UI设计后，开发者需要手动将其转化为Android、iOS或Flutter代码，这个过程耗时且容易出错。本工具通过连接Figma REST API，自动提取设计元素和设计令牌（Design Tokens），并扫描本地项目资源以复用现有组件，从而将设计稿高效、准确地转换为可直接使用的UI代码。
使用方式非常直接：用户只需提供一个有效的Figma设计文件链接，并指定目标平台（如Android Jetpack Compose、iOS SwiftUI或Flutter），Skill便会自动分析设计稿，生成对应的布局代码。它还支持多画框（Frame）对比，帮助用户处理复杂的设计稿，并能通过反馈日志记录手动修正，用于持续优化转换结果。
该Skill非常适合移动端开发者（尤其是前端/全栈开发）、UI设计师以及项目经理。对于开发者，它能极大减少从设计到代码的重复劳动；对于设计师，可以快速验证设计在代码中的实现效果；项目经理则能借此工具提升团队的整体交付效率。
使用建议：在提供Figma链接前，请确保设计稿的图层命名和分组结构清晰，这有助于提高代码生成的准确性。初次使用时，建议从简单的单画框设计开始，熟悉流程后再处理复杂项目。注意，该工具主要生成UI布局和样式代码，复杂的业务逻辑仍需开发者手动补充。
核心特点
核心区别在于其“项目感知”能力：它不仅解析Figma设计，还会扫描本地项目资源以复用现有组件和设计令牌，避免了生成冗余代码，使输出代码更贴合项目现有架构。同时，它通过反馈日志记录手动修正，能持续学习和优化特定项目的转换规则。
注意事项
不适合需要生成复杂业务逻辑或动态交互代码的场景，主要专注于静态UI布局和样式的转换。
常见问题
支持哪些移动端开发框架？
支持Android（Jetpack Compose, XML）、iOS（SwiftUI, UIKit）和Flutter。
需要提供Figma的什么权限？
需要提供可通过Figma REST API访问的设计文件链接，通常需要文件为公开或已授予相应访问令牌（Access Token）。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/figma-to-mobile-x-2/raw/index.md 读取 figma-to-mobile 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/figma-to-mobile-x-2/raw/index.md（查看排版版本）