Blog Post

I Vibe-Coded an Analytics Dashboard with Figma Make. 42 Issues.

Quick answer: A Figma Make dashboard prompt produced a full analytics UI in seconds. An OverlayQA audit found 42 issues: 11 accessibility violations, 33 orphan design tokens, and color-only data encoding across every chart and badge. One fix prompt dropped violations to 1. A single design change brought 9 back.

I opened Figma Make and typed one prompt asking for a responsive analytics dashboard with sidebar nav, KPI cards, charts, data table, and calendar. Seconds later: a full dashboard that looked like a real product.

The Charts Are Invisible

Two charts on the dashboard: a line chart and a bar chart. Neither communicates anything to assistive technology. No role="img", no aria-label, no fallback data table. A screen reader hits the chart containers and gets nothing.

Color Is Doing All the Work

Color is the sole differentiator in four places: status badges, priority badges, trend indicators, and chart legends. WCAG 1.4.1 requires that color not be the sole means of conveying information. This dashboard violates it in every data-rich component.

Thirty-Three Tokens Declared, Zero Used

Figma Make generated 33 CSS custom properties with semantic names like --primary and --card-foreground. None are referenced anywhere. Every element uses Tailwind utility classes with hardcoded values. The token layer and utility layer were generated independently with no connection between them.

Eleven Accessibility Violations

The OverlayQA audit found 42 issues total: 8 contrast failures across stat cards, 1 unlabeled notification bell button, 1 missing focus indicator on the search input, and 1 missing skip navigation link. View the full report.

The Experiment: 11 to 1 to 9

Prompt 1: Generate

The original dashboard prompt. Result: 11 violations.

Prompt 2: Fix

A detailed fix prompt addressing all 11 issues. Result: 1 violation. 91% reduction.

Prompt 3: Design Change

Switch to dark theme, replace line chart with donut chart, add notifications panel. Result: 9 violations. The AI rebuilt the color system without contrast fixes and the new chart without text alternatives.

Dashboards Are Harder Than Static Pages

A pricing page has text even without semantic structure. A chart has no text at all. Color on a pricing page is decorative. Color on a dashboard encodes meaning. Dashboard-heavy apps need more verification than marketing pages because their elements carry more semantic weight.

Tools That Help

Same Pattern, Different Tool, Harder Page

Pricing page: 24 to 2 to 11 in Google AI Studio. Dashboard: 11 to 1 to 9 in Figma Make. Different tool, different UI, same result. The first fix is free. Keeping it fixed is the work.

Frequently Asked Questions

How many issues did the vibe-coded dashboard have?

42 issues total: 11 accessibility violations and 33 orphan design tokens.

Did the fix prompt actually work?

Yes. One detailed fix prompt dropped accessibility violations from 11 to 1, a 91% reduction.

Why did the violations come back after the design change?

The dark theme prompt caused the AI to rebuild the color system from scratch, losing the contrast fixes. The new donut chart got the role attribute but no actual alt text.

Are dashboards harder to vibe-code than static pages?

Yes. Dashboards use color to encode meaning, charts have no inherent text content, and data tables require proper semantic structure.

Does the AI tool matter?

Not for this pattern. Google AI Studio and Figma Make both showed the same behavior: generate with violations, fix when told, regress on design changes.

Related Resources