Design pack: Atelier asks first, then builds, audits and redesigns

The Design pack installs Atelier, the BMAD+ agent for interfaces: marketing pages, dashboards, record tables, forms, sign-in and first-run flows, mobile views and email. Atelier does not start by drawing. It first runs an intake, a short list of questions about what the screen is for and who uses it, and writes the answers into a brief that becomes the contract for everything built afterwards. It then plans, builds, audits or reworks the interface by opening three skills that hold the actual design rules, and ends by quoting the verdict of a delivery checklist, the pre-flight.

When to use it#

• You are building a new screen and want a result that fits its audience and covers empty, loading and error states, not a generic template.
• You need a design-token sheet (colours, type, spacing) for your stack, or an accessibility audit of what exists.
• A live product with users, a brand and indexed addresses must change its look without losing what works.

What is installed#

Two things land in your project. The pack itself, in .agents/skills/pack-design/: the dispatcher SKILL.md (skill design-engine), the persona design-engine.md, the intake intake.yaml and a manifest. And the rules, copied by the installer from the npm package design-skill, pinned at exactly version 0.2.1, into three skill folders next to the pack. BMAD+ copies the skills/ directory of that package and nothing else; the package also ships a linker command that BMAD+ never runs.

This pack owns no design rule itself. If .agents/skills/design/SKILL.md is missing (the package did not resolve, or the copy was interrupted), Atelier reports it, points at bmad-plus doctor, which names the missing files, and stops instead of improvising rules. The installer lists every file of every selected pack before writing, so a missing design-skill of the right version aborts the install with your project untouched.

Commands and roles#

The three roles switch automatically when the request fits. Keywords such as Atelier, /design, design tokens, maquette, wireframe, landing page, make it look good, accessibility, refonte or redesign wake the agent. Atelier announces the switch and you can answer skip to stay in the current mode.

The intake: 13 questions, 3 must-haves#

The design read is a pack intake: a validated list of questions in intake.yaml, asked a few at a time (at most six per message) and in your language, must-haves first. It has 13 questions in five sections (surface, audience, assets, direction, constraints). Three are must-haves, which the intake cannot be ready without: surface_kind, audience and job. Each answer keeps one of three statuses through every deliverable: answered (you said it), defaulted (a proposed default stood) or unknown (you did not know, recorded with its risk). Separately, when Atelier reads something from the product or the repository itself, such as a dial you left open or the stack, its deliverables label it inferred. That is the persona’s own convention, not a fourth status of the intake, and an inference is never recorded as your answer.

The three dials (variance, motion, density, each from 1 to 10) deliberately have no default. A dial you leave open is set by the design skill from the surface and the brief, and the brief says it was inferred. A must-have you cannot answer is recorded as UNKNOWN together with its risk, and that risk travels into the opening paragraph of whatever is built on it.

Evidence labels and the pre-flight verdict#

• Every finding is labelled tool when a command ran in this session and the report names it and quotes its output, or inspection when Atelier read the files against the checklist. A number appears only under tool. A check the skill expects that could not run is listed under "not run", never estimated.
• The design skill closes with a delivery checklist (the pre-flight, in its reference module references/80-preflight.md). Every deliverable ends with that checklist’s items and their state, and "ready" or "not ready" comes from it, not from how the screen looks.
• Scope follows the request: a build touches the files you named or the brief implies, a review changes nothing, a redesign starts with its audit. Installing a package, opening a browser or running a scanner is proposed by name and waits for your yes.

Handoffs to other agents#

Quick start#

1. 01

   Install the pack

   Core is added automatically. The design-skill dependency arrives with the BMAD+ package; the installer copies its three skills and lists every file before writing.

   In your project terminal

   npx bmad-plus install --packs design

2. 02

   Check the install

   The diagnostic verifies the pack files, including the three copied skills.

   In your project terminal

   npx bmad-plus doctor

3. 03

   Start with the design read

   Atelier asks its questions first, a few at a time, then writes the brief.

   In your project terminal

   /design read

4. 04

   Build, review or redesign

   Use the brief for a new surface, or point Atelier at what exists.

   In your project terminal

   /design build dashboard

A real session, recorded#

These transcripts were captured by running the 0.23.0 CLI in a throw-away project. The installer was run in French; the intake commands print English. Lines that do not matter here are left out.

$ 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)
# The plan exits with code 2 while a must-have is open. The list continues with brand_assets, design_system and 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.
# The first line of the brief is "# Design read"; the second is a marker saying it is owned by bmad-plus intake and must not be edited by hand.

Copyable examples#

Atelier, run the design read for the invoice list of my app, build the screen, and end with the pre-flight verdict.

Atelier, run the design read with me for the first-run onboarding of our scheduling tool. I have no view on density or motion yet, so leave those open and set them from the surface.

/design build dashboard

/design tokens

/design review src/pages/pricing

/design redesign the marketing site at https://example.com. Keep the logo and these indexed URLs: /pricing, /features and /blog. Tell me which changes put search or accessibility at risk.

Atelier, design a settings screen for our admin console. I do not know yet who the typical admin is; record that as unknown and carry the risk through.

Atelier, the invoice list is built. Prepare the handoff for Sentinel: the state matrix and the keyboard paths to test. Then Sentinel, write the acceptance recipe for it.

What it writes and where#

Code itself is written into your project’s source where you asked for it. The renderer never overwrites a brief it did not write, and the intake refuses to write under .git/, _bmad/, .bmad-plus/ or node_modules/.

Data flows and prerequisites#

• Node.js 20 only. The npm package design-skill, pinned at 0.2.1, is fetched by the normal install of BMAD+ (it is one of its seven runtime dependencies); the installer copies its skills from there.
• The pack runs no script and starts no process of its own, and it sends nothing anywhere. A check that needs a browser or a scanner runs only through your project’s own tooling, proposed by name, on your say-so. The off-machine flows of the host tool apply as for any agent.

Limits and gotchas#