Prototyper avec les artifacts

C’est quoi un artifact ?

Un artifact est un rendu interactif que l'IA génère et affiche à côté de la conversation : une page HTML/CSS complète, un composant React, un SVG — qui s'exécute réellement dans un panneau dédié. Tu ne lis pas du code en imaginant le résultat : tu vois le résultat, tu cliques dedans, tu testes les survols. Et quand tu demandes un ajustement, l'artifact se met à jour sous tes yeux.

Mesure le changement par rapport au flux classique : maquette Figma, export, intégration, déploiement sur un environnement de préversion, retour du client trois jours plus tard… Chaque boucle de feedback coûtait des heures. Avec un artifact, la boucle dure trente secondes. Ce n'est pas juste « plus rapide » : c'est un changement de nature. Quand itérer ne coûte rien, tu explores dix directions au lieu de défendre la seule que tu as eu le temps de produire.

Pour Studio Mango, c'est l'arme du jour : au lieu de présenter demain matin trois planches statiques au client, tu lui montreras une page vivante — qui scrolle, qui réagit au survol, qui se consulte sur son téléphone. La différence de perception est énorme : un prototype interactif déclenche des retours concrets (« ce bouton, là, je le verrais plus haut »), pas des débats abstraits sur des intentions.

Pourquoi la boucle courte change ta façon de designer

La boucle artifact suit toujours le même cycle : tu écris un prompt, le rendu apparaît, tu observes, tu formules un feedback précis, le rendu se met à jour. Répète. Ce cycle ultra-court a un effet psychologique précieux : il dédramatise l'erreur. Une mauvaise idée coûte trente secondes, alors tu oses la tester. Combien de bonnes idées sont mortes en réunion parce que « pas le temps de maquetter ça » ?

flowchart LR
  P["Prompt"] --> R["Rendu dans l'artifact"]
  R --> F["Feedback précis"]
  F --> M["Mise à jour en direct"]
  M --> R

Attention toutefois au revers : la facilité d'itérer peut produire de l'errance. Vingt itérations sans cap, et tu te retrouves plus loin de l'objectif qu'au départ, sans pouvoir dire quand ça a dérapé. La parade : garde ton brief de direction artistique sous les yeux, et avant chaque demande de modification, vérifie qu'elle sert le brief. Itérer vite, oui — dériver, non.

Préparer le terrain : le prompt de départ

La qualité de ta session de prototypage se joue dans le premier prompt. Trois ingrédients doivent y figurer : ton design system (le bloc :root du chapitre précédent, collé intégralement), la structure attendue (la liste des sections dans l'ordre), et le brief d'ambiance avec ses interdits. Sans les tokens, l'IA improvise des couleurs ; sans structure, elle invente des sections ; sans interdits, elle retombe dans le générique.

Crée la landing page de Sereno (app de méditation) en une seule page HTML/CSS autonome.

DESIGN SYSTEM (à utiliser exclusivement — aucune valeur en dur) :
[colle ici ton bloc :root complet]

STRUCTURE :
1. Header : logo texte + lien « Se connecter »
2. Hero : titre fort, sous-titre, CTA principal « Essayer gratuitement », visuel abstrait apaisant en CSS pur (pas d'image externe)
3. Trois bénéfices en cartes : Dormir mieux, Gérer le stress, Se concentrer
4. Témoignage : citation + prénom + métier
5. Pricing simple : offre gratuite vs premium
6. Footer sobre

AMBIANCE : épuré, généreux en espace (sections espacées de var(--space-24)), animations douces au survol uniquement.
INTERDITS : dégradés criards, emojis, ombres lourdes, plus d'une couleur d'accent.

Itérer par petites touches

Premier rendu obtenu : il est correct, pas extraordinaire. C'est normal — le premier jet est une fondation, pas un produit fini. La discipline qui suit fait toute la différence : une itération = une intention. « Arrondis davantage les coins des cartes », puis observe. « Plus d'air entre la hero et les bénéfices », puis observe. « Le CTA doit dominer la hero », puis observe.

Pourquoi cette lenteur apparente ? Parce que si tu demandes cinq changements d'un coup et que le rendu se dégrade, tu ne sais pas lequel est en cause. Changement par changement, tu vois précisément l'effet de chaque décision — et tu apprends au passage : tu découvres empiriquement ce que 16 px d'espace en plus font à une section. C'est le même principe que le débogage en programmation : on isole les variables.

Concrètement, une session efficace ressemble à ceci : trois ou quatre itérations de structure (ordre des sections, proportions de la hero, densité des cartes), puis trois ou quatre itérations de style (espacements fins, tailles de titres, intensité des ombres), et enfin une passe de détails (transitions au survol, alignements, cohérence des icônes). Structure d'abord, style ensuite, détails à la fin — jamais l'inverse, sinon tu peaufines des sections qui seront supprimées.

Le vocabulaire du feedback visuel

Tes itérations seront aussi bonnes que tes formulations. Voici les schémas qui fonctionnent : nommer la zone (« dans la section bénéfices… »), nommer le problème en vocabulaire de design (« …les trois cartes se touchent presque, le rythme est étouffé… »), et donner la direction (« …espace-les de var(--space-8) et réduis leur padding interne d'un cran »). Zone, problème, direction : trois temps, dix secondes à écrire, et l'IA corrige juste ce qu'il faut.

• Hiérarchie : « le titre et le sous-titre ont presque la même présence ; renforce le titre (taille +1 cran, graisse 600) et atténue le sous-titre (--color-text-muted) »
• Rythme : « les espacements entre sections varient ; uniformise à var(--space-24) partout »
• Accent : « la couleur d'accent apparaît à six endroits ; réserve-la au CTA principal et aux liens »
• Densité : « la section pricing est tassée ; double le padding interne des cartes et aère les listes de fonctionnalités »

Artifacts, v0, Figma AI : quel outil pour quoi ?

Les artifacts ne sont pas le seul moyen de prototyper avec l'IA, et il est utile de situer l'écosystème. Chaque outil a sa zone d'excellence ; le choix dépend de ton livrable et de ton point de départ. Pour le défi de Studio Mango — explorer, itérer en conversation et livrer une page vivante en quelques heures — les artifacts sont l'outil naturel. Si le projet exigeait du React prêt pour la production dans une stack Next.js, v0 prendrait l'avantage ; si l'équipe travaillait déjà dans des maquettes Figma avec passation à des intégrateurs, Figma AI s'imposerait.

Du brouillon au présentable

En une dizaine d'itérations disciplinées, tu passes d'un squelette correct à une page que tu peux projeter en réunion client. Avant de t'arrêter, fais la passe de vérification : teste le rendu mobile (la moitié des visiteurs de Sereno viendront du téléphone — demande explicitement « montre-moi le rendu en 375 px de large » et vérifie que la hero ne s'effondre pas), survole chaque élément interactif, et relis les textes, car l'IA glisse parfois du faux contenu approximatif.

Dernier réflexe professionnel : archive les étapes. Copie le code des versions clés (V1 brute, V2 structurée, V3 finale) dans des fichiers datés. Si le client préfère finalement la direction de la V2, tu la ressors en une minute. Et en présentant la progression V1 → V3, tu montres le raisonnement du studio — ce qui vaut souvent plus cher que le rendu final lui-même.