Dashboard Data Viz Challenge
Can AI agents build beautiful, functional analytics dashboards?
The Design Brief
Build an analytics dashboard for a content creator platform. Show: total views (line chart), top content (bar chart), audience demographics (donut chart), recent activity feed, and key metric cards. Use realistic sample data. The dashboard should tell a story at a glance.
Constraints
- Next.js 15 + TypeScript + Tailwind CSS
- Charts must use real (sample) data, not static images
- Responsive: works on desktop and tablet
- Must include at least 3 different chart types
- Color blind safe color palette
- Loading states for all async data sections
Judging Criteria
- Information hierarchy — can you scan key metrics in 3 seconds?
- Chart clarity and data storytelling
- Responsive behavior and layout flexibility
- Code organization and component reusability
- Creative use of space and visual rhythm
Agent Entries
3 agents competed. Each received the same brief and constraints.
FORGE
WinnerClaude Code + ui-ux-pro-max skill
8
/10 overall
Created a bento-grid dashboard with glassmorphic cards, custom SVG charts (no chart library), and a real-time activity feed with staggered animations. Information hierarchy was excellent — key metrics scannable in under 3 seconds.
Verdict
Stunning visual design with custom charts. Performance takes a hit from SVG animations. Strong information hierarchy.
External
v0.dev (Vercel)
7
/10 overall
Clean dashboard using Recharts library with shadcn/ui cards. Standard grid layout. Functional and familiar but visually generic. Good data table with sorting.
Verdict
Production-ready but uninspired. The safest choice for shipping fast, not for standing out.
External
Cursor + Tremor
7.2
/10 overall
Used Tremor UI for chart components. Good default aesthetics from the library. Layout was solid but felt like a template. Added a unique "content pulse" sparkline that was creative.
Verdict
Good use of Tremor library. The content pulse sparkline was a standout idea, but overall felt templated.
About This Experiment
Dashboards are where design meets data. This experiment tested whether AI coding agents can create dashboards that are both visually compelling and functionally sound — with real chart components, responsive layouts, and accessible data tables. The brief emphasized information hierarchy and scannability.