lulu-dashboard

name	lulu-dashboard
version	1.0.0
description	Design and generate data dashboards with charts, tables, and real-time layout
triggers	["dashboard","analytics dashboard","admin panel","data dashboard","monitoring dashboard"]
category	design
quality_bar	Dashboard is functional-looking, data-rich, and follows dashboard UX best practices
tools	["write_file"]
permissions	["write"]

Data Dashboard

Design clean, informative dashboards for monitoring, analytics, and administration.

Steps

1. Ask discovery questions — What data is being tracked? Who is the audience (exec, operator, analyst)? What's the primary action users take?
2. Choose a layout — Decide on sidebar placement (left or top), widget density, and chart priority.
3. Define KPIs — Select 4-6 key metrics for the top stats bar. Use realistic data ranges.
4. Draft quickly — Build a full dashboard page with sidebar nav, stats grid, charts (CSS-only), and data table.
5. Add chart placeholders — Use CSS bar/line/pie chart simulations. No canvas or SVG chart library needed.
6. Self-critique — Run the Visual Quality Checklist before finalizing.

Output Format

A single self-contained index.html file:

• Inline <style> block
• Sidebar navigation with icons
• Stats grid (4-6 cards) at top
• Chart area with 2-3 simulated charts
• Data table with 5-8 rows of realistic data
• Responsive: sidebar collapses on mobile

Artifact Constraints

• File size: Max 60KB
• Charts: Pure CSS/HTML charts (bar charts using div widths, line charts using flex). No JS chart libraries.
• Data: Use realistic but fake data (sensible numbers, real-looking product names)
• Dark mode: Optional — can provide a .dark class toggle
• Responsive: Sidebar → top nav on mobile. Widgets → single column.

Visual Quality Checklist

• Sidebar shows navigation items with active state highlighting
• Stats cards show: label, value, trend arrow, and percent change
• Charts have axis labels and legends (CSS-only)
• Data table has sortable column headers, striped rows, and pagination placeholder
• Color coding is consistent (green=positive, red=negative, blue=neutral)
• Whitespace is generous — cards/panels have adequate padding
• Typography uses a single monospace or sans-serif family
• No placeholder "Chart.js" or "canvas" elements — everything is visible CSS
• Mobile: sidebar becomes an icon-only rail or hamburger menu
• All interactive elements have hover/active states

Example Prompt

Generate a dashboard for "VendFlow" — a SaaS that tracks vendor performance,
contract expiry, and procurement spend. Show: active vendors count, avg contract
value, spend vs budget, and a table of upcoming renewals. Use Lulu AI design
system with a clean, audit-friendly feel.

References

• See design/templates/dashboard/ for a reference template
• See design/design-systems/lulu-ai/ for design tokens
• See design/prompts/designer.md for the designer persona profile