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-7/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
‘把这个 Figma 链接转成 Android Jetpack Compose 代码，尽量复用本地项目已有的 Button 和 Card 组件。’ 它会自动解析图层的设计令牌（颜色、间距、字体），匹配本地资源，生成整洁的 Compose 布局代码，并标注哪些部分可进一步优化。
介绍
设计师和开发者之间常因设计稿到代码的转换耗费大量精力，手动还原容易出错且效率低。本 Skill 直接从 Figma 链接提取设计元素，自动生成 Android（Jetpack Compose、XML）、iOS（SwiftUI、UIKit）和 Flutter 的移动端 UI 代码，大幅缩短从设计到开发的距离。
使用方式很简单：将 Figma 设计稿链接发给 AI，说明目标平台（如“转 Android Jetpack Compose”），Skill 会通过 Figma REST API 获取设计令牌、图层结构，并扫描本地项目已存在的资源进行智能复用，输出可直接运行的布局代码。支持多帧对比，方便一次性处理多个页面。
适合前端开发者、全栈开发者、移动端工程师以及 UI 设计师，尤其是需要频繁将 Figma 设计落地为多平台代码的团队。设计师可用它快速验证布局可行性，开发者则能减少重复的手写代码工作。
建议在使用前确保 Figma 链接可公开访问或已配置访问令牌，并提前整理好本地项目中的可复用组件。生成的代码仍需人工审查微调，但能节省 80% 以上的基础布局编写时间。注意它不处理动画、交互逻辑或复杂自定义组件，适合作为高效起点而非最终交付。
核心特点
同类工具通常只做简单导出，本 Skill 会扫描本地项目资源进行复用，并支持多框架（Compose、SwiftUI、Flutter）对比输出，同时通过反馈日志记录手动修正，持续优化生成质量。
注意事项
不适合非移动端（Web、桌面）或纯矢量图导出场景，且需要 Figma 设计稿结构清晰、图层命名规范才能获得最佳效果。
常见问题
支持哪些移动端框架？
Android Jetpack Compose、XML；iOS SwiftUI、UIKit；Flutter。
需要 Figma 文件公开吗？
需要提供 Figma 文件链接，并确保 AI 可访问（公开或配置了 Figma 个人访问令牌）。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/figma-to-mobile-x-7/raw/index.md 读取 figma-to-mobile 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/figma-to-mobile-x-7/raw/index.md（查看排版版本）