🎨 Design-Komponenten-Pipeline — Programmablaufplan

6-Stage Design Workflow · Tägliches Brainstorming · April 2026

D1 Brainstorming

D2 Auswahl

D3 Implementierung

D4 Preview

D5 PO-Feedback

D6 Integration

◆ Entscheidung

🔄 Loop

Kontrollen:

[D1] BRAINSTORMING — Tägliche Design-Ideen generieren

D1.1

Frontend-Design-Developer Agent startet täglich

🤖 Agent: Frontend-Design-Developer | Cron: täglich 08:00

Prompt: d1-design-brainstorming.md

Autonomer Agent startet jeden Morgen um 08:00 und generiert neue Design-Ideen für Komponenten.

↓

D1.2

Bestehende Komponenten analysieren

🤖 Frontend-Design-Developer

analyzeExistingComponents() → website-minicon-components prüfen

Bestehende Komponenten-Bibliothek scannen, um Duplikate zu vermeiden:

Hero, GalaxyParticles, AnimatedGrid
InteractiveDiamond, MenuCard
Weitere registrierte Komponenten

↓

D1.3

5–10 Ideen pro Typ generieren

🤖 Frontend-Design-Developer

3 Typen werden generiert:

Hintergründe — Background Effects (Partikel, Gradient-Animationen, etc.)
Menüs / Navigation — Navigationsleisten, Seitenmenüs, Mobile-Menüs
Komponenten — Cards, CTAs, Testimonials, Feature-Sections

📄 Jira: Ticket erstellen mit strukturiertem Kommentar [D1]

design-brainstorm → brainstorm-done

↓

[D2] AUSWAHL — 20% der besten Ideen selektieren

D2.1

Brainstorming-Ticket lesen

🤖 Agent: Frontend-Design-Developer | Cron: täglich 09:00

Prompt: d2-design-auswahl.md

📄 findTickets(labels: brainstorm-done, NOT design-selected)

Selector-Agent liest alle fertigen Brainstorming-Tickets und bewertet die Ideen.

↓

D2.2 Auswahl-Kriterien prüfen

CI-Guideline konform? (Farben, DSGVO, keine Google Fonts)
Ergänzt bestehende Komponenten? (kein Duplikat)
Wiederverwendbar?
Technisch machbar?

✅ JA — Kriterien erfüllt
↓

→ Weiter zu D2.3

❌ NEIN — überspringen
↓

Idee wird nicht ausgewählt

D2.3

Sub-Tickets für ausgewählte Designs erstellen

🤖 Frontend-Design-Developer

20% = ca. 1–2 pro Typ = 3–6 total

📄 Jira: Sub-Tickets erstellen

design-selected typ-background typ-menu typ-component

↓

[D3] IMPLEMENTIERUNG — React-Komponenten bauen

D3.1

Ausgewähltes Design-Ticket finden

🤖 Agent: Frontend-Design-Developer | Cron: 10:00, 16:00

Prompt: d3-design-build.md

📄 findTickets(labels: design-selected, NOT design-implemented)

↓

D3.2

Komponente implementieren

🤖 Frontend-Design-Developer

Konventionen:

'use client' Direktive
TypeScript Props mit Interface
Tailwind CSS für Styling
JSDoc @example Dokumentation

⚠️ DSGVO: Keine Google Fonts, kein externes Tracking

🐙 createBranch → design/{component-name} in website-minicon-components

↓

🔄 D3.3 — Build & Typecheck (Retry-Loop, max 3x)

D3.3

Build testen

🤖 Frontend-Design-Developer

npm run build && npm run typecheck

↓

D3.3a Build OK?

✅ JA
↓

design-implemented
→ Weiter zu D4

❌ NEIN
↓

Fix & Retry (max 3x):
1. Build-Fehler analysieren
2. Automatischer Fix-Versuch
3. Erneuter Build

Nach 3x fehl:
design-escalation

↩ Loop → zurück zu D3.3

↓

[D4] PREVIEW — Vorschau generieren & Freigabe anfragen

D4.1

Preview-Branch deployen

🤖 Agent: Frontend-Design-Developer | Cron: 12:00, 18:00

Prompt: d4-design-preview.md

Automatisches Deployment des Design-Branches auf Cloudflare Pages Preview-URL.

↓

D4.2

Screenshot / Vorschau erstellen

🤖 Frontend-Design-Developer

Lighthouse Score prüfen

Automatische Screenshots generieren:

📱 Mobile-Ansicht (375px)
💻 Desktop-Ansicht (1440px)
📈 Lighthouse Performance Score

↓

D4.3

Freigabe-Anfrage an PO

🤖 Frontend-Design-Developer

📄 Kommentar mit Preview-URL + Screenshots anhängen

design-preview-ready awaiting-po-approval

↓

[D5] PO-FEEDBACK — Manuelle Freigabe durch Michael

D5 PO-Entscheidung

Michael prüft Preview und entscheidet

✅ FREIGABE

Design wird genehmigt.

design-approved

↓

Weiter zu D6

🔄 FEEDBACK

Kommentar [PO-FEEDBACK] mit Änderungswünschen.

↩ Loop

Zurück zu D3

❌ ABLEHNUNG

Design wird abgelehnt.

design-rejected

↓

Ticket geschlossen

↓
(nur bei Freigabe)

[D6] INTEGRATION — Ins Components-Repository mergen

D6.1

Komponente in Kategorie einfügen

🤖 Agent: Frontend-Design-Developer | Cron: 07:00, 13:00, 19:00

Prompt: d6-design-integration.md

Komponente wird in die passende Kategorie im Index eingetragen (backgrounds, menus, components).

↓

D6.2

PR erstellen & mergen

🤖 Frontend-Design-Developer

🐙 createPR → Auto-merge nach CI

design-integrated

↓

D6.3

Abschluss

🤖 Frontend-Design-Developer

design-done

✅ Komponente verfügbar
Die neue Design-Komponente ist jetzt im website-minicon-components Repository verfügbar und kann in allen Minicon-Websites verwendet werden.

Jira Label-Flow

design-brainstorm → brainstorm-done → design-selected → design-implemented → design-preview-ready → awaiting-po-approval → design-approved → design-integrated → design-done