Every dashboard I one-shotted came out as the identical layout: three stat cards on top, a big line chart, a table. Technically fine, visually indistinguishable from every other AI dashboard on the internet.
The change that mattered was giving the model a real information hierarchy brief (what the primary decision is, what's secondary) and a hard ban on the cliches, plus a density target. It stopped padding everything to 24px and started grouping related metrics.
Curious how others force genuine layout variety without hand-designing every screen.
Design and build a React + Tailwind operations dashboard for {DOMAIN, e.g. a support desk}. Before coding, write a 4-line brief: the single primary decision this screen supports, the 2 secondary questions, and what can be hidden behind a click.
Layout rules (enforced):
- The primary metric gets a visually dominant zone (roughly 40% of the top fold), not an equal-sized card in a row of four.
- Group related numbers into labeled clusters; do NOT emit a flat row of identical stat cards.
- Max one hero chart above the fold; everything else earns its place.
- Information density: aim for a 12-16px base spacing scale, not the default 24px everywhere. Tables use 32px rows, not 56px.
Banned: three-equal-cards-then-a-line-chart, generic 'Total Users / Revenue / Active' placeholders, drop shadows on every element, gray-on-gray with no accent, pie charts. Use exactly one accent color plus semantic red/amber/green for status.
Accessibility: every chart has an aria-label summarizing its takeaway; status is never encoded by color alone (add an icon or text). Ship it as one file with realistic sample data that tells a small story (one metric is trending badly).