UI to Vue
Convertit par lots des captures de maquettes UI en composants Vue 3 Composition API, mappés sur Vant, Element Plus ou Ant Design Vue, avec extraction de composants partagés et câblage du routeur.
- Quoi
- Convertit par lots des captures de maquettes UI en composants Vue 3 Composition API, mappés sur Vant, Element Plus ou Ant Design Vue, avec extraction de composants partagés et câblage du routeur.
- Coût
- Gratuit
- Prérequis
- Utilisez « UI vers Vue » avec votre Muse.
- Installation
- Copiez le prompt d’installation ci-dessous dans votre Muse — votre agent fait le reste.
Sélectionné par Skill Harbor : convertit par lots des captures de maquettes UI en code de composants Vue 3 Composition API, d'un contributeur de la communauté, listé ici avec crédit à son créateur. Donnez-lui un dossier de captures de design groupées par module et état de page, avec des dossiers d'images découpées (assets, icons, sprites, cut, images, cut-images) ; il combine les captures liées en composants de page pour les états liste, détail, formulaire, chargement et vide, mappe les éléments visuels natifs sur des composants Vant, Element Plus ou Ant Design Vue quand c'est pertinent, préfère les assets de page puis de module puis les assets partagés globaux, et extrait les régions UI répétées en composants partagés quand elles apparaissent plus d'une fois, plus le câblage du routeur pour la première passe. Inclut l'usage CLI. Explicitement déconseillé pour : une seule capture demandant un composant sur mesure, les cibles non-Vue, les designs exigeant une logique d'interaction ou un flux de données détaillé, la revue d'accessibilité, ou les captures contenant des données clients privées qui ne peuvent pas être envoyées à une API de modèle externe. Tiré du dépôt affaan-m/ECC (MIT). Bémols honnêtes : skill communautaire ; c'est une première passe, revoyez et affinez les composants générés avant de livrer, et gardez les données privées hors des captures. Skill Harbor ne vérifie jamais le code, examinez-le vous-même avant usage.
Version :
Installation
Copiez le dossier d’installation ci-dessous, puis collez-le dans MuseLe prompt d'installation ci-dessous inclut déjà les étapes de vérification : votre agent suit la checklist communautaire avant d'installer tout ce qui contient du code exécutable. Vous en voulez plus ?
Utilisez « UI vers Vue » avec votre Muse. Prérequis : un dossier de captures UI groupées par module/état de page (avec dossiers d'images découpées). N'incluez jamais de données clients privées dans les captures envoyées à une API de modèle externe. 1. Ouvrez le skill : https://github.com/affaan-m/ECC/blob/main/skills/ui-to-vue/SKILL.md et copiez le texte complet du SKILL.md. 2. Collez-le dans un chat avec Muse et ajoutez : « Convertis [screenshots/] en composants Vue 3 avec [Vant/Element Plus/Ant Design Vue]. » 3. Revoyez les composants de page, composants partagés et câblage du routeur générés avec Muse avant de livrer. Astuce : nommez les dossiers de captures par module et état (HomePage/List, HomePage/Detail) ; un bon groupement d'entrée fait la moitié de la qualité de sortie. Sécurité : un skill est du texte d'instructions ; il n'exécute rien tout seul. Le code généré est une première passe ; revoyez vous-même la logique d'interaction et l'accessibilité.
Enregistré dans vos installs récentes. Retrouvez-le à tout moment sur /connect.
Questions
Comment installer une création ?
Chaque fiche produit contient un prompt d’installation à copier-coller. Collez-le dans votre Muse et il installe la création pour vous — sans configuration manuelle.
Où va mon argent ?
Directement au vendeur. Skill Harbor ne traite jamais les paiements : le paiement se fait sur la page du vendeur, généralement via Stripe.
Que signifie le ✓ à côté du nom d’un créateur ?
Il signifie que nous avons confirmé l’identité de la personne derrière la fiche. Il ne dit rien sur le code lui-même — vérifiez toujours une création avant de l’installer.