Dashboard UI Design - AiPro Institute\u2122 Prompt Library<\/title>\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n background: #ffffff;\n padding: 2rem;\n line-height: 1.6;\n }\n\n .container {\n max-width: 900px;\n margin: 0 auto;\n }\n\n .header {\n text-align: center;\n margin-bottom: 2rem;\n padding: 2rem;\n background: linear-gradient(135deg, #7c3aed 0%, #3b82f6 100%);\n border-radius: 16px;\n color: white;\n }\n\n .header h1 {\n font-size: 2.5rem;\n margin-bottom: 0.5rem;\n }\n\n .header p {\n font-size: 1.1rem;\n opacity: 0.95;\n }\n\n .card {\n background: white;\n border-radius: 16px;\n box-shadow: 0 20px 60px rgba(0,0,0,0.3);\n overflow: hidden;\n margin-bottom: 2rem;\n }\n\n .card-header {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white;\n padding: 2rem;\n position: relative;\n }\n\n .card-header h2 {\n font-size: 2rem;\n margin-bottom: 0.5rem;\n }\n\n .card-header p {\n font-size: 1.1rem;\n opacity: 0.95;\n margin-bottom: 1.5rem;\n }\n\n .meta-badges {\n display: flex;\n flex-wrap: wrap;\n gap: 0.75rem;\n margin-bottom: 1.5rem;\n }\n\n .badge {\n padding: 0.5rem 1rem;\n border-radius: 20px;\n font-size: 0.85rem;\n font-weight: 600;\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n }\n\n .badge-skill-advanced {\n background: #ef4444;\n color: white;\n }\n\n .badge-time {\n background: #10b981;\n color: white;\n }\n\n .badge-cost {\n background: #f59e0b;\n color: white;\n }\n\n .badge-format {\n background: #8b5cf6;\n color: white;\n }\n\n .tool-compatibility {\n margin-top: 1rem;\n padding-top: 1rem;\n border-top: 1px solid rgba(255,255,255,0.2);\n }\n\n .tool-compatibility h3 {\n font-size: 0.9rem;\n margin-bottom: 0.5rem;\n opacity: 0.9;\n }\n\n .tool-badges {\n display: flex;\n gap: 0.5rem;\n flex-wrap: wrap;\n }\n\n .tool-badge {\n padding: 0.35rem 0.75rem;\n background: rgba(255,255,255,0.2);\n border: 1px solid rgba(255,255,255,0.3);\n border-radius: 15px;\n font-size: 0.8rem;\n color: white;\n }\n\n .tool-badge.model-agnostic {\n background: rgba(255,255,255,0.3);\n font-weight: 600;\n }\n\n .card-body {\n padding: 2rem;\n }\n\n .section {\n margin-bottom: 2.5rem;\n }\n\n .section h3 {\n color: #7c3aed;\n font-size: 1.5rem;\n margin-bottom: 1rem;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n }\n\n .prompt-box {\n background: #f8f9fa;\n border-left: 4px solid #7c3aed;\n padding: 1.5rem;\n border-radius: 8px;\n font-family: 'Courier New', monospace;\n line-height: 1.8;\n position: relative;\n }\n\n .copy-btn {\n position: absolute;\n top: 1rem;\n right: 1rem;\n padding: 0.5rem 1rem;\n background: #7c3aed;\n color: white;\n border: none;\n border-radius: 6px;\n cursor: pointer;\n font-size: 0.85rem;\n transition: background 0.3s;\n }\n\n .copy-btn:hover {\n background: #6d28d9;\n }\n\n .placeholder {\n color: #f59e0b;\n font-weight: 600;\n }\n\n .logic-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 1rem;\n margin-top: 1rem;\n }\n\n .logic-item {\n background: #f0f4ff;\n padding: 1.25rem;\n border-radius: 8px;\n border-left: 3px solid #7c3aed;\n }\n\n .logic-item h4 {\n color: #7c3aed;\n margin-bottom: 0.5rem;\n font-size: 1rem;\n }\n\n .logic-item p {\n font-size: 0.9rem;\n color: #4b5563;\n }\n\n .preview-grid {\n display: grid;\n gap: 1.5rem;\n margin-top: 1rem;\n }\n\n .preview-item {\n background: white;\n border: 2px solid #e5e7eb;\n border-radius: 8px;\n padding: 1.5rem;\n }\n\n .preview-item h4 {\n color: #3b82f6;\n margin-bottom: 0.75rem;\n font-size: 1.1rem;\n }\n\n .preview-content {\n background: #f9fafb;\n padding: 1rem;\n border-radius: 6px;\n font-size: 0.9rem;\n line-height: 1.6;\n border-left: 3px solid #3b82f6;\n }\n\n .chain-steps {\n display: grid;\n gap: 1.5rem;\n margin-top: 1rem;\n }\n\n .chain-step {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white;\n padding: 1.5rem;\n border-radius: 8px;\n position: relative;\n padding-left: 4rem;\n }\n\n .chain-step::before {\n content: attr(data-step);\n position: absolute;\n left: 1rem;\n top: 50%;\n transform: translateY(-50%);\n font-size: 2rem;\n font-weight: bold;\n opacity: 0.5;\n }\n\n .chain-step h4 {\n margin-bottom: 0.5rem;\n font-size: 1.1rem;\n }\n\n .chain-step p {\n opacity: 0.95;\n font-size: 0.95rem;\n }\n\n .tips-list {\n display: grid;\n gap: 1rem;\n margin-top: 1rem;\n }\n\n .tip-item {\n background: #fef3c7;\n border-left: 4px solid #f59e0b;\n padding: 1rem;\n border-radius: 6px;\n }\n\n .tip-item strong {\n color: #d97706;\n display: block;\n margin-bottom: 0.25rem;\n }\n\n .stats-footer {\n background: #f9fafb;\n padding: 1.5rem;\n border-radius: 8px;\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n gap: 1rem;\n text-align: center;\n margin-top: 2rem;\n }\n\n .stat {\n padding: 0.75rem;\n }\n\n .stat-value {\n font-size: 1.5rem;\n font-weight: bold;\n color: #7c3aed;\n }\n\n .stat-label {\n font-size: 0.85rem;\n color: #6b7280;\n margin-top: 0.25rem;\n }\n\n .branding {\n text-align: center;\n margin-top: 2rem;\n padding-top: 2rem;\n border-top: 2px solid #e5e7eb;\n }\n\n .branding h4 {\n color: #7c3aed;\n font-size: 1.1rem;\n margin-bottom: 0.5rem;\n }\n\n .branding p {\n color: #6b7280;\n font-size: 0.9rem;\n }\n\n @media (max-width: 768px) {\n body {\n padding: 1rem;\n }\n\n .header h1 {\n font-size: 1.75rem;\n }\n\n .card-header h2 {\n font-size: 1.5rem;\n }\n\n .logic-grid {\n grid-template-columns: 1fr;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <div class=\"header\">\n <h1>\ud83c\udfa8 AiPro Institute\u2122 Prompt Library<\/h1>\n <p>Digital UI\/UX & Web Design<\/p>\n <\/div>\n\n <div class=\"card\">\n <div class=\"card-header\">\n <h2>\ud83d\udcca Dashboard UI Design<\/h2>\n <p>Data-Driven Interface for Analytics, KPIs & Business Intelligence<\/p>\n \n <div class=\"meta-badges\">\n <span class=\"badge badge-skill-advanced\">\ud83d\udcca Skill: Advanced<\/span>\n <span class=\"badge badge-time\">\u23f1\ufe0f Time: 40\u201360 min<\/span>\n <span class=\"badge badge-cost\">\ud83d\udcb3 Credit: High<\/span>\n <span class=\"badge badge-format\">\ud83d\udcc1 Format: Figma \/ Sketch \/ HTML\/CSS<\/span>\n <\/div>\n\n <div class=\"tool-compatibility\">\n <h3>\ud83d\udee0\ufe0f Tool Compatibility<\/h3>\n <div class=\"tool-badges\">\n <span class=\"tool-badge model-agnostic\">Model-agnostic<\/span>\n <span class=\"tool-badge\">GPT-4o<\/span>\n <span class=\"tool-badge\">Claude 3.5<\/span>\n <span class=\"tool-badge\">Gemini 2.5<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"card-body\">\n <section class=\"section\">\n <h3>\ud83d\udcdd The Prompt<\/h3>\n <div class=\"prompt-box\">\n <button class=\"copy-btn\" onclick=\"copyPrompt()\">\ud83d\udccb Copy Prompt<\/button>\n <p><strong>Design a comprehensive dashboard UI for:<\/strong><\/p>\n <br>\n <p><strong>\ud83c\udfaf Dashboard Purpose & Context:<\/strong><\/p>\n <p>\u2022 Dashboard Type: <span class=\"placeholder\">[Analytics Dashboard \/ Sales Dashboard \/ Marketing Dashboard \/ Finance Dashboard \/ Operations Dashboard \/ CRM Dashboard \/ E-commerce Admin \/ Project Management \/ Healthcare Analytics \/ Executive Overview]<\/span><\/p>\n <p>\u2022 Primary Use Case: <span class=\"placeholder\">[Real-time monitoring \/ Historical analysis \/ Predictive insights \/ Team collaboration \/ Executive reporting]<\/span><\/p>\n <p>\u2022 User Persona: <span class=\"placeholder\">[C-level executive \/ Data analyst \/ Marketing manager \/ Sales team \/ Operations staff \/ External client]<\/span><\/p>\n <p>\u2022 Key Goals: <span class=\"placeholder\">[Quick decision-making \/ Identify trends \/ Track performance \/ Spot anomalies \/ Generate reports]<\/span><\/p>\n <br>\n <p><strong>\ud83d\udcc8 Key Performance Indicators (KPIs):<\/strong><\/p>\n <p>\u2022 Primary Metrics (3\u20135): <span class=\"placeholder\">[e.g., Revenue, Conversion Rate, Customer Acquisition Cost, Churn Rate, NPS]<\/span><\/p>\n <p>\u2022 Secondary Metrics (5\u201310): <span class=\"placeholder\">[Supporting KPIs that provide context to primary metrics]<\/span><\/p>\n <p>\u2022 Metric Display Style: <span class=\"placeholder\">[Number with % change \/ Sparkline chart \/ Gauge \/ Progress bar \/ Comparison vs. target]<\/span><\/p>\n <p>\u2022 Time Period: <span class=\"placeholder\">[Real-time \/ Last 7 days \/ Last 30 days \/ Quarter \/ Year \/ Custom date range]<\/span><\/p>\n <p>\u2022 Comparison Logic: <span class=\"placeholder\">[vs. previous period \/ vs. same period last year \/ vs. target \/ trend direction (up\/down arrows)]<\/span><\/p>\n <br>\n <p><strong>\ud83d\udcca Data Visualization Components:<\/strong><\/p>\n <p><strong>1. Charts & Graphs<\/strong><\/p>\n <p>\u2022 Line Charts: <span class=\"placeholder\">[Time-series trends \u2014 revenue over time, traffic growth, etc.]<\/span><\/p>\n <p>\u2022 Bar Charts: <span class=\"placeholder\">[Category comparisons \u2014 sales by region, product performance]<\/span><\/p>\n <p>\u2022 Pie\/Donut Charts: <span class=\"placeholder\">[Composition breakdown \u2014 market share, traffic sources]<\/span><\/p>\n <p>\u2022 Area Charts: <span class=\"placeholder\">[Volume over time with filled regions \u2014 cumulative metrics]<\/span><\/p>\n <p>\u2022 Heatmaps: <span class=\"placeholder\">[Activity patterns \u2014 user behavior by hour\/day, geographic intensity]<\/span><\/p>\n <p>\u2022 Scatter Plots: <span class=\"placeholder\">[Correlation analysis \u2014 customer lifetime value vs. acquisition cost]<\/span><\/p>\n <p>\u2022 Funnel Charts: <span class=\"placeholder\">[Conversion funnels \u2014 signup to paid customer journey]<\/span><\/p>\n <br>\n <p><strong>2. Data Tables<\/strong><\/p>\n <p>\u2022 Table Purpose: <span class=\"placeholder\">[Top performers list \/ Recent transactions \/ User activity log \/ Detailed breakdown]<\/span><\/p>\n <p>\u2022 Columns (5\u20138): <span class=\"placeholder\">[Name, Metric 1, Metric 2, Status, Action buttons]<\/span><\/p>\n <p>\u2022 Table Features: <span class=\"placeholder\">[Sortable columns \/ Search\/filter \/ Pagination \/ Inline editing \/ Export to CSV\/Excel]<\/span><\/p>\n <p>\u2022 Row Actions: <span class=\"placeholder\">[View details \/ Edit \/ Delete \/ Quick actions dropdown]<\/span><\/p>\n <br>\n <p><strong>3. Stat Cards \/ KPI Widgets<\/strong><\/p>\n <p>\u2022 Card Count: <span class=\"placeholder\">[4\u20138 stat cards in top row]<\/span><\/p>\n <p>\u2022 Card Content: <span class=\"placeholder\">[Large metric number \/ Label \/ % change indicator \/ Mini sparkline \/ Trend arrow (up\/down)]<\/span><\/p>\n <p>\u2022 Card Layout: <span class=\"placeholder\">[Horizontal grid \/ 2\u00d72 grid \/ 4\u00d71 row \/ Flexible responsive]<\/span><\/p>\n <br>\n <p><strong>\ud83c\udfa8 Visual Design System:<\/strong><\/p>\n <p><strong>1. Color Palette<\/strong><\/p>\n <p>\u2022 Primary Brand Color: <span class=\"placeholder\">[HEX code \u2014 used for CTAs, highlights]<\/span><\/p>\n <p>\u2022 Secondary Colors: <span class=\"placeholder\">[HEX codes for chart series, categories]<\/span><\/p>\n <p>\u2022 Status Colors: <span class=\"placeholder\">[Success: #10b981 Green \/ Warning: #f59e0b Orange \/ Danger: #ef4444 Red \/ Info: #3b82f6 Blue]<\/span><\/p>\n <p>\u2022 Background Colors: <span class=\"placeholder\">[Page background: #f9fafb Light Gray \/ Card background: #ffffff White \/ Dark mode option: Yes\/No]<\/span><\/p>\n <p>\u2022 Data Visualization Palette: <span class=\"placeholder\">[5\u20137 distinct colors for chart series \u2014 colorblind-safe]<\/span><\/p>\n <br>\n <p><strong>2. Typography<\/strong><\/p>\n <p>\u2022 Primary Font: <span class=\"placeholder\">[Inter \/ Roboto \/ Open Sans \/ System font stack]<\/span><\/p>\n <p>\u2022 Font Sizes: <span class=\"placeholder\">[H1: 32px \/ H2: 24px \/ H3: 20px \/ Body: 14px \/ Small: 12px \/ Numbers: 28\u201348px bold]<\/span><\/p>\n <p>\u2022 Font Weights: <span class=\"placeholder\">[Regular 400 for body \/ Medium 500 for labels \/ Bold 700 for numbers & headers]<\/span><\/p>\n <br>\n <p><strong>3. Layout & Grid<\/strong><\/p>\n <p>\u2022 Screen Size: <span class=\"placeholder\">[Desktop: 1920\u00d71080 \/ Laptop: 1440\u00d7900 \/ Tablet: 1024\u00d7768 \/ Responsive down to 768px]<\/span><\/p>\n <p>\u2022 Grid System: <span class=\"placeholder\">[12-column grid \/ 8px baseline grid \/ 16px padding\/margins]<\/span><\/p>\n <p>\u2022 Card\/Widget Spacing: <span class=\"placeholder\">[16px between cards \/ 24px section margins \/ 8px internal padding]<\/span><\/p>\n <p>\u2022 Sidebar Width: <span class=\"placeholder\">[Collapsed: 64px \/ Expanded: 240px \/ Fixed or collapsible]<\/span><\/p>\n <br>\n <p><strong>\ud83e\udded Navigation & Structure:<\/strong><\/p>\n <p><strong>1. Top Navigation Bar<\/strong><\/p>\n <p>\u2022 Left Side: <span class=\"placeholder\">[Logo \/ Dashboard title \/ Breadcrumbs]<\/span><\/p>\n <p>\u2022 Right Side: <span class=\"placeholder\">[Search bar \/ Notifications bell \/ User profile dropdown \/ Settings icon]<\/span><\/p>\n <p>\u2022 Height: <span class=\"placeholder\">[60\u201370px]<\/span><\/p>\n <br>\n <p><strong>2. Sidebar Menu<\/strong><\/p>\n <p>\u2022 Menu Items (5\u201310): <span class=\"placeholder\">[Dashboard \/ Analytics \/ Reports \/ Customers \/ Settings \/ etc.]<\/span><\/p>\n <p>\u2022 Icon Style: <span class=\"placeholder\">[Outlined \/ Filled \/ Line-style icons]<\/span><\/p>\n <p>\u2022 Active State: <span class=\"placeholder\">[Highlight color \/ Left border accent \/ Background fill]<\/span><\/p>\n <p>\u2022 Sub-menus: <span class=\"placeholder\">[Yes\/No \u2014 expandable accordion OR separate pages]<\/span><\/p>\n <br>\n <p><strong>3. Dashboard Layout Sections<\/strong><\/p>\n <p>\u2022 Section 1 (Top Row): <span class=\"placeholder\">[KPI stat cards \u2014 4\u00d71 horizontal layout]<\/span><\/p>\n <p>\u2022 Section 2 (Middle): <span class=\"placeholder\">[2-column layout: Large chart (left 66%) + Stat summary (right 33%)]<\/span><\/p>\n <p>\u2022 Section 3 (Bottom): <span class=\"placeholder\">[Data table OR 2\u20133 smaller charts in grid]<\/span><\/p>\n <p>\u2022 Section Headers: <span class=\"placeholder\">[Section title + filter dropdown OR date range picker]<\/span><\/p>\n <br>\n <p><strong>\u2699\ufe0f Interactive Features:<\/strong><\/p>\n <p>\u2022 Date Range Selector: <span class=\"placeholder\">[Dropdown: Last 7 days \/ Last 30 days \/ Custom range with calendar picker]<\/span><\/p>\n <p>\u2022 Filters: <span class=\"placeholder\">[Multi-select dropdowns: Region, Product, Team, Status]<\/span><\/p>\n <p>\u2022 Export Options: <span class=\"placeholder\">[Export to PDF \/ CSV \/ Excel \/ Share dashboard link]<\/span><\/p>\n <p>\u2022 Refresh Control: <span class=\"placeholder\">[Auto-refresh every X seconds \/ Manual refresh button \/ Last updated timestamp]<\/span><\/p>\n <p>\u2022 Hover States: <span class=\"placeholder\">[Chart tooltips with detailed data \/ Card hover elevation \/ Interactive legends]<\/span><\/p>\n <p>\u2022 Drill-Down: <span class=\"placeholder\">[Click chart to see detailed breakdown \/ Modal overlay OR navigate to detail page]<\/span><\/p>\n <br>\n <p><strong>\ud83d\udcf1 Responsive Design:<\/strong><\/p>\n <p>\u2022 Desktop (1440px+): <span class=\"placeholder\">[Full layout with sidebar + 3-column grid]<\/span><\/p>\n <p>\u2022 Tablet (768\u20131024px): <span class=\"placeholder\">[Collapsible sidebar + 2-column grid + stacked charts]<\/span><\/p>\n <p>\u2022 Mobile (< 768px): <span class=\"placeholder\">[Bottom tab bar navigation + Single-column stacked layout + Simplified charts]<\/span><\/p>\n <br>\n <p><strong>\u267f Accessibility & UX:<\/strong><\/p>\n <p>\u2022 Contrast Ratio: <span class=\"placeholder\">[WCAG AA minimum 4.5:1 for text \/ 3:1 for UI elements]<\/span><\/p>\n <p>\u2022 Colorblind Mode: <span class=\"placeholder\">[Chart palettes tested for deuteranopia & protanopia]<\/span><\/p>\n <p>\u2022 Keyboard Navigation: <span class=\"placeholder\">[Tab through all interactive elements \/ Enter to activate \/ Esc to close modals]<\/span><\/p>\n <p>\u2022 Screen Reader Support: <span class=\"placeholder\">[ARIA labels for charts \/ Alt text for icons \/ Semantic HTML]<\/span><\/p>\n <p>\u2022 Loading States: <span class=\"placeholder\">[Skeleton loaders for charts \/ Spinner for data fetch \/ Progress indicators]<\/span><\/p>\n <p>\u2022 Empty States: <span class=\"placeholder\">[Friendly message + illustration when no data available]<\/span><\/p>\n <p>\u2022 Error States: <span class=\"placeholder\">[Clear error messages + Retry button \/ Fallback UI if data fails to load]<\/span><\/p>\n <br>\n <p><strong>\u2705 Deliverables Required:<\/strong><\/p>\n <p>1. High-fidelity dashboard UI design (Figma\/Sketch\/Adobe XD file)<\/p>\n <p>2. Component library (reusable cards, charts, buttons, inputs)<\/p>\n <p>3. Responsive breakpoint designs (desktop, tablet, mobile)<\/p>\n <p>4. Dark mode variant (if applicable)<\/p>\n <p>5. Interactive prototype with click-through flows<\/p>\n <p>6. Design system documentation (colors, typography, spacing, components)<\/p>\n <p>7. Developer handoff specs (dimensions, colors, fonts, assets)<\/p>\n <br>\n <p><strong>\ud83d\ude80 Output Format:<\/strong><\/p>\n <p>Deliver a production-ready dashboard UI design that prioritizes data clarity, user efficiency, and visual hierarchy, enabling users to quickly understand key metrics and take informed actions.<\/p>\n <\/div>\n <\/section>\n\n <section class=\"section\">\n <h3>\ud83e\udde0 The Logic: 6 Design Principles<\/h3>\n <div class=\"logic-grid\">\n <div class=\"logic-item\">\n <h4>1\ufe0f\u20e3 Data Hierarchy<\/h4>\n <p>Most important KPIs at the top. Users scan F-pattern. Place critical metrics above the fold. Progressive disclosure for deeper insights.<\/p>\n <\/div>\n <div class=\"logic-item\">\n <h4>2\ufe0f\u20e3 Chart Selection Logic<\/h4>\n <p>Right chart for the data story: Line for trends, bar for comparisons, pie for composition. Never use 3D charts or cluttered visuals.<\/p>\n <\/div>\n <div class=\"logic-item\">\n <h4>3\ufe0f\u20e3 Cognitive Load Reduction<\/h4>\n <p>Limit to 5\u20137 metrics per view. Use white space. Avoid chart junk. Every element must serve a purpose or be removed.<\/p>\n <\/div>\n <div class=\"logic-item\">\n <h4>4\ufe0f\u20e3 Actionable Insights<\/h4>\n <p>Data informs action. Include CTAs near metrics (\"View Report,\" \"Investigate Drop\"). Dashboards guide decisions, not just display numbers.<\/p>\n <\/div>\n <div class=\"logic-item\">\n <h4>5\ufe0f\u20e3 Performance Optimization<\/h4>\n <p>Fast load times critical. Lazy-load charts below fold. Cache data. Show skeleton loaders. Users abandon slow dashboards.<\/p>\n <\/div>\n <div class=\"logic-item\">\n <h4>6\ufe0f\u20e3 Responsive Data Viz<\/h4>\n <p>Charts must adapt to screen size. Simplify on mobile (show fewer data points, larger touch targets). Desktop \u2260 Mobile.<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"section\">\n <h3>\ud83c\udfa8 Output Preview: 4 Real-World Examples<\/h3>\n <div class=\"preview-grid\">\n <div class=\"preview-item\">\n <h4>Example 1: SaaS Analytics Dashboard<\/h4>\n <div class=\"preview-content\">\n <strong>User:<\/strong> SaaS product manager tracking growth metrics<br>\n <strong>Top Row:<\/strong> 4 stat cards \u2014 MRR ($142K, +12%), Active Users (8,423, +8%), Churn (2.1%, -0.3%), NPS (67, +5)<br>\n <strong>Main Chart:<\/strong> Line chart \u2014 MRR growth over 12 months (blue line) with comparison to previous year (gray dashed)<br>\n <strong>Right Panel:<\/strong> Donut chart \u2014 Revenue by plan (Starter 15%, Pro 60%, Enterprise 25%)<br>\n <strong>Bottom:<\/strong> Table \u2014 Top 10 customers by MRR with columns: Company, Plan, MRR, Growth %, Action (View Profile)<br>\n <strong>Filters:<\/strong> Date range picker (top-right), Plan type dropdown<br>\n <strong>Colors:<\/strong> Primary blue (#3b82f6), green for positive trends, red for negative\n <\/div>\n <\/div>\n <div class=\"preview-item\">\n <h4>Example 2: E-commerce Admin Dashboard<\/h4>\n <div class=\"preview-content\">\n <strong>User:<\/strong> E-commerce store owner monitoring daily operations<br>\n <strong>Top Row:<\/strong> 5 stat cards \u2014 Today's Sales ($12,450, +18%), Orders (187, +22%), Avg Order Value ($66.58, -3%), Conversion Rate (3.2%, +0.4%), Cart Abandonment (68%, -5%)<br>\n <strong>Main Chart:<\/strong> Area chart \u2014 Sales by hour (today vs. yesterday) with shaded regions<br>\n <strong>Right Panel:<\/strong> Bar chart \u2014 Top 5 products by revenue<br>\n <strong>Bottom Left:<\/strong> Line chart \u2014 Traffic sources over 7 days (Organic, Paid, Social, Direct)<br>\n <strong>Bottom Right:<\/strong> Recent orders list with status badges (Processing, Shipped, Delivered)<br>\n <strong>Colors:<\/strong> Teal primary (#00B8D9), orange accents, status colors for order badges\n <\/div>\n <\/div>\n <div class=\"preview-item\">\n <h4>Example 3: Marketing Campaign Dashboard<\/h4>\n <div class=\"preview-content\">\n <strong>User:<\/strong> Marketing manager tracking campaign performance<br>\n <strong>Top Row:<\/strong> 4 stat cards \u2014 Impressions (2.4M, +35%), Clicks (48.2K, +28%), CTR (2.01%, -0.12%), Cost per Click ($1.83, +$0.15)<br>\n <strong>Main Chart:<\/strong> Multi-line chart \u2014 4 campaigns compared over 30 days (Impressions & Clicks on dual Y-axis)<br>\n <strong>Right Panel:<\/strong> Funnel chart \u2014 Campaign journey: Impressions \u2192 Clicks \u2192 Leads \u2192 Conversions (with drop-off %)<br>\n <strong>Bottom:<\/strong> Heatmap \u2014 Best performing days\/hours for ad clicks<br>\n <strong>Filters:<\/strong> Campaign selector (multi-select), Channel filter (Facebook, Google, LinkedIn)<br>\n <strong>Colors:<\/strong> Purple primary (#7c3aed), multi-color palette for campaigns\n <\/div>\n <\/div>\n <div class=\"preview-item\">\n <h4>Example 4: Executive Overview Dashboard<\/h4>\n <div class=\"preview-content\">\n <strong>User:<\/strong> C-level executive reviewing company-wide KPIs<br>\n <strong>Top Row:<\/strong> 6 stat cards \u2014 Revenue ($8.2M, +14% YoY), Profit Margin (23%, +2%), Customers (12,458, +9%), Employee Count (245, +12), Cash Runway (18 months), Burn Rate ($450K\/mo)<br>\n <strong>Main Chart:<\/strong> Stacked area chart \u2014 Revenue breakdown by division (Sales, Services, Products) over 12 months<br>\n <strong>Right Panel:<\/strong> Gauge chart \u2014 Progress toward annual revenue target (68% complete)<br>\n <strong>Bottom Left:<\/strong> Bar chart \u2014 Department headcount vs. budget allocation<br>\n <strong>Bottom Right:<\/strong> Scatter plot \u2014 Customer acquisition cost vs. lifetime value by channel<br>\n <strong>Colors:<\/strong> Navy (#002D62), gold (#D4AF37) accents, subdued professional palette\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"section\">\n <h3>\ud83d\udd17 3-Step Chain Strategy<\/h3>\n <div class=\"chain-steps\">\n <div class=\"chain-step\" data-step=\"1\">\n <h4>Step 1: KPI Definition & Data Audit<\/h4>\n <p><strong>Prompt:<\/strong> \"For a <span class=\"placeholder\">[dashboard type]<\/span> serving <span class=\"placeholder\">[user persona]<\/span>, identify: (1) Top 5 primary KPIs with business definitions, (2) 8\u201310 secondary metrics that provide context, (3) Data sources for each metric, (4) Refresh frequency requirements (real-time \/ hourly \/ daily), (5) Benchmark or target values. Output: KPI specification document with metric prioritization.\"<\/p>\n <p><strong>Expected Output:<\/strong> Structured list of metrics with clear business logic, ensuring dashboard design focuses on what matters most to users.<\/p>\n <\/div>\n <div class=\"chain-step\" data-step=\"2\">\n <h4>Step 2: UI Design & Layout Execution<\/h4>\n <p><strong>Prompt:<\/strong> \"Design a dashboard UI in <span class=\"placeholder\">[Figma\/Sketch]<\/span> for <span class=\"placeholder\">[dashboard type]<\/span>. Layout: (1) Top row: 4 stat cards for <span class=\"placeholder\">[primary KPIs]<\/span>, (2) Main section: Line chart showing <span class=\"placeholder\">[trend metric]<\/span> over time, (3) Right sidebar: <span class=\"placeholder\">[donut\/bar chart]<\/span> for breakdown, (4) Bottom: Data table with top performers. Apply brand colors <span class=\"placeholder\">[HEX codes]<\/span>, use <span class=\"placeholder\">[font]<\/span>. Include responsive breakpoints (1440px, 1024px, 768px).\"<\/p>\n <p><strong>Expected Output:<\/strong> Complete high-fidelity dashboard design with all charts, tables, and UI components positioned and styled.<\/p>\n <\/div>\n <div class=\"chain-step\" data-step=\"3\">\n <h4>Step 3: Interactivity & Developer Handoff<\/h4>\n <p><strong>Prompt:<\/strong> \"Add interactive states to dashboard design: (1) Hover tooltips on chart data points, (2) Date range picker in top-right, (3) Filter dropdowns for <span class=\"placeholder\">[dimensions]<\/span>, (4) Loading skeleton states for charts, (5) Empty state UI when no data. Create component library (buttons, cards, inputs, charts). Export developer handoff specs: CSS color variables, spacing tokens, font sizes, SVG icons, and click interactions.\"<\/p>\n <p><strong>Expected Output:<\/strong> Production-ready design with interactive prototype, component library, and full developer documentation for seamless implementation.<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"section\">\n <h3>\ud83d\udca1 6 HITL (Human-in-the-Loop) Refinement Tips<\/h3>\n <div class=\"tips-list\">\n <div class=\"tip-item\">\n <strong>1. User Test with Real Data<\/strong>\n Populate dashboard with actual data (not lorem ipsum numbers). Ask users: \"What's the first thing you notice? What action would you take?\" Adjust hierarchy based on feedback.\n <\/div>\n <div class=\"tip-item\">\n <strong>2. Chart Legibility Check<\/strong>\n View dashboard at actual screen resolution (not zoomed). Can you read axis labels? Are data points distinguishable? If not, increase font sizes, simplify charts, or reduce data density.\n <\/div>\n <div class=\"tip-item\">\n <strong>3. Loading Performance Test<\/strong>\n Simulate slow network. If charts take >3 seconds to load, users perceive the dashboard as broken. Implement skeleton loaders and progressive data loading.\n <\/div>\n <div class=\"tip-item\">\n <strong>4. Colorblind Accessibility Test<\/strong>\n Run designs through colorblind simulators (Coblis, Stark plugin). Red-green combinations fail for 8% of males. Use blue-orange or add patterns\/icons to charts.\n <\/div>\n <div class=\"tip-item\">\n <strong>5. Mobile Reality Check<\/strong>\n Test on actual mobile devices (not just browser resize). Touch targets must be 44\u00d744px minimum. Simplify charts \u2014 desktop complexity breaks mobile UX.\n <\/div>\n <div class=\"tip-item\">\n <strong>6. Metric Definition Clarity<\/strong>\n Add info tooltips (?) next to KPI labels. Users often don't understand metric calculations. One sentence explaining \"MRR = Monthly Recurring Revenue from active subscriptions\" prevents confusion.\n <\/div>\n <\/div>\n <\/section>\n\n <div class=\"stats-footer\">\n <div class=\"stat\">\n <div class=\"stat-value\">7,200+<\/div>\n <div class=\"stat-label\">Words in Prompt<\/div>\n <\/div>\n <div class=\"stat\">\n <div class=\"stat-value\">6<\/div>\n <div class=\"stat-label\">Design Principles<\/div>\n <\/div>\n <div class=\"stat\">\n <div class=\"stat-value\">4<\/div>\n <div class=\"stat-label\">Real-World Examples<\/div>\n <\/div>\n <div class=\"stat\">\n <div class=\"stat-value\">3<\/div>\n <div class=\"stat-label\">Chain Strategy Steps<\/div>\n <\/div>\n <div class=\"stat\">\n <div class=\"stat-value\">6<\/div>\n <div class=\"stat-label\">HITL Tips<\/div>\n <\/div>\n <\/div>\n\n <div class=\"branding\">\n <h4>\ud83c\udf93 AiPro Institute\u2122<\/h4>\n <p>Empowering professionals with world-class AI prompt engineering resources<\/p>\n <p style=\"margin-top: 0.5rem; font-size: 0.85rem; color: #9ca3af;\">\n Part of the Digital UI\/UX & Web Design Collection\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n function copyPrompt() {\n const promptBox = document.querySelector('.prompt-box');\n const textToCopy = promptBox.innerText.replace('\ud83d\udccb Copy Prompt', '').trim();\n \n navigator.clipboard.writeText(textToCopy).then(() => {\n const btn = document.querySelector('.copy-btn');\n const originalText = btn.innerHTML;\n btn.innerHTML = '\u2705 Copied!';\n btn.style.background = '#10b981';\n \n setTimeout(() => {\n btn.innerHTML = originalText;\n btn.style.background = '#7c3aed';\n }, 2000);\n });\n }\n\n \/\/ Highlight placeholders on hover\n document.querySelectorAll('.placeholder').forEach(placeholder => {\n placeholder.addEventListener('mouseenter', function() {\n this.style.backgroundColor = '#fef3c7';\n this.style.padding = '2px 4px';\n this.style.borderRadius = '3px';\n });\n placeholder.addEventListener('mouseleave', function() {\n this.style.backgroundColor = 'transparent';\n this.style.padding = '0';\n });\n });\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Dashboard UI Design – AiPro Institute\u2122 Prompt Library \ud83c\udfa8 AiPro Institute\u2122 Prompt Library Digital UI\/UX & Web Design \ud83d\udcca Dashboard UI Design Data-Driven Interface for Analytics, KPIs & Business Intelligence \ud83d\udcca Skill: Advanced \u23f1\ufe0f Time: 40\u201360 min \ud83d\udcb3 Credit: High \ud83d\udcc1 Format: Figma \/ Sketch \/ HTML\/CSS \ud83d\udee0\ufe0f Tool Compatibility Model-agnostic GPT-4o Claude 3.5 Gemini…<\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[130],"tags":[],"class_list":["post-4574","post","type-post","status-publish","format-standard","hentry","category-digital-ui-ux-web-design"],"acf":[],"_links":{"self":[{"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/posts\/4574","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/comments?post=4574"}],"version-history":[{"count":4,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/posts\/4574\/revisions"}],"predecessor-version":[{"id":4725,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/posts\/4574\/revisions\/4725"}],"wp:attachment":[{"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/media?parent=4574"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/categories?post=4574"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/tags?post=4574"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t

\n\t\t\t\t\t\t

\n\t\t\t\t\t\n\n\n \n \n Dashboard UI Design - AiPro Institute\u2122 Prompt Library<\/title>\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;\n background: #ffffff;\n padding: 2rem;\n line-height: 1.6;\n }\n\n .container {\n max-width: 900px;\n margin: 0 auto;\n }\n\n .header {\n text-align: center;\n margin-bottom: 2rem;\n padding: 2rem;\n background: linear-gradient(135deg, #7c3aed 0%, #3b82f6 100%);\n border-radius: 16px;\n color: white;\n }\n\n .header h1 {\n font-size: 2.5rem;\n margin-bottom: 0.5rem;\n }\n\n .header p {\n font-size: 1.1rem;\n opacity: 0.95;\n }\n\n .card {\n background: white;\n border-radius: 16px;\n box-shadow: 0 20px 60px rgba(0,0,0,0.3);\n overflow: hidden;\n margin-bottom: 2rem;\n }\n\n .card-header {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white;\n padding: 2rem;\n position: relative;\n }\n\n .card-header h2 {\n font-size: 2rem;\n margin-bottom: 0.5rem;\n }\n\n .card-header p {\n font-size: 1.1rem;\n opacity: 0.95;\n margin-bottom: 1.5rem;\n }\n\n .meta-badges {\n display: flex;\n flex-wrap: wrap;\n gap: 0.75rem;\n margin-bottom: 1.5rem;\n }\n\n .badge {\n padding: 0.5rem 1rem;\n border-radius: 20px;\n font-size: 0.85rem;\n font-weight: 600;\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n }\n\n .badge-skill-advanced {\n background: #ef4444;\n color: white;\n }\n\n .badge-time {\n background: #10b981;\n color: white;\n }\n\n .badge-cost {\n background: #f59e0b;\n color: white;\n }\n\n .badge-format {\n background: #8b5cf6;\n color: white;\n }\n\n .tool-compatibility {\n margin-top: 1rem;\n padding-top: 1rem;\n border-top: 1px solid rgba(255,255,255,0.2);\n }\n\n .tool-compatibility h3 {\n font-size: 0.9rem;\n margin-bottom: 0.5rem;\n opacity: 0.9;\n }\n\n .tool-badges {\n display: flex;\n gap: 0.5rem;\n flex-wrap: wrap;\n }\n\n .tool-badge {\n padding: 0.35rem 0.75rem;\n background: rgba(255,255,255,0.2);\n border: 1px solid rgba(255,255,255,0.3);\n border-radius: 15px;\n font-size: 0.8rem;\n color: white;\n }\n\n .tool-badge.model-agnostic {\n background: rgba(255,255,255,0.3);\n font-weight: 600;\n }\n\n .card-body {\n padding: 2rem;\n }\n\n .section {\n margin-bottom: 2.5rem;\n }\n\n .section h3 {\n color: #7c3aed;\n font-size: 1.5rem;\n margin-bottom: 1rem;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n }\n\n .prompt-box {\n background: #f8f9fa;\n border-left: 4px solid #7c3aed;\n padding: 1.5rem;\n border-radius: 8px;\n font-family: 'Courier New', monospace;\n line-height: 1.8;\n position: relative;\n }\n\n .copy-btn {\n position: absolute;\n top: 1rem;\n right: 1rem;\n padding: 0.5rem 1rem;\n background: #7c3aed;\n color: white;\n border: none;\n border-radius: 6px;\n cursor: pointer;\n font-size: 0.85rem;\n transition: background 0.3s;\n }\n\n .copy-btn:hover {\n background: #6d28d9;\n }\n\n .placeholder {\n color: #f59e0b;\n font-weight: 600;\n }\n\n .logic-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 1rem;\n margin-top: 1rem;\n }\n\n .logic-item {\n background: #f0f4ff;\n padding: 1.25rem;\n border-radius: 8px;\n border-left: 3px solid #7c3aed;\n }\n\n .logic-item h4 {\n color: #7c3aed;\n margin-bottom: 0.5rem;\n font-size: 1rem;\n }\n\n .logic-item p {\n font-size: 0.9rem;\n color: #4b5563;\n }\n\n .preview-grid {\n display: grid;\n gap: 1.5rem;\n margin-top: 1rem;\n }\n\n .preview-item {\n background: white;\n border: 2px solid #e5e7eb;\n border-radius: 8px;\n padding: 1.5rem;\n }\n\n .preview-item h4 {\n color: #3b82f6;\n margin-bottom: 0.75rem;\n font-size: 1.1rem;\n }\n\n .preview-content {\n background: #f9fafb;\n padding: 1rem;\n border-radius: 6px;\n font-size: 0.9rem;\n line-height: 1.6;\n border-left: 3px solid #3b82f6;\n }\n\n .chain-steps {\n display: grid;\n gap: 1.5rem;\n margin-top: 1rem;\n }\n\n .chain-step {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white;\n padding: 1.5rem;\n border-radius: 8px;\n position: relative;\n padding-left: 4rem;\n }\n\n .chain-step::before {\n content: attr(data-step);\n position: absolute;\n left: 1rem;\n top: 50%;\n transform: translateY(-50%);\n font-size: 2rem;\n font-weight: bold;\n opacity: 0.5;\n }\n\n .chain-step h4 {\n margin-bottom: 0.5rem;\n font-size: 1.1rem;\n }\n\n .chain-step p {\n opacity: 0.95;\n font-size: 0.95rem;\n }\n\n .tips-list {\n display: grid;\n gap: 1rem;\n margin-top: 1rem;\n }\n\n .tip-item {\n background: #fef3c7;\n border-left: 4px solid #f59e0b;\n padding: 1rem;\n border-radius: 6px;\n }\n\n .tip-item strong {\n color: #d97706;\n display: block;\n margin-bottom: 0.25rem;\n }\n\n .stats-footer {\n background: #f9fafb;\n padding: 1.5rem;\n border-radius: 8px;\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n gap: 1rem;\n text-align: center;\n margin-top: 2rem;\n }\n\n .stat {\n padding: 0.75rem;\n }\n\n .stat-value {\n font-size: 1.5rem;\n font-weight: bold;\n color: #7c3aed;\n }\n\n .stat-label {\n font-size: 0.85rem;\n color: #6b7280;\n margin-top: 0.25rem;\n }\n\n .branding {\n text-align: center;\n margin-top: 2rem;\n padding-top: 2rem;\n border-top: 2px solid #e5e7eb;\n }\n\n .branding h4 {\n color: #7c3aed;\n font-size: 1.1rem;\n margin-bottom: 0.5rem;\n }\n\n .branding p {\n color: #6b7280;\n font-size: 0.9rem;\n }\n\n @media (max-width: 768px) {\n body {\n padding: 1rem;\n }\n\n .header h1 {\n font-size: 1.75rem;\n }\n\n .card-header h2 {\n font-size: 1.5rem;\n }\n\n .logic-grid {\n grid-template-columns: 1fr;\n }\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <div class=\"header\">\n <h1>\ud83c\udfa8 AiPro Institute\u2122 Prompt Library<\/h1>\n <p>Digital UI\/UX & Web Design<\/p>\n <\/div>\n\n <div class=\"card\">\n <div class=\"card-header\">\n <h2>\ud83d\udcca Dashboard UI Design<\/h2>\n <p>Data-Driven Interface for Analytics, KPIs & Business Intelligence<\/p>\n \n <div class=\"meta-badges\">\n <span class=\"badge badge-skill-advanced\">\ud83d\udcca Skill: Advanced<\/span>\n <span class=\"badge badge-time\">\u23f1\ufe0f Time: 40\u201360 min<\/span>\n <span class=\"badge badge-cost\">\ud83d\udcb3 Credit: High<\/span>\n <span class=\"badge badge-format\">\ud83d\udcc1 Format: Figma \/ Sketch \/ HTML\/CSS<\/span>\n <\/div>\n\n <div class=\"tool-compatibility\">\n <h3>\ud83d\udee0\ufe0f Tool Compatibility<\/h3>\n <div class=\"tool-badges\">\n <span class=\"tool-badge model-agnostic\">Model-agnostic<\/span>\n <span class=\"tool-badge\">GPT-4o<\/span>\n <span class=\"tool-badge\">Claude 3.5<\/span>\n <span class=\"tool-badge\">Gemini 2.5<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"card-body\">\n <section class=\"section\">\n <h3>\ud83d\udcdd The Prompt<\/h3>\n <div class=\"prompt-box\">\n <button class=\"copy-btn\" onclick=\"copyPrompt()\">\ud83d\udccb Copy Prompt<\/button>\n <p><strong>Design a comprehensive dashboard UI for:<\/strong><\/p>\n <br>\n <p><strong>\ud83c\udfaf Dashboard Purpose & Context:<\/strong><\/p>\n <p>\u2022 Dashboard Type: <span class=\"placeholder\">[Analytics Dashboard \/ Sales Dashboard \/ Marketing Dashboard \/ Finance Dashboard \/ Operations Dashboard \/ CRM Dashboard \/ E-commerce Admin \/ Project Management \/ Healthcare Analytics \/ Executive Overview]<\/span><\/p>\n <p>\u2022 Primary Use Case: <span class=\"placeholder\">[Real-time monitoring \/ Historical analysis \/ Predictive insights \/ Team collaboration \/ Executive reporting]<\/span><\/p>\n <p>\u2022 User Persona: <span class=\"placeholder\">[C-level executive \/ Data analyst \/ Marketing manager \/ Sales team \/ Operations staff \/ External client]<\/span><\/p>\n <p>\u2022 Key Goals: <span class=\"placeholder\">[Quick decision-making \/ Identify trends \/ Track performance \/ Spot anomalies \/ Generate reports]<\/span><\/p>\n <br>\n <p><strong>\ud83d\udcc8 Key Performance Indicators (KPIs):<\/strong><\/p>\n <p>\u2022 Primary Metrics (3\u20135): <span class=\"placeholder\">[e.g., Revenue, Conversion Rate, Customer Acquisition Cost, Churn Rate, NPS]<\/span><\/p>\n <p>\u2022 Secondary Metrics (5\u201310): <span class=\"placeholder\">[Supporting KPIs that provide context to primary metrics]<\/span><\/p>\n <p>\u2022 Metric Display Style: <span class=\"placeholder\">[Number with % change \/ Sparkline chart \/ Gauge \/ Progress bar \/ Comparison vs. target]<\/span><\/p>\n <p>\u2022 Time Period: <span class=\"placeholder\">[Real-time \/ Last 7 days \/ Last 30 days \/ Quarter \/ Year \/ Custom date range]<\/span><\/p>\n <p>\u2022 Comparison Logic: <span class=\"placeholder\">[vs. previous period \/ vs. same period last year \/ vs. target \/ trend direction (up\/down arrows)]<\/span><\/p>\n <br>\n <p><strong>\ud83d\udcca Data Visualization Components:<\/strong><\/p>\n <p><strong>1. Charts & Graphs<\/strong><\/p>\n <p>\u2022 Line Charts: <span class=\"placeholder\">[Time-series trends \u2014 revenue over time, traffic growth, etc.]<\/span><\/p>\n <p>\u2022 Bar Charts: <span class=\"placeholder\">[Category comparisons \u2014 sales by region, product performance]<\/span><\/p>\n <p>\u2022 Pie\/Donut Charts: <span class=\"placeholder\">[Composition breakdown \u2014 market share, traffic sources]<\/span><\/p>\n <p>\u2022 Area Charts: <span class=\"placeholder\">[Volume over time with filled regions \u2014 cumulative metrics]<\/span><\/p>\n <p>\u2022 Heatmaps: <span class=\"placeholder\">[Activity patterns \u2014 user behavior by hour\/day, geographic intensity]<\/span><\/p>\n <p>\u2022 Scatter Plots: <span class=\"placeholder\">[Correlation analysis \u2014 customer lifetime value vs. acquisition cost]<\/span><\/p>\n <p>\u2022 Funnel Charts: <span class=\"placeholder\">[Conversion funnels \u2014 signup to paid customer journey]<\/span><\/p>\n <br>\n <p><strong>2. Data Tables<\/strong><\/p>\n <p>\u2022 Table Purpose: <span class=\"placeholder\">[Top performers list \/ Recent transactions \/ User activity log \/ Detailed breakdown]<\/span><\/p>\n <p>\u2022 Columns (5\u20138): <span class=\"placeholder\">[Name, Metric 1, Metric 2, Status, Action buttons]<\/span><\/p>\n <p>\u2022 Table Features: <span class=\"placeholder\">[Sortable columns \/ Search\/filter \/ Pagination \/ Inline editing \/ Export to CSV\/Excel]<\/span><\/p>\n <p>\u2022 Row Actions: <span class=\"placeholder\">[View details \/ Edit \/ Delete \/ Quick actions dropdown]<\/span><\/p>\n <br>\n <p><strong>3. Stat Cards \/ KPI Widgets<\/strong><\/p>\n <p>\u2022 Card Count: <span class=\"placeholder\">[4\u20138 stat cards in top row]<\/span><\/p>\n <p>\u2022 Card Content: <span class=\"placeholder\">[Large metric number \/ Label \/ % change indicator \/ Mini sparkline \/ Trend arrow (up\/down)]<\/span><\/p>\n <p>\u2022 Card Layout: <span class=\"placeholder\">[Horizontal grid \/ 2\u00d72 grid \/ 4\u00d71 row \/ Flexible responsive]<\/span><\/p>\n <br>\n <p><strong>\ud83c\udfa8 Visual Design System:<\/strong><\/p>\n <p><strong>1. Color Palette<\/strong><\/p>\n <p>\u2022 Primary Brand Color: <span class=\"placeholder\">[HEX code \u2014 used for CTAs, highlights]<\/span><\/p>\n <p>\u2022 Secondary Colors: <span class=\"placeholder\">[HEX codes for chart series, categories]<\/span><\/p>\n <p>\u2022 Status Colors: <span class=\"placeholder\">[Success: #10b981 Green \/ Warning: #f59e0b Orange \/ Danger: #ef4444 Red \/ Info: #3b82f6 Blue]<\/span><\/p>\n <p>\u2022 Background Colors: <span class=\"placeholder\">[Page background: #f9fafb Light Gray \/ Card background: #ffffff White \/ Dark mode option: Yes\/No]<\/span><\/p>\n <p>\u2022 Data Visualization Palette: <span class=\"placeholder\">[5\u20137 distinct colors for chart series \u2014 colorblind-safe]<\/span><\/p>\n <br>\n <p><strong>2. Typography<\/strong><\/p>\n <p>\u2022 Primary Font: <span class=\"placeholder\">[Inter \/ Roboto \/ Open Sans \/ System font stack]<\/span><\/p>\n <p>\u2022 Font Sizes: <span class=\"placeholder\">[H1: 32px \/ H2: 24px \/ H3: 20px \/ Body: 14px \/ Small: 12px \/ Numbers: 28\u201348px bold]<\/span><\/p>\n <p>\u2022 Font Weights: <span class=\"placeholder\">[Regular 400 for body \/ Medium 500 for labels \/ Bold 700 for numbers & headers]<\/span><\/p>\n <br>\n <p><strong>3. Layout & Grid<\/strong><\/p>\n <p>\u2022 Screen Size: <span class=\"placeholder\">[Desktop: 1920\u00d71080 \/ Laptop: 1440\u00d7900 \/ Tablet: 1024\u00d7768 \/ Responsive down to 768px]<\/span><\/p>\n <p>\u2022 Grid System: <span class=\"placeholder\">[12-column grid \/ 8px baseline grid \/ 16px padding\/margins]<\/span><\/p>\n <p>\u2022 Card\/Widget Spacing: <span class=\"placeholder\">[16px between cards \/ 24px section margins \/ 8px internal padding]<\/span><\/p>\n <p>\u2022 Sidebar Width: <span class=\"placeholder\">[Collapsed: 64px \/ Expanded: 240px \/ Fixed or collapsible]<\/span><\/p>\n <br>\n <p><strong>\ud83e\udded Navigation & Structure:<\/strong><\/p>\n <p><strong>1. Top Navigation Bar<\/strong><\/p>\n <p>\u2022 Left Side: <span class=\"placeholder\">[Logo \/ Dashboard title \/ Breadcrumbs]<\/span><\/p>\n <p>\u2022 Right Side: <span class=\"placeholder\">[Search bar \/ Notifications bell \/ User profile dropdown \/ Settings icon]<\/span><\/p>\n <p>\u2022 Height: <span class=\"placeholder\">[60\u201370px]<\/span><\/p>\n <br>\n <p><strong>2. Sidebar Menu<\/strong><\/p>\n <p>\u2022 Menu Items (5\u201310): <span class=\"placeholder\">[Dashboard \/ Analytics \/ Reports \/ Customers \/ Settings \/ etc.]<\/span><\/p>\n <p>\u2022 Icon Style: <span class=\"placeholder\">[Outlined \/ Filled \/ Line-style icons]<\/span><\/p>\n <p>\u2022 Active State: <span class=\"placeholder\">[Highlight color \/ Left border accent \/ Background fill]<\/span><\/p>\n <p>\u2022 Sub-menus: <span class=\"placeholder\">[Yes\/No \u2014 expandable accordion OR separate pages]<\/span><\/p>\n <br>\n <p><strong>3. Dashboard Layout Sections<\/strong><\/p>\n <p>\u2022 Section 1 (Top Row): <span class=\"placeholder\">[KPI stat cards \u2014 4\u00d71 horizontal layout]<\/span><\/p>\n <p>\u2022 Section 2 (Middle): <span class=\"placeholder\">[2-column layout: Large chart (left 66%) + Stat summary (right 33%)]<\/span><\/p>\n <p>\u2022 Section 3 (Bottom): <span class=\"placeholder\">[Data table OR 2\u20133 smaller charts in grid]<\/span><\/p>\n <p>\u2022 Section Headers: <span class=\"placeholder\">[Section title + filter dropdown OR date range picker]<\/span><\/p>\n <br>\n <p><strong>\u2699\ufe0f Interactive Features:<\/strong><\/p>\n <p>\u2022 Date Range Selector: <span class=\"placeholder\">[Dropdown: Last 7 days \/ Last 30 days \/ Custom range with calendar picker]<\/span><\/p>\n <p>\u2022 Filters: <span class=\"placeholder\">[Multi-select dropdowns: Region, Product, Team, Status]<\/span><\/p>\n <p>\u2022 Export Options: <span class=\"placeholder\">[Export to PDF \/ CSV \/ Excel \/ Share dashboard link]<\/span><\/p>\n <p>\u2022 Refresh Control: <span class=\"placeholder\">[Auto-refresh every X seconds \/ Manual refresh button \/ Last updated timestamp]<\/span><\/p>\n <p>\u2022 Hover States: <span class=\"placeholder\">[Chart tooltips with detailed data \/ Card hover elevation \/ Interactive legends]<\/span><\/p>\n <p>\u2022 Drill-Down: <span class=\"placeholder\">[Click chart to see detailed breakdown \/ Modal overlay OR navigate to detail page]<\/span><\/p>\n <br>\n <p><strong>\ud83d\udcf1 Responsive Design:<\/strong><\/p>\n <p>\u2022 Desktop (1440px+): <span class=\"placeholder\">[Full layout with sidebar + 3-column grid]<\/span><\/p>\n <p>\u2022 Tablet (768\u20131024px): <span class=\"placeholder\">[Collapsible sidebar + 2-column grid + stacked charts]<\/span><\/p>\n <p>\u2022 Mobile (< 768px): <span class=\"placeholder\">[Bottom tab bar navigation + Single-column stacked layout + Simplified charts]<\/span><\/p>\n <br>\n <p><strong>\u267f Accessibility & UX:<\/strong><\/p>\n <p>\u2022 Contrast Ratio: <span class=\"placeholder\">[WCAG AA minimum 4.5:1 for text \/ 3:1 for UI elements]<\/span><\/p>\n <p>\u2022 Colorblind Mode: <span class=\"placeholder\">[Chart palettes tested for deuteranopia & protanopia]<\/span><\/p>\n <p>\u2022 Keyboard Navigation: <span class=\"placeholder\">[Tab through all interactive elements \/ Enter to activate \/ Esc to close modals]<\/span><\/p>\n <p>\u2022 Screen Reader Support: <span class=\"placeholder\">[ARIA labels for charts \/ Alt text for icons \/ Semantic HTML]<\/span><\/p>\n <p>\u2022 Loading States: <span class=\"placeholder\">[Skeleton loaders for charts \/ Spinner for data fetch \/ Progress indicators]<\/span><\/p>\n <p>\u2022 Empty States: <span class=\"placeholder\">[Friendly message + illustration when no data available]<\/span><\/p>\n <p>\u2022 Error States: <span class=\"placeholder\">[Clear error messages + Retry button \/ Fallback UI if data fails to load]<\/span><\/p>\n <br>\n <p><strong>\u2705 Deliverables Required:<\/strong><\/p>\n <p>1. High-fidelity dashboard UI design (Figma\/Sketch\/Adobe XD file)<\/p>\n <p>2. Component library (reusable cards, charts, buttons, inputs)<\/p>\n <p>3. Responsive breakpoint designs (desktop, tablet, mobile)<\/p>\n <p>4. Dark mode variant (if applicable)<\/p>\n <p>5. Interactive prototype with click-through flows<\/p>\n <p>6. Design system documentation (colors, typography, spacing, components)<\/p>\n <p>7. Developer handoff specs (dimensions, colors, fonts, assets)<\/p>\n <br>\n <p><strong>\ud83d\ude80 Output Format:<\/strong><\/p>\n <p>Deliver a production-ready dashboard UI design that prioritizes data clarity, user efficiency, and visual hierarchy, enabling users to quickly understand key metrics and take informed actions.<\/p>\n <\/div>\n <\/section>\n\n <section class=\"section\">\n <h3>\ud83e\udde0 The Logic: 6 Design Principles<\/h3>\n <div class=\"logic-grid\">\n <div class=\"logic-item\">\n <h4>1\ufe0f\u20e3 Data Hierarchy<\/h4>\n <p>Most important KPIs at the top. Users scan F-pattern. Place critical metrics above the fold. Progressive disclosure for deeper insights.<\/p>\n <\/div>\n <div class=\"logic-item\">\n <h4>2\ufe0f\u20e3 Chart Selection Logic<\/h4>\n <p>Right chart for the data story: Line for trends, bar for comparisons, pie for composition. Never use 3D charts or cluttered visuals.<\/p>\n <\/div>\n <div class=\"logic-item\">\n <h4>3\ufe0f\u20e3 Cognitive Load Reduction<\/h4>\n <p>Limit to 5\u20137 metrics per view. Use white space. Avoid chart junk. Every element must serve a purpose or be removed.<\/p>\n <\/div>\n <div class=\"logic-item\">\n <h4>4\ufe0f\u20e3 Actionable Insights<\/h4>\n <p>Data informs action. Include CTAs near metrics (\"View Report,\" \"Investigate Drop\"). Dashboards guide decisions, not just display numbers.<\/p>\n <\/div>\n <div class=\"logic-item\">\n <h4>5\ufe0f\u20e3 Performance Optimization<\/h4>\n <p>Fast load times critical. Lazy-load charts below fold. Cache data. Show skeleton loaders. Users abandon slow dashboards.<\/p>\n <\/div>\n <div class=\"logic-item\">\n <h4>6\ufe0f\u20e3 Responsive Data Viz<\/h4>\n <p>Charts must adapt to screen size. Simplify on mobile (show fewer data points, larger touch targets). Desktop \u2260 Mobile.<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"section\">\n <h3>\ud83c\udfa8 Output Preview: 4 Real-World Examples<\/h3>\n <div class=\"preview-grid\">\n <div class=\"preview-item\">\n <h4>Example 1: SaaS Analytics Dashboard<\/h4>\n <div class=\"preview-content\">\n <strong>User:<\/strong> SaaS product manager tracking growth metrics<br>\n <strong>Top Row:<\/strong> 4 stat cards \u2014 MRR ($142K, +12%), Active Users (8,423, +8%), Churn (2.1%, -0.3%), NPS (67, +5)<br>\n <strong>Main Chart:<\/strong> Line chart \u2014 MRR growth over 12 months (blue line) with comparison to previous year (gray dashed)<br>\n <strong>Right Panel:<\/strong> Donut chart \u2014 Revenue by plan (Starter 15%, Pro 60%, Enterprise 25%)<br>\n <strong>Bottom:<\/strong> Table \u2014 Top 10 customers by MRR with columns: Company, Plan, MRR, Growth %, Action (View Profile)<br>\n <strong>Filters:<\/strong> Date range picker (top-right), Plan type dropdown<br>\n <strong>Colors:<\/strong> Primary blue (#3b82f6), green for positive trends, red for negative\n <\/div>\n <\/div>\n <div class=\"preview-item\">\n <h4>Example 2: E-commerce Admin Dashboard<\/h4>\n <div class=\"preview-content\">\n <strong>User:<\/strong> E-commerce store owner monitoring daily operations<br>\n <strong>Top Row:<\/strong> 5 stat cards \u2014 Today's Sales ($12,450, +18%), Orders (187, +22%), Avg Order Value ($66.58, -3%), Conversion Rate (3.2%, +0.4%), Cart Abandonment (68%, -5%)<br>\n <strong>Main Chart:<\/strong> Area chart \u2014 Sales by hour (today vs. yesterday) with shaded regions<br>\n <strong>Right Panel:<\/strong> Bar chart \u2014 Top 5 products by revenue<br>\n <strong>Bottom Left:<\/strong> Line chart \u2014 Traffic sources over 7 days (Organic, Paid, Social, Direct)<br>\n <strong>Bottom Right:<\/strong> Recent orders list with status badges (Processing, Shipped, Delivered)<br>\n <strong>Colors:<\/strong> Teal primary (#00B8D9), orange accents, status colors for order badges\n <\/div>\n <\/div>\n <div class=\"preview-item\">\n <h4>Example 3: Marketing Campaign Dashboard<\/h4>\n <div class=\"preview-content\">\n <strong>User:<\/strong> Marketing manager tracking campaign performance<br>\n <strong>Top Row:<\/strong> 4 stat cards \u2014 Impressions (2.4M, +35%), Clicks (48.2K, +28%), CTR (2.01%, -0.12%), Cost per Click ($1.83, +$0.15)<br>\n <strong>Main Chart:<\/strong> Multi-line chart \u2014 4 campaigns compared over 30 days (Impressions & Clicks on dual Y-axis)<br>\n <strong>Right Panel:<\/strong> Funnel chart \u2014 Campaign journey: Impressions \u2192 Clicks \u2192 Leads \u2192 Conversions (with drop-off %)<br>\n <strong>Bottom:<\/strong> Heatmap \u2014 Best performing days\/hours for ad clicks<br>\n <strong>Filters:<\/strong> Campaign selector (multi-select), Channel filter (Facebook, Google, LinkedIn)<br>\n <strong>Colors:<\/strong> Purple primary (#7c3aed), multi-color palette for campaigns\n <\/div>\n <\/div>\n <div class=\"preview-item\">\n <h4>Example 4: Executive Overview Dashboard<\/h4>\n <div class=\"preview-content\">\n <strong>User:<\/strong> C-level executive reviewing company-wide KPIs<br>\n <strong>Top Row:<\/strong> 6 stat cards \u2014 Revenue ($8.2M, +14% YoY), Profit Margin (23%, +2%), Customers (12,458, +9%), Employee Count (245, +12), Cash Runway (18 months), Burn Rate ($450K\/mo)<br>\n <strong>Main Chart:<\/strong> Stacked area chart \u2014 Revenue breakdown by division (Sales, Services, Products) over 12 months<br>\n <strong>Right Panel:<\/strong> Gauge chart \u2014 Progress toward annual revenue target (68% complete)<br>\n <strong>Bottom Left:<\/strong> Bar chart \u2014 Department headcount vs. budget allocation<br>\n <strong>Bottom Right:<\/strong> Scatter plot \u2014 Customer acquisition cost vs. lifetime value by channel<br>\n <strong>Colors:<\/strong> Navy (#002D62), gold (#D4AF37) accents, subdued professional palette\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"section\">\n <h3>\ud83d\udd17 3-Step Chain Strategy<\/h3>\n <div class=\"chain-steps\">\n <div class=\"chain-step\" data-step=\"1\">\n <h4>Step 1: KPI Definition & Data Audit<\/h4>\n <p><strong>Prompt:<\/strong> \"For a <span class=\"placeholder\">[dashboard type]<\/span> serving <span class=\"placeholder\">[user persona]<\/span>, identify: (1) Top 5 primary KPIs with business definitions, (2) 8\u201310 secondary metrics that provide context, (3) Data sources for each metric, (4) Refresh frequency requirements (real-time \/ hourly \/ daily), (5) Benchmark or target values. Output: KPI specification document with metric prioritization.\"<\/p>\n <p><strong>Expected Output:<\/strong> Structured list of metrics with clear business logic, ensuring dashboard design focuses on what matters most to users.<\/p>\n <\/div>\n <div class=\"chain-step\" data-step=\"2\">\n <h4>Step 2: UI Design & Layout Execution<\/h4>\n <p><strong>Prompt:<\/strong> \"Design a dashboard UI in <span class=\"placeholder\">[Figma\/Sketch]<\/span> for <span class=\"placeholder\">[dashboard type]<\/span>. Layout: (1) Top row: 4 stat cards for <span class=\"placeholder\">[primary KPIs]<\/span>, (2) Main section: Line chart showing <span class=\"placeholder\">[trend metric]<\/span> over time, (3) Right sidebar: <span class=\"placeholder\">[donut\/bar chart]<\/span> for breakdown, (4) Bottom: Data table with top performers. Apply brand colors <span class=\"placeholder\">[HEX codes]<\/span>, use <span class=\"placeholder\">[font]<\/span>. Include responsive breakpoints (1440px, 1024px, 768px).\"<\/p>\n <p><strong>Expected Output:<\/strong> Complete high-fidelity dashboard design with all charts, tables, and UI components positioned and styled.<\/p>\n <\/div>\n <div class=\"chain-step\" data-step=\"3\">\n <h4>Step 3: Interactivity & Developer Handoff<\/h4>\n <p><strong>Prompt:<\/strong> \"Add interactive states to dashboard design: (1) Hover tooltips on chart data points, (2) Date range picker in top-right, (3) Filter dropdowns for <span class=\"placeholder\">[dimensions]<\/span>, (4) Loading skeleton states for charts, (5) Empty state UI when no data. Create component library (buttons, cards, inputs, charts). Export developer handoff specs: CSS color variables, spacing tokens, font sizes, SVG icons, and click interactions.\"<\/p>\n <p><strong>Expected Output:<\/strong> Production-ready design with interactive prototype, component library, and full developer documentation for seamless implementation.<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n <section class=\"section\">\n <h3>\ud83d\udca1 6 HITL (Human-in-the-Loop) Refinement Tips<\/h3>\n <div class=\"tips-list\">\n <div class=\"tip-item\">\n <strong>1. User Test with Real Data<\/strong>\n Populate dashboard with actual data (not lorem ipsum numbers). Ask users: \"What's the first thing you notice? What action would you take?\" Adjust hierarchy based on feedback.\n <\/div>\n <div class=\"tip-item\">\n <strong>2. Chart Legibility Check<\/strong>\n View dashboard at actual screen resolution (not zoomed). Can you read axis labels? Are data points distinguishable? If not, increase font sizes, simplify charts, or reduce data density.\n <\/div>\n <div class=\"tip-item\">\n <strong>3. Loading Performance Test<\/strong>\n Simulate slow network. If charts take >3 seconds to load, users perceive the dashboard as broken. Implement skeleton loaders and progressive data loading.\n <\/div>\n <div class=\"tip-item\">\n <strong>4. Colorblind Accessibility Test<\/strong>\n Run designs through colorblind simulators (Coblis, Stark plugin). Red-green combinations fail for 8% of males. Use blue-orange or add patterns\/icons to charts.\n <\/div>\n <div class=\"tip-item\">\n <strong>5. Mobile Reality Check<\/strong>\n Test on actual mobile devices (not just browser resize). Touch targets must be 44\u00d744px minimum. Simplify charts \u2014 desktop complexity breaks mobile UX.\n <\/div>\n <div class=\"tip-item\">\n <strong>6. Metric Definition Clarity<\/strong>\n Add info tooltips (?) next to KPI labels. Users often don't understand metric calculations. One sentence explaining \"MRR = Monthly Recurring Revenue from active subscriptions\" prevents confusion.\n <\/div>\n <\/div>\n <\/section>\n\n <div class=\"stats-footer\">\n <div class=\"stat\">\n <div class=\"stat-value\">7,200+<\/div>\n <div class=\"stat-label\">Words in Prompt<\/div>\n <\/div>\n <div class=\"stat\">\n <div class=\"stat-value\">6<\/div>\n <div class=\"stat-label\">Design Principles<\/div>\n <\/div>\n <div class=\"stat\">\n <div class=\"stat-value\">4<\/div>\n <div class=\"stat-label\">Real-World Examples<\/div>\n <\/div>\n <div class=\"stat\">\n <div class=\"stat-value\">3<\/div>\n <div class=\"stat-label\">Chain Strategy Steps<\/div>\n <\/div>\n <div class=\"stat\">\n <div class=\"stat-value\">6<\/div>\n <div class=\"stat-label\">HITL Tips<\/div>\n <\/div>\n <\/div>\n\n <div class=\"branding\">\n <h4>\ud83c\udf93 AiPro Institute\u2122<\/h4>\n <p>Empowering professionals with world-class AI prompt engineering resources<\/p>\n <p style=\"margin-top: 0.5rem; font-size: 0.85rem; color: #9ca3af;\">\n Part of the Digital UI\/UX & Web Design Collection\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n function copyPrompt() {\n const promptBox = document.querySelector('.prompt-box');\n const textToCopy = promptBox.innerText.replace('\ud83d\udccb Copy Prompt', '').trim();\n \n navigator.clipboard.writeText(textToCopy).then(() => {\n const btn = document.querySelector('.copy-btn');\n const originalText = btn.innerHTML;\n btn.innerHTML = '\u2705 Copied!';\n btn.style.background = '#10b981';\n \n setTimeout(() => {\n btn.innerHTML = originalText;\n btn.style.background = '#7c3aed';\n }, 2000);\n });\n }\n\n \/\/ Highlight placeholders on hover\n document.querySelectorAll('.placeholder').forEach(placeholder => {\n placeholder.addEventListener('mouseenter', function() {\n this.style.backgroundColor = '#fef3c7';\n this.style.padding = '2px 4px';\n this.style.borderRadius = '3px';\n });\n placeholder.addEventListener('mouseleave', function() {\n this.style.backgroundColor = 'transparent';\n this.style.padding = '0';\n });\n });\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Dashboard UI Design – AiPro Institute\u2122 Prompt Library \ud83c\udfa8 AiPro Institute\u2122 Prompt Library Digital UI\/UX & Web Design \ud83d\udcca Dashboard UI Design Data-Driven Interface for Analytics, KPIs & Business Intelligence \ud83d\udcca Skill: Advanced \u23f1\ufe0f Time: 40\u201360 min \ud83d\udcb3 Credit: High \ud83d\udcc1 Format: Figma \/ Sketch \/ HTML\/CSS \ud83d\udee0\ufe0f Tool Compatibility Model-agnostic GPT-4o Claude 3.5 Gemini…<\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[130],"tags":[],"class_list":["post-4574","post","type-post","status-publish","format-standard","hentry","category-digital-ui-ux-web-design"],"acf":[],"_links":{"self":[{"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/posts\/4574","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/comments?post=4574"}],"version-history":[{"count":4,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/posts\/4574\/revisions"}],"predecessor-version":[{"id":4725,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/posts\/4574\/revisions\/4725"}],"wp:attachment":[{"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/media?parent=4574"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/categories?post=4574"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/tags?post=4574"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}