Pack Design: Atelier pregunta primero, luego construye, audita y rediseña

El pack Design instala Atelier, el agente de BMAD+ para interfaces: páginas de marketing, paneles, tablas de registros, formularios, flujos de inicio de sesión y primer uso, vistas móviles y correos. Atelier no empieza dibujando. Primero ejecuta un intake, una lista corta de preguntas sobre para qué sirve la pantalla y quién la usa, y escribe las respuestas en un brief que se convierte en el contrato de lo que se construya después. Luego planifica, construye, audita o reelabora la interfaz abriendo tres habilidades que contienen las reglas de diseño, y termina citando el veredicto de una lista de entrega, el pre-vuelo.

Cuándo usarlo#

• Estás construyendo una pantalla nueva y quieres un resultado adecuado a su público, que cubra los estados vacío, carga y error, no una plantilla genérica.
• Necesitas una hoja de design tokens (colores, tipografía, espaciado) para tu stack o una auditoría de accesibilidad de lo existente.
• Un producto en vivo, con usuarios, una marca y direcciones indexadas, debe cambiar de aspecto sin perder lo que funciona.

Qué se instala#

Dos cosas llegan a tu proyecto. El propio pack, en .agents/skills/pack-design/: el despachador SKILL.md (habilidad design-engine), el perfil (persona) design-engine.md, el intake intake.yaml y un manifiesto. Y las reglas, copiadas por el instalador desde el paquete npm design-skill, fijado exactamente en la versión 0.2.1, en tres carpetas de habilidades junto al pack. BMAD+ copia el directorio skills/ de ese paquete y nada más; el paquete también incluye un comando de enlace que BMAD+ nunca ejecuta.

Este pack no tiene ninguna regla de diseño propia. Si falta .agents/skills/design/SKILL.md (el paquete no se resolvió o la copia se interrumpió), Atelier lo informa, remite a bmad-plus doctor, que nombra los archivos que faltan, y se detiene en lugar de improvisar reglas. El instalador lista cada archivo de cada pack elegido antes de escribir, así que un design-skill ausente en la versión correcta aborta la instalación sin tocar tu proyecto.

Comandos y roles#

Los tres roles cambian automáticamente cuando la petición encaja. Palabras como Atelier, /design, design tokens, maquette, wireframe, landing page, make it look good, accesibilidad, refonte o redesign despiertan al agente. Atelier anuncia el cambio y puedes responder skip para quedarte en el modo actual.

El intake: 13 preguntas, 3 imprescindibles#

La lectura de diseño es un intake de pack: una lista de preguntas validada en intake.yaml, formuladas de pocas en pocas (seis por mensaje como máximo) y en tu idioma, primero las imprescindibles. Tiene 13 preguntas en cinco secciones (superficie, público, activos, dirección, restricciones). Tres son imprescindibles, sin las cuales el intake no puede estar listo: surface_kind, audience y job. Cada respuesta conserva uno de tres estados en todos los entregables: answered (lo dijiste), defaulted (se mantuvo un valor propuesto) o unknown (no lo sabías, registrado con su riesgo). Aparte, cuando Atelier lee algo del producto o del repositorio por su cuenta, como un ajuste que dejaste abierto o el stack, sus entregables lo etiquetan inferred. Es la convención propia del perfil (persona), no un cuarto estado del intake, y una inferencia nunca se registra como tu respuesta.

Los tres ajustes (variance, motion, density, de 1 a 10) no tienen valor por defecto a propósito. Un ajuste que dejas abierto lo fija la habilidad design a partir de la superficie y el brief, y el brief dice que fue inferido. Un imprescindible al que no puedes responder se registra como UNKNOWN junto con su riesgo, y ese riesgo pasa al párrafo inicial de lo que se construya encima.

Etiquetas de evidencia y veredicto de pre-vuelo#

• Cada hallazgo se etiqueta tool cuando se ejecutó un comando en esta sesión y el informe lo nombra y cita su salida, o inspection cuando Atelier leyó los archivos frente a la lista. Una cifra solo aparece bajo tool. Una comprobación que la habilidad espera y no pudo ejecutarse figura bajo «not run», nunca estimada.
• La habilidad design termina con una lista de entrega (el pre-vuelo, en su módulo de referencia references/80-preflight.md). Cada entregable acaba con los puntos de esa lista y su estado, y «listo» o «no listo» sale de ella, no del aspecto de la pantalla.
• El alcance sigue la petición: una construcción toca los archivos que nombraste o que el brief implica, una revisión no cambia nada, un rediseño empieza con su auditoría. Instalar un paquete, abrir un navegador o ejecutar un escáner se propone por su nombre y espera tu sí.

Traspasos a otros agentes#

Inicio rápido#

1. 01

   Instalar el pack

   Core se añade automáticamente. La dependencia design-skill llega con el paquete de BMAD+; el instalador copia sus tres habilidades y lista cada archivo antes de escribir.

   En la terminal del proyecto

   npx bmad-plus install --packs design

2. 02

   Comprobar la instalación

   El diagnóstico verifica los archivos del pack, incluidas las tres habilidades copiadas.

   En la terminal del proyecto

   npx bmad-plus doctor

3. 03

   Empezar por la lectura de diseño

   Atelier hace primero sus preguntas, de pocas en pocas, y luego escribe el brief.

   En la terminal del proyecto

   /design read

4. 04

   Construir, revisar o rediseñar

   Apóyate en el brief para una superficie nueva o apunta a Atelier hacia lo existente.

   En la terminal del proyecto

   /design build dashboard

Una sesión real, grabada#

Estas transcripciones se capturaron ejecutando la CLI 0.23.0 en un proyecto desechable. El instalador se ejecutó en francés; los comandos de intake imprimen en inglés. Se omiten las líneas que aquí no importan.

$ 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)
# El plan termina con código 2 mientras quede un imprescindible abierto. La lista continúa con brand_assets, design_system y 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 primera línea del brief es «# Design read»; la segunda es un marcador que indica que pertenece a bmad-plus intake y no debe editarse a mano.

Ejemplos para copiar#

Atelier, haz la lectura de diseño de la lista de facturas de mi aplicación, construye la pantalla y termina con el veredicto de pre-vuelo.

Atelier, haz conmigo la lectura de diseño del onboarding de primer uso de nuestra herramienta de planificación. Aún no tengo opinión sobre la densidad ni el movimiento, déjalos abiertos y fíjalos a partir de la superficie.

/design build dashboard

/design tokens

/design review src/pages/pricing

/design redesign el sitio de marketing https://example.com. Conserva el logo y estas URL indexadas: /pricing, /features y /blog. Dime qué cambios ponen en riesgo el posicionamiento o la accesibilidad.

Atelier, diseña una pantalla de ajustes para nuestra consola de administración. Aún no sé quién es el administrador típico; regístralo como desconocido y arrastra el riesgo.

Atelier, la lista de facturas está construida. Prepara el traspaso a Sentinel: la matriz de estados y los recorridos de teclado que probar. Después, Sentinel, escribe la receta de aceptación correspondiente.

Qué escribe y dónde#

El código en sí se escribe en las fuentes de tu proyecto donde lo pediste. El renderizado nunca sobrescribe un brief que no escribió y el intake se niega a escribir bajo .git/, _bmad/, .bmad-plus/ o node_modules/.

Flujos de datos y requisitos#

• Solo Node.js 20. El paquete npm design-skill, fijado en 0.2.1, lo obtiene la instalación normal de BMAD+ (es una de sus siete dependencias de ejecución); el instalador copia de él las habilidades.
• El pack no ejecuta ningún script, no inicia ningún proceso propio y no envía nada a ninguna parte. Una comprobación que necesita un navegador o un escáner pasa solo por las herramientas de tu propio proyecto, propuesta por su nombre y con tu aprobación. Los flujos fuera de la máquina de la herramienta anfitriona se aplican como con cualquier agente.

Límites y trampas#