Atelier, the design pack
Described transcript
On screen: Translucent glass panes drift apart in a dark blue space, then slide together into a neat stack that glows with a warm light. The caption reads “Atelier · Design pack”.
Narration: Atelier, the tenth pack, builds, audits and redesigns interfaces under checkable rules.
On screen: A terminal window titled “~/app”. The command bmad-plus intake plan is typed, pointing at the Design pack’s intake.yaml and an answers file. The view zooms in on the result: “design-read (design): not ready — 0 answered, 0 defaulted…” and, outlined in orange, “Must-haves still open: surface_kind, audience, job”. A list of questions follows, each with its type and “(must-have)” where it applies. The command bmad-plus intake record is typed with three answers (surface_kind=dashboard; audience=“Accountants in a practice, on a desktop, at month end”; job=UNKNOWN) and a default for design_system. It prints “Recorded surface_kind, audience, job, design_system in _bmad-output/design/intake.json.” and “design-read (design): ready — 2 answered, 1 defaulted, 1 unknown, 9 not asked yet.” The questions still open scroll by, among them the three dials; “[number] Layout variance” is outlined, then motion, density and stack. The screen ends with “Unknown: job” outlined: “risk: There is no goal to review against, so hierarchy and the primary action cannot be judged, only decorated.”
Narration: It starts with a design read: questions about the surface, the audience and the one job the page must do. A dial you leave open is set from the surface, and the brief says it was inferred.
On screen: Small glass tiles appear one by one and fill a grid, row by row, until a block of eight columns by four rows is complete. Some of the tiles glow amber. The caption reads “Tokens · WCAG AA · every state”.
Narration: Then it builds with semantic tokens, WCAG AA contrast and every state covered.
On screen: A thin horizontal line of warm light lies on a dark horizon. A soft beam fans out above it and is reflected in the dark water below. The caption “Pre-flight” fades in.
Narration: It ends with a pre-flight.
On screen: A terminal. The command sed -n '7,28p' .agents/skills/design/references/80-preflight.md is typed. The file prints slowly as a checklist, every item starting with an empty box “[ ]”. Section “A. Foundations” covers OKLCH semantic colour tokens, contrast, at most two font families, the 4px spacing scale and radii. Section “B. Accessibility (blockers — any fail blocks delivery)” lists semantic HTML, keyboard operability, labelled inputs, target size, reflow at 320px, reduced motion, headings and landmarks, and focus not hidden by sticky elements. Section “C. States (the most-forgotten section)” begins with “Empty (first-run) designed with a CTA”.
Narration: Ready or not ready is read from the checklist, not from how the screen looks.
On screen: A terminal. The command bmad-plus doctor is typed. The screen shows “BMAD+ Doctor v0.23.0” and “Manifest found: v0.23.0”, then a “BMAD+ Health Report” whose first line, “87/87 checks passed”, is outlined in orange. Below it: “0 error(s), 0 warning(s)”, “Installed: v0.23.0 | Executing CLI: v0.23.0” and “Ownership inventory: complete”. The screen ends on a note that the published version is not checked here (the command bmad-plus update-check --json checks npm), and “Installation checks passed.” in green.
Narration: The installer copies its three skills, and doctor checks them.