@hegemonart/get-design-done 1.24.2 → 1.25.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.de.md ADDED
@@ -0,0 +1,679 @@
1
+ <div align="center">
2
+
3
+ # GET DESIGN DONE
4
+
5
+ [English](README.md) · [简体中文](README.zh-CN.md) · [日本語](README.ja.md) · [한국어](README.ko.md) · [Français](README.fr.md) · [Italiano](README.it.md) · **Deutsch**
6
+
7
+ **Eine Design-Quality-Pipeline für AI-Coding-Agenten: Brief → Explore → Plan → Implementierung → Verifikation.**
8
+
9
+ **Get Design Done hält AI-generierte UI an deinen Brief, dein Design-System, deine Referenzen und deine Quality Gates gebunden. Funktioniert mit Claude Code, OpenCode, Gemini CLI, Kilo, Codex, Copilot, Cursor, Windsurf, Antigravity, Augment, Trae, Qwen Code, CodeBuddy und Cline.**
10
+
11
+ [![npm version](https://img.shields.io/npm/v/@hegemonart/get-design-done?style=for-the-badge&logo=npm&logoColor=white&color=CB3837)](https://www.npmjs.com/package/@hegemonart/get-design-done)
12
+ [![npm downloads](https://img.shields.io/npm/dm/@hegemonart/get-design-done?style=for-the-badge&logo=npm&logoColor=white&color=CB3837)](https://www.npmjs.com/package/@hegemonart/get-design-done)
13
+ [![CI](https://img.shields.io/github/actions/workflow/status/hegemonart/get-design-done/ci.yml?branch=main&style=for-the-badge&logo=github&label=CI)](https://github.com/hegemonart/get-design-done/actions/workflows/ci.yml)
14
+ [![GitHub stars](https://img.shields.io/github/stars/hegemonart/get-design-done?style=for-the-badge&logo=github&color=181717)](https://github.com/hegemonart/get-design-done)
15
+ [![Node](https://img.shields.io/badge/node-22%20%7C%2024-339933?style=for-the-badge&logo=node.js&logoColor=white)](https://nodejs.org/)
16
+ [![License](https://img.shields.io/badge/license-MIT-blue?style=for-the-badge)](LICENSE)
17
+
18
+ <br>
19
+
20
+ ```bash
21
+ npx @hegemonart/get-design-done@latest
22
+ ```
23
+
24
+ **Funktioniert auf macOS, Linux und Windows.**
25
+
26
+ <br>
27
+
28
+ *„AI-Coding-Agenten liefern UI schnell. Get Design Done sorgt dafür, dass sie Design liefern."*
29
+
30
+ <br>
31
+
32
+ [Warum ich es gebaut habe](#warum-ich-es-gebaut-habe) · [Wie es funktioniert](#wie-es-funktioniert) · [Befehle](#befehle) · [Verbindungen](#verbindungen) · [Warum es funktioniert](#warum-es-funktioniert)
33
+
34
+ </div>
35
+
36
+ ---
37
+
38
+ > [!IMPORTANT]
39
+ > ### Schon ein Claude-Design-Bundle?
40
+ >
41
+ > Wenn du ein Design aus [claude.ai/design](https://claude.ai/design) exportiert hast, kannst du die Stufen 1–3 vollständig überspringen:
42
+ >
43
+ > ```
44
+ > /gdd:handoff ./my-design.html
45
+ > ```
46
+ >
47
+ > Parst die CSS-Custom-Properties des Bundles in D-XX-Designentscheidungen, führt den Verifikationslauf mit Handoff-Faithfulness-Scoring aus und schreibt optional den Implementierungsstatus zurück nach Figma.
48
+
49
+ ---
50
+
51
+ ## Warum ich es gebaut habe
52
+
53
+ Ich bin Designer und liefere mit AI-Coding-Agenten aus. Der Code-Workflow ist reif: Specs, Tasks, Tests, Commits, Review-Loops. Der Design-Workflow war es nicht.
54
+
55
+ Worauf ich immer wieder gestoßen bin: Der Agent konnte einen Screen erzeugen, der isoliert gut aussah, aber die Arbeit blieb *zusammenhanglos*. Tokens passten nicht zum bestehenden System. Kontrastverhältnisse rutschten unter WCAG. Hierarchie wurde pro Bildschirm neu erfunden. Alte Anti-Patterns landeten in neuen Komponenten. Und weil nichts den Output gegen den ursprünglichen Brief verifizierte, tauchten die Probleme spät auf: im PR-Review oder nach dem Handoff.
56
+
57
+ Also habe ich Get Design Done gebaut: eine Design-Pipeline, die AI-Coding-Agenten dieselbe Struktur gibt, die Entwickler aus Engineering-Workflows bereits erwarten. Sie erfasst den Brief, kartiert das aktuelle Design-System, verankert Entscheidungen in Referenzen, zerlegt Arbeit in atomare Tasks, führt diese Tasks aus und verifiziert das Ergebnis vor dem Shipping.
58
+
59
+ Hinter den Kulissen: 37 spezialisierte Agenten, ein abfragbarer Intel-Store, Tier-bewusstes Modell-Routing, 12 optionale Tool-Verbindungen, atomare Commits und eine No-Regret-Adaptiv-Schicht, die aus Solidify-with-Rollback-Ergebnissen lernt. Im Alltag nutzt du ein paar `/gdd:*`-Befehle, die Designarbeit kohärent halten.
60
+
61
+ — **Hegemon**
62
+
63
+ ---
64
+
65
+ AI-generiertes Design hat denselben Fehlermodus wie AI-generierter Code: Du beschreibst, was du willst, bekommst etwas Plausibles, und bei Skalierung bricht es auseinander, weil kein System den Output zurück an den Brief bindet.
66
+
67
+ Get Design Done ist die Context-Engineering-Schicht für Designarbeit. Es verwandelt „mach diese UI besser" in einen nachvollziehbaren Zyklus: Brief → Inventar → Referenzen → Plan → Implementierung → Verifikation.
68
+
69
+ ---
70
+
71
+ ## Was du bekommst
72
+
73
+ - **Brief-gebundene Designarbeit** — jeder Zyklus beginnt mit Problem, Zielgruppe, Constraints, Erfolgskriterien und Must-haves.
74
+ - **Design-System-Extraktion** — GDD inventarisiert Tokens, Typografie, Spacing, Komponenten, Motion, Accessibility, Dark Mode und Design Debt, bevor Änderungen geplant werden.
75
+ - **Referenzgestützte Entscheidungen** — Agenten nutzen eingebettete Design-Referenzen plus optionale Verbindungen zu Figma, Refero, Pinterest, Storybook, Chromatic, Preview, Claude Design, paper.design, pencil.dev, Graphify, 21st.dev Magic und Magic Patterns.
76
+ - **Atomare Ausführung** — Design-Tasks werden nach Abhängigkeiten zerlegt, in sicheren Waves ausgeführt und unabhängig committet.
77
+ - **Verifikation vor dem Shipping** — Audits prüfen Brief-Fit, Token-Integration, WCAG-Kontrast, Komponenten-Konformität, Motion-Konsistenz, Dark-Mode-Architektur und Design-Anti-Patterns.
78
+ - **Rollback bei fehlgeschlagener Validierung** — solidify-with-rollback validiert jeden Task, bevor er bestehen bleibt; fehlgeschlagene Arbeit wird automatisch revertet.
79
+
80
+ ---
81
+
82
+ ## Für wen ist das
83
+
84
+ GDD ist für Engineers, Designer, Design Engineers, Founders und Product Builder, die UI mit AI-Coding-Agenten ausliefern und wollen, dass das Ergebnis über den ersten Screenshot hinaus trägt.
85
+
86
+ Nutze es, wenn dir wichtig ist, dass Tokens passen, Kontrast WCAG besteht, Motion kohärent bleibt, Komponenten deinem System folgen und die finale Implementierung noch immer deiner Anfrage entspricht.
87
+
88
+ Du musst kein Designer sein. Die Pipeline bringt Design-Disziplin in den Agenten-Workflow: Sie extrahiert Kontext, fragt nur nach fehlenden Entscheidungen, verankert Arbeit in Referenzen und fängt Probleme ab, die man sonst zu spät findet.
89
+
90
+ ### v1.24.0 Highlights — Multi-Runtime-Installer
91
+
92
+ - **`@clack/prompts` interaktive Mehrfachauswahl** — `npx @hegemonart/get-design-done` ohne Flags öffnet jetzt eine polierte Checkbox-UI für alle 14 unterstützten Runtimes (Claude Code, OpenCode, Gemini CLI, Kilo, Codex, Copilot, Cursor, Windsurf, Antigravity, Augment, Trae, Qwen Code, CodeBuddy, Cline) plus ein Global-/Local-Radio.
93
+ - **Idempotent + sicher gegen fremde AGENTS.md** — den Installer erneut auszuführen dupliziert nie Einträge und überschreibt nie runtime-spezifische Anweisungsdateien, die du hinzugefügt hast. Bestätigungsschritt vor jedem Schreibvorgang.
94
+ - **Skriptfähige CI-Schnittstelle erhalten** — alle bestehenden Flags (`--claude`, `--cursor`, `--all`, `--global`, `--local`, `--uninstall`, `--config-dir`) funktionieren unverändert weiter. Der interaktive Modus aktiviert sich nur, wenn kein Runtime-Flag übergeben wurde.
95
+ - **Mehrfachauswahl-Deinstallation** — `--uninstall` ohne Runtime-Flag wechselt ebenfalls in die interaktive Mehrfachauswahl, um die Runtimes zu wählen, aus denen entfernt werden soll.
96
+
97
+ ### Frühere Releases
98
+
99
+ - **v1.23.5** — No-Regret-Adaptiv-Schicht (Thompson-Sampling-Bandit + AdaNormalHedge-Ensemble + MMR-Reranking; single-user-tauglich durch Informed-Prior-Bootstrap, ohne Opt-in-Shared-Telemetrie).
100
+ - **v1.23.0** — SDK-Domain-Primitive (Solidify-with-Rollback-Gate, JSON-Output-Verträge, Auto-Kristallisation von `Touches:`-Mustern).
101
+ - **v1.22.0** — SDK-Observability (~24 typisierte Event-Typen, Per-Tool-Call-Trajectory, append-only Event-Chain, Secret-Scrubber).
102
+ - **v1.21.0** — Headless-SDK (`gdd-sdk`-CLI führt die volle Pipeline ohne Claude Code aus, parallele Researcher, Cross-Harness-MCP).
103
+ - **v1.20.0** — SDK-Foundation (Resilienz-Primitive, lockfile-sichere `STATE.md`, `gdd-state` MCP-Server mit 11 typisierten Tools, TypeScript-Foundation).
104
+
105
+ Vollständige Release-Notes in [CHANGELOG.md](CHANGELOG.md).
106
+
107
+ ---
108
+
109
+ <p align="center">
110
+ <strong>Supported by</strong>
111
+ </p>
112
+
113
+ <div align="center">
114
+ <a href="https://www.humbleteam.com/" aria-label="Humbleteam">
115
+ <img src="docs/assets/sponsors/humbleteam.svg" alt="Humbleteam logo" width="180">
116
+ </a>
117
+ <br>
118
+ <sub>Product design partner for ambitious startups and AI products.</sub>
119
+ </div>
120
+
121
+ ---
122
+
123
+ ## Erste Schritte
124
+
125
+ ```bash
126
+ npx @hegemonart/get-design-done@latest
127
+ ```
128
+
129
+ Der Installer fragt dich:
130
+ 1. **Runtime** — Claude Code, OpenCode, Gemini, Kilo, Codex, Copilot, Cursor, Windsurf, Antigravity, Augment, Trae, Qwen Code, CodeBuddy, Cline oder alle (interaktive Mehrfachauswahl)
131
+ 2. **Speicherort** — Global (alle Projekte) oder Local (nur aktuelles Projekt)
132
+
133
+ Verifizieren mit:
134
+
135
+ ```
136
+ /gdd:help
137
+ ```
138
+
139
+ > [!TIP]
140
+ > Starte Claude Code mit `--dangerously-skip-permissions` für eine reibungslose Automatisierungserfahrung. GDD ist für autonome mehrstufige Ausführung konzipiert.
141
+
142
+ ### Aktuell bleiben
143
+
144
+ GDD veröffentlicht häufig. Aktualisiere durch erneutes Ausführen des Installers (idempotent):
145
+
146
+ ```bash
147
+ npx @hegemonart/get-design-done@latest
148
+ ```
149
+
150
+ Oder in Claude Code:
151
+
152
+ ```
153
+ /gdd:update
154
+ ```
155
+
156
+ `/gdd:update` zeigt das Changelog vor dem Anwenden in einer Vorschau. Lokale Modifikationen unter `reference/` bleiben erhalten — wenn ein strukturelles Update ein Re-Stitching erfordert, führe `/gdd:reapply-patches` aus.
157
+
158
+ <details>
159
+ <summary><strong>Nicht-interaktive Installation (Docker, CI, Skripte)</strong></summary>
160
+
161
+ ```bash
162
+ npx @hegemonart/get-design-done --claude --global
163
+ npx @hegemonart/get-design-done --claude --local
164
+ npx @hegemonart/get-design-done --opencode --global
165
+ npx @hegemonart/get-design-done --gemini --global
166
+ npx @hegemonart/get-design-done --kilo --global
167
+ npx @hegemonart/get-design-done --codex --global
168
+ npx @hegemonart/get-design-done --copilot --global
169
+ npx @hegemonart/get-design-done --cursor --global
170
+ npx @hegemonart/get-design-done --windsurf --global
171
+ npx @hegemonart/get-design-done --antigravity --global
172
+ npx @hegemonart/get-design-done --augment --global
173
+ npx @hegemonart/get-design-done --trae --global
174
+ npx @hegemonart/get-design-done --qwen --global
175
+ npx @hegemonart/get-design-done --codebuddy --global
176
+ npx @hegemonart/get-design-done --cline --global
177
+
178
+ # Alle Runtimes
179
+ npx @hegemonart/get-design-done --all --global
180
+
181
+ # Dry-Run
182
+ npx @hegemonart/get-design-done --dry-run
183
+
184
+ # Eigenes Config-Verzeichnis
185
+ CLAUDE_CONFIG_DIR=/workspace/.claude npx @hegemonart/get-design-done
186
+ ```
187
+
188
+ </details>
189
+
190
+ <details>
191
+ <summary><strong>Alternative: Claude Code CLI</strong></summary>
192
+
193
+ ```bash
194
+ claude plugin marketplace add hegemonart/get-design-done
195
+ claude plugin install get-design-done@get-design-done
196
+ ```
197
+
198
+ </details>
199
+
200
+
201
+ ## Wie es funktioniert
202
+
203
+ > **Du startest in einer bestehenden Codebase?** Führe zuerst `/gdd:map` aus. Es dispatcht 5 Spezial-Mapper parallel (Tokens, Components, Visual Hierarchy, A11y, Motion) und schreibt strukturiertes JSON nach `.design/map/`.
204
+
205
+ ### 1. Brief
206
+
207
+ ```
208
+ /gdd:brief
209
+ ```
210
+
211
+ Erfasst das Designproblem vor jedem Scan oder jeder Exploration. Der Skill interviewt via `AskUserQuestion`, eine Frage nach der anderen — nur für unbeantwortete Abschnitte: Problem, Zielgruppe, Constraints, Erfolgsmetriken, Scope.
212
+
213
+ **Erstellt:** `.design/BRIEF.md`
214
+
215
+ ---
216
+
217
+ ### 2. Explore
218
+
219
+ ```
220
+ /gdd:explore
221
+ ```
222
+
223
+ Inventarisiert das Design-System der aktuellen Codebase — Farben, Typografie, Abstände, Komponenten, Motion, A11y, Dark-Mode. Fünf parallele Mapper + ein `design-discussant`-Interview produzieren drei Artefakte. Verbindungs-Probes erkennen die Verfügbarkeit von 12 externen Tools.
224
+
225
+ **Erstellt:** `.design/DESIGN.md`, `.design/DESIGN-DEBT.md`, `.design/DESIGN-CONTEXT.md`, `.design/map/{tokens,components,a11y,motion,visual-hierarchy}.{md,json}`
226
+
227
+ ---
228
+
229
+ ### 3. Plan
230
+
231
+ ```
232
+ /gdd:plan
233
+ ```
234
+
235
+ Zerlegt die Explore-Ausgabe in atomare, wave-koordinierte, dependency-analysierte Design-Tasks. Jeder Task trägt explizite `Touches:`-Pfade, Parallel-Safe-Tags und Akzeptanzkriterien. `design-planner` (opus) verfasst; `design-plan-checker` (haiku) gate-checkt vor der Ausführung.
236
+
237
+ **Erstellt:** `.design/DESIGN-PLAN.md`
238
+
239
+ ---
240
+
241
+ ### 4. Design
242
+
243
+ ```
244
+ /gdd:design
245
+ ```
246
+
247
+ Führt Tasks in Wave-Reihenfolge aus. Jeder Task erhält einen dedizierten `design-executor`-Agent mit frischem 200k-Kontext, atomarem Git-Commit und automatischer Abweichungsbehandlung gemäß In-Context-Regeln. Parallel-sichere Tasks laufen in Worktrees.
248
+
249
+ **Solidify-with-Rollback** (v1.23.0) — jeder Task validiert (Typecheck + Build + gezielter Test) vor dem Fixieren. Validierung scheitert → Revert via `git stash`.
250
+
251
+ **Erstellt:** ein `.design/tasks/task-NN.md` pro Task, einen atomaren Git-Commit pro Task
252
+
253
+ ```
254
+ ┌────────────────────────────────────────────────────────────────────┐
255
+ │ WAVE-AUSFÜHRUNG │
256
+ ├────────────────────────────────────────────────────────────────────┤
257
+ │ │
258
+ │ WAVE 1 (parallel) WAVE 2 (parallel) WAVE 3 │
259
+ │ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
260
+ │ │ Task 01 │ │ Task 02 │ → │ Task 03 │ │ Task 04 │ → │ Task 05 │ │
261
+ │ └─────────┘ └─────────┘ └─────────┘ └─────────┘ └─────────┘ │
262
+ │ │ │ ↑ ↑ ↑ │
263
+ │ └───────────┴──────────────┴───────────┴──────────────┘ │
264
+ │ Touches:-Pfade steuern die Dependency-Analyse │
265
+ │ │
266
+ └────────────────────────────────────────────────────────────────────┘
267
+ ```
268
+
269
+ ---
270
+
271
+ ### 5. Verify
272
+
273
+ ```
274
+ /gdd:verify
275
+ ```
276
+
277
+ Verifiziert gegen den Brief — Must-Haves, NN/g-Heuristiken, Audit-Rubrik, Token-Integration. Drei Agenten laufen sequenziell: `design-auditor` (6-Säulen-Score 1–4), `design-verifier` (ziel-rückwärts), `design-integration-checker` (greppt D-XX-Entscheidungen zurück in den Code). Bei Fehlschlägen produziert er eine strukturierte Gap-Liste und tritt in eine Verify→Fix-Schleife via `design-fixer` ein.
278
+
279
+ **Erstellt:** `.design/DESIGN-VERIFICATION.md`, Fix-Commits bei Problemen
280
+
281
+ ---
282
+
283
+ ### 6. Ship → Reflect → Nächster Zyklus
284
+
285
+ ```
286
+ /gdd:ship # Sauberen PR-Branch erzeugen (filtert .design/-Commits)
287
+ /gdd:reflect # design-reflector liest Telemetrie + Lernergebnisse
288
+ /gdd:apply-reflections # Vorschläge prüfen und selektiv anwenden
289
+ /gdd:complete-cycle # Zyklus-Artefakte archivieren + EXPERIENCE.md schreiben
290
+ /gdd:new-cycle # Neuen Design-Zyklus eröffnen
291
+ ```
292
+
293
+ Oder Auto-Routing:
294
+
295
+ ```
296
+ /gdd:next # State automatisch erkennen und nächsten Schritt ausführen
297
+ ```
298
+
299
+ Jeder Zyklus erhält Brief, Scan, Plan, Ausführung, Verifikation und ein zyklusspezifisches `EXPERIENCE.md` (~100–200 Zeilen: Ziel / getroffene Entscheidungen / Graduierte Lernergebnisse / Was gestorben ist / Übergabe an den nächsten Zyklus), das zur höchstpriorisierten Quelle für den Decision-Injector-Hook wird.
300
+
301
+ ---
302
+
303
+ ### Fast-Modus
304
+
305
+ ```
306
+ /gdd:fast "<task>"
307
+ ```
308
+
309
+ Für triviale Single-File-Fixes, die keine vollständige Pipeline brauchen. Überspringt Router, Cache-Manager und Telemetrie. Gleiche Atomic-Commit-Garantien.
310
+
311
+ ```
312
+ /gdd:quick
313
+ ```
314
+
315
+ Für Ad-hoc-Tasks, die GDD-Garantien brauchen, aber optionale Gates überspringen (kein Phase-Researcher, kein Assumptions-Analyzer, kein Integration-Checker). Schneller als die volle Pipeline; sicherer als `/gdd:fast`.
316
+
317
+ ---
318
+
319
+ ## Warum es funktioniert
320
+
321
+ ### Context-Engineering
322
+
323
+ AI-Coding-CLIs sind mächtig, **wenn** du sie mit Kontext fütterst. Die meisten tun das nicht.
324
+
325
+ GDD erledigt das für dich:
326
+
327
+ | Datei | Zweck |
328
+ |-------|-------|
329
+ | `.design/BRIEF.md` | Problem, Zielgruppe, Erfolgsmetriken des Zyklus |
330
+ | `.design/DESIGN.md` | Aktuelle Design-System-Snapshot (Tokens, Komponenten, Hierarchie) |
331
+ | `.design/DESIGN-CONTEXT.md` | D-XX-Entscheidungen, Interview-Antworten, Upstream-/Downstream-Constraints |
332
+ | `.design/DESIGN-PLAN.md` | Atomare Tasks, Wave-Choreografie, Dependencies |
333
+ | `.design/DESIGN-VERIFICATION.md` | Verifikationsergebnis, Gap-Liste, Handoff-Faithfulness-Score |
334
+ | `.design/intel/` | Abfragbarer Knowledge-Layer |
335
+ | `.design/archive/cycle-N/EXPERIENCE.md` | Zyklus-Retrospektive, zyklusübergreifender Speicher |
336
+ | `.design/telemetry/events.jsonl` | Typisierter Event-Stream über Stufen hinweg |
337
+ | `.design/telemetry/posterior.json` | Bandit-Posterior (wenn `adaptive_mode != static`) |
338
+
339
+ Größenlimits dort, wo Claudes Qualität abfällt. Bleib darunter, hol dir Konsistenz.
340
+
341
+ ### 37 spezialisierte Agenten
342
+
343
+ Jede Stufe ist ein leichtgewichtiger Orchestrator, der spezialisierte Agenten spawnt.
344
+
345
+ | Stufe | Orchestrator | Agenten |
346
+ |-------|--------------|---------|
347
+ | Brief | Eine-Frage-Interview | (keine Sub-Agenten) |
348
+ | Explore | spawnt 5 Mapper + Discussant | 5 parallele Mapper, design-discussant, research-synthesizer |
349
+ | Plan | spawnt Researcher + Planner + Checker | design-phase-researcher (optional), design-planner (opus), design-plan-checker (haiku) |
350
+ | Design | Wave-Koordination + Worktree-Isolation | design-executor pro Task, design-fixer bei Solidify-Fehlschlag |
351
+ | Verify | spawnt Auditor + Verifier + Checker | design-auditor, design-verifier, design-integration-checker |
352
+ | Reflect | liest Telemetrie + Lernergebnisse | design-reflector (opus), design-authority-watcher, design-update-checker |
353
+
354
+ ### 12 Tool-Verbindungen
355
+
356
+ Alle optional — die Pipeline degradiert sauber, wenn eine Verbindung nicht verfügbar ist:
357
+
358
+ - **Figma** (Lesen + Schreiben + Code Connect)
359
+ - **Refero** — Design-Referenzsuche
360
+ - **Pinterest** — visuelle Referenzverankerung
361
+ - **Claude Design** — Handoff-Bundle-Import
362
+ - **Storybook** — Komponenten-Spezifikations-Lookup
363
+ - **Chromatic** — Visual-Regression-Baseline-Diff
364
+ - **Preview** — Playwright + Claude Preview MCP Runtime-Screenshots
365
+ - **paper.design** — MCP-Canvas-Read/Write
366
+ - **pencil.dev** — Git-getrackte `.pen`-Spec-Dateien
367
+ - **Graphify** — Knowledge-Graph-Export
368
+ - **21st.dev Magic** — Vorbild-Suche vor Greenfield-Builds
369
+ - **Magic Patterns** — DS-aware Komponenten-Generierung
370
+
371
+ ### Eingebettete Design-Referenzen
372
+
373
+ Das Plugin liefert **18+ Referenzdateien** — NN/g 10, Don Normans emotionales Design, Dieter Rams' 10 Prinzipien, Disneys 12 (Motion), Sonner / Emil Kowalski Component-Authoring-Linse, Peak-End, Loss Aversion, Cognitive Load, Aesthetic-Usability, Doherty, Flow, 35 Komponenten-Spezifikationen, Gestalt, visuelle Hierarchie, Brand Voice, 161 Branchen-Paletten, 67 UI-Ästhetiken, 12 Motion-Easings, 8 Transition-Familien, WCAG 2.1 AA, Plattformen (iOS/Android/web/visionOS/watchOS), RTL/CJK, Form-Patterns, Anti-Pattern-Katalog.
374
+
375
+ ### Atomare Git-Commits
376
+
377
+ ```
378
+ abc123f docs(08-02): complete user-card token plan
379
+ def456g feat(08-02): unify card surface tokens with --color-bg-elevated
380
+ hij789k feat(08-02): replace inline padding with --space-* scale
381
+ lmn012o test(08-02): assert card.spec passes WCAG contrast 4.5:1
382
+ ```
383
+
384
+ Git-Bisect findet exakt den fehlgeschlagenen Task. Jeder Task ist unabhängig revertierbar. Solidify-with-Rollback fügt ein Validierungsgate auf Task-Ebene hinzu, sodass ein kaputter Task 3 die Tasks 4–10 nie korrumpiert, bevor Verify läuft.
385
+
386
+ ### Selbstverbesserungs-Loop
387
+
388
+ Nach jedem Zyklus liest `design-reflector` (opus) `events.jsonl`, `agent-metrics.json`, `learnings/` und schlägt Diffs vor — Tier-Overrides, Parallelisierungsregeln, Referenz-Ergänzungen, Frontmatter-Updates. `/gdd:apply-reflections` zeigt das Diff und fragt vor dem Anwenden.
389
+
390
+ Die **No-Regret-Adaptiv-Schicht** (v1.23.5) legt darauf einen Thompson-Sampling-Bandit + AdaNormalHedge-Ensemble + MMR-Reranking, single-user-tauglich durch Informed-Prior-Bootstrap.
391
+
392
+ ### Kosten-Governance
393
+
394
+ - **`gdd-router`-Skill** — deterministisches Intent → fast / quick / full Routing, ohne Modell-Aufruf.
395
+ - **`gdd-cache-manager`** — expliziter Layer-B-Cache, SHA-256-Input-Hash, 5-Min-TTL-Awareness.
396
+ - **`budget-enforcer` PreToolUse-Hook** — erzwingt Tier-Overrides, harte Caps und Lazy-Spawn-Gates aus `.design/budget.json`.
397
+ - **Spawn-genaue Kosten-Telemetrie** — `.design/telemetry/costs.jsonl`-Zeilen speisen die regelbasierten Empfehlungen von `/gdd:optimize`.
398
+
399
+ Zielt auf 50–70% Token-Kostenreduktion pro Task ohne Qualitätsregression.
400
+
401
+ ---
402
+
403
+ ## Befehle
404
+
405
+ ### Kernpipeline
406
+
407
+ | Befehl | Was er tut |
408
+ |--------|------------|
409
+ | `/gdd:brief` | Stufe 1 — Design-Brief erfassen |
410
+ | `/gdd:explore` | Stufe 2 — Codebase-Inventar + Interview |
411
+ | `/gdd:plan` | Stufe 3 — DESIGN-PLAN.md erzeugen |
412
+ | `/gdd:design` | Stufe 4 — in Wellen ausführen |
413
+ | `/gdd:verify` | Stufe 5 — gegen den Brief verifizieren |
414
+ | `/gdd:ship` | Sauberen PR-Branch erzeugen |
415
+ | `/gdd:next` | Auto-Routing zur nächsten Stufe gemäß STATE.md |
416
+ | `/gdd:do <text>` | Natursprachlicher Router |
417
+ | `/gdd:fast <text>` | One-Shot-triviale Korrektur, ohne Pipeline |
418
+ | `/gdd:quick` | Ad-hoc-Task mit GDD-Garantien, aber übersprungenen optionalen Gates |
419
+
420
+ ### Erstlauf + Onboarding
421
+
422
+ | Befehl | Was er tut |
423
+ |--------|------------|
424
+ | `/gdd:start` | Erstlauf-Beweispfad — Top-3-Designprobleme im Repo |
425
+ | `/gdd:new-project` | GDD-Projekt initialisieren |
426
+ | `/gdd:connections` | Onboarding-Wizard für die 12 externen Integrationen |
427
+
428
+ ### Zyklus-Lifecycle
429
+
430
+ | Befehl | Was er tut |
431
+ |--------|------------|
432
+ | `/gdd:new-cycle` | Neuen Design-Zyklus eröffnen |
433
+ | `/gdd:complete-cycle` | Zyklus-Artefakte archivieren + EXPERIENCE.md |
434
+ | `/gdd:pause` / `/gdd:resume` | Nummerierte Checkpoints |
435
+ | `/gdd:continue` | Alias für `/gdd:resume` |
436
+ | `/gdd:timeline` | Narrative Retrospektive über Zyklen + Git-Log |
437
+
438
+ ### Iteration + Entscheidungen
439
+
440
+ | Befehl | Was er tut |
441
+ |--------|------------|
442
+ | `/gdd:discuss [topic]` | Adaptives Design-Interview |
443
+ | `/gdd:list-assumptions` | Versteckte Designannahmen vor dem Plan offenlegen |
444
+ | `/gdd:sketch [idea]` | HTML-Mockups in mehreren Varianten |
445
+ | `/gdd:spike [idea]` | Zeitlich begrenztes Machbarkeitsexperiment |
446
+ | `/gdd:sketch-wrap-up` / `/gdd:spike-wrap-up` | Findings als projektlokalen Skill bündeln |
447
+ | `/gdd:audit` | Wrapper Verify + Audit + Reflector |
448
+ | `/gdd:reflect` | Reflector on-demand starten |
449
+ | `/gdd:apply-reflections` | Vorschläge prüfen und selektiv anwenden |
450
+
451
+ ### Speicher + Knowledge-Layer
452
+
453
+ | Befehl | Was er tut |
454
+ |--------|------------|
455
+ | `/gdd:recall <query>` | FTS5-Suche |
456
+ | `/gdd:extract-learnings` | Muster/Entscheidungen/Lehren extrahieren |
457
+ | `/gdd:note <text>` | Reibungsfreie Ideenerfassung |
458
+ | `/gdd:plant-seed <idea>` | Vorausschauende Idee mit Trigger-Bedingung |
459
+ | `/gdd:analyze-dependencies` | Token-Fanout, Call-Graph, Entscheidungsverfolgung |
460
+ | `/gdd:skill-manifest` | Alle GDD-Skills und Agenten auflisten |
461
+ | `/gdd:graphify` | Projekt-Knowledge-Graph bauen/abfragen/diffen |
462
+ | `/gdd:watch-authorities` | Diff der Design-Autoritäts-Feed-Whitelist |
463
+
464
+ ### Verbindungen
465
+
466
+ | Befehl | Was er tut |
467
+ |--------|------------|
468
+ | `/gdd:figma-write` | Designentscheidungen zurück nach Figma schreiben |
469
+ | `/gdd:handoff <bundle>` | Claude-Design-Bundle importieren |
470
+ | `/gdd:darkmode` | Dark-Mode-Implementierung auditieren |
471
+ | `/gdd:compare` | Delta DESIGN.md vs DESIGN-VERIFICATION.md berechnen |
472
+ | `/gdd:style <Component>` | Komponenten-Handoff-Dokument generieren |
473
+
474
+ ### Diagnose + Forensik
475
+
476
+ | Befehl | Was er tut |
477
+ |--------|------------|
478
+ | `/gdd:scan` | Codebase-Design-System-Inventar |
479
+ | `/gdd:map` | 5 parallele Codebase-Mapper |
480
+ | `/gdd:debug [desc]` | Symptomgetriebene Designuntersuchung |
481
+ | `/gdd:health` | Gesundheitsbericht für `.design/`-Artefakte |
482
+ | `/gdd:progress` | Position in der Pipeline |
483
+ | `/gdd:stats` | Zyklusstatistiken |
484
+ | `/gdd:optimize` | Regelbasierte Kostenanalyse |
485
+ | `/gdd:warm-cache` | Anthropic-Cache vorwärmen |
486
+
487
+ ### Distribution + Update
488
+
489
+ | Befehl | Was er tut |
490
+ |--------|------------|
491
+ | `/gdd:update` | GDD aktualisieren mit Changelog-Vorschau |
492
+ | `/gdd:reapply-patches` | Lokale `reference/`-Modifikationen re-stitchen |
493
+ | `/gdd:check-update` | Manueller Update-Check |
494
+ | `/gdd:settings` | `.design/config.json` konfigurieren |
495
+ | `/gdd:set-profile <profile>` | Modellprofil wechseln |
496
+ | `/gdd:undo` | Sicherer Designänderungs-Revert |
497
+ | `/gdd:pr-branch` | Sauberer PR-Branch |
498
+
499
+ ### Backlog + Notizen
500
+
501
+ | Befehl | Was er tut |
502
+ |--------|------------|
503
+ | `/gdd:todo` | Design-Tasks hinzufügen / auflisten / wählen |
504
+ | `/gdd:add-backlog <idea>` | Idee für zukünftigen Zyklus parken |
505
+ | `/gdd:review-backlog` | Geparkte Einträge prüfen |
506
+
507
+ ### Hilfe
508
+
509
+ | Befehl | Was er tut |
510
+ |--------|------------|
511
+ | `/gdd:help` | Vollständige Befehlsliste und Verwendung |
512
+ | `/gdd:bandit-reset` | Adaptiv-Schicht-Posterior bei Anthropic-Modell-Release zurücksetzen |
513
+
514
+ ---
515
+
516
+ ## Verbindungen
517
+
518
+ GDD liefert 12 Tool-Verbindungen. Alle optional. Konfigurieren mit `/gdd:connections`.
519
+
520
+ | Verbindung | Zweck | Probe |
521
+ |------------|-------|-------|
522
+ | **Figma** | Tokens, Komponenten, Screenshots lesen; Annotationen, Code Connect, Implementierungsstatus schreiben | `mcp__figma__get_metadata` + `use_figma` |
523
+ | **Refero** | Design-Referenzsuche | `mcp__refero__search` |
524
+ | **Pinterest** | Visuelle Referenz für Brand Voice + Stil | OAuth + MCP |
525
+ | **Claude Design** | Handoff-Bundle-Import | URL oder lokale Datei |
526
+ | **Storybook** | Komponenten-Spec-Lookup an Port 6006 | HTTP-Probe |
527
+ | **Chromatic** | Visual-Regression-Baseline-Diff | API-Key |
528
+ | **Preview** | Playwright + Claude Preview MCP Runtime-Screenshots | `mcp__Claude_Preview__preview_*` |
529
+ | **paper.design** | MCP-Canvas-Read/Write | `mcp__paper__use_paper` |
530
+ | **pencil.dev** | Git-getrackte `.pen`-Specs | `.pen`-Dateien im Repo |
531
+ | **Graphify** | Knowledge-Graph-Export | `mcp__graphify__*` |
532
+ | **21st.dev Magic** | Vorbildsuche vor Greenfield | `mcp__magic__search` |
533
+ | **Magic Patterns** | DS-aware Komponenten-Generierung | `mcp__magic-patterns__generate` |
534
+
535
+ Vollständige Details in [`connections/connections.md`](connections/connections.md).
536
+
537
+ ---
538
+
539
+ ## Konfiguration
540
+
541
+ GDD speichert Projekteinstellungen in `.design/config.json`. Konfiguriere während `/gdd:new-project` oder aktualisiere mit `/gdd:settings`.
542
+
543
+ ### Modellprofile
544
+
545
+ | Profil | Planung | Ausführung | Verifikation |
546
+ |--------|---------|------------|--------------|
547
+ | `quality` | Opus | Opus | Sonnet |
548
+ | `balanced` (Standard) | Opus | Sonnet | Sonnet |
549
+ | `budget` | Sonnet | Sonnet | Haiku |
550
+ | `inherit` | Inherit | Inherit | Inherit |
551
+
552
+ ```
553
+ /gdd:set-profile budget
554
+ ```
555
+
556
+ ### Adaptiv-Modus
557
+
558
+ `.design/budget.json#adaptive_mode`-Leiter (v1.23.5):
559
+
560
+ | Modus | Was er tut |
561
+ |-------|------------|
562
+ | `static` (Standard) | Phase-10.1-Verhalten |
563
+ | `hedge` | AdaNormalHedge-Ensemble + MMR-Reranking aktiviert. Sicherste Einführung. |
564
+ | `full` | Bandit-Router + Hedge + MMR alle aktiv |
565
+
566
+ ### Parallelität
567
+
568
+ | Einstellung | Standard | Steuert |
569
+ |-------------|----------|---------|
570
+ | `parallelism.enabled` | `true` | Unabhängige Tasks in Worktrees ausführen |
571
+ | `parallelism.min_estimated_savings_seconds` | `30` | Unter dieser Schwelle Parallelisierung überspringen |
572
+ | `parallelism.max_concurrent_workers` | `4` | Hartes Cap auf gleichzeitige Worker |
573
+
574
+ ### Quality Gates
575
+
576
+ | Einstellung | Standard | Steuert |
577
+ |-------------|----------|---------|
578
+ | `solidify.rollback_mode` | `"stash"` | `stash` / `hard` / `none` |
579
+ | `solidify.commands` | autodetect | Typecheck-/Build-/Test-Befehle überschreiben |
580
+ | `verify.iterations_max` | `3` | Cap auf Verify→Fix-Loop |
581
+ | `connection.figma_writeback` | `proposal` | `proposal` / `auto` |
582
+
583
+ ---
584
+
585
+ ## Sicherheit
586
+
587
+ ### Eingebaute Härtung
588
+
589
+ GDD liefert seit Phase 14.5 Defense-in-Depth:
590
+
591
+ - **`hooks/gdd-bash-guard.js`** — PreToolUse:Bash blockiert ~50 gefährliche Muster nach Unicode-NFKC- + ANSI-Normalisierung.
592
+ - **`hooks/gdd-protected-paths.js`** — PreToolUse:Edit/Write/Bash erzwingt die `protected_paths`-Glob-Liste.
593
+ - **`hooks/gdd-read-injection-scanner.ts`** — scannt eingehenden Read-Inhalt nach unsichtbarem Unicode, HTML-Kommentaren, Secret-Exfiltrations-Mustern.
594
+ - **`scripts/lib/blast-radius.cjs`** — `design-executor`-Preflight verweigert Tasks über `max_files_per_task: 10` / `max_lines_per_task: 400`.
595
+ - **`hooks/gdd-mcp-circuit-breaker.js`** — bricht aufeinanderfolgende Timeout-Schleifen auf `use_figma` / `use_paper` / `use_pencil`.
596
+
597
+ ### Sensible Dateien schützen
598
+
599
+ Füge sensible Pfade der Deny-List deines Runtimes hinzu:
600
+
601
+ ```json
602
+ {
603
+ "permissions": {
604
+ "deny": [
605
+ "Read(.env)",
606
+ "Read(.env.*)",
607
+ "Read(**/secrets/*)",
608
+ "Read(**/*credential*)",
609
+ "Read(**/*.pem)",
610
+ "Read(**/*.key)"
611
+ ]
612
+ }
613
+ }
614
+ ```
615
+
616
+ > [!IMPORTANT]
617
+ > Da GDD Markdown-Dateien generiert, die zu LLM-Systemprompts werden, ist jeder benutzergesteuerte Text, der in `.design/`-Artefakte fließt, ein potenzieller indirekter Prompt-Injection-Vektor. Der Injection-Scanner fängt solche Vektoren auf mehreren Ebenen — aber Defense-in-Depth bleibt Best Practice.
618
+
619
+ ---
620
+
621
+ ## Fehlersuche
622
+
623
+ **Befehle nach Installation nicht gefunden?**
624
+ - Runtime neu starten
625
+ - `~/.claude/skills/get-design-done/` (global) oder `./.claude/skills/get-design-done/` (lokal) prüfen
626
+ - `/gdd:help` zur Bestätigung der Registrierung
627
+
628
+ **Pipeline mitten in einer Stufe blockiert?**
629
+ - `/gdd:resume` — vom letzten nummerierten Checkpoint wiederherstellen
630
+ - `/gdd:health` — `.design/`-Artefaktprobleme diagnostizieren
631
+ - `/gdd:progress --forensic` — 6-Punkte-Integritätsaudit
632
+
633
+ **Kostenüberschreitung?**
634
+ - `/gdd:optimize` — regelbasierte Empfehlungen
635
+ - `/gdd:set-profile budget` — auf Budget-Tier umstellen
636
+ - `adaptive_mode: "full"` in `.design/budget.json` setzen — der Bandit lernt
637
+
638
+ **Auf die neueste Version aktualisieren?**
639
+ ```bash
640
+ npx @hegemonart/get-design-done@latest
641
+ ```
642
+
643
+ **Docker / Container?**
644
+
645
+ ```bash
646
+ CLAUDE_CONFIG_DIR=/workspace/.claude npx @hegemonart/get-design-done
647
+ ```
648
+
649
+ ### Deinstallieren
650
+
651
+ ```bash
652
+ # Globale Deinstallation (pro Runtime)
653
+ npx @hegemonart/get-design-done --claude --global --uninstall
654
+ npx @hegemonart/get-design-done --opencode --global --uninstall
655
+ # ... gleiches Muster --<runtime> --global --uninstall für die 14 Runtimes
656
+
657
+ # Interaktive Mehrfachauswahl-Deinstallation (ohne Runtime-Flag)
658
+ npx @hegemonart/get-design-done --uninstall
659
+
660
+ # Lokale Deinstallation
661
+ npx @hegemonart/get-design-done --claude --local --uninstall
662
+ # ... mit --local-Flag
663
+ ```
664
+
665
+ Entfernt alle GDD-Befehle, Agenten, Hooks und Einstellungen, ohne deine anderen Konfigurationen zu beeinflussen.
666
+
667
+ ---
668
+
669
+ ## Lizenz
670
+
671
+ MIT-Lizenz. Siehe [LICENSE](LICENSE) für Details.
672
+
673
+ ---
674
+
675
+ <div align="center">
676
+
677
+ **Claude Code liefert Code aus. Get Design Done sorgt dafür, dass auch Design ausgeliefert wird.**
678
+
679
+ </div>