Findings24Findings24
Locofy.ai logo

Locofy.ai

认领

Locofy.ai 可将 Figma、Penpot 和 Adobe XD 设计转换为适用于网页和移动应用的前端代码，支持插件、CLI、MCP、编辑器集成及代码同步到 GitHub。

AI网站设计AI开发者工具无代码低代码
访问网站
Locofy.ai preview

Locofy.ai 的功能

Locofy.ai 是一个设计转代码平台，可将 Figma、Penpot 和 Adobe XD 设计转换为前端代码。该网站将其定位为一种由 AI 驱动的方式，帮助将视觉设计转化为适用于网页和移动项目、便于开发者使用的输出。

该产品支持多种生成工作流，包括插件、CLI、MCP 以及从 URL 导入的路径，因此设计师、开发者和构建者都可以从适合自己角色的工作流开始。已发布页面还展示了 React、React Native、HTML/CSS、Flutter、Vue、Angular、Next.js 和 Gatsby 等框架目标，以及将代码同步到 GitHub 或在基于编辑器的工作流中使用的选项。

核心功能

设计转代码转换

将 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。

Pros and Cons

Pros

  • 支持多种设计输入，包括 Figma、Penpot 和 Adobe XD。
  • 为设计师、开发者以及 AI 辅助使用提供了多种工作流。
  • 可为广泛的前端框架和移动端目标生成代码。
  • 支持设计系统复用以及 GitHub 和编辑器集成等代码同步路径。
  • 提供面向企业的部署和安全定位，包括本地部署或云部署，以及源内容中的 SOC2/ISO 参考。

Cons

  • 提供的文本中没有公开明确的价格数字、套餐限制或试用详情。
  • 支持的输出和工作流细节较为宽泛，但源内容对边缘情况、输出约束或审查要求提供的信息有限。

FAQ

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 套餐中有提及。

Quick Facts

类别
设计转代码 / 开发者工具
主要输入
Figma、Penpot、Adobe XD
主要输出
适用于网页和移动应用的前端代码
支持的框架
React、React Native、HTML/CSS、Flutter、Vue、Angular、Next.js、Gatsby
工作流
插件、CLI、MCP、从 URL 导入
源域名
locofy.ai