WeaveFox : une plate-forme intelligente de développement frontal qui génère le code source directement à partir des dessins de conception

Introduction générale

WeaveFox est une plateforme de R&D intelligente de front-end lancée par Ant Group, qui vise à améliorer l'efficacité et la qualité du développement de front-end grâce à la technologie de l'IA. La plateforme est basée sur le grand modèle multimodal Bailing développé par Ant, qui peut générer directement un code source frontal basé sur des dessins de conception, et prend en charge une variété de clients et de piles technologiques, telles que React, Vue, etc. WeaveFox ne se contente pas de restaurer avec précision les ébauches de conception, mais prend également en charge les ajustements secondaires pour répondre à des besoins personnalisés. WeaveFox fait actuellement l'objet d'un développement à code source fermé et devrait être officiellement ouvert l'année prochaine, apportant une expérience de développement révolutionnaire pour les développeurs frontaux.

Liste des fonctions

• Générer le code source de l'application frontale sur la base des dessins de conception
• Prise en charge de plusieurs types de clients (console, mobile H5, applets, etc.)
• Compatible avec plusieurs piles technologiques (par exemple React, Vue, etc.)
• Fournir une compréhension fine de l'interface utilisateur et des services d'optimisation
• Permet un ajustement secondaire pour répondre aux besoins individuels
• Améliorer l'efficacité et la qualité du développement frontal

Utiliser l'aide

Processus d'installation

Actuellement, WeaveFox fait l'objet d'un développement à code source fermé et n'est pas encore ouvert au téléchargement et à l'installation. Il est prévu que les utilisateurs puissent télécharger et installer la plateforme via le site web officiel lorsqu'il sera officiellement ouvert l'année prochaine.

Lignes directrices pour l'utilisation

1. Connexion et configurationPour ce faire, vous devez : vous rendre sur le site officiel de WeaveFox pour vous inscrire et vous connecter à votre compte. Suivez les instructions pour terminer la configuration initiale.
2. Télécharger un dessinLes dessins de conception peuvent être téléchargés dans l'interface de la plate-forme, qui prend en charge différents formats (par exemple, PNG, JPEG, etc.).
3. Sélection d'une pile technologiqueLes avantages : Choisir la bonne pile technologique en fonction des exigences du projet, par exemple React, Vue, etc.
4. Générer le codeCliquez sur le bouton "Générer le code", WeaveFox génère automatiquement le code source de l'interface en fonction des dessins de conception.
5. Adaptation du codeLe code généré peut être adapté deux fois au sein de la plateforme pour répondre aux besoins individuels.
6. Téléchargement et déploiementAprès avoir terminé la mise au point, téléchargez le code généré et déployez-le dans l'environnement de développement approprié.

Fonctionnement détaillé

• Chargement de la conceptionIl prend en charge à la fois le téléchargement par glisser-déposer et la sélection de fichiers, et la plateforme analyse automatiquement le dessin ou modèle après le téléchargement.
• Sélection de la pile technologiqueL'utilisateur est donc libre de choisir en fonction des besoins de son projet.
• génération de codesWeaveFox : Basé sur le macromodèle multimodal Bailing développé par Ant, WeaveFox est capable de générer avec précision un code frontal conforme aux dessins de conception.
• Optimisation de l'interface utilisateurLe candidat doit être capable de travailler sur une plateforme avec une compréhension fine de l'interface utilisateur et de fournir des recommandations précises sur l'optimisation du code.
• Ajustements secondairesLes utilisateurs peuvent apporter des ajustements secondaires au code généré au sein de la plateforme afin de s'assurer que le code final répond aux exigences du projet.
• gestion de projetLa fonctionnalité de gestion de projet permet aux utilisateurs de gérer plusieurs projets au sein de la plateforme, ce qui facilite le contrôle des versions et la collaboration.

démonstrations

Jetons un coup d'œil à l'image animée suivante, à travers l'image animée, nous pouvons voir qu'une image peut être faite en arrière-plan de la page, c'est simplement les développeurs frontaux de l'"Artifact paresseux" !

en premier lieuNous allons découper l'image en morceaux, choisir les parties pour lesquelles nous voulons générer du code et appuyer très fort sur le bouton "Générer du code" !

accepterChoisissez votre pile technologique et votre framework préférés, par exemple React + AntD , et ce slacker intelligent générera du code basé sur l'architecture technologique que vous avez choisie.

après celaEnsuite, vous appuyez fortement sur "OK" et laissez la magie de la génération de code opérer !

ultimeDétendez-vous et attendez quelques minutes, et après un petit moment de thé, vous pourrez voir le code scintillant et un aperçu sympathique de l'effet !

Téléchargez l'image de l'interface mobile que nous devons créer, il identifiera automatiquement l'interface, puis vous aidera intelligemment à générer le code mobile et à prévisualiser l'effet. Les images animées sont les suivantes :

Et si vous n'êtes pas satisfait ? Il prend également en charge l'ajustement secondaire, de sorte que vous pouvez devenir un dieu du front-end en quelques secondes !

Et si la page est grande ? Permettez-moi de reproduire la page d'accueil d'une station B, de la découpe automatique de la partition à la génération du code, en quelques minutes seulement, sans avoir besoin de passer des heures de développement.