Step2Job Cloud Agents ist ein Supervisor-Dashboard zur Überwachung und Qualitätssicherung von KI-Agenten. Das System analysiert Gespräche in Echtzeit und warnt Supervisoren bei kritischen Vorfällen.
| Persona | Rolle | Bedürfnisse |
|---|---|---|
| Supervisor Sarah | Team-Leiterin (5-10 Agenten) | Schneller Überblick, sofortige Alerts, Batch-Aktionen |
| Manager Michael | Abteilungsleiter | Reports, Trends, KPIs, Export-Funktionen |
| Admin Anna | System-Administratorin | Konfiguration, Benutzerverwaltung, Logs |
| Agent Alex | KI-Agent-Operator | Eigene Performance sehen, Feedback verstehen |
- Live-Dashboard - Echtzeit-Überwachung aller Agenten
- Alert-Center - Kritische Vorfälle sofort erkennen
- Agent-Details - Einzelne Agenten analysieren
- Reports - Historische Daten und Trends
- Konfiguration - Keywords und Schwellwerte anpassen
:root {
/* Brand Colors */
--primary-50: #EEF2FF;
--primary-100: #E0E7FF;
--primary-200: #C7D2FE;
--primary-300: #A5B4FC;
--primary-400: #818CF8;
--primary-500: #6366F1; /* Hauptfarbe */
--primary-600: #4F46E5;
--primary-700: #4338CA;
--primary-800: #3730A3;
--primary-900: #312E81;
}:root {
/* Risk Colors - Semantisch */
--risk-low: #10B981; /* Grün - Erfolg */
--risk-low-bg: #D1FAE5;
--risk-low-border: #6EE7B7;
--risk-medium: #F59E0B; /* Gelb/Orange - Warnung */
--risk-medium-bg: #FEF3C7;
--risk-medium-border: #FCD34D;
--risk-high: #F97316; /* Orange - Gefahr */
--risk-high-bg: #FFEDD5;
--risk-high-border: #FDBA74;
--risk-critical: #EF4444; /* Rot - Kritisch */
--risk-critical-bg: #FEE2E2;
--risk-critical-border: #FCA5A5;
}:root {
--gray-50: #F9FAFB;
--gray-100: #F3F4F6;
--gray-200: #E5E7EB;
--gray-300: #D1D5DB;
--gray-400: #9CA3AF;
--gray-500: #6B7280;
--gray-600: #4B5563;
--gray-700: #374151;
--gray-800: #1F2937;
--gray-900: #111827;
}:root {
/* Font Familie */
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;
/* Font Sizes */
--text-xs: 0.75rem; /* 12px */
--text-sm: 0.875rem; /* 14px */
--text-base: 1rem; /* 16px */
--text-lg: 1.125rem; /* 18px */
--text-xl: 1.25rem; /* 20px */
--text-2xl: 1.5rem; /* 24px */
--text-3xl: 1.875rem; /* 30px */
--text-4xl: 2.25rem; /* 36px */
/* Font Weights */
--font-normal: 400;
--font-medium: 500;
--font-semibold: 600;
--font-bold: 700;
/* Line Heights */
--leading-tight: 1.25;
--leading-normal: 1.5;
--leading-relaxed: 1.75;
}| Element | Größe | Gewicht | Verwendung |
|---|---|---|---|
| H1 | 36px | Bold | Seitentitel |
| H2 | 24px | Semibold | Sektionsüberschriften |
| H3 | 20px | Semibold | Card-Titel |
| H4 | 18px | Medium | Subsektionen |
| Body | 16px | Normal | Fließtext |
| Small | 14px | Normal | Sekundärtext |
| Caption | 12px | Normal | Labels, Timestamps |
:root {
/* Spacing Scale (8px Basis) */
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-5: 1.25rem; /* 20px */
--space-6: 1.5rem; /* 24px */
--space-8: 2rem; /* 32px */
--space-10: 2.5rem; /* 40px */
--space-12: 3rem; /* 48px */
--space-16: 4rem; /* 64px */
/* Border Radius */
--radius-sm: 0.25rem; /* 4px */
--radius-md: 0.375rem; /* 6px */
--radius-lg: 0.5rem; /* 8px */
--radius-xl: 0.75rem; /* 12px */
--radius-2xl: 1rem; /* 16px */
--radius-full: 9999px;
/* Shadows */
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
}Desktop (≥1280px): 12-Spalten Grid, 24px Gutter
Tablet (768-1279px): 8-Spalten Grid, 20px Gutter
Mobile (<768px): 4-Spalten Grid, 16px Gutter
Container Max-Width: 1440px
Sidebar-Breite: 256px (collapsed: 64px)
┌─────────────────┐
│ ● LOW │ Grün, gefüllter Kreis
└─────────────────┘
┌─────────────────┐
│ ▲ MEDIUM │ Gelb, Dreieck-Warnung
└─────────────────┘
┌─────────────────┐
│ ◆ HIGH │ Orange, Raute
└─────────────────┘
┌─────────────────┐
│ ✖ CRITICAL │ Rot, X-Symbol, pulsierend
└─────────────────┘
Spezifikation:
- Padding: 4px 12px
- Border-Radius: 9999px (Pill)
- Font: 12px, Semibold, Uppercase
- Icon links, 4px Abstand zum Text
┌──────────────────────────────────────────────────────┐
│ ┌────┐ │
│ │ 🤖 │ AGENT_001 ● Online │
│ └────┘ Max Mustermann │
│ │
│ ┌─────────────┬─────────────┬─────────────┐ │
│ │ Calls Today │ Avg. Risk │ Stop Rate │ │
│ │ 24 │ 0.8 │ 92% │ │
│ └─────────────┴─────────────┴─────────────┘ │
│ │
│ Risk Distribution: │
│ ████████████████░░░░ LOW (80%) │
│ ████░░░░░░░░░░░░░░░░ MEDIUM (15%) │
│ █░░░░░░░░░░░░░░░░░░░ HIGH (5%) │
│ │
│ [View Details] [Pause Agent] │
└──────────────────────────────────────────────────────┘
Spezifikation:
- Breite: 100% (Grid-responsive)
- Min-Breite: 320px
- Padding: 24px
- Background: White
- Border: 1px solid gray-200
- Border-Radius: 12px
- Shadow: shadow-md
- Hover: shadow-lg, border-primary-200
┌──────────────────────────────────────────────────────────────┐
│ ⚠️ CRITICAL vor 2 Min │
├──────────────────────────────────────────────────────────────┤
│ │
│ Agent AGENT_003 - Maria Weber │
│ │
│ Verstöße: │
│ • Price mentioned without fact │
│ • No STOP on legal question │
│ │
│ ┌────────────────────────────────────────────────────────┐ │
│ │ "Das kostet 500€ und ist gesetzlich völlig in │ │
│ │ Ordnung..." │ │
│ └────────────────────────────────────────────────────────┘ │
│ │
│ [Transcript ansehen] [Agent pausieren] [Als gelesen] │
└──────────────────────────────────────────────────────────────┘
Spezifikation:
- Border-Left: 4px solid (Risk-Farbe)
- Background: Risk-Farbe-bg (10% Opacity)
- Padding: 16px 20px
- Ungelesen: Font-weight bold, Indikator-Dot
┌─────────────────────────┐
│ ↗️ +12% │
│ │
│ 247 │
│ Calls Today │
│ │
│ ▁▂▃▄▅▆▇█▇▆▅▄▃▂▁ │
└─────────────────────────┘
Spezifikation:
- Min-Breite: 160px
- Padding: 20px
- Trend-Indikator: Grün (positiv), Rot (negativ)
- Sparkline: Optional, 32px Höhe
Primary: [████████████████] Gefüllt, Primary-600
Secondary: [────────────────] Outlined, Primary-600 Border
Ghost: [ Button Text ] Nur Text, Hover: gray-100 bg
Danger: [████████████████] Gefüllt, Red-600
Success: [████████████████] Gefüllt, Green-600
Größen:
- Small: 32px Höhe, 12px Font, 12px Padding
- Medium: 40px Höhe, 14px Font, 16px Padding
- Large: 48px Höhe, 16px Font, 20px Padding
Label
┌──────────────────────────────────┐
│ 🔍 Placeholder text... │
└──────────────────────────────────┘
Helper text oder Fehler
States:
- Default: gray-300 border
- Focus: primary-500 border, ring
- Error: red-500 border
- Disabled: gray-100 bg, gray-400 text
┌─────────────────────────────────────────────────────────────────┐
│ ☐ Agent ID │ Contact │ Time │ Risk │ Actions │
├─────────────────────────────────────────────────────────────────┤
│ ☐ AGENT_001 │ M. Mustermann│ 10:30:00 │ ● LOW │ [⋮] │
│ ☑ AGENT_002 │ A. Schmidt │ 10:32:15 │ ▲ MED │ [⋮] │
│ ☐ AGENT_003 │ T. Müller │ 10:35:42 │ ✖ CRIT │ [⋮] │
├─────────────────────────────────────────────────────────────────┤
│ Showing 1-10 of 247 │ [<] [1] [2] [3] ... [25] [>] │
└─────────────────────────────────────────────────────────────────┘
Spezifikation:
- Header: gray-50 bg, font-semibold
- Rows: Alternating gray-50/white (optional)
- Hover: primary-50 bg
- Selected: primary-100 bg
- Border: gray-200
- Sortierbare Spalten: Pfeil-Icon
┌──────────────────────────────────────────────────────────────────────┐
│ ┌────────┐ 🔔 3 👤 Sarah │
│ │ LOGO │ Step2Job Cloud Agents Notifications User │
├──────────┴───────────────────────────────────────────────────────────┤
│ │ │ │
│ │ 📊 │ ┌─────────────────────────────────────────────────────┐│
│ │ Dash │ │ ││
│ │ │ │ MAIN CONTENT AREA ││
│ │ 🤖 │ │ ││
│ │ Agents │ │ ││
│ │ │ │ ││
│ │ 🔔 │ │ ││
│ │ Alerts │ │ ││
│ │ │ │ ││
│ │ 📈 │ │ ││
│ │ Reports│ │ ││
│ │ │ │ ││
│ │ ⚙️ │ │ ││
│ │ Config │ └─────────────────────────────────────────────────────┘│
│ │ │ │
└──┴────────┴──────────────────────────────────────────────────────────┘
┌──────────────────────────────────────────────────────────────────────┐
│ Dashboard [Export] [Refresh 🔄] │
│ Last updated: 23.12.2025, 15:30:00 │
├──────────────────────────────────────────────────────────────────────┤
│ │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ │ Active │ │ Calls │ │ Avg Risk │ │ Alerts │ │
│ │ Agents │ │ Today │ │ Score │ │ Today │ │
│ │ 5 │ │ 247 │ │ 0.6 │ │ 3 │ │
│ │ ↗️ +2 │ │ ↗️ +12% │ │ ↘️ -0.2 │ │ ↗️ +1 │ │
│ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │
│ │
│ ┌─────────────────────────────┐ ┌────────────────────────────────┐ │
│ │ Risk Distribution │ │ Recent Alerts │ │
│ │ │ │ │ │
│ │ ████████████ LOW (75%) │ │ ⚠️ AGENT_003 - CRITICAL │ │
│ │ ████░░░░░░░░ MED (15%) │ │ Price without fact │ │
│ │ ██░░░░░░░░░░ HIGH (8%) │ │ 2 minutes ago │ │
│ │ █░░░░░░░░░░░ CRIT (2%) │ │ ───────────────────────────── │ │
│ │ │ │ ▲ AGENT_002 - MEDIUM │ │
│ │ [View Details] │ │ Timeline assumption │ │
│ └─────────────────────────────┘ │ 15 minutes ago │ │
│ │ ───────────────────────────── │ │
│ ┌─────────────────────────────┐ │ ● AGENT_001 - LOW │ │
│ │ Agents Overview │ │ Resolved │ │
│ │ │ │ 1 hour ago │ │
│ │ Agent Status Risk │ │ │ │
│ │ ───────────────────────── │ │ [View All Alerts →] │ │
│ │ AGENT_001 ● Online LOW │ └────────────────────────────────┘ │
│ │ AGENT_002 ● Online MED │ │
│ │ AGENT_003 ⚠ Review HIGH │ │
│ │ AGENT_004 ● Online LOW │ │
│ │ │ │
│ │ [View All Agents →] │ │
│ └─────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────────────┐ │
│ │ Performance Trend (Last 7 Days) │ │
│ │ │ │
│ │ 1.5 ┤ │ │
│ │ │ ╭─╮ │ │
│ │ 1.0 ┤ ╭───╯ ╰──╮ │ │
│ │ │ ╱ ╰───────────╮ │ │
│ │ 0.5 ┤──╯ ╰── │ │
│ │ │ │ │
│ │ 0.0 ┼─────────────────────────────────── │ │
│ │ Mo Di Mi Do Fr Sa So │ │
│ │ │ │
│ │ ── Avg Risk ── Critical Incidents ── Stop Rate │ │
│ └──────────────────────────────────────────────────────────────┘ │
│ │
└──────────────────────────────────────────────────────────────────────┘
┌──────────────────────────────────────────────────────────────────────┐
│ ← Back to Agents │
│ │
│ ┌────────────────────────────────────────────────────────────────┐ │
│ │ ┌──────┐ │ │
│ │ │ 🤖 │ AGENT_001 │ │
│ │ │ │ Supervisor: Sarah Schmidt │ │
│ │ └──────┘ Status: ● Online since 08:00 │ │
│ │ │ │
│ │ [Pause Agent] [View Logs] [Edit Config] [⋮ More] │ │
│ └────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐ │
│ │ Total Calls │ │ Average Risk │ │ Stop Rate │ │
│ │ 156 │ │ 0.4 │ │ 95% │ │
│ │ this week │ │ ● LOW │ │ excellent │ │
│ └─────────────────┘ └─────────────────┘ └─────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────────────┐ │
│ │ [Recent Calls] [Violations] [Statistics] [Settings] │ │
│ ├──────────────────────────────────────────────────────────────┤ │
│ │ │ │
│ │ Today's Calls │ │
│ │ ───────────────────────────────────────────────────────── │ │
│ │ │ │
│ │ 10:35:42 │ Thomas Müller │ ● LOW │ [View Transcript] │ │
│ │ 10:32:15 │ Anna Schmidt │ ▲ MED │ [View Transcript] │ │
│ │ 10:30:00 │ Max Mustermann │ ● LOW │ [View Transcript] │ │
│ │ 10:25:33 │ Lisa Braun │ ● LOW │ [View Transcript] │ │
│ │ 10:20:17 │ Peter Hoffmann │ ● LOW │ [View Transcript] │ │
│ │ │ │
│ │ [Load More...] │ │
│ │ │ │
│ └──────────────────────────────────────────────────────────────┘ │
│ │
└──────────────────────────────────────────────────────────────────────┘
┌──────────────────────────────────────────────────────────────────────┐
│ Alert Center [Mark All Read] [Settings ⚙️]│
│ │
│ ┌────────────────────────────────────────────────────────────────┐ │
│ │ 🔍 Search alerts... │ Risk: [All ▾] │ Date: [Today ▾] │ │
│ └────────────────────────────────────────────────────────────────┘ │
│ │
│ Unread (3) │
│ ───────────────────────────────────────────────────────────────── │
│ │
│ ┌────────────────────────────────────────────────────────────────┐ │
│ │ ⚠️ CRITICAL vor 2 Min │ │
│ │ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ │ │
│ │ AGENT_003 - Maria Weber │ │
│ │ │ │
│ │ • Price mentioned without fact reference │ │
│ │ • No STOP on legal question │ │
│ │ │ │
│ │ "Das kostet 500€ und ist gesetzlich völlig in Ordnung..." │ │
│ │ │ │
│ │ [View Full] [Pause Agent] [Dismiss] │ │
│ └────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌────────────────────────────────────────────────────────────────┐ │
│ │ ▲ MEDIUM vor 15 Min │ │
│ │ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ │ │
│ │ AGENT_002 - Anna Schmidt │ │
│ │ │ │
│ │ • Timeline assumption without PLACEHOLDER │ │
│ │ │ │
│ │ [View Full] [Dismiss] │ │
│ └────────────────────────────────────────────────────────────────┘ │
│ │
│ Read (47) │
│ ───────────────────────────────────────────────────────────────── │
│ │
│ [Show older alerts...] │
│ │
└──────────────────────────────────────────────────────────────────────┘
┌──────────────────────────────────────────────────────────────────────┐
│ Reports │
│ │
│ ┌────────────────────────────────────────────────────────────────┐ │
│ │ Period: [Last 7 Days ▾] │ Agents: [All ▾] │ [Generate Report]│ │
│ └────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌────────────────────────────────────────────────────────────────┐ │
│ │ Summary Statistics │ │
│ │ │ │
│ │ Total Calls Price Claims Legal Claims Stop Rate │ │
│ │ 1,247 89 34 94% │ │
│ │ ↗️ +15% ↘️ -8% ↘️ -12% ↗️ +3% │ │
│ └────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────┐ ┌────────────────────────────────┐ │
│ │ Risk Trend │ │ Top Issues │ │
│ │ │ │ │ │
│ │ ▲ │ │ 1. Price without fact (42%) │ │
│ │ │ ╭─╮ │ │ 2. Legal assumption (28%) │ │
│ │ │╭──╯ ╰╮ │ │ 3. No STOP trigger (18%) │ │
│ │ ╰╯ ╰────── │ │ 4. Timeline guess (12%) │ │
│ │ Mo Di Mi Do Fr Sa So │ │ │ │
│ └─────────────────────────────┘ └────────────────────────────────┘ │
│ │
│ ┌────────────────────────────────────────────────────────────────┐ │
│ │ Agent Performance Ranking │ │
│ │ │ │
│ │ Rank │ Agent │ Calls │ Avg Risk │ Stop Rate │ Trend │ │
│ │ ─────┼────────────┼───────┼──────────┼───────────┼────────── │ │
│ │ 1 │ AGENT_001 │ 156 │ 0.3 │ 98% │ ↗️ +5% │ │
│ │ 2 │ AGENT_004 │ 142 │ 0.4 │ 96% │ → 0% │ │
│ │ 3 │ AGENT_002 │ 138 │ 0.6 │ 92% │ ↘️ -3% │ │
│ │ 4 │ AGENT_003 │ 124 │ 1.2 │ 78% │ ↘️ -8% │ │
│ │ │ │
│ └────────────────────────────────────────────────────────────────┘ │
│ │
│ Export: [📄 PDF] [📊 Excel] [📋 CSV] [🖼️ PNG] │
│ │
└──────────────────────────────────────────────────────────────────────┘
WebSocket Events:
├── agent.status.changed → Agent-Card Status aktualisieren
├── alert.new → Toast + Badge-Counter + Alert-Liste
├── score.calculated → Dashboard-Statistiken aktualisieren
└── agent.paused → Agent-Card visuell markieren
Toast-Notification (Critical Alert):
┌────────────────────────────────────────┐
│ ⚠️ CRITICAL ALERT ✕ │
│ AGENT_003 needs immediate review │
│ [View Now] │
└────────────────────────────────────────┘
Position: Top-Right, Auto-dismiss: 10s (nicht bei Critical)
Skeleton Loading:
┌──────────────────────────────────────┐
│ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │
│ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │
│ ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ │
└──────────────────────────────────────┘
Spinner (Inline):
[⟳ Loading...]
Progress Bar (Batch-Operations):
████████████░░░░░░░░░ 60% - Processing 150 of 247 logs
┌──────────────────────────────────────┐
│ │
│ 📭 │
│ │
│ No alerts found │
│ │
│ Great job! All agents are │
│ performing within parameters. │
│ │
│ [View Agent Status] │
│ │
└──────────────────────────────────────┘
┌──────────────────────────────────────┐
│ ❌ Connection Lost │
│ │
│ Unable to connect to the server. │
│ Data may be outdated. │
│ │
│ [Retry] [Work Offline] │
│ │
│ Last updated: 5 minutes ago │
└──────────────────────────────────────┘
┌──────────────────────────────────────────────┐
│ ⚠️ Pause Agent? │
├──────────────────────────────────────────────┤
│ │
│ Are you sure you want to pause AGENT_003? │
│ │
│ This agent will stop processing new calls │
│ until manually resumed. │
│ │
│ Reason (optional): │
│ ┌────────────────────────────────────────┐ │
│ │ Performance review required │ │
│ └────────────────────────────────────────┘ │
│ │
│ [Cancel] [Pause Agent] │
│ │
└──────────────────────────────────────────────┘
/* Mobile First Approach */
--breakpoint-sm: 640px; /* Small tablets */
--breakpoint-md: 768px; /* Tablets */
--breakpoint-lg: 1024px; /* Small laptops */
--breakpoint-xl: 1280px; /* Desktops */
--breakpoint-2xl: 1536px; /* Large screens */┌────────────────────────┐
│ ☰ Step2Job 🔔 👤 │
├────────────────────────┤
│ │
│ ┌──────────────────┐ │
│ │ Active: 5 │ │
│ │ Alerts: 3 ⚠️ │ │
│ └──────────────────┘ │
│ │
│ Recent Alerts │
│ ──────────────────── │
│ ┌──────────────────┐ │
│ │ ⚠️ CRITICAL │ │
│ │ AGENT_003 │ │
│ │ [View →] │ │
│ └──────────────────┘ │
│ │
│ ┌──────────────────┐ │
│ │ ▲ MEDIUM │ │
│ │ AGENT_002 │ │
│ │ [View →] │ │
│ └──────────────────┘ │
│ │
├────────────────────────┤
│ 📊 🤖 🔔 📈 ⚙️ │
└────────────────────────┘
Mobile-Anpassungen:
- Bottom-Navigation statt Sidebar
- Vollbreite Cards (stacked)
- Swipe-Gesten für Tabs
- Collapsed Stats (expandable)
- Touch-optimierte Buttons (min 44x44px)
┌───────────────────────────────────────────┐
│ LOGO Step2Job Cloud Agents 🔔 👤 │
├────────┬──────────────────────────────────┤
│ │ │
│ 📊 │ ┌─────────┐ ┌─────────┐ │
│ │ │ Active │ │ Alerts │ │
│ 🤖 │ │ 5 │ │ 3 │ │
│ │ └─────────┘ └─────────┘ │
│ 🔔 │ │
│ │ ┌────────────────────────────┐ │
│ 📈 │ │ Recent Alerts │ │
│ │ │ ... │ │
│ ⚙️ │ └────────────────────────────┘ │
│ │ │
└────────┴──────────────────────────────────┘
- Alle Text/Hintergrund-Kombinationen: min. 4.5:1 (WCAG AA)
- Risk-Level nicht nur durch Farbe, auch durch Icons/Text
Tab-Reihenfolge:
1. Skip to main content Link
2. Navigation Items
3. Main Content (logische Reihenfolge)
4. Footer Actions
Shortcuts:
- `?` → Keyboard shortcuts anzeigen
- `g d` → Go to Dashboard
- `g a` → Go to Agents
- `g l` → Go to Alerts
- `j/k` → Nächster/Vorheriger Item in Liste
- `Enter` → Item öffnen
- `Esc` → Modal/Dropdown schließen
<!-- Risk Badge -->
<span class="badge risk-critical" role="status" aria-label="Risk level: Critical">
<span aria-hidden="true">✖</span>
CRITICAL
</span>
<!-- Alert Count -->
<button aria-label="3 unread alerts">
<span class="notification-badge">3</span>
🔔
</button>
<!-- Live Region für Updates -->
<div aria-live="polite" aria-atomic="true" class="sr-only">
New critical alert: Agent 003 requires review
</div>:focus-visible {
outline: 2px solid var(--primary-500);
outline-offset: 2px;
}
/* High contrast mode support */
@media (prefers-contrast: high) {
:focus-visible {
outline: 3px solid currentColor;
}
}:root {
--ease-out: cubic-bezier(0, 0, 0.2, 1);
--ease-in: cubic-bezier(0.4, 0, 1, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
--duration-fast: 150ms;
--duration-normal: 200ms;
--duration-slow: 300ms;
}/* Buttons, Links */
.interactive {
transition: all var(--duration-fast) var(--ease-out);
}
/* Cards, Panels */
.card {
transition: box-shadow var(--duration-normal) var(--ease-out),
transform var(--duration-normal) var(--ease-out);
}
/* Modals, Dropdowns */
.overlay {
transition: opacity var(--duration-normal) var(--ease-out);
}/* Critical Alert Pulse */
@keyframes pulse-critical {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.alert-critical {
animation: pulse-critical 2s ease-in-out infinite;
}
/* New Item Slide-In */
@keyframes slide-in {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.new-item {
animation: slide-in var(--duration-normal) var(--ease-out);
}
/* Skeleton Loading Shimmer */
@keyframes shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
.skeleton {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
}[data-theme="dark"] {
--bg-primary: #0F172A;
--bg-secondary: #1E293B;
--bg-tertiary: #334155;
--text-primary: #F8FAFC;
--text-secondary: #CBD5E1;
--text-muted: #64748B;
--border-color: #334155;
/* Risk colors bleiben gleich, aber mit angepasster Opacity */
--risk-low-bg: rgba(16, 185, 129, 0.15);
--risk-medium-bg: rgba(245, 158, 11, 0.15);
--risk-high-bg: rgba(249, 115, 22, 0.15);
--risk-critical-bg: rgba(239, 68, 68, 0.15);
}@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
/* Dark mode variables */
}
}| Funktion | Icon | Code |
|---|---|---|
| Dashboard | LayoutDashboard | <LayoutDashboard /> |
| Agents | Bot | <Bot /> |
| Alerts | Bell | <Bell /> |
| Reports | BarChart3 | <BarChart3 /> |
| Settings | Settings | <Settings /> |
| Risk LOW | CheckCircle | <CheckCircle /> |
| Risk MEDIUM | AlertTriangle | <AlertTriangle /> |
| Risk HIGH | AlertOctagon | <AlertOctagon /> |
| Risk CRITICAL | XCircle | <XCircle /> |
| Refresh | RefreshCw | <RefreshCw /> |
| Export | Download | <Download /> |
| Filter | Filter | <Filter /> |
| Search | Search | <Search /> |
| User | User | <User /> |
| Menu | Menu | <Menu /> |
| Close | X | <X /> |
| Expand | ChevronDown | <ChevronDown /> |
| External | ExternalLink | <ExternalLink /> |
- Design System in Figma/Sketch erstellen
- Farbpalette definieren und testen
- Typografie-Scale implementieren
- Grid-System aufsetzen
- Icon-Set auswählen und integrieren
- Button-Varianten
- Input-Felder
- Risk-Level Badges
- Agent-Cards
- Alert-Items
- Stat-Cards
- Data Tables
- Modals/Dialogs
- Toast Notifications
- Loading States
- Empty States
- Haupt-Layout mit Sidebar
- Dashboard-Seite
- Agent-Liste
- Agent-Detail
- Alert-Center
- Reports-Seite
- Settings-Seite
- Hover/Focus States
- Transitions/Animations
- Keyboard Navigation
- Touch-Gesten (Mobile)
- Real-time Updates (WebSocket)
- Dark Mode
- Responsive Testing
- Accessibility Audit
- Performance Optimization
- Browser Testing
/design
├── /figma
│ ├── step2job-design-system.fig
│ ├── step2job-components.fig
│ └── step2job-screens.fig
├── /exports
│ ├── /icons (SVG)
│ ├── /images (PNG, WebP)
│ └── /logos (SVG, PNG)
├── /tokens
│ └── design-tokens.json
└── /docs
└── component-specs.pdf
Für Developer-Handoff empfohlen:
- Figma mit Dev Mode aktiviert
- Design Tokens als JSON für CSS-Variables
- Storybook für Komponenten-Dokumentation
Dokument-Version: 1.0 Erstellt: 23.12.2025 Autor: Design Agent Status: Draft - Zur Review