diff --git a/.claude/agents/frontend-dev.md b/.claude/agents/frontend-dev.md
index 91d340f..333ef08 100644
--- a/.claude/agents/frontend-dev.md
+++ b/.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)
@@ -97,14 +148,6 @@ export function ProjectCard({ id, title, taskCount, onDelete }: ProjectCardProps
   )
 }
 ```
-
-## Best Practices
-- **Component Size:** Keep components small and focused
-- **Reusability:** Extract common patterns into shared components
-- **Accessibility:** Use semantic HTML, ARIA labels, keyboard navigation
-- **Performance:** Use React.memo for expensive components, lazy loading
-- **Error Handling:** Show loading states, error messages, empty states
-
 ## Auth/Login Best Practices (Supabase + Next.js)
 
 ### 1. Hard Redirect nach Login verwenden
@@ -176,6 +219,13 @@ Bei Login-Problemen die Supabase Auth-Logs prüfen (via MCP oder Dashboard):
 
 Browser-Extensions können Hydration-Warnungen verursachen (z.B. "preflight-installed"). Diese sind meist harmlos und nicht die Ursache für Auth-Probleme.
 
+## Best Practices
+- **Component Size:** Keep components small and focused
+- **Reusability:** Extract common patterns into shared components
+- **Accessibility:** Use semantic HTML, ARIA labels, keyboard navigation
+- **Performance:** Use React.memo for expensive components, lazy loading
+- **Error Handling:** Show loading states, error messages, empty states
+
 ## Human-in-the-Loop Checkpoints
 - ✅ Nach Component-Erstellung → User reviewt UI
 - ✅ Bei Design-Unklarheiten → User klärt Styling
@@ -191,6 +241,7 @@ Browser-Extensions können Hydration-Warnungen verursachen (z.B. "preflight-inst
 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)