# Locofy.ai 将 Figma、Penpot 和 Adobe XD 设计稿转换为 Web 和移动应用前端代码，支持多种框架与工作流。 - Findings24: - 网站: - 价格: Freemium - 分类: AI应用构建器, AI开发者工具, AI 界面生成器 ## 什么是 Locofy.ai？ Locofy.ai 是一个设计转代码平台，可将 Figma、Penpot 和 Adobe XD 设计转换为前端代码。该网站将其定位为一种由 AI 驱动的方式，帮助将视觉设计转化为适用于网页和移动项目、便于开发者使用的输出。 该产品支持多种生成工作流，包括插件、CLI、MCP 以及从 URL 导入的路径，因此设计师、开发者和构建者都可以从适合自己角色的工作流开始。已发布页面还展示了 React、React Native、HTML/CSS、Flutter、Vue、Angular、Next.js 和 Gatsby 等框架目标，以及将代码同步到 GitHub 或在基于编辑器的工作流中使用的选项。 ## Locofy.ai 能做什么？ ### 设计转代码转换 将 Figma、Penpot 或 Adobe XD 设计转换为开发者友好的前端代码，并为网页和移动端输出提供不同路径。 ### 框架特定导出 可根据设计来源在 React、React Native、HTML/CSS、Flutter、Vue、Angular、Next.js 和 Gatsby 等支持目标中进行选择。 ### 设计系统复用 通过 CLI、GitHub 或 Storybook 复用自定义组件和设计系统元素，使生成的代码能够适配现有产品代码库。 ### 多种生成工作流 通过插件、CLI、MCP 或从 URL 导入的流程进行工作，让不同团队都能保持自己偏好的工作方式。 ### 编辑器与 AI 工具集成 将代码同步到 GitHub，导出到 VS Code 等编辑器，并通过 MCP 或 LLM 集成与 Cursor、Windsurf、Gemini CLI 和 Claude Desktop 等工具协同使用。 ### 响应式输出与迭代 处理响应式布局，优化生成的部分内容，并生成交互式原型以支持评审和迭代。 ## 使用场景 ### 设计到开发交接 当团队希望从设计直接进入实现，而不手动重新搭建布局时，可将原型图转换为新产品界面的代码。 ### 网页应用和网站构建 使用框架特定导出为网页应用和网站生成前端代码，包括 React、Next.js、Vue、Angular、HTML/CSS 和 Gatsby。 ### 移动应用构建 从同一设计源为以 React Native 或 Flutter 为目标的团队生成面向移动端的代码。 ### 现有设计系统项目 当项目已经有组件库时，可在 CLI、GitHub 和 Storybook 支持路径下复用现有组件和设计系统规则。 ### AI 辅助工程工作流 当开发者希望将代码导出、优化和同步尽量贴近日常工具时，可在基于编辑器或基于代理的工作流中使用 Locofy。 ## 常见问题 ### Locofy 可以使用哪些设计输入？ Locofy 可与 Figma、Penpot 和 Adobe XD 设计配合使用。文档还描述了多种从设计 URL、插件、CLI 或基于 MCP 的工作流开始的方式。 ### Locofy 支持哪些框架和工作流？ 源内容描述了可输出到 React、React Native、HTML/CSS、Flutter、Vue、Angular、Next.js 和 Gatsby。它还提到可将代码导出到 GitHub，并通过 LLM 和 MCP 集成在 VS Code、Cursor、Windsurf、Gemini CLI 和 Claude Desktop 等编辑器中使用结果。 ### Locofy 的 token 系统如何运作？ 定价 FAQ 说明，当你将设计转换为前端代码时会消耗 LDMtokens，并且在你选择套餐时，这些 token 会添加到你的账户中。 ### 我以后可以更改或取消套餐吗？ 可以。定价 FAQ 说明你可以随时升级或降级，在下一个计费周期前购买更多 LDMtokens，并可从仪表板取消。年度计费在 Enterprise 套餐中有提及。 ## 快速信息 - **类别**: 设计转代码 / 开发者工具 - **主要输入**: Figma、Penpot、Adobe XD - **主要输出**: 适用于网页和移动应用的前端代码 - **支持的框架**: React、React Native、HTML/CSS、Flutter、Vue、Angular、Next.js、Gatsby - **工作流**: 插件、CLI、MCP、从 URL 导入 - **源域名**: locofy.ai