Concevoir avec
Mistral Vibe dans
OpenDesign.

storefront-product.html · 1440px

4Vérification avant transmission

1. 1

   Téléchargez l’application de bureau OpenDesign

   Choisissez le paquet adapté à votre ordinateur, installez-le et ouvrez l’application.

   Télécharger OpenDesign

   POINT DE CONTRÔLE

   L'application de bureau s'ouvre. Déjà installée ? Passez à l'étape suivante ; il n'est pas nécessaire de la télécharger à nouveau.
2. 2

   Préparez votre connexion Mistral Vibe

   Suivez les instructions Mistral Vibe de votre version installée. Authentifiez-vous avec votre clé API Mistral (BYOK) ou des modèles locaux — les identifiants restent sur votre machine.

   README et configuration de mistral-vibe (GitHub)

   # 1. Install Mistral Vibe CLI
   uv tool install mistral-vibe
   # or: pip install mistral-vibe
   
   # 2. Run the setup wizard to register your API key
   vibe --setup     # saves config to ~/.vibe/config.toml and ~/.vibe/.env
   #    or set it directly:  export MISTRAL_API_KEY=...

   D’après les notes de configuration Mistral Vibe du guide publié ; consultez la documentation du fournisseur pour la commande actuelle.

   POINT DE CONTRÔLE

   Confirmez l'agent et le compte prévus. S'il n'est pas disponible, vérifiez la compatibilité avant de tenter une tâche plus importante.
3. 3

   Exécutez une petite tâche Mistral Vibe

   Utilisez un petit brief afin de pouvoir juger l’ensemble du cycle, y compris une révision.

   Brief de démarrage Copier

   Créez un écran de paramètres avec un formulaire de profil et une confirmation d'enregistrement. Utilisez mes règles de design. Vérifiez-le aux largeurs bureau et mobile.

   POINT DE CONTRÔLE

   Ouvrez le résultat, testez l'état de sauvegarde et demandez une modification précise. Un fichier généré est le début de la revue, pas la fin.

Pour exécuter OpenDesign depuis les sources, suivez plutôt le guide de démarrage technique.

1. 1

   Brief de design

   Langage simple, trois à six lignes. Nommez l'audience, la fonction de l'écran et les plateformes.

   • VousRédigez le brief ; joignez une capture d'écran de référence si vous en avez une.
   • Mistral VibeLit le brief et le fichier d’instructions du projet ; pose une question en cas d’ambiguïté.
   • OpenDesignFournit le projet, la surface de prompt et le skill correspondant au type d'artefact.
   • VérificationConfirmez que le brief énonce les critères d'acceptation. Les ajouter maintenant coûte moins cher qu'après la génération.

   New project · PromptMistral Vibe

   You

   Design the plate product page: photo, price, glaze and quantity, add to cart, three related pieces. Local model only.

   Mistral Vibe

   Understood. Running on the local Devstral model. Should the set discount appear as a second price line or as a note under quantity?
2. 2

   Contraintes de design

   Un design system et quelques règles strictes. C'est ce qui distingue un résultat conforme à votre marque d'un rendu générique.

   • VousChoisissez un design system ; indiquez les points de rupture et les composants à utiliser obligatoirement.
   • Mistral VibeCharge les tokens DESIGN.md et les règles de posture dans le contexte avant d’écrire la moindre ligne.
   • OpenDesignFournit la bibliothèque de design systems et associe celui choisi au modèle du skill.
   • VérificationLes tokens correspondent à votre marque. Un accent unique, les bonnes polices, le bon rayon.

   DESIGN.md · OpenDesignbound

   background #fafafa foreground #262626 border #d9d9d9 accent #63fe13 display Albert Sans 800 radius 8px · pills 999px
3. 3

   Générer l'interface

   Mistral Vibe écrit un fichier HTML autonome : mise en page, styles, interactions et points d’ancrage stables.

   • VousAttendez, ou répondez à une question de clarification. Rien à configurer.
   • Mistral VibePlanifie les sections, écrit le HTML, le CSS et le JavaScript, exécute le fichier et corrige ce qui échoue.
   • OpenDesignEnregistre l'artefact dans le dossier du projet et l'indexe pour l'aperçu.
   • VérificationRien pour l'instant. Jugez le fichier une fois rendu, pas depuis la source.

   Project files3 files

   • storefront-product.htmlnew
   • config.tomlbound
   • DESIGN.mdread
4. 4

   Aperçu

   Le fichier s'affiche dans OpenDesign aux largeurs que vous avez demandées. C'est ici que le design est évalué.

   • VousChangez de largeur, parcourez les interactions, laissez des commentaires sur les éléments.
   • Mistral VibeLit vos commentaires sur l’aperçu et prépare la révision suivante.
   • OpenDesignAffiche l'aperçu, expose des cibles data-od-id pour les commentaires et les modifications.
   • VérificationHiérarchie, contraste, débordement à 390px, états de focus, et si l'accent est utilisé avec parcimonie.

   Preview · 390pxComment mode

   Comment on · price

   Set discount as a small line under the price, not a second price.

   Comment on · photo

   Keep 4:5; do not crop the rim on the phone.
5. 5

   Réviser et vérifier

   Demandez des modifications en pointant les éléments dans l'aperçu. Chaque révision est un nouveau fichier ; rien n'est écrasé silencieusement.

   • VousTransformez les commentaires en demandes ; décidez quand la tâche est terminée.
   • Mistral VibeApplique les modifications sur place et relance le fichier.
   • OpenDesignConserve les versions côte à côte ; exporte une image ou le HTML une fois terminé.
   • VérificationRevérifiez uniquement la zone modifiée, puis toute la page une fois à chaque point de rupture.

   Verification · v23 of 4

   • ✓Discount as a note under price
   • ✓Photo ratio held at 390px
   • ✓No horizontal scroll at 390px
   • Quantity control — checked by you