Anima

Anima是什麼？

Anima是一個能將產品設計轉換為前端代碼，並用於建構網路應用的AI平台。使用者可以從Figma設計、文字說明、截圖、現有的網站或代碼庫開始，進而生成可執行、可編輯且可導出的應用程式。

它早期以Figma轉React、Vue和HTML的工具為主，目前已擴展到Anima Playground與Agent Grid。新定位涵蓋AI應用生成、即時預覽、Git倉庫、託管發布、資料庫、設計系統以及編碼代理協作。

主要功能

1. Figma轉代碼

使用者可以貼上Figma畫面的連結，或是使用Anima Figma外掛程式來導入設計內容。此外掛程式能夠擷取變數、設計令牌、組件資訊以及自動佈局功能，因此通常比僅透過Figma API來導入時能獲得更完整的資料。

• 從單個畫框、組件或多螢幕流程生成代碼。
• 將Auto Layout轉換為響應式佈局。
• 識別顏色、字體、間距和重複使用的組件。
• 支援導入Figma變數與設計令牌。
• 在瀏覽器或Figma Dev Mode中查看和導出。

設計結構會直接影響程式碼的品質。使用自動佈局、規範的命名方式、組件化以及一致的斷點設定，通常比大量使用絕對定位更能讓程式碼更易於維護。

2. 文字生成Web應用

在Anima Playground中，用戶可以描述產品目標、受眾群體以及核心功能，讓AI生成可運行的網頁或應用程式。之後還可以透過聊天功能來修改內容、佈局、組件以及互動方式。

提示詞應重點說明產品的意圖與資訊結構，而非僅堆砌像素與顏色。複雜的應用最好分模組生成並逐步測試。

3. 網站與圖片轉代碼

Anima支援輸入公開網頁地址或圖片來生成前端實作。網站轉碼後可產出HTML或React，適用於原型設計、遷移評估以及內部重構的起點。

複製公開網站的技术能力並不代表擁有該網站的內容、商標、圖片或設計的版權。不得未經授權就複製他人的網站，並用其進行欺騙、釣魚或用於商業目的。

4. React、Vue與HTML輸出

Figma的工作流程支援React、Vue和HTML，並提供JavaScript、TypeScript以及多種樣式選項。也可選擇CSS、Tailwind、Styled Components、CSS Modules、SASS和SCSS等方式。

• React組件與JavaScript或TypeScript。
• Vue前端代碼。
• 獨立HTML和CSS，不強制綁定框架。
• MUI、Ant Design、Shadcn等組件庫選項。
• 響應式頁面與多斷點輸出。

不同入口支援的組合並不完全相同。網站轉碼目前的限制比Figma轉換更多，生成前應查看實際設定項。

5. 遊戲場預覽與編輯

Playground提供了Preview、Code、Database和Flow等區域。使用者可以執行應用程式、查看或編輯代碼、管理資料與使用者，並檢查頁面之間的導航。

每次AI操作都會產生可編輯的代碼，開發者仍可直接修改。生成應用應經過依賴、無障礙、性能和安全測試後才能投入生產。

6. 資料庫、使用者與後端能力

Anima可為應用程式添加資料庫與使用者認證功能，並在Playground中管理資料。它適合用來快速建立具有狀態的原型或內部工具。

涉及登入、權限和敏感數據時，必須測試訪問控制、會話、數據隔離和刪除機制。AI自動搭建的後端不能跳過安全評審。

7. 托管、發布與自訂域名

使用者可以將專案部署到Anima提供的地址上，也可以在付費方案中連接自訂網域名稱。分享Playground連結與公開發布是不同的操作，公開發布會讓應用程式對外開放。

上線前應確認環境變數、金鑰、資料庫和測試數據沒有暴露。自訂域名還需正確配置DNS和HTTPS。

8. Agent Grid與Git工作流

Agent Grid是Anima為AI代理所提供的用於創建、託管、發布及分享應用的環境。每個Artifact都相當於團隊工作區中的真實Git儲存庫，代理可以對其進行克隆、提交及推送修改。

• 從提示、網站或Figma創建應用。
• 導入已有代碼或創建空倉庫。
• 透過Git繼續編輯和維護Artifact。
• 生成多個變體並比較。
• 發布或撤下公開應用。

代理的建立與複製操作可能並非冪等操作，超時後應先檢查工作區列表再重試。發布屬於外部狀態變更，需要明確授權。

9. Anima MCP與CLI

官方的MCP可以連接到Claude Code、Codex、Cursor、VS Code以及其它相容的客戶端，這樣一來，編碼代理就能直接存取Figma、Playground以及團隊設計系統。如果沒有MCP客戶端，也可以使用Anima CLI。

連線時需要Anima帳戶，並在瀏覽器中完成認證，Figma功能還需授權相應的檔案。MCP生成的內容同樣會計入代碼生成額度。

10. API與後端SDK

Anima API和後端SDK能將Figma或公開網站轉換為前端代碼，適合用於嵌入自動化系統、AI代理以及開發者產品中。該SDK支援設定框架、語言、樣式以及UI元件庫。

API訪問需要聯繫官方，公開定價頁沒有列出統一接口單價。後端密鑰不得放在瀏覽器代碼中。

11. 自帶模型與BYOK

使用者可連接ChatGPT訂閱、OpenAI API金鑰或Anthropic API金鑰，讓Playground聊天使用自己的模型額度。啟用後，聊天訊息不會消耗Anima AI信用點。

網站克隆、設計轉碼、圖片轉碼、託管、發布以及團隊功能，可能仍需要使用 Anima 的付費方案或按使用量計費。而模型供應商的訂閱費用和 API 使用費則需另行計算。

適合哪些用戶？

• 需要將Figma設計快速轉為前端代碼的設計師。
• 處理設計交付和組件實現的前端開發者。
• 希望從文字構建可運行原型的產品團隊。
• 使用Claude Code、Codex或Cursor的編碼代理用戶。
• 需要在應用中嵌入設計轉代碼能力的平台。
• 管理企業設計系統、權限和合規性的組織。

如何從Figma生成代碼？

1. 整理Figma組件、Auto Layout、變數和斷點。
2. 複製畫框連結，或安裝Anima Figma插件。
3. 登入Playground並連接相應的Figma帳戶。
4. 選擇React、Vue或HTML，以及語言和樣式方案。
5. 導入單屏或透過原型連結導入多屏流程。
6. 在預覽中檢查佈局、字體、互動和響應式效果。
7. 直接編輯代碼或繼續用提示詞修正。
8. 導出到代碼庫，運行測試後再合併和發布。

價格與計劃

截至2026年8月26日，官方目前列出的有Free、Starter、Pro、Business和Enterprise這幾個等級，且支援按月或按年付費。定價頁面上的動態套餐資訊並未在公開的抓取結果中完整顯示，因此下表僅列出可即時核實的額度以及企業用戶的起價。

一次代碼生成包括Figma插件導出、Playground設計導入、網站克隆、提示生成或MCP生成。以上內容於2026年8月26日進行了核驗，具體的個人與團隊價格、席位、託管及超額規則應以官方實時結算頁面為準。

取消與付款

官方說明，訂閱服務可以隨時更改或取消，取消後仍可繼續使用至當前的計費週期結束。升級時，通常只需支付本週期剩餘時間的差額即可。

付款方式包括信用卡、Apple Pay和Google Pay，企業客戶則可以選擇電匯或開立發票來付款。購買之前，請務必確認稅費、自動續訂的日期以及年度預付的金額。

代碼版權與開源邊界

Anima條款規定，平台所生成的代碼與Apache 2.0或MIT規範相容，且不伴隨任何相關的版權許可要求。不過，這並不代表對於輸入的設計、圖片、字體、商標以及第三方組件本身的權利限制就會因此而消失。

Anima核心平台、代碼生成引擎和託管服務屬於商業產品。官方GitHub公開了MCP指南、SDK以及部分範例，但這些儲存庫的公開並不代表整個Anima平台都是開源的。

安全與使用注意事項

• 只授權代理訪問完成任務所需的Figma檔案和倉庫。
• 不要把API密鑰貼進聊天、截圖或前端代碼。
• 發布前檢查依賴漏洞、輸入驗證和訪問控制。
• 克隆網站必須獲得內容與設計使用許可。
• 生成的代碼應通過視覺、響應式、無障礙和性能測試。
• 團隊應對Git提交、發布和刪除操作保留審計。

產品優勢

• 覆蓋Figma、提示、圖片、網站和代碼多種入口。
• 輸出React、Vue和HTML等可編輯前端代碼。
• 將預覽、資料庫、Git和發布整合到同一流程。
• 提供MCP、CLI、API和後端SDK。
• 支援自帶ChatGPT訂閱或模型API金鑰。

產品局限

• 生成代碼仍需開發者清理和測試。
• 不同入口支援的框架和樣式選項不完全一致。
• 免費版生成與多螢幕流程額度較低。
• 公開定價頁動態內容不易完整核驗。
• 核心平台不是開源自部署產品。

常見問題

Anima可以把Figma轉成什麼代碼？

Figma的工作流程支援React、Vue和HTML，並可選擇JavaScript、TypeScript、Tailwind以及多種CSS方案，實際可用的選項則取決於入口與框架。

可以從文字直接生成應用嗎？

可以。Anima Playground支援從提示詞創建可運行的Web應用，並持續透過聊天、代碼編輯和Git流程進行迭代。

免費版有多少生成額度？

官方目前說明Free包含5次代碼生成，並提供每日5條Playground聊天及5次Figma導入或網站克隆。

Anima支援Codex和Cursor嗎？

支持。官方MCP指南列出了Codex、Claude Code、Cursor和VS Code等客戶端，用戶需要Anima帳戶並完成認證。

自帶API密鑰後所有功能都免費嗎？

不是。BYOK可讓聊天使用自有模型額度，但網站克隆、設計轉代碼、託管、發布和團隊能力仍可能收費。

Anima是開源工具嗎？

核心平台並非開源產品。官方雖然公開了MCP指南、SDK以及部分專案，但無法將商業用程式碼的生成與託管服務標示為開源。