# Locofy.ai 將 Figma、Penpot 和 Adobe XD 設計稿轉換為網頁與行動應用程式前端程式碼，支援多種框架與工作流程。 - Findings24: - 網站: - 價格: Freemium - 分類: AI應用建立器, AI開發者工具, AI UI 生成器 ## 什麼是 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 方案有提到按年計費。 ## 快速資訊 - **類別**: 設計轉程式碼 / 開發者工具 - **主要輸入**: Figma、Penpot、Adobe XD - **主要輸出**: 適用於網頁與行動應用的前端程式碼 - **支援框架**: React、React Native、HTML/CSS、Flutter、Vue、Angular、Next.js、Gatsby - **工作流程**: 外掛、CLI、MCP、從 URL 匯入 - **來源網域**: locofy.ai