Back to Plugins
WeaveFox.ai - AI Powered Figma/Image to Code (React, Vue, Antd,& more)

WeaveFox.ai - AI Powered Figma/Image to Code (React, Vue, Antd,& more)

Generate code from Figma design files with AI

design to code

Plugin Preview

WeaveFox.ai - AI Powered Figma/Image to Code (React, Vue, Antd,& more) preview

About this plugin

WeaveFox is an intelligent front-end development platform designed for the AI era. Built upon the Ant Bailing multimodal large model, it can directly generate front-end source code from design mockups, delivering a development experience characterized by high quality, efficiency, and productivity. The platform currently supports various mainstream application types, including enterprise-level back-office systems, mobile H5 pages, mini-programs, and mobile card-based applications.Core FeaturesImage-to-CodeDescription: The Image-to-Code feature uses multimodal recognition technology to convert images or design drafts into front-end source code, suitable for multiple endpoints. It supports back-office systems, mini-programs, mobile cards, and other application types, meeting the responsive layout needs of different devices.Highlights:Adapts to multiple application types, including back-office systems, mini-programs, and mobile platformsGenerates complete code structures directly from design mockups or screenshots, improving development efficiencyMulti-Technology Stack SupportDescription: The multi-end code generation capability allows users to flexibly generate code for multiple platforms based on a single asset, thereby accommodating a variety of application scenarios. This significantly enhances code reuse and reduces repetitive workload. The feature supports React, Vue, Ant Design, Element UI, and card-based technology stacks.Highlights:Generate multi-end code from a single sourceImprove code reuse and adapt to various endpoints and layoutsAutomatic Design PartitioningDescription: The automatic page partitioning feature intelligently segments an entire design page into modular code assets. Each generated code block can be independently exported, making it well-suited for modular management and reuse in projects.Highlights:Automatically divides an entire page into manageable code blocksSupports independent export of each code blockSemantics and ReusabilityDescription:The "Repeat" recognition feature automatically identifies repetitive or similar UI elements within the code and optimizes them during code generation, reducing redundancy and improving code quality and maintainability.Loop extraction for structured repetition.High-order component extraction for enhanced encapsulation.Highlights:Identifies similar and repeated UI componentsAutomatically optimizes repetitive code to streamline and simplify codebasesAutomatic Image Cutting & UploadDescription:The automatic image cutting and upload feature detects image components within the generated code and automatically slices and uploads them. This greatly reduces manual cutting tasks, making the development process more seamless.Automatic icon recognition and matching.Highlights:Automatically identifies and slices image areas, then uploads themEliminates manual image slicing operations, saving timeConvenient Export & IntegrationDescription: The code export feature enables flexible exporting or copying of generated code, allowing users to easily integrate code assets into their development projects. Multiple export formats are provided, facilitating integration with different technology stacks. Integration with code repository services also enables one-click merge request creation.Highlights:Supports flexible code export or copyingAdapts to various technology stacks and project requirementsAsset ManagementDescription: The asset library function stores and manages generated code assets in a centralized manner. Users can view, adjust, and export generated code from the asset library. Each generated code snippet or UI element is treated as an “asset” that can be edited, regenerated, and flexibly exported as needed. This makes it easy to refine and re-edit code assets on demand.Highlights:Provides a unified code management spaceSupports viewing, modifying, and exporting code assets for reuseAllows multiple edits and regenerations of each assetOffers flexible code export for project integration

Plugin Details

Version27
CreatedDecember 4, 2024
Last UpdatedAugust 5, 2025
CategorySoftware development
CreatorWeaveFox
Stats126 installs, 44 likes
PricingFree

Technical Details

  • API:1.0.0
  • UI:dist/index.html
  • main:dist/service.js
  • Document Access:dynamic-page
  • Network Access:

    to access local mcp server

  • Editor Types:
    figma
  • Allowed Domains:
    • http://avatars.githubusercontent.com
    • https://cdn.jsdelivr.net
    • https://collect.alipay.com
    • https://gw.alipayobjects.com
    • https://mdn.alipayobjects.com
    • https://os.alipayobjects.com
    • https://prepub.weavefox.cn
    • https://ur.alipay.com
    • https://weavefox-pre.alipay.com
    • https://weavefox.alipay.com
    • https://www.weavefox.cn
    • ws://localhost:8123
    • ws://localhost:8124
    • ws://localhost:8125