Pack Design : Atelier interroge d’abord, puis construit, audite et refond

Le pack Design installe Atelier, l’agent BMAD+ pour les interfaces : pages marketing, tableaux de bord, tableaux d’enregistrements, formulaires, parcours de connexion et de première utilisation, vues mobiles et e-mails. Atelier ne commence pas par dessiner. Il lance d’abord un intake, une courte liste de questions sur l’usage de l’écran et ses utilisateurs, et consigne les réponses dans un brief qui devient le contrat de tout ce qui est construit ensuite. Il planifie, construit, audite ou retravaille ensuite l’interface en ouvrant trois compétences qui détiennent les règles de design, et termine en citant le verdict d’une liste de contrôle de livraison, le pré-vol.

Quand l’utiliser#

• Vous construisez un nouvel écran et voulez un résultat adapté à son public, qui couvre les états vide, chargement et erreur, pas un modèle générique.
• Il vous faut une feuille de tokens de design (couleurs, typographie, espacements) pour votre stack, ou un audit d’accessibilité de l’existant.
• Un produit en ligne, avec des utilisateurs, une marque et des adresses indexées, doit changer d’apparence sans perdre ce qui fonctionne.

Ce qui est installé#

Deux choses arrivent dans votre projet. Le pack lui-même, dans .agents/skills/pack-design/ : le dispatcher SKILL.md (compétence design-engine), la persona design-engine.md, l’intake intake.yaml et un manifeste. Et les règles, copiées par l’installateur depuis le paquet npm design-skill, épinglé exactement à la version 0.2.1, dans trois dossiers de compétences à côté du pack. BMAD+ copie le dossier skills/ de ce paquet et rien d’autre ; le paquet fournit aussi une commande de liaison que BMAD+ n’exécute jamais.

Ce pack ne possède lui-même aucune règle de design. Si .agents/skills/design/SKILL.md manque (le paquet n’a pas été résolu, ou la copie a été interrompue), Atelier le signale, renvoie à bmad-plus doctor, qui nomme les fichiers manquants, et s’arrête au lieu d’improviser des règles. L’installateur liste chaque fichier de chaque pack choisi avant d’écrire : un design-skill manquant dans la bonne version fait donc échouer l’installation sans toucher à votre projet.

Commandes et rôles#

Les trois rôles basculent automatiquement quand la demande s’y prête. Des mots comme Atelier, /design, design tokens, maquette, wireframe, landing page, make it look good, accessibilité, refonte ou redesign réveillent l’agent. Atelier annonce le changement et vous pouvez répondre skip pour rester dans le mode actuel.

L’intake : 13 questions, 3 indispensables#

La lecture design est un intake de pack : une liste de questions validée dans intake.yaml, posées quelques-unes à la fois (six par message au plus) et dans votre langue, indispensables d’abord. Elle compte 13 questions en cinq sections (surface, public, éléments existants, direction, contraintes). Trois sont indispensables, sans lesquelles l’intake ne peut pas être prêt : surface_kind, audience et job. Chaque réponse garde l’un de trois statuts dans tous les livrables : answered (vous l’avez dit), defaulted (une valeur proposée a été retenue) ou unknown (vous ne saviez pas, consigné avec son risque). À part, quand Atelier lit quelque chose dans le produit ou le dépôt lui-même, comme un réglage laissé ouvert ou la stack, ses livrables l’étiquettent inferred. C’est la convention propre à la persona, pas un quatrième statut de l’intake, et une déduction n’est jamais consignée comme votre réponse.

Les trois réglages (variance, motion, density, de 1 à 10) n’ont volontairement pas de valeur par défaut. Un réglage laissé ouvert est fixé par la compétence design d’après la surface et le brief, et le brief indique qu’il est déduit. Un point indispensable auquel vous ne pouvez pas répondre est consigné UNKNOWN avec son risque, et ce risque remonte dans le paragraphe d’ouverture de tout ce qui est construit dessus.

Étiquettes de preuve et verdict de pré-vol#

• Chaque constat est étiqueté tool quand une commande a été exécutée dans cette session et que le rapport la nomme et cite sa sortie, ou inspection quand Atelier a lu les fichiers face à la liste de contrôle. Un chiffre n’apparaît que sous tool. Un contrôle attendu par la compétence qui n’a pas pu être exécuté figure sous « not run », jamais estimé.
• La compétence design se termine par une liste de contrôle de livraison (le pré-vol, dans son module de référence references/80-preflight.md). Chaque livrable finit par les points de cette liste et leur état, et « prêt » ou « pas prêt » vient d’elle, pas de l’allure de l’écran.
• Le périmètre suit la demande : une construction touche les fichiers nommés ou impliqués par le brief, une revue ne change rien, une refonte commence par son audit. Installer un paquet, ouvrir un navigateur ou lancer un scanner est proposé nommément et attend votre accord.

Passations vers d’autres agents#

Démarrage rapide#

1. 01

   Installer le pack

   Core est ajouté automatiquement. La dépendance design-skill arrive avec le paquet BMAD+ ; l’installateur en copie les trois compétences et liste chaque fichier avant d’écrire.

   Dans le terminal du projet

   npx bmad-plus install --packs design

2. 02

   Vérifier l’installation

   Le diagnostic vérifie les fichiers du pack, y compris les trois compétences copiées.

   Dans le terminal du projet

   npx bmad-plus doctor

3. 03

   Commencer par la lecture design

   Atelier pose d’abord ses questions, quelques-unes à la fois, puis écrit le brief.

   Dans le terminal du projet

   /design read

4. 04

   Construire, relire ou refondre

   Appuyez-vous sur le brief pour une nouvelle surface, ou pointez Atelier vers l’existant.

   Dans le terminal du projet

   /design build dashboard

Une vraie session, enregistrée#

Ces transcriptions ont été capturées en exécutant la CLI 0.23.0 dans un projet jetable. L’installateur a été lancé en français ; les commandes d’intake affichent de l’anglais. Les lignes sans intérêt ici sont omises.

$ npx bmad-plus install --yes --lang fr --packs core,design --tools claude-code --directory ./demo-app
*  Packs sélectionnés: ⚙️ Core, 🎨 Design
o  ✅ 5 agents, 9 skills, 4 fichiers copiés
—  BMAD+ est prêt ! Parle à Atlas pour commencer 🚀
$ npx bmad-plus doctor --directory ./demo-app
87/87 checks passed
0 error(s), 0 warning(s)

$ npx bmad-plus intake check .agents/skills/pack-design/intake.yaml
.agents/skills/pack-design/intake.yaml: valid intake design-read (design), 13 questions, 3 must-have.
$ npx bmad-plus intake plan --intake .agents/skills/pack-design/intake.yaml --answers _bmad-output/design/intake.json
design-read (design): not ready — 0 answered, 0 defaulted, 0 unknown, 13 not asked yet.
Must-haves still open: surface_kind, audience, job
Ask next (at most 6 per message):
  - surface_kind [choice] Which surface is this? A marketing landing page, a dashboard, a data table, a form, an auth or onboarding flow, a mobile screen, an email, a chat or AI surface, a checkout, a settings page, or something else? (must-have; choices: landing, dashboard, table, form, auth, onboarding, mobile, email, ai-chat, checkout, settings, other)
  - audience [text] Who uses it, and in what situation (device, time pressure, expertise, frequency)? (must-have)
  - job [text] What is the one job this page must get done, and how will you know it did? (must-have)
# Le plan sort avec le code 2 tant qu’un point indispensable reste ouvert. La liste continue avec brand_assets, design_system et aesthetic_family.

$ npx bmad-plus intake record --intake .agents/skills/pack-design/intake.yaml --answers _bmad-output/design/intake.json --set surface_kind=dashboard --set "audience=Comptables en cabinet, sur ordinateur, en fin de mois" --set "job=Repérer les factures en retard et relancer en un clic"
Recorded surface_kind, audience, job in _bmad-output/design/intake.json.
design-read (design): ready — 3 answered, 0 defaulted, 0 unknown, 10 not asked yet.
$ npx bmad-plus intake render --intake .agents/skills/pack-design/intake.yaml --answers _bmad-output/design/intake.json --out _bmad-output/design/brief.md
Brief written to _bmad-output/design/brief.md (3022 bytes); the intake is ready.
# La première ligne du brief est « # Design read » ; la deuxième est un marqueur indiquant qu’il appartient à bmad-plus intake et ne doit pas être modifié à la main.

Exemples à copier#

Atelier, fais la lecture design de la liste des factures de mon application, construis l’écran et termine par le verdict de pré-vol.

Atelier, fais la lecture design avec moi pour l’onboarding de première utilisation de notre outil de planning. Je n’ai pas d’avis sur la densité ni le mouvement, laisse-les ouverts et règle-les d’après la surface.

/design build dashboard

/design tokens

/design review src/pages/pricing

/design redesign le site marketing https://example.com. Conserve le logo et ces URL indexées : /pricing, /features et /blog. Dis-moi quels changements mettent le référencement ou l’accessibilité en risque.

Atelier, conçois un écran de réglages pour notre console d’administration. Je ne sais pas encore qui est l’administrateur type ; consigne-le comme inconnu et fais suivre le risque.

Atelier, la liste des factures est construite. Prépare la passation à Sentinel : la matrice d’états et les parcours clavier à tester. Puis Sentinel, écris la recette correspondante.

Ce qu’il écrit et où#

Le code lui-même est écrit dans les sources de votre projet là où vous l’avez demandé. Le rendu n’écrase jamais un brief qu’il n’a pas écrit, et l’intake refuse d’écrire sous .git/, _bmad/, .bmad-plus/ ou node_modules/.

Flux de données et prérequis#

• Node.js 20 seulement. Le paquet npm design-skill, épinglé à 0.2.1, est récupéré par l’installation normale de BMAD+ (c’est l’une de ses sept dépendances d’exécution) ; l’installateur en copie les compétences.
• Le pack n’exécute aucun script, ne lance aucun processus propre et n’envoie rien nulle part. Un contrôle qui demande un navigateur ou un scanner ne passe que par l’outillage de votre projet, proposé nommément, avec votre accord. Les flux hors machine de l’outil hôte s’appliquent comme pour tout agent.

Limites et pièges#