UI 스크린샷 분석 및 디자인 브리프 생성기

// Design Brief { "overview": "AuditFlow is a modern government audit dashboard designed for clarity, trust, and efficiency. The UI prioritizes data legibility, hierarchical information architecture, and a calm, professional aesthetic suitable for public sector use.", "layout": { "desktop": "A fixed left sidebar (280px) provides primary navigation. The main content area is divided into a top header bar (64px) with global actions and search, followed by a scrollable content region. The content region uses a 12-column grid with a maximum width of 1440px, centered with 24px gutters.", "tablet": "The sidebar collapses to a 72px icon-only rail. The content grid reduces to 8 columns. Key metric cards stack vertically, while charts remain full-width.", "mobile": "The sidebar becomes a hidden drawer, toggled via a hamburger icon in the header. The content grid becomes 4 columns. All cards stack, and tables transform into scrollable horizontal lists. The header simplifies to show only essential actions." }, "light_mode": { "background": "A soft, neutral gray (#F8FAFC) to reduce eye strain during long audit sessions.", "surface": "Pure white (#FFFFFF) for cards, modals, and the sidebar, creating clear contrast against the background.", "text": "Primary text is a deep slate (#0F172A) for high readability. Secondary text uses a muted gray (#64748B).", "borders": "Subtle, light gray (#E2E8F0) for card borders and dividers, maintaining a clean, airy feel." }, "dark_mode": { "background": "A very dark, desaturated blue (#0B1120) to minimize glare and blend with surrounding OS themes.", "surface": "A slightly lighter dark slate (#1E293B) for cards and the sidebar, providing depth without harsh contrast.", "text": "Primary text is a soft off-white (#E2E8F0). Secondary text uses a muted blue-gray (#94A3B8).", "borders": "A subtle, dark border (#334155) to define elements without visual noise." }, "typography": { "font_family": "A modern, geometric sans-serif (e.g., Inter, SF Pro Display) for all UI elements.", "scale": { "display": "48px / 1.1 / 700 (Used for page titles)", "h1": "30px / 1.2 / 600 (Used for section headers)", "h2": "20px / 1.3 / 600 (Used for card titles)", "body": "14px / 1.5 / 400 (Default text size)", "small": "12px / 1.4 / 400 (Used for metadata, timestamps)" } }, "components": { "sidebar": "Contains the app logo, primary navigation items (Dashboard, Audits, Reports, Findings, Settings), and a user profile section at the bottom. Active item is highlighted with a primary color background and a left border indicator.", "header": "Sticky top bar with a global search input, a notification bell with a badge, and a user avatar dropdown. In dark mode, the header background is slightly translucent with a backdrop blur.", "metric_cards": "A row of 4 cards displaying key performance indicators (e.g., Total Audits, Open Findings, Compliance Rate, Pending Reviews). Each card has a title, a large number, a trend indicator (up/down arrow with percentage), and a small icon in a colored circle.", "data_table": "A full-width table for listing audits. Columns: Audit ID, Title, Department, Status (Badge), Owner, Last Updated. Rows have a hover state. The table header is sticky. On mobile, this becomes a card-based list.", "charts": "A large area chart showing 'Audit Activity Over Time' with a gradient fill. A secondary donut chart shows 'Findings by Severity' (Critical, High, Medium, Low). Charts are responsive and scale with the container.", "status_badges": "Small, rounded-full pills with a colored background and text. Colors: Green (Completed), Blue (In Progress), Yellow (Pending), Red (Overdue)." }, "interactions": { "hover": "Buttons and interactive elements darken slightly. Cards lift with a subtle shadow. Table rows get a light gray background.", "focus": "A visible focus ring (2px, primary color) around interactive elements for keyboard navigation.", "transitions": "All interactive states use a 150ms ease-in-out transition for smoothness." } } ``` ```jsonc // JSONC Design Specification { // Tailwind CSS v4.3 Default Breakpoints breakpoints: { sm: "640px", md: "768px", lg: "1024px", xl: "1280px", "2xl": "1536px" }, // Core Palettes colors: { primary: { // Used for main CTAs, active states, links DEFAULT: "#2563EB", // blue-600 hover: "#1D4ED8", // blue-700 active: "#1E40AF", // blue-800 light: "#DBEAFE", // blue-100 (for backgrounds) dark: "#60A5FA", // blue-400 (for dark mode text/icons) }, secondary: { // Used for secondary actions, highlights DEFAULT: "#7C3AED", // violet-600 hover: "#6D28D9", // violet-700 active: "#5B21B6", // violet-800 light: "#EDE9FE", // violet-100 dark: "#A78BFA", // violet-400 }, // Grays (Neutral) gray: { 50: "#F8FAFC", 100: "#F1F5F9", 200: "#E2E8F0", 300: "#CBD5E1", 400: "#94A3B8", 500: "#64748B", 600: "#475569", 700: "#334155", 800: "#1E293B", 900: "#0F172A", 950: "#020617" }, // Accent Colors (for complex UI) success: { DEFAULT: "#10B981", // emerald-500 light: "#D1FAE5", dark: "#34D399" }, warning: { DEFAULT: "#F59E0B", // amber-500 light: "#FEF3C7", dark: "#FBBF24" }, danger: { DEFAULT: "#EF4444", // red-500 light: "#FEE2E2", dark: "#F87171" }, info: { DEFAULT: "#0EA5E9", // sky-500 light: "#E0F2FE", dark: "#38BDF8" } }, // Complex Media (Gradients, Shadows, SVGs) media: { chart_gradient: { light: "linear-gradient(180deg, rgba(37, 99, 235, 0.2) 0%, rgba(37, 99, 235, 0) 100%)", dark: "linear-gradient(180deg, rgba(96, 165, 250, 0.2) 0%, rgba(96, 165, 250, 0) 100%)" }, card_shadow: { light: "0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06)", dark: "0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2)" }, sidebar_active_indicator: { light: "4px solid #2563EB", dark: "4px solid #60A5FA" }, icon_backgrounds: { primary: "rgba(37, 99, 235, 0.1)", success: "rgba(16, 185, 129, 0.1)", warning: "rgba(245, 158, 11, 0.1)", danger: "rgba(239, 68, 68, 0.1)" }, header_backdrop: { light: "rgba(248, 250, 252, 0.8)", dark: "rgba(11, 17, 32, 0.8)" } }, // Token Rules token_rules: { spacing: "Use a 4px base unit. All margins, paddings, and gaps must be multiples of 4.", radius: "Use 8px for cards and buttons, 4px for inputs, 9999px for badges and pills.", typography: "Use the defined type scale. Line heights must be 1.5 for body text and 1.2 for headings.", shadows: "Use the defined card_shadow for elevated elements. Never use custom shadows.", transitions: "All interactive elements must transition with 150ms ease-in-out.", focus_rings: "Use a 2px ring in primary.DEFAULT (light mode) or primary.dark (dark mode) with a 2px offset.", dark_mode: "All colors must have a dark mode equivalent. Use the 'dark' variants defined in the palette.", responsive: "Follow the breakpoint system. Components must be designed mobile-first and enhanced for larger screens." } } ``` ```markdown # Implementation Prompt for Developer Implement the AuditFlow dashboard UI based on the provided design specification. The UI is a modern government audit application that must feel trustworthy, efficient, and accessible. **Core Requirements:** 1. **Layout Structure:** Create a responsive layout with a fixed sidebar on desktop, collapsing to an icon rail on tablet, and a hidden drawer on mobile. The main content area should have a sticky header and a scrollable content region. 2. **Theming:** Implement both light and dark modes. All components must switch seamlessly between the two themes using the defined color tokens. Use CSS custom properties for theming to allow easy runtime switching. 3. **Components to Build:** - **Sidebar:** Navigation with icons and labels. Active state must be clearly indicated. - **Header:** Global search, notification bell with a badge, and user profile dropdown. - **Metric Cards:** Display four key performance indicators with trend arrows and icons. - **Data Table:** A sortable, filterable table for audit records with status badges. - **Charts:** An area chart with a gradient fill and a donut chart for severity distribution. These must be interactive (tooltips on hover). - **Status Badges:** Small, colored pills for different audit states. 4. **Responsive Behavior:** Ensure the UI is fully functional and visually appealing at all breakpoints. Tables should become horizontal scroll areas on mobile. Cards should stack vertically. 5. **Accessibility:** All interactive elements must have visible focus states. Color contrast must meet WCAG AA standards. Use semantic HTML elements (e.g., `<nav>`, `<main>`, `<table>`). 6. **Token Usage:** Strictly adhere to the token rules defined in the specification. Use the provided color palettes, spacing units, radii, and typography scale. Do not introduce new colors or sizes outside of the defined tokens. 7. **Interactions:** Implement smooth hover and focus transitions. Cards should lift slightly on hover. Buttons should have clear pressed states. The final implementation should be a pixel-perfect representation of the design brief, prioritizing clarity, consistency, and a professional aesthetic suitable for government use.