Formation – Bolt – UX design & prototypage

Bolt pour les designers UX

Des prototypes full-stack dans le navigateur : générez des applications web par prompt avec Bolt, exécutez-les et publiez-les.

Durée
6 heures, une session
Format
En ligne ou en présentiel
Langue
Allemand ou anglais
Participants
sessions ouvertes ou intra-entreprise
Attestation
Attestation de participation

Présentation

« Bolt pour les designers UX » est une formation pratique destinée notamment aux profils suivants : Designers UX et UI, Product designers et designers d’interaction et UX researchers souhaitant tester rapidement des variantes. Vous découvrez Bolt non pas de façon abstraite, mais à travers des tâches de votre quotidien – avec des exemples, des exercices et des modèles issus du domaine UX design & prototypage.

Bolt, développé par StackBlitz, génère des applications full-stack fonctionnelles à partir de prompts et les exécute immédiatement dans le navigateur. Le secret : les WebContainers, un environnement Node.js qui tourne entièrement dans l’onglet, avec installation de paquets, serveur de développement et terminal. Pendant cette formation d’une journée, vous apprenez à créer rapidement des prototypes avec React, Vue, Svelte, Next.js, Astro ou des back-ends Node.js, à structurer prompts et consignes de projet, et à guider l’agent avec précision plutôt que de le laisser réécrire votre application sans contrôle.

La formation allie résultats rapides et bonnes pratiques d’ingénierie. Vous lisez et modifiez le code généré dans l’éditeur intégré, corrigez les erreurs via le terminal et la console, connectez base de données et authentification, puis exportez vos projets vers GitHub ou sous forme d’archive. Vous publiez ensuite votre application et apprenez à maîtriser la consommation de tokens, la taille du contexte et le périmètre du projet. Vous saurez alors pour quels projets Bolt est le chemin le plus court vers un résultat cliquable, et à quel moment basculer vers un environnement de développement local.

Les outils de codage IA déplacent la frontière entre design et développement : les designers UX peuvent désormais créer des prototypes interactifs en vrai code au lieu de simples maquettes cliquables. À partir d’une capture d’écran, d’un croquis ou d’une description, on obtient rapidement une interface fonctionnelle avec ses états, sa logique de formulaire et des données d’exemple, qui se comporte en test utilisateur comme un produit fini. Les assistants IA traduisent aussi design tokens, bibliothèques de composants et contrôles d’accessibilité directement en code. Cette formation vous montre comment le vibe coding et les agents IA accélèrent le passage de l’idée au prototype testable, comment transmettre proprement vos résultats aux équipes de développement et où passe la limite entre prototype et logiciel prêt pour la production.

La formation se déroule en direct – en ligne dans une classe virtuelle ou en présentiel dans nos salles à Munich, Salzbourg, Berlin, Augsbourg, Hanovre, Brême, Stuttgart et Kaiserslautern. Nous pouvons également l’organiser en intra pour votre équipe.

À qui s’adresse cette formation ?

  • Designers UX et UI
  • Product designers et designers d’interaction
  • UX researchers souhaitant tester rapidement des variantes
  • Product owners et chefs de produit impliqués dans la conception
  • Équipes design system travaillant avec le développement front-end

Les défis concrets que nous traitons

  • Des maquettes statiques qui rendent mal les interactions, les états et les données réelles
  • Des passations vers le développement qui perdent détails, espacements et logique de comportement
  • Une longue attente de capacité de développement pour mener expérimentations et tests A/B
  • Une accessibilité prise en compte tardivement et de façon incomplète

Objectifs pédagogiques

  • Vous expliquez le fonctionnement des WebContainers et identifiez les projets adaptés à Bolt.
  • Vous générez un prototype full-stack avec front-end, back-end et base de données grâce à des prompts structurés.
  • Vous déboguez efficacement via le terminal, la console et des retours précis à l’agent.
  • Vous publiez votre application et exportez le code vers GitHub pour la suite du développement.
  • Vous créez avec l’IA des prototypes interactifs en code et testez vos idées bien plus tôt auprès des utilisateurs.
  • Vous traduisez design system et tokens en code et fluidifiez la passation aux équipes de développement.
  • Vous vérifiez méthodiquement l’accessibilité de vos prototypes et savez distinguer prototype et code de production.

Programme

Module 1 Comprendre Bolt et les WebContainers
  • Architecture : Node.js, npm et serveur de développement entièrement dans le navigateur
  • Frameworks pris en charge et modèles de démarrage
  • Possibilités et limites de l’exécution dans le navigateur, par exemple pour les paquets binaires natifs
  • Tirer le meilleur parti de l’éditeur, de l’aperçu, du terminal et de l’arborescence
Module 2 Prompting et pilotage du projet
  • Rédiger un premier prompt précis : pile technique, pages, modèle de données, style
  • Consignes de projet et instructions système pour les conventions récurrentes
  • Mode discussion pour planifier, mode construction pour réaliser
  • Avancer par petites étapes, verrouiller des fichiers et revenir à une version antérieure
Module 3 Full-stack : données, authentification et API
  • Base de données et authentification via l’intégration back-end native ou Supabase
  • Construire des routes API et de la logique serveur avec Node.js
  • Connecter des API externes et gérer les clés par variables d’environnement
  • Créer des prototypes mobiles avec Expo et les tester sur un appareil
Module 4 Débogage et qualité du code
  • Renvoyer efficacement à l’agent les erreurs du terminal et de la console
  • Lire, comprendre et corriger manuellement le code généré
  • Préserver une structure claire, un bon découpage des composants et des types TypeScript propres
  • Maîtriser consommation de tokens et taille du contexte quand le projet grandit
Module 5 Déploiement et passage de relais
  • Publier en un clic et associer un domaine personnalisé
  • Exporter vers GitHub et poursuivre en local dans VS Code, Cursor ou Claude Code
  • Contrôle de sécurité : secrets, droits d’accès, validation des entrées
  • Critères de décision : faire évoluer le prototype ou repartir sur une base saine
Module 6 Atelier pratique : UX design & prototypage
  • Prototypes cliquables en code
  • Produire des variantes à tester
  • Traduire les design tokens en code
  • Contrôler l’accessibilité
  • Concevoir les micro-interactions
  • Exploiter la recherche utilisateur
Module 7 Protection des données, qualité & mise en pratique
  • Les prototypes contiennent souvent des idées de produit non publiées et des données issues de la recherche utilisateur : vous apprenez à pseudonymiser les notes d’entretien conformément au RGPD, à clarifier les droits sur polices, images et ressources générées et à anticiper les exigences de l’Acte européen sur l’accessibilité.
  • Règles du jeu pour un usage sûr de l’IA en équipe
  • Vérifier les résultats : faits, sources, tests et principe des quatre yeux
  • Plan d’action personnel pour les 30 prochains jours
  • Questions ouvertes, perspectives et ressources pour aller plus loin

Cas pratiques de votre domaine

Prototypes cliquables en code

Transformer croquis, wireframes ou captures d’écran en prototypes web fonctionnels avec navigation, validation de formulaires, états de chargement et d’erreur et données réalistes, testables directement dans le navigateur.

Produire des variantes à tester

Générer en parallèle plusieurs variantes d’un parcours, par exemple l’onboarding ou le tunnel de commande, et les préparer pour des tests utilisateurs ou des tests A/B avec peu d’ajustements.

Traduire les design tokens en code

Structurer couleurs, typographie, espacements et arrondis du design system sous forme de tokens et les convertir en variables CSS, configuration Tailwind ou fichiers de thème pour les bibliothèques de composants.

Contrôler l’accessibilité

Examiner contrastes, HTML sémantique, navigation au clavier, ordre de focus et attributs ARIA, puis faire appliquer directement dans le code des améliorations concrètes conformes aux WCAG.

Concevoir les micro-interactions

Décrire transitions, animations et retours visuels puis les implémenter en CSS ou JavaScript, afin d’évaluer rythme et effet très tôt dans le support réel plutôt que dans un outil de dessin.

Exploiter la recherche utilisateur

Regrouper les notes d’entretiens et de tests, faire émerger tendances et points de friction et en tirer des hypothèses de conception priorisées, intégrées directement à la prochaine itération du prototype.

Projets pratiques possibles

Prototype d’onboarding

Un parcours d’onboarding en plusieurs étapes sous forme d’application web, avec barre de progression, validation et sauvegarde des saisies, prêt pour des tests modérés.

Convertisseur de tokens

Un petit outil qui lit des design tokens exportés et génère variables CSS, palette de couleurs avec ratios de contraste et page d’aperçu.

Vitrine de composants

Une page qui présente boutons, formulaires et cartes de votre design system dans tous leurs états, en mode clair comme en mode sombre.

Prérequis

Des bases en JavaScript ou TypeScript et une compréhension des notions web courantes comme les composants, les API et les bases de données. Les profils métier à l’aise avec la technique peuvent aussi suivre sans difficulté. Vous avez une expérience du design UX ou UI et des outils de conception courants ; aucune compétence en programmation n’est requise, mais des notions de HTML et CSS sont utiles.

Prérequis techniques

Un ordinateur portable avec un navigateur récent basé sur Chromium ou Firefox, un compte Bolt (offre payante conseillée pour un usage intensif) et un compte GitHub gratuit.

Protection des données & conformité

Les prototypes contiennent souvent des idées de produit non publiées et des données issues de la recherche utilisateur : vous apprenez à pseudonymiser les notes d’entretien conformément au RGPD, à clarifier les droits sur polices, images et ressources générées et à anticiper les exigences de l’Acte européen sur l’accessibilité.

Dates & sites

Pour chaque site, nous proposons une date dans environ quatre semaines. Votre date souhaitée reste toujours possible.

  • Munich lun. 14 décembre 2026 6 h Demander
  • Salzbourg mer. 16 décembre 2026 6 h Demander
  • Berlin jeu. 10 décembre 2026 6 h Demander
  • Augsbourg lun. 14 décembre 2026 6 h Demander
  • Hanovre mer. 16 décembre 2026 6 h Demander
  • Brême mer. 16 décembre 2026 6 h Demander
  • Stuttgart lun. 14 décembre 2026 6 h Demander
  • Kaiserslautern jeu. 10 décembre 2026 6 h Demander
  • En ligne mar. 15 décembre 2026 6 h Demander

Questions fréquentes

Faut-il un environnement de développement local pour utiliser Bolt ?

Non. Grâce aux WebContainers, l’installation des paquets, le serveur de développement et le terminal fonctionnent dans le navigateur : rien à installer sur votre machine. L’export vers GitHub et le travail dans un éditeur local deviennent intéressants lorsque le projet doit vivre durablement ou s’intégrer à une chaîne d’outils existante. Nous pratiquons les deux approches.

En quoi Bolt diffère-t-il de Lovable ?

Les deux génèrent des applications web à partir de prompts. Bolt laisse davantage de liberté dans le choix du framework et donne un accès très direct au code, au terminal et aux fichiers, ce qui plaît aux développeurs. Lovable repose sur une pile React fixe, avec un accent plus marqué sur le design et Supabase. Le choix dépend du projet et de l’équipe.

Peut-on créer des applications mobiles avec Bolt ?

Oui. L’intégration Expo permet de générer des prototypes React Native et de les tester directement sur smartphone avec Expo Go. C’est très efficace pour des applications simples et des prototypes cliquables. Les fonctions natives avancées, la publication sur les stores et une logique hors ligne complexe nécessitent en général un développement local, ce que nous expliquons.

Faut-il savoir programmer quand on est designer ?

Non. Vous décrivez interfaces et comportements en langage naturel, avec croquis ou captures d’écran, et l’outil d’IA génère le code. Connaître quelques notions comme composant, état ou classe CSS aide toutefois à piloter finement le résultat. Nous abordons ces notions de façon concrète pendant la formation, pour que vous puissiez faire évoluer vos prototypes en autonomie.

L’équipe de développement peut-elle reprendre le code du prototype ?

Parfois, mais il sert le plus souvent de spécification précise. Un prototype est optimisé pour la rapidité, pas pour la sécurité, la performance ou la maintenabilité. En utilisant dès le départ la même bibliothèque de composants et les mêmes tokens que le produit, la réutilisation devient bien plus probable. La formation vous aide à organiser des passations utiles aux deux parties.

Combien coûte la formation « Bolt pour les designers UX » ?

La formation coûte 949 € HT forfaitaires par participant – en ligne comme en présentiel. Sont inclus 6 heures de formation en direct avec un formateur, les supports de cours, un environnement d’exercice et une attestation de participation.

Puis-je proposer ma propre date ?

Oui. Pour chaque site, nous proposons une date dans environ quatre semaines. Dans le formulaire, vous pouvez à tout moment indiquer librement la date ou la période souhaitée – nous vérifions les disponibilités et revenons vers vous sous un jour ouvré.

La formation a-t-elle lieu en ligne ou en présentiel ?

Les deux sont possibles : en direct dans une classe virtuelle ou en présentiel à Munich, Salzbourg, Berlin, Augsbourg, Hanovre, Brême, Stuttgart et Kaiserslautern. Nous pouvons aussi l’organiser en intra pour votre équipe.

La formation peut-elle être adaptée à notre équipe ?

Oui. Les formations sur mesure coûtent environ 4 500 € de plus, selon le sujet et après accord. Nous définissons ensemble au préalable les contenus, exemples et exercices.

Autres formations pour les designers UX

Autres formations Bolt

Les 10 formations Bolt

Bolt – MunichBolt – SalzbourgBolt – BerlinBolt – AugsbourgBolt – HanovreBolt – BrêmeBolt – StuttgartBolt – KaiserslauternBolt – En ligne