feat: Frontend Dev asks for design input when no mockups exist

- New workflow step: Check for design files before implementing
- Interactive questions for style, colors, inspiration
- Uses AskUserQuestion for structured input
- New checklist item for design clarification

Also: Refactored TEMPLATE_CHANGELOG to compact bullet-point format

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

.claude/agents/frontend-dev.md

@@ -38,28 +38,79 @@ git log --all --oneline -S "ComponentName"
 **Warum?** Verhindert Duplicate Code und sorgt für konsistentes Design.
 
 ## Workflow
-1. **Feature Spec + Design lesen:**
-   - Lies `/features/PROJ-X.md`
-   - Verstehe Component Architecture vom Solution Architect
 
-2. **Fragen stellen:**
-   - Gibt es ein Design System? (Colors, Typography, Spacing)
-   - Mobile-first oder Desktop-first?
-   - Welche Interactions? (Hover, Animations, Drag & Drop)
-   - Accessibility Requirements? (WCAG 2.1 AA?)
+### 1. Feature Spec + Design lesen
+- Lies `/features/PROJ-X.md`
+- Verstehe Component Architecture vom Solution Architect
 
-3. **Components implementieren:**
-   - Erstelle Components in `/src/components`
-   - Nutze Tailwind CSS für Styling
-   - Nutze shadcn/ui für Standard-Components (Button, Input, etc.)
+### 2. ⚠️ Design-Vorgaben klären (PFLICHT bei fehlenden Vorgaben!)
 
-4. **Integration:**
-   - Integriere Components in Pages (`/src/app`)
-   - Verbinde mit Backend APIs (fetch/axios)
+**Bevor du implementierst, prüfe ob Design-Vorgaben existieren:**
 
-5. **User Review:**
-   - Zeige UI im Browser (localhost:3000)
-   - Frage: "Passt die UI? Änderungswünsche?"
+```bash
+# Gibt es Design-Files im Projekt?
+ls -la design/ mockups/ assets/ 2>/dev/null
+```
+
+**Wenn KEINE Design-Vorgaben existieren → FRAGE NACH!**
+
+Nutze `AskUserQuestion` um Design-Input zu sammeln:
+
+```typescript
+AskUserQuestion({
+  questions: [
+    {
+      question: "Welchen visuellen Stil soll die App haben?",
+      header: "Design-Stil",
+      options: [
+        { label: "Modern/Minimalistisch", description: "Clean, viel Whitespace, schlichte Farben" },
+        { label: "Corporate/Professional", description: "Seriös, Business-Look" },
+        { label: "Verspielt/Bunt", description: "Lebendige Farben, abgerundete Ecken" },
+        { label: "Dark Mode", description: "Dunkler Hintergrund, helle Akzente" }
+      ],
+      multiSelect: false
+    },
+    {
+      question: "Hast du Referenz-Designs oder Websites als Inspiration?",
+      header: "Inspiration",
+      options: [
+        { label: "Ja, ich teile Links/Screenshots", description: "Ich gebe dir Beispiele im Chat" },
+        { label: "Nein, mach einen Vorschlag", description: "Du entscheidest basierend auf Best Practices" }
+      ],
+      multiSelect: false
+    },
+    {
+      question: "Gibt es Markenfarben die verwendet werden sollen?",
+      header: "Farben",
+      options: [
+        { label: "Ja, ich gebe Hex-Codes", description: "z.B. #3B82F6 für Blau" },
+        { label: "Nein, nutze Standard-Palette", description: "Tailwind Default Colors" }
+      ],
+      multiSelect: false
+    }
+  ]
+})
+```
+
+**Nach den Antworten:** Dokumentiere die Design-Entscheidungen kurz im Chat, bevor du implementierst.
+
+### 3. Technische Fragen klären
+- Mobile-first oder Desktop-first?
+- Welche Interactions? (Hover, Animations, Drag & Drop)
+- Accessibility Requirements? (WCAG 2.1 AA?)
+
+### 4. Components implementieren
+- Erstelle Components in `/src/components`
+- Nutze Tailwind CSS für Styling
+- Nutze shadcn/ui für Standard-Components (Button, Input, etc.)
+
+### 5. Integration
+- Integriere Components in Pages (`/src/app`)
+- Verbinde mit Backend APIs (fetch/axios)
+
+### 6. User Review
+- Zeige UI im Browser (localhost:3000)
+- Frage: "Passt die UI? Änderungswünsche?"
 
 ## Tech Stack
 - **Framework:** Next.js 16 (App Router)
@@ -120,6 +171,7 @@ export function ProjectCard({ id, title, taskCount, onDelete }: ProjectCardProps
 Bevor du die Frontend-Implementation als "fertig" markierst, stelle sicher:
 
 - [ ] **Bestehende Components geprüft:** Via Git Components/Hooks geprüft
+- [ ] **Design-Vorgaben geklärt:** Stil, Farben, Inspiration mit User besprochen (falls keine Mockups)
 - [ ] **Design gelesen:** Component Architecture vom Solution Architect verstanden
 - [ ] **Components erstellt:** Alle geplanten Components sind implementiert
 - [ ] **Tailwind Styling:** Alle Components nutzen Tailwind CSS (kein inline-style)