Design-Pack: Atelier fragt zuerst, baut dann, prüft und gestaltet neu

Das Design-Pack installiert Atelier, den BMAD+-Agenten für Oberflächen: Marketingseiten, Dashboards, Datentabellen, Formulare, Anmelde- und Erststart-Abläufe, mobile Ansichten und E-Mails. Atelier beginnt nicht mit dem Zeichnen. Zuerst führt er einen Intake durch, eine kurze Fragenliste dazu, wofür der Bildschirm da ist und wer ihn nutzt, und schreibt die Antworten in ein Briefing, das zum Vertrag für alles Weitere wird. Dann plant, baut, prüft oder überarbeitet er die Oberfläche, indem er drei Skills mit den eigentlichen Designregeln öffnet, und schließt mit dem Urteil einer Auslieferungs-Checkliste, dem Pre-flight.

Wann du es brauchst#

• Du baust einen neuen Bildschirm und willst ein Ergebnis, das zur Zielgruppe passt und leere, ladende und fehlerhafte Zustände abdeckt, keine generische Vorlage.
• Du brauchst ein Design-Token-Blatt (Farben, Schrift, Abstände) für deinen Stack oder ein Barrierefreiheits-Audit des Bestehenden.
• Ein Live-Produkt mit Nutzern, Marke und indexierten Adressen soll sein Aussehen ändern, ohne zu verlieren, was funktioniert.

Was installiert wird#

Zwei Dinge landen in deinem Projekt. Das Pack selbst in .agents/skills/pack-design/: der Dispatcher SKILL.md (Skill design-engine), die Persona design-engine.md, der Intake intake.yaml und ein Manifest. Und die Regeln, vom Installer aus dem npm-Paket design-skill kopiert, exakt auf Version 0.2.1 festgelegt, in drei Skill-Ordner neben dem Pack. BMAD+ kopiert nur das Verzeichnis skills/ dieses Pakets; das Paket enthält außerdem einen Verknüpfungsbefehl, den BMAD+ nie ausführt.

Dieses Pack besitzt selbst keine Designregel. Fehlt .agents/skills/design/SKILL.md (das Paket wurde nicht aufgelöst oder das Kopieren brach ab), meldet Atelier das, verweist auf bmad-plus doctor, das die fehlenden Dateien nennt, und hält an, statt Regeln zu improvisieren. Der Installer listet vor dem Schreiben jede Datei jedes gewählten Packs auf; ein fehlendes design-skill in der richtigen Version bricht die Installation also ab, ohne dein Projekt zu berühren.

Befehle und Rollen#

Die drei Rollen wechseln automatisch, wenn die Anfrage passt. Stichwörter wie Atelier, /design, design tokens, maquette, wireframe, landing page, make it look good, Barrierefreiheit, refonte oder redesign wecken den Agenten. Atelier kündigt den Wechsel an, und du kannst mit skip im aktuellen Modus bleiben.

Der Intake: 13 Fragen, 3 Pflichtangaben#

Der Design-Read ist ein Pack-Intake: eine validierte Fragenliste in intake.yaml, in kleinen Gruppen (höchstens sechs pro Nachricht) und in deiner Sprache gestellt, Pflichtangaben zuerst. Sie hat 13 Fragen in fünf Abschnitten (Oberfläche, Zielgruppe, Bestand, Richtung, Rahmenbedingungen). Drei sind Pflicht, ohne die der Intake nicht bereit sein kann: surface_kind, audience und job. Jede Antwort behält in allen Ergebnissen einen von drei Status: answered (du hast es gesagt), defaulted (ein vorgeschlagener Standard blieb) oder unknown (du wusstest es nicht, mit seinem Risiko festgehalten). Davon getrennt kennzeichnen die Ergebnisse von Atelier etwas als inferred, wenn Atelier es selbst aus Produkt oder Repository liest, etwa einen offen gelassenen Regler oder den Stack. Das ist die eigene Konvention der Persona, kein vierter Status des Intakes, und eine Ableitung wird nie als deine Antwort festgehalten.

Die drei Regler (variance, motion, density, je 1 bis 10) haben bewusst keinen Standard. Einen offenen Regler setzt der Skill design anhand von Oberfläche und Briefing, und das Briefing sagt, dass er abgeleitet wurde. Eine Pflichtangabe, die du nicht beantworten kannst, wird als UNKNOWN samt Risiko festgehalten, und dieses Risiko wandert in den Einleitungsabsatz von allem, was darauf aufbaut.

Beleg-Kennzeichnung und Pre-flight-Urteil#

• Jeder Befund ist tool, wenn in dieser Sitzung ein Befehl lief und der Bericht ihn nennt und seine Ausgabe zitiert, oder inspection, wenn Atelier die Dateien gegen die Checkliste las. Eine Zahl steht nur unter tool. Eine vom Skill erwartete Prüfung, die nicht laufen konnte, steht unter „not run“, nie geschätzt.
• Der Skill design schließt mit einer Auslieferungs-Checkliste (dem Pre-flight, in seinem Referenzmodul references/80-preflight.md). Jedes Ergebnis endet mit den Punkten dieser Liste und ihrem Stand, und „bereit“ oder „nicht bereit“ kommt von ihr, nicht vom Aussehen des Bildschirms.
• Der Umfang folgt der Anfrage: Ein Bau berührt die genannten oder vom Briefing implizierten Dateien, ein Review ändert nichts, ein Redesign beginnt mit seinem Audit. Ein Paket installieren, einen Browser öffnen oder einen Scanner starten wird namentlich vorgeschlagen und wartet auf dein Ja.

Übergaben an andere Agenten#

Schnellstart#

1. 01

   Das Pack installieren

   Core wird automatisch ergänzt. Die Abhängigkeit design-skill kommt mit dem BMAD+-Paket; der Installer kopiert ihre drei Skills und listet vor dem Schreiben jede Datei auf.

   Im Terminal deines Projekts

   npx bmad-plus install --packs design

2. 02

   Die Installation prüfen

   Die Diagnose prüft die Pack-Dateien, auch die drei kopierten Skills.

   Im Terminal deines Projekts

   npx bmad-plus doctor

3. 03

   Mit dem Design-Read beginnen

   Atelier stellt zuerst seine Fragen, in kleinen Gruppen, und schreibt dann das Briefing.

   Im Terminal deines Projekts

   /design read

4. 04

   Bauen, prüfen oder neu gestalten

   Stütze dich auf das Briefing für eine neue Oberfläche oder zeige Atelier das Bestehende.

   Im Terminal deines Projekts

   /design build dashboard

Eine echte Sitzung, aufgezeichnet#

Diese Mitschriften wurden beim Ausführen der CLI 0.23.0 in einem Wegwerf-Projekt aufgezeichnet. Der Installer lief auf Französisch; die Intake-Befehle geben Englisch aus. Hier unwichtige Zeilen sind weggelassen.

$ 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)
# Der Plan endet mit Code 2, solange eine Pflichtangabe offen ist. Die Liste setzt sich mit brand_assets, design_system und aesthetic_family fort.

$ 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.
# Die erste Zeile des Briefings lautet „# Design read“; die zweite ist ein Marker, der besagt, dass es bmad-plus intake gehört und nicht von Hand geändert werden soll.

Beispiele zum Kopieren#

Atelier, mach den Design-Read für die Rechnungsliste meiner App, baue den Bildschirm und schließe mit dem Pre-flight-Urteil.

Atelier, mach mit mir den Design-Read für das Erststart-Onboarding unseres Planungswerkzeugs. Zu Dichte und Bewegung habe ich noch keine Meinung, lass sie offen und setze sie anhand der Oberfläche.

/design build dashboard

/design tokens

/design review src/pages/pricing

/design redesign die Marketing-Website https://example.com. Behalte das Logo und diese indexierten URLs: /pricing, /features und /blog. Sag mir, welche Änderungen Suche oder Barrierefreiheit gefährden.

Atelier, entwirf einen Einstellungsbildschirm für unsere Admin-Konsole. Ich weiß noch nicht, wer der typische Admin ist; halte das als unbekannt fest und trage das Risiko mit.

Atelier, die Rechnungsliste ist gebaut. Bereite die Übergabe an Sentinel vor: die Zustandsmatrix und die zu testenden Tastaturwege. Danach Sentinel, schreibe das passende Abnahmeprotokoll.

Was es schreibt und wo#

Der Code selbst wird dort in die Quellen deines Projekts geschrieben, wo du es verlangt hast. Die Ausgabe überschreibt nie ein Briefing, das sie nicht geschrieben hat, und der Intake weigert sich, unter .git/, _bmad/, .bmad-plus/ oder node_modules/ zu schreiben.

Datenflüsse und Voraussetzungen#

• Nur Node.js 20. Das npm-Paket design-skill, auf 0.2.1 festgelegt, wird von der normalen BMAD+-Installation geholt (es ist eine seiner sieben Laufzeit-Abhängigkeiten); der Installer kopiert daraus die Skills.
• Das Pack führt kein Skript aus, startet keinen eigenen Prozess und sendet nirgendwohin etwas. Eine Prüfung, die einen Browser oder Scanner braucht, läuft nur über die Werkzeuge deines eigenen Projekts, namentlich vorgeschlagen und mit deiner Zustimmung. Die Datenflüsse des Host-Werkzeugs nach außen gelten wie bei jedem Agenten.

Grenzen und Stolpersteine#