Locofy.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 等工具搭配使用。

響應式輸出與修訂

可處理響應式版面、精修產生的區塊，並生成互動式原型以支援審查與迭代。

使用情境

“設計到開發交接”

當團隊希望從設計走向實作，而不需手動重建版面時，將 mockup 轉成新產品畫面的程式碼。

“網頁應用與網站建置”

使用框架特定匯出，為網頁應用與網站產生前端程式碼，包括 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 方案有提到按年計費。