UI-Screenshot-Analyse und Design-Brief-Generator

{ // Design Brief "brief": "AuditFlow is a modern government audit dashboard. The UI is clean, data-dense, and professional, with a focus on clarity and compliance. It features a left sidebar for navigation, a top header with search and user actions, and a main content area with KPI cards, a chart, and a recent activity table. The design uses a restrained color palette with a primary blue for actions and a secondary teal for highlights, supported by neutral grays for backgrounds and borders. Light mode uses white and light gray surfaces, while dark mode uses deep slate grays. The layout is responsive, collapsing the sidebar into a drawer on smaller screens and stacking cards vertically. Typography is a modern sans-serif (e.g., Inter) with clear hierarchy. Shadows are subtle, and rounded corners are used for cards and buttons. The overall tone is trustworthy and efficient, avoiding decorative elements in favor of functional clarity.", "responsive_breakpoints": { "sm": "640px", "md": "768px", "lg": "1024px", "xl": "1280px", "2xl": "1536px" }, "light_mode": { "background": "#F8FAFC", "surface": "#FFFFFF", "text_primary": "#0F172A", "text_secondary": "#475569", "border": "#E2E8F0" }, "dark_mode": { "background": "#0F172A", "surface": "#1E293B", "text_primary": "#F1F5F9", "text_secondary": "#94A3B8", "border": "#334155" } } ``` ```markdown # UI Implementation Brief Build a responsive dashboard for a government audit application. The layout consists of: - **Sidebar** (collapsible on mobile): Contains logo, navigation links (Overview, Audits, Findings, Reports, Settings), and a user profile at the bottom. Active link is highlighted with a primary color background and left border indicator. - **Header**: Sticky top bar with a hamburger menu (mobile only), search input with icon, notification bell with badge, and user avatar dropdown. - **Main content area**: - **KPI row**: 4 cards showing key metrics (Total Audits, Open Findings, Compliance Rate, Pending Reviews). Each card has a title, large number, trend indicator (up/down arrow with percentage), and a small icon in a colored circle. - **Chart section**: A line/area chart showing audit completion over time, with a legend and time range filter (7D, 30D, 90D). The chart uses a gradient fill from primary to transparent. - **Recent activity table**: Columns for Audit ID, Department, Status (badge with color coding: green for complete, yellow for in progress, red for overdue), Last Updated, and an action menu (three dots). **Design tokens:** - Use a primary palette (blue) for interactive elements, links, and active states. - Use a secondary palette (teal) for highlights, success indicators, and secondary actions. - Define neutral grays for backgrounds, borders, and text hierarchy. - Accent colors: Use a red for errors/overdue, yellow for warnings, and green for success. These should only appear in badges, icons, or small indicators. - Shadows: Subtle, with low opacity, for cards and dropdowns. - Border radius: 8px for cards, 6px for buttons/inputs, 4px for small elements. - Spacing: Use a 4px base unit, with consistent padding (16px for cards, 12px for buttons, 8px for table cells). **Responsive behavior:** - Below 768px: Sidebar becomes a hidden drawer (toggle with hamburger), KPI cards stack vertically (1 column), chart and table stack. - Between 768px and 1024px: KPI cards show 2 columns, sidebar is collapsed to icons only. - Above 1024px: Full layout with sidebar visible, KPI cards in 4 columns. **Dark mode:** - Swap background and surface colors to dark slate tones. - Adjust text colors to light grays. - Reduce shadow opacity and use lighter borders. - Ensure all accent colors maintain sufficient contrast. **Accessibility:** - Maintain a contrast ratio of at least 4.5:1 for text. - Focus states should be visible (e.g., outline with primary color). - All interactive elements must be keyboard navigable. **Implementation notes:** - Use semantic HTML (aside, header, main, table, etc.). - Icons should be SVG, stroke-based, and inherit currentColor. - The chart should be responsive and use SVG or canvas with proper scaling. - The table should have horizontal scroll on small screens. - All strings should be in English, with no hardcoded dates (use relative time like "2h ago").