Análisis de Captura de Pantalla de UI y Generador de Brief de Diseño

{ // Design Brief "overview": "AuditFlow is a modern government audit dashboard designed for clarity, compliance, and efficiency. The UI prioritizes data legibility, hierarchical information architecture, and a professional yet approachable aesthetic. It must function seamlessly in both light and dark modes, with responsive layouts that adapt from mobile to widescreen desktop.", "layout": { "desktop": "A persistent left sidebar (collapsible) for navigation, a top header bar with global actions and user context, and a main content area with a grid of audit cards, a summary statistics row, and a detailed data table.", "tablet": "Sidebar collapses to an icon-only rail. Cards and statistics wrap into a 2-column grid. Data table becomes horizontally scrollable with sticky first column.", "mobile": "Sidebar becomes a slide-in drawer. Header simplifies to a hamburger menu, app title, and primary action. Cards stack vertically. Statistics display as a horizontal scrollable carousel. Data table is replaced by a card-based list view." }, "components": { "navigation": "Sidebar with grouped links (Overview, Audits, Findings, Reports, Settings). Active state indicated by a left border accent and subtle background tint. Icons are outlined and fill on hover/active.", "header": "Sticky top bar with search input (expandable on mobile), notification bell with unread badge, and user avatar dropdown. Background is semi-transparent with backdrop blur.", "statistics": "Four key metric cards (Total Audits, In Progress, Completed, Critical Findings) with large numbers, trend indicators (up/down arrows), and a mini sparkline SVG.", "auditCards": "Cards displaying audit name, department, status badge (e.g., 'In Review', 'Passed', 'Failed'), progress bar, assigned auditor avatar, and due date. Hover state lifts card with shadow.", "dataTable": "Sortable columns for Audit ID, Title, Department, Status, Risk Level, and Last Updated. Row hover highlights. Risk level uses colored pills (Low=green, Medium=amber, High=red).", "modals": "Used for creating new audits or viewing detailed findings. Includes form fields, validation messages, and a footer with cancel/confirm actions." }, "interactions": { "hover": "Subtle background changes, icon fills, and shadow elevation on interactive elements.", "focus": "Visible focus ring (2px offset) using the primary accent color for keyboard navigation.", "loading": "Skeleton screens for initial load, with a thin indeterminate progress bar at the top for subsequent data fetches.", "emptyState": "Illustrated empty state with a call-to-action button for no audits or no findings." }, "accessibility": { "contrast": "All text meets WCAG AA contrast ratios in both modes. Accent colors are used sparingly for interactive elements and status indicators.", "typography": "Minimum 14px for body text, 16px for inputs. Line height 1.5 for readability. Font stack: system-ui, sans-serif.", "motion": "Respects prefers-reduced-motion. Transitions are 150-200ms ease-out." } } ``` ```jsonc { // JSONC Design Specification "brand": "AuditFlow", "type": "government audit dashboard", "modes": ["light", "dark"], "breakpoints": { "sm": "640px", "md": "768px", "lg": "1024px", "xl": "1280px", "2xl": "1536px" }, "palettes": { "primary": { "light": { "50": "#eef2ff", "100": "#e0e7ff", "200": "#c7d2fe", "300": "#a5b4fc", "400": "#818cf8", "500": "#6366f1", // main "600": "#4f46e5", "700": "#4338ca", "800": "#3730a3", "900": "#312e81" }, "dark": { "50": "#eef2ff", "100": "#e0e7ff", "200": "#c7d2fe", "300": "#a5b4fc", "400": "#818cf8", "500": "#6366f1", // main "600": "#4f46e5", "700": "#4338ca", "800": "#3730a3", "900": "#312e81" } }, "secondary": { "light": { "50": "#f0fdfa", "100": "#ccfbf1", "200": "#99f6e4", "300": "#5eead4", "400": "#2dd4bf", "500": "#14b8a6", // main "600": "#0d9488", "700": "#0f766e", "800": "#115e59", "900": "#134e4a" }, "dark": { "50": "#f0fdfa", "100": "#ccfbf1", "200": "#99f6e4", "300": "#5eead4", "400": "#2dd4bf", "500": "#14b8a6", // main "600": "#0d9488", "700": "#0f766e", "800": "#115e59", "900": "#134e4a" } }, "grays": { "light": { "50": "#f9fafb", "100": "#f3f4f6", "200": "#e5e7eb", "300": "#d1d5db", "400": "#9ca3af", "500": "#6b7280", "600": "#4b5563", "700": "#374151", "800": "#1f2937", "900": "#111827" }, "dark": { "50": "#f9fafb", "100": "#f3f4f6", "200": "#e5e7eb", "300": "#d1d5db", "400": "#9ca3af", "500": "#6b7280", "600": "#4b5563", "700": "#374151", "800": "#1f2937", "900": "#111827" } }, "accents": { "success": { "light": "#10b981", "dark": "#34d399" }, "warning": { "light": "#f59e0b", "dark": "#fbbf24" }, "danger": { "light": "#ef4444", "dark": "#f87171" }, "info": { "light": "#3b82f6", "dark": "#60a5fa" } } }, "complexMedia": { "gradients": { "headerOverlay": "linear-gradient(135deg, rgba(99,102,241,0.1) 0%, rgba(20,184,166,0.1) 100%)", "statCardHover": "linear-gradient(135deg, rgba(99,102,241,0.05) 0%, rgba(20,184,166,0.05) 100%)" }, "shadows": { "card": "0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06)", "cardHover": "0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06)", "modal": "0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04)" }, "svg": { "sparklineStroke": "#6366f1", "sparklineFill": "rgba(99,102,241,0.1)", "emptyStateIllustration": { "primary": "#6366f1", "secondary": "#14b8a6", "gray": "#9ca3af" } } }, "typography": { "fontFamily": "system-ui, -apple-system, sans-serif", "sizes": { "xs": "12px", "sm": "14px", "base": "16px", "lg": "18px", "xl": "20px", "2xl": "24px", "3xl": "30px", "4xl": "36px" }, "weights": { "normal": "400", "medium": "500", "semibold": "600", "bold": "700" } }, "spacing": { "unit": "4px", "scale": ["0", "4px", "8px", "12px", "16px", "20px", "24px", "32px", "40px", "48px", "64px"] }, "borderRadius": { "sm": "4px", "md": "6px", "lg": "8px", "xl": "12px", "full": "9999px" }, "transitions": { "duration": "150ms", "timing": "ease-out" } } ``` ```markdown # Implementation Prompt Build a responsive government audit dashboard called AuditFlow. The UI must be professional, data-dense, and accessible. **Core Layout:** - Desktop: Left sidebar (collapsible) with grouped navigation, top header with search/notifications/user, main area with statistics row, audit cards grid, and a sortable data table. - Tablet: Sidebar collapses to icon rail. Cards and stats use 2-column grid. Table scrolls horizontally. - Mobile: Sidebar becomes slide-in drawer. Header shows hamburger, title, primary action. Cards stack. Stats scroll horizontally. Table becomes card list. **Design Tokens:** - Use exactly two color palettes (primary indigo, secondary teal) with 10 shades each (50-900). Define grays (50-900) and accent colors (success, warning, danger, info) for statuses. - Light and dark modes must both be supported. All colors must meet WCAG AA contrast. - Typography: system-ui stack, minimum 14px body, 16px inputs. Use 4px spacing scale. Border radius: 4/6/8/12px. Transitions: 150ms ease-out. **Components:** - Statistics cards: large number, trend arrow, mini SVG sparkline. - Audit cards: title, department, status badge (colored pill), progress bar, avatar, due date. Hover lifts with shadow. - Data table: sortable headers, row hover highlight, risk level pills (green/amber/red). - Modals for create/edit with validation. Skeleton screens for loading. Illustrated empty state. **Interactions:** - Hover: subtle bg change, icon fill, shadow elevation. - Focus: visible 2px offset ring in primary color. - Respect prefers-reduced-motion. **Token Rules:** - Only use primary/secondary palettes for interactive elements and brand accents. Use grays for all neutral surfaces, text, and borders. Use accent colors exclusively for status indicators and data visualization. Gradients and shadows are defined in the spec for specific components only.