1import{r as k,j as s}from"./metal-fx-C6GZ_SKA.js";import{f9 as $,cg as A,bM as T,aV as I}from"./index-D1yBc__G.js";import{B as j}from"./BlogBack-CjkMrBR9.js";import{D as N}from"./document-meta-J3yIAzKg.js";import"./motion-BHwmuFpx.js";import"./CaretLeft.es-C4E89nBF.js";const K=`<p class="mt-5 text-[16px] leading-[28px] text-foreground/70">Ask Claude, v0 or Lovable for a dashboard and you get the same screen. A row of stat cards, one chart, a table and a sidebar. It looks clean, and people still call it slop the second they see it.</p><p class="mt-5 text-[16px] leading-[28px] text-foreground/70">Most of the talk about AI slop is about the surface, the purple gradients, the same fonts, the emojis. Nielsen Norman Group, the best known UX research firm, <a class="text-foreground/90 underline decoration-foreground/40 underline-offset-[3px] transition-colors hover:decoration-foreground" href="https://www.nngroup.com/articles/ai-prototyping/" target="_blank" rel="noopener">tested AI prototyping tools in 2025</a> and found the same: without detailed specs they output a similar, generic look, with a lack of visual hierarchy and overused colours. Those are real, and on a dashboard there's a bigger tell. The screen doesn't answer anything. The AI doesn't know what question you open it with, so it shows everything at the same volume and leaves the answer to you.</p><p class="mt-5 text-[16px] leading-[28px] text-foreground/70">I tested this with the design grader I'm building. It checks public design rules, things like contrast, text size, spacing and number formatting, and I ran it on 11 dashboards people built with AI and posted on X, and on 55 real products: the status pages of GitHub, Slack and OpenAI, analytics like Plausible and OpenRouter, and finance apps like Robinhood and Yahoo Finance. The AI built ones passed 70% of the rules on average. The status pages and analytics passed 66 to 69%, the finance apps 54%. By the rules, the AI dashboards are as good as the real ones or better, and I don't think anyone who has used both would agree. The rules check hygiene, and slop is about what the screen is for.</p><p class="mt-5 text-[16px] leading-[28px] text-foreground/70">I say dashboard here, and most of this goes for web apps too. An admin panel, an AI tool, an analytics product, a banking app, they're all screens people open to find something out and then act on it. The line between a dashboard and an app is pretty blurry, so read dashboard as any screen like that.</p><h2 class="mt-12 mb-2 text-[24px] leading-[32px] font-medium tracking-[-0.01em] text-foreground">Tell 1: there's no answer at the top</h2><p class="mt-5 text-[16px] leading-[28px] text-foreground/70">Everyone opens a dashboard with a question. How much do I have and did it go up today. Which of these alerts needs me right now. Is anything broken. Good dashboard design answers it before you've had time to go looking.</p><p class="mt-5 text-[16px] leading-[28px] text-foreground/70">AI dashboards usually open with a row of totals. 12,480 runs today is just a number, and you're left to work out if that's good or bad. 2 agents need you tells you something. Stephen Few, a data visualisation consultant who wrote the book Information Dashboard Design, makes the same point about a sales total shown on its own: <a class="text-foreground/90 underline decoration-foreground/40 underline-offset-[3px] transition-colors hover:decoration-foreground" href="https://www.perceptualedge.com/articles/Whitepapers/Common_Pitfalls.pdf" target="_blank" rel="noopener">compared to what, is this good or bad?</a></p><figure class="tf" id="f1"><div class="tp on"><div class="stage"><div class="stage-in"><div class="w"><div class="shell"><div class="sp2"><div class="pane sl"><span class="tag bad">AI slop</span><div class="sh"><div class="st">Dashboard</div><div class="ss">Welcome back, Alex ð</div></div><div class="scg"><div class="sc"><div class="sct"><span>Runs today</span><span class="ico" style="color:#8b5cf6;background:#8b5cf622"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg></span></div><div class="scv">12,480</div><div class="scd">+18.2% from last month</div></div><div class="sc"><div class="sct"><span>Tokens</span><span class="ico" style="color:#22d3ee;background:#22d3ee22"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"/></svg></span></div><div class="scv">3.2M</div><div class="scd">+9.7% from last month</div></div><div class="sc"><div class="sct"><span>Agents</span><span class="ico" style="color:#f472b6;background:#f472b622"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="8" width="18" height="12" rx="2"/><path d="M12 8V4M8 14h.01M16 14h.01"/></svg></span></div><div class="scv">14</div><div class="scd">+2 from last month</div></div><div class="sc"><div class="sct"><span>Uptime</span><span class="ico" style="color:#facc15;background:#facc1522"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg></span></div><div class="scv">99.9%</div><div class="scd">+0.1% from last month</div></div></div><svg viewBox="0 0 300 60" preserveAspectRatio="none" class="ar"><defs><linearGradient id="g0.7" x1="0" x2="0" y1="0" y2="1"><stop offset="0" stop-color="#8b5cf6" stop-opacity=".45"/><stop offset="1" stop-color="#8b5cf6" stop-opacity="0"/></linearGradient></defs><polygon points="0,60 0.0,44.7 7.7,40.1 15.4,38.1 23.1,40.5 30.8,46.1 38.5,51.7 46.2,54.0 53.8,52.1 61.5,47.9 69.2,44.5 76.9,43.7 84.6,44.7 92.3,45.0 100.0,42.0 107.7,35.6 115.4,28.3 123.1,23.5 130.8,23.4 138.5,26.9 146.2,31.2 153.8,33.2 161.5,32.0 169.2,29.6 176.9,28.8 184.6,31.0 192.3,35.0 200.0,37.6 207.7,36.2 215.4,30.4 223.1,22.7 230.8,16.8 238.5,14.5 246.2,15.4 253.8,16.7 261.5,15.8 269.2,12.5 276.9,8.9 284.6,8.0 292.3,11.2 300.0,17.0 300,60" fill="url(#g0.7)"/><polyline points="0.0,44.7 7.7,40.1 15.4,38.1 23.1,40.5 30.8,46.1 38.5,51.7 46.2,54.0 53.8,52.1 61.5,47.9 69.2,44.5 76.9,43.7 84.6,44.7 92.3,45.0 100.0,42.0 107.7,35.6 115.4,28.3 123.1,23.5 130.8,23.4 138.5,26.9 146.2,31.2 153.8,33.2 161.5,32.0 169.2,29.6 176.9,28.8 184.6,31.0 192.3,35.0 200.0,37.6 207.7,36.2 215.4,30.4 223.1,22.7 230.8,16.8 238.5,14.5 246.2,15.4 253.8,16.7 261.5,15.8 269.2,12.5 276.9,8.9 284.6,8.0 292.3,11.2 300.0,17.0" fill="none" stroke="#a78bfa" stroke-width="2"/><circle cx="0.0" cy="44.7" r="2.2" fill="#a78bfa"/><circle cx="46.2" cy="54.0" r="2.2" fill="#a78bfa"/><circle cx="92.3" cy="45.0" r="2.2" fill="#a78bfa"/><circle cx="138.5" cy="26.9" r="2.2" fill="#a78bfa"/><circle cx="184.6" cy="31.0" r="2.2" fill="#a78bfa"/><circle cx="230.8" cy="16.8" r="2.2" fill="#a78bfa"/><circle cx="276.9" cy="8.9" r="2.2" fill="#a78bfa"/></svg></div><div class="pane gd"><span class="tag good">Good</span><div class="ag" data-ag><div class="grp "><div class="v28" data-h>2 agents need you</div><div class="lb" data-s>waiting 4 min</div></div><div class="grp rg"><div class="rw"><div class="r agr"><div class="col2"><span>Refund over $500</span><span class="lb">Support agent · order #48213</span></div><div class="agb"><span class="b1 sm" data-ok>Approve</span><span class="b2 sm" data-ok>Reject</span></div></div><div class="r agr"><div class="col2"><span>Delete 312 rows</span><span class="lb">Data agent · table leads_old</span></div><div class="agb"><span class="b1 sm" data-ok>Approve</span><span class="b2 sm" data-ok>Reject</span></div></div></div><div class="btns"><span class="b1" data-rev>Review</span></div></div><div class="grp q"><div class="qt"><div><div class="lb">Runs today</div><div>12,480</div></div><div><div class="lb">Agents</div><div>14</div></div></div></div></div></div></div></div></div></div></div>
1<p class="lab mt-3 text-[13px] leading-relaxed text-foreground/45">An AI agent console. Same tell: totals at the top, and the two things that need a person are missing.</p></div></figure><p class="mt-5 text-[16px] leading-[28px] text-foreground/70">The fix starts before any design. Write one sentence: who opens this, what they want to know and what they'll do next. Once that sentence exists every element has a job. It's either the answer or it helps you believe the answer, and the rest can wait in a tooltip, a side panel or a second page.</p><h2 class="mt-12 mb-2 text-[24px] leading-[32px] font-medium tracking-[-0.01em] text-foreground">Tell 2: everything is equally loud</h2><p class="mt-5 text-[16px] leading-[28px] text-foreground/70">AI gives every card the same size and the same weight, and often its own colour, which is what people mean when they say a dashboard looks like a christmas tree.</p><p class="mt-5 text-[16px] leading-[28px] text-foreground/70">Real products get this wrong too. I looked at review queue products, the screens where a person approves or rejects something a system flagged. On the four best ones I found, the decision the screen exists for was the smallest thing on it, and the reason behind a flag was 9px grey text under a bold title. NN/g puts it in one line in their <a class="text-foreground/90 underline decoration-foreground/40 underline-offset-[3px] transition-colors hover:decoration-foreground" href="https://www.nngroup.com/articles/visual-hierarchy-ux-definition/" target="_blank" rel="noopener">guide to visual hierarchy</a>: if everything is contrasted, then nothing stands out.</p><figure class="tf" id="f2"><div class="tp on"><div class="stage"><div class="stage-in"><div class="w"><div class="shell"><div class="sp2"><div class="pane sl"><span class="tag bad">AI slop</span><div class="sh"><div class="st">Dashboard</div><div class="ss">Welcome back, Alex ð</div></div><div class="scg"><div class="sc" style="background:rgba(96,165,250,.12);border-color:#60a5fa55"><div class="sct"><span style="color:#60a5fa">Revenue</span></div><div class="scv" style="color:#60a5fa">$84.2K</div><div class="scd" style="color:#60a5fa">+12% ð</div></div><div class="sc" style="background:rgba(192,132,252,.12);border-color:#c084fc55"><div class="sct"><span style="color:#c084fc">Users</span></div><div class="scv" style="color:#c084fc">3,120</div><div class="scd" style="color:#c084fc">+8% ð¥</div></div><div class="sc" style="background:rgba(251,146,60,.12);border-color:#fb923c55"><div class="sct"><span style="color:#fb923c">Churn</span></div><div class="scv" style="color:#fb923c">2.1%</div><div class="scd" style="color:#fb923c">-0.4% â
</div></div><div class="sc" style="background:rgba(45,212,191,.12);border-color:#2dd4bf55"><div class="sct"><span style="color:#2dd4bf">NPS</span></div><div class="scv" style="color:#2dd4bf">61</div><div class="scd" style="color:#2dd4bf">+3 â</div></div></div><div class="bars"><i style="height:40%;background:#60a5fa"></i><i style="height:65%;background:#c084fc"></i><i style="height:50%;background:#fb923c"></i><i style="height:80%;background:#2dd4bf"></i><i style="height:55%;background:#f472b6"></i><i style="height:90%;background:#facc15"></i><i style="height:70%;background:#60a5fa"></i></div></div><div class="pane gd"><span class="tag good">Good</span><div class="grp "><div class="lb ">Revenue this month</div><div class="v28"><span id="ro2" data-d="$84,210">$84,210</span> <span class="up s" id="ro2b" data-d="+12.4%">+12.4%</span></div><svg data-ro="ro2" data-w="300" data-h="58" data-ys="50.7,49.5,51.4,54.0,53.8,48.7,39.8,31.1,26.4,26.8,30.2,32.9,32.4,29.5,27.1,28.2,33.2,39.2,42.2,39.8,32.9,25.1,20.1,18.9,19.7,19.0,15.0,8.9,4.1,4.0,8.9,16.0,21.0,21.4,17.8,13.4,11.4,12.4,13.9,12.7" data-l="[["$62K", "Sep 1"], ["$62.7K", "Sep 1"], ["$61.6K", "Sep 2"], ["$60K", "Sep 2"], ["$60.1K", "Sep 3"], ["$63.2K", "Sep 3"], ["$68.5K", "Sep 4"], ["$73.7K", "Sep 4"], ["$76.6K", "Sep 5"], ["$76.3K", "Sep 5"], ["$74.3K", "Sep 6"], ["$72.7K", "Sep 6"], ["$72.9K", "Sep 7"], ["$74.7K", "Sep 7"], ["$76.1K", "Sep 8"], ["$75.5K", "Sep 8"], ["$72.5K", "Sep 9"], ["$68.9K", "Sep 9"], ["$67.1K", "Sep 10"], ["$68.5K", "Sep 10"], ["$72.7K", "Sep 11"], ["$77.4K", "Sep 11"], ["$80.4K", "Sep 12"], ["$81K", "Sep 12"], ["$80.6K", "Sep 13"], ["$81K", "Sep 13"], ["$83.4K", "Sep 14"], ["$87.1K", "Sep 14"], ["$89.9K", "Sep 15"], ["$90K", "Sep 15"], ["$87.1K", "Sep 16"], ["$82.8K", "Sep 16"], ["$79.8K", "Sep 17"], ["$79.6K", "Sep 17"], ["$81.7K", "Sep 18"], ["$84.4K", "Sep 18"], ["$85.6K", "Sep 19"], ["$85K", "Sep 19"], ["$84K", "Sep 20"], ["$84.8K", "Sep 20"]]" viewBox="0 0 300 58" class="gc"><line x1="0" x2="266" y1="12" y2="12" class="gl"/><line x1="0" x2="266" y1="46" y2="46" class="gl"/><text x="300" y="15" text-anchor="end">$90K</text><text x="300" y="49" text-anchor="end">$60K</text><polyline points="0.0,50.7 6.8,49.5 13.6,51.4 20.5,54.0 27.3,53.8 34.1,48.7 40.9,39.8 47.7,31.1 54.6,26.4 61.4,26.8 68.2,30.2 75.0,32.9 81.8,32.4 88.7,29.5 95.5,27.1 102.3,28.2 109.1,33.2 115.9,39.2 122.8,42.2 129.6,39.8 136.4,32.9 143.2,25.1 150.1,20.1 156.9,18.9 163.7,19.7 170.5,19.0 177.3,15.0 184.2,8.9 191.0,4.1 197.8,4.0 204.6,8.9 211.4,16.0 218.3,21.0 225.1,21.4 231.9,17.8 238.7,13.4 245.5,11.4 252.4,12.4 259.2,13.9 266.0,12.7" fill="none" stroke="var(--up)" stroke-width="1.5" vector-effect="non-scaling-stroke"/><line class="cur" x1="0" x2="0" y1="0" y2="58"/><circle class="cdot" r="2.6" fill="var(--up)"/></svg></div><div class="grp q"><div class="qt"><div><div class="lb">Users</div><div>3,120</div></div><div><div class="lb">Churn</div><div>2.1%</div></div><div><div class="lb">NPS</div><div>61</div></div></div></div></div></div></div></div></div></div>
1<p class="lab mt-3 text-[13px] leading-relaxed text-foreground/45">Every card has its own colour, the christmas tree. On the right only the answer has colour.</p></div></figure><p class="mt-5 text-[16px] leading-[28px] text-foreground/70">The answer gets the size, the place where the eye lands first and the colour. Everything else gets quieter.</p><h2 class="mt-12 mb-2 text-[24px] leading-[32px] font-medium tracking-[-0.01em] text-foreground">Good dashboard design reads at three speeds</h2><p class="mt-5 text-[16px] leading-[28px] text-foreground/70">I think of every dashboard as read at three speeds. A glance of about 5 seconds to see if anything is wrong. A scan of about 30 seconds to see what and where. And a few minutes of study to understand why and decide what to do. AI dashboards only serve the last one. Everything is there and complete, and it's no help when you only have 5 seconds.</p><p class="mt-5 text-[16px] leading-[28px] text-foreground/70">NN/g <a class="text-foreground/90 underline decoration-foreground
1/40 underline-offset-[3px] transition-colors hover:decoration-foreground" href="https://www.nngroup.com/articles/dashboards-preattentive/" target="_blank" rel="noopener">defines a dashboard</a> as a single page view of at a glance information that users can act on quickly. Ben Shneiderman, a computer scientist at the University of Maryland, put the same order into his well known mantra for data screens: <a class="text-foreground/90 underline decoration-foreground/40 underline-offset-[3px] transition-colors hover:decoration-foreground" href="https://www.cs.umd.edu/~ben/papers/Shneiderman1996eyes.pdf" target="_blank" rel="noopener">overview first, zoom and filter, then details on demand</a>.</p><figure class="tf" id="f3"><div class="tp on"><div class="stage"><div class="stage-in"><div class="w"><div class="shell"><div class="body gd"><div class="lad"><div class="ll k1"><div class="lt"><span class="mk">1</span>Glance</div><div class="lb">5 seconds</div></div><div class="lc k1"><div class="v28">Revenue <span class="dn">down 8%</span></div><div class="lb ">this week · $41,200 against $44,800</div></div><div class="ll k2"><div class="lt"><span class="mk">2</span>Scan</div><div class="lb">30 seconds</div></div><div class="lc k2"><div class="rw"><div class="r"><span>Checkout errors</span><span class="dn">up 4.2%</span></div><div class="r"><span>Mobile signups</span><span class="dn">down 12%</span></div><div class="r"><span>Desktop signups</span><span class="faint">steady</span></div></div></div><div class="ll k3"><div class="lt"><span class="mk">3</span>Study</div><div class="lb">a few minutes</div></div><div class="lc k3"><div class="lb" id="ro3" data-d="Checkout errors, 30 days">Checkout errors, 30 days</div><svg data-ro="ro3" data-w="430" data-h="58" data-ys="42.1,40.4,42.1,47.0,52.1,54.0,50.9,44.2,37.4,33.6,33.1,33.8,32.7,28.6,23.0,19.3,20.1,25.2,31.5,35.3,34.9,31.2,27.5,26.2,27.4,28.6,26.7,20.8,12.7,6.1,4.0,6.4,10.6,13.3,12.8,10.3,8.8,10.5,14.8,18.9" data-l="[["Checkout errors \\u00b7 Sep 1 \\u00b7 3.0%"], ["Checkout errors \\u00b7 Sep 1 \\u00b7 3.1%"], ["Checkout errors \\u00b7 Sep 2 \\u00b7 3.0%"], ["Checkout errors \\u00b7 Sep 2 \\u00b7 2.6%"], ["Checkout errors \\u00b7 Sep 3 \\u00b7 2.1%"], ["Checkout errors \\u00b7 Sep 3 \\u00b7 2.0%"], ["Checkout errors \\u00b7 Sep 4 \\u00b7 2.2%"], ["Checkout errors \\u00b7 Sep 4 \\u00b7 2.8%"], ["Checkout errors \\u00b7 Sep 5 \\u00b7 3.3%"], ["Checkout errors \\u00b7 Sep 5 \\u00b7 3.6%"], ["Checkout errors \\u00b7 Sep 6 \\u00b7 3.7%"], ["Checkout errors \\u00b7 Sep 6 \\u00b7 3.6%"], ["Checkout errors \\u00b7 Sep 7 \\u00b7 3.7%"], ["Checkout errors \\u00b7 Sep 7 \\u00b7 4.0%"], ["Checkout errors \\u00b7 Sep 8 \\u00b7 4.5%"], ["Checkout errors \\u00b7 Sep 8 \\u00b7 4.8%"], ["Checkout errors \\u00b7 Sep 9 \\u00b7 4.7%"], ["Checkout errors \\u00b7 Sep 9 \\u00b7 4.3%"], ["Checkout errors \\u00b7 Sep 10 \\u00b7 3.8%"], ["Checkout errors \\u00b7 Sep 10 \\u00b7 3.5%"], ["Checkout errors \\u00b7 Sep 11 \\u00b7 3.5%"], ["Checkout errors \\u00b7 Sep 11 \\u00b7 3.8%"], ["Checkout errors \\u00b7 Sep 12 \\u00b7 4.1%"], ["Checkout errors \\u00b7 Sep 12 \\u00b7 4.2%"], ["Checkout errors \\u00b7 Sep 13 \\u00b7 4.1%"], ["Checkout errors \\u00b7 Sep 13 \\u00b7 4.0%"], ["Checkout errors \\u00b7 Sep 14 \\u00b7 4.2%"], ["Checkout errors \\u00b7 Sep 14 \\u00b7 4.7%"], ["Checkout errors \\u00b7 Sep 15 \\u00b7 5.3%"], ["Checkout errors \\u00b7 Sep 15 \\u00b7 5.8%"], ["Checkout errors \\u00b7 Sep 16 \\u00b7 6.0%"], ["Checkout errors \\u00b7 Sep 16 \\u00b7 5.8%"], ["Checkout errors \\u00b7 Sep 17 \\u00b7 5.5%"], ["Checkout errors \\u00b7 Sep 17 \\u00b7 5.3%"], ["Checkout errors \\u00b7 Sep 18 \\u00b7 5.3%"], ["Checkout errors \\u00b7 Sep 18 \\u00b7 5.5%"], ["Checkout errors \\u00b7 Sep 19 \\u00b7 5.6%"], ["Checkout errors \\u00b7 Sep 19 \\u00b7 5.5%"], ["Checkout errors \\u00b7 Sep 20 \\u00b7 5.1%"], ["Checkout errors \\u00b7 Sep 20 \\u00b7 4.8%"]]" viewBox="0 0 430 58" class="gc"><line x1="0" x2="396" y1="12" y2="12" class="gl"/><line x1="0" x2="396" y1="46" y2="46" class="gl"/><text x="430" y="15" text-anchor="end">6%</text><text x="430" y="49" text-anchor="end">2%</text><polyline points="0.0,42.1 10.2,40.4 20.3,42.1 30.5,47.0 40.6,52.1 50.8,54.0 60.9,50.9 71.1,44.2 81.2,37.4 9
11.4,33.6 101.5,33.1 111.7,33.8 121.8,32.7 132.0,28.6 142.2,23.0 152.3,19.3 162.5,20.1 172.6,25.2 182.8,31.5 192.9,35.3 203.1,34.9 213.2,31.2 223.4,27.5 233.5,26.2 243.7,27.4 253.8,28.6 264.0,26.7 274.2,20.8 284.3,12.7 294.5,6.1 304.6,4.0 314.8,6.4 324.9,10.6 335.1,13.3 345.2,12.8 355.4,10.3 365.5,8.8 375.7,10.5 385.8,14.8 396.0,18.9" fill="none" stroke="rgba(255,255,255,.85)" stroke-width="1.5" vector-effect="non-scaling-stroke"/><line class="cur" x1="0" x2="0" y1="0" y2="58"/><circle class="cdot" r="2.6" fill="rgba(255,255,255,.85)"/></svg></div></div></div></div></div></div></div><p class="lab mt-3 text-[13px] leading-relaxed text-foreground/45">One screen read three ways. The glance gets the answer, the scan gets where, the study gets why.</p></div></figure><h2 class="mt-12 mb-2 text-[24px] leading-[32px] font-medium tracking-[-0.01em] text-foreground">Tell 3: it's never calm</h2><p class="mt-5 text-[16px] leading-[28px] text-foreground/70">A status screen that always has something yellow on it teaches you to ignore yellow, in my experience within a week or so. NN/g saw the same thing in a <a class="text-foreground/90 underline decoration-foreground/40 underline-offset-[3px] transition-colors hover:decoration-foreground" href="https://www.nngroup.com/articles/smart-home-notifications/" target="_blank" rel="noopener">2026 study of smart home alerts</a>: too many alerts cause notification fatigue, people start ignoring them and miss the one that matters. Their fix is that an alert should expire once the issue is resolved.</p><p class="mt-5 text-[16px] leading-[28px] text-foreground/70">So when nothing needs you, the screen should look almost empty and say that out loud. The detail stays one click away. NN/g calls that <a class="text-foreground/90 underline decoration-foreground/40 underline-offset-[3px] transition-colors hover:decoration-foreground" href="https://www.nngroup.com/articles/progressive-disclosure/" target="_blank" rel="noopener">progressive disclosure</a>: show the few things that matter first and the rest when someone asks for it.</p><figure class="tf" id="f4"><div class="tp on"><div class="stage"><div class="stage-in"><div class="w"><div class="shell"><div class="body gd"><div class="calm2" data-calm><div class="row1"><span class="mk">1</span><div class="v28">Nothing needs you</div></div><div class="row1"><span class="mk">2</span><div class="lb ">14 services · checked 12 s ago</div></div><div class="row1"><span class="mk">3</span><div class="btns"><span class="b2" data-all>Show all 14</span></div></div><div class="all"><div class="r"><span>API</span><span class="faint">normal</span></div><div class="r"><span>Auth</span><span class="faint">normal</span></div><div class="r"><span>Billing</span><span class="faint">normal</span></div><div class="r"><span>Search</span><span class="faint">normal</span></div><div class="r"><span>Email</span><span class="faint">normal</span></div><div class="r"><span>Webhooks</span><span class="faint">normal</span></div><div class="r"><span>Storage</span><span class="faint">normal</span></div><div class="r"><span>Queue</span><span class="faint">normal</span></div><div class="r"><span>CDN</span><span class="faint">normal</span></div><div class="r"><span>DNS</span><span class="faint">normal</span></div><div class="r"><span>Analytics</span><span class="faint">normal</span></div><div class="r"><span>Exports</span><span class="faint">normal</span></div><div class="r"><span>Imports</span><span class="faint">normal</span></div><div class="r"><span>Admin</span><span class="faint">normal</span></div></div></div><div class="legend"><span><span class="mk">1</span>Says it is fine, out loud</span><span><span class="mk">2</span>Says when it checked</span><span><span class="mk">3</span>The detail, one click away</span></div></div></div></div></div></div><p class="lab mt-3 text-[13px] leading-relaxed text-foreground/45">A calm screen still answers. It says it is fine, when it last looked, and where the detail is.</p></div></figure><h2 class="mt-12 mb-2 text-[24px] leading-[32px] font-medium tracking-[-0.01em] text-foreground">Tell 4: a 0 that lies</h2>
1<p class="mt-5 text-[16px] leading-[28px] text-foreground/70">The worst thing a dashboard can do is give a wrong answer calmly. A day with $0 in revenue and a server that didn't answer look exactly the same if the screen shows 0 for both. The first of NN/g's <a class="text-foreground/90 underline decoration-foreground/40 underline-offset-[3px] transition-colors hover:decoration-foreground" href="https://www.nngroup.com/articles/ten-usability-heuristics/" target="_blank" rel="noopener">10 usability heuristics</a> is visibility of system status: the design should always keep people informed about what is going on. A calm zero does the opposite. My own board once told me 30 of 68 pages were indexed when the truth was 64 of 67, because it was counting the wrong thing.</p><p class="mt-5 text-[16px] leading-[28px] text-foreground/70">So show when data didn't load, and show how old it is. A feed that stopped 40 seconds ago still looks live unless the screen says so. <a class="text-foreground/90 underline decoration-foreground
1/40 underline-offset-[3px] transition-colors hover:decoration-foreground" href="https://www.datawrapper.de/academy/my-empty-cells-get-displayed-as-zeros-in-tooltips" target="_blank" rel="noopener">Datawrapper</a>, the chart tool newsrooms use, warns about the same thing: an empty cell and a zero mean different things.</p><figure class="tf" id="f5"><div class="tp on"><div class="stage"><div class="stage-in"><div class="w"><div class="shell"><div class="sp2"><div class="pane sl"><span class="tag bad">AI slop</span><div class="sh"><div class="st">Dashboard</div><div class="ss">Welcome back, Alex ð</div></div><div class="scg"><div class="sc"><div class="sct"><span>Revenue today</span><span class="ico" style="color:#8b5cf6;background:#8b5cf622"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 1v22M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg></span></div><div class="scv">$0.00</div><div class="scd">+0.00% from last month</div></div><div class="sc"><div class="sct"><span>Orders today</span><span class="ico" style="color:#22d3ee;background:#22d3ee22"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.7 13.4a2 2 0 0 0 2 1.6h9.7a2 2 0 0 0 2-1.6L23 6H6"/></svg></span></div><div class="scv">0</div><div class="scd">+0.00% from last month</div></div></div><svg viewBox="0 0 300 60" preserveAspectRatio="none" class="ar"><defs><linearGradient id="g5.0" x1="0" x2="0" y1="0" y2="1"><stop offset="0" stop-color="#8b5cf6" stop-opacity=".45"/><stop offset="1" stop-color="#8b5cf6" stop-opacity="0"/></linearGradient></defs><polygon points="0,60 0.0,51.8 7.7,54.0 15.4,51.8 23.1,46.5 30.8,41.4 38.5,38.8 46.2,38.8 53.8,39.1 61.5,37.2 69.2,32.3 76.9,26.3 84.6,22.2 92.3,22.5 100.0,26.7 107.7,32.0 115.4,35.1 123.1,34.7 130.8,32.0 138.5,29.8 146.2,30.0 153.8,32.2 161.5,33.9 169.2,32.3 176.9,26.7 184.6,19.1 192.3,12.9 200.0,10.6 207.7,12.1 215.4,14.9 223.1,16.0 230.8,14.6 238.5,12.0 246.2,10.9 253.8,13.2 261.5,18.1 269.2,22.5 276.9,23.4 284.6,19.9 292.3,13.7 300.0,8.0 300,60" fill="url(#g5.0)"/><polyline points="0.0,51.8 7.7,54.0 15.4,51.8 23.1,46.5 30.8,41.4 38.5,38.8 46.2,38.8 53.8,39.1 61.5,37.2 69.2,32.3 76.9,26.3 84.6,22.2 92.3,22.5 100.0,26.7 107.7,32.0 115.4,35.1 123.1,34.7 130.8,32.0 138.5,29.8 146.2,30.0 153.8,32.2 161.5,33.9 169.2,32.3 176.9,26.7 184.6,19.1 192.3,12.9 200.0,10.6 207.7,12.1 215.4,14.9 223.1,16.0 230.8,14.6 238.5,12.0 246.2,10.9 253.8,13.2 261.5,18.1 269.2,22.5 276.9,23.4 284.6,19.9 292.3,13.7 300.0,8.0" fill="none" stroke="#a78bfa" stroke-width="2"/><circle cx="0.0" cy="51.8" r="2.2" fill="#a78bfa"/><circle cx="46.2" cy="38.8" r="2.2" fill="#a78bfa"/><circle cx="92.3" cy="22.5" r="2.2" fill="#a78bfa"/><circle cx="138.5" cy="29.8" r="2.2" fill="#a78bfa"/><circle cx="184.6" cy="19.1" r="2.2" fill="#a78bfa"/><circle cx="230.8" cy="14.6" r="2.2" fill="#a78bfa"/><circle cx="276.9" cy="23.4" r="2.2" fill="#a78bfa"/></svg></div><div class="pane gd"><span class="tag good">Good</span><div class="grp "><div data-rt><div class="lb ">Revenue today</div><div class="v28 faint" data-v>Couldn't load</div><div class="lb" data-m>last known $3,420 at 14:02 · the server did not answer</div><div class="btns"><span class="b1" data-retry>Retry</span></div></div></div></div></div></div></div></div></div><p class="lab mt-3 text-[13px] leading-relaxed text-foreground/45">The same failed request. Left shows a calm zero, right says what happened.</p></div></figure><h2 class="mt-12 mb-2 text-[24px] leading-[32px] font-medium tracking-[-0.01em] text-foreground">How to fix it</h2><p class="mt-5 text-[16px] leading-[28px] text-foreground/70">Every one of these tells comes from the same gap. The AI doesn't know what the screen is for or who is reading it, so it guesses. Part 2 is about telling it, with a prompt you can copy: <a class="text-foreground/90 underline decoration-foreground/40 underline-offset-[3px] transition-colors hover:decoration-foreground" href="/blog/claude-dashboard-design-prompt">How to get Claude to design a good dashboard</a>.</p>
1`,E=`<p class="mt-5 text-[16px] leading-[28px] text-foreground/70">In <a class="text-foreground/90 underline decoration-foreground/40 underline-offset-[3px] transition-colors hover:decoration-foreground" href="/blog/good-dashboard-design-vs-ai-slop">part 1</a> I went through the tells that make an AI dashboard look like slop: no answer at the top, everything equally loud, a screen that's never calm and a 0 that lies. They all come from one thing. Claude, v0 or Lovable doesn't know what the screen is for or who will read it, so it guesses. You have to tell it two things, the answer and the reader.</p><p class="mt-5 text-[16px] leading-[28px] text-foreground/70">This works with any model, and for web apps as much as dashboards.</p><h2 class="mt-12 mb-2 text-[24px] leading-[32px] font-medium tracking-[-0.01em] text-foreground">Tell it the answer</h2><p class="mt-5 text-[16px] leading-[28px] text-foreground/70">Start with one sentence: who opens the screen, what they want to know and what they do next. For example, a shop owner opens this to see how much they sold today and whether any orders need shipping, and then ships them. That sentence decides what goes at the top, and the AI can't guess it for you.</p><h2 class="mt-12 mb-2 text-[24px] leading-[32px] font-medium tracking-[-0.01em] text-foreground">Tell it who's reading</h2><p class="mt-5 text-[16px] leading-[28px] text-foreground/70">Give the same dashboard to an analyst who has lived in it for years and to a founder who opens it once a week, and one of them will get it in a second while the other one stares at it. The screen can be exactly right for the first person and still be wrong for the second, and a lot of the arguments about whether a dashboard is good are really about who it was made for.</p><p class="mt-5 text-[16px] leading-[28px] text-foreground/70">So before anything else it's worth asking how much the people using it know about the thing they are looking at. The less they know, the simpler the screen and the numbers have to be, so they don't have to think and guess. An expert already knows where to look, they read several numbers as one pattern and they want everything in front of them. Someone with less knowledge needs the screen to tell them where to look first.</p><p class="mt-5 text-[16px] leading-[28px] text-foreground/70">This has been measured too. In a <a class="text-foreground/90 underline decoration-foreground/40 underline-offset-[3px] transition-colors hover:decoration-foreground" href="https://dl.acm.org/doi/10.1145/22339.22383" target="_blank" rel="noopener">1986 NASA study</a>, researchers redesigned dense Space Shuttle displays into cleaner, grouped ones. People without expertise got much faster and more accurate. Experts made fewer errors but weren't any faster, because they already knew where to look. Stephen Few, who wrote the book Information Dashboard Design, put it simply: <a class="text-foreground/90 underline decoration-foreground/40 underline-offset-[3px] transition-colors hover:decoration-foreground" href="http://www.perceptualedge.com/articles/Whitepapers/Dashboard_Design.pdf" target="_blank" rel="noopener">where the lines are drawn depends entirely on the audience</a>.</p><p class="mt-5 text-[16px] leading-[28px] text-foreground/70">You can see it in tools used by both kinds of people. Google Analytics has standard reports for everyone and <a class="text-foreground/90 underline decoration-foreground/40 underline-offset-[3px] transition-colors hover:decoration-foreground" href="https://support.google.com/analytics/answer/7579450" target="_blank" rel="noopener">Explorations</a>, which Google describes as advanced techniques that go beyond the standard reports. Nielsen Norman Group's seventh usability heuristic, <a class="text-foreground/90 underline decoration-foreground/40 underline-offset-[3px] transition-colors hover:decoration-foreground" href="https://www.nngroup.com/articles/flexibility-efficiency-heuristic/" target="_blank" rel="noopener">flexibility and efficiency of use</a>, says the same in design terms: shortcuts the novice never sees speed up the expert, so one product can serve both.</p><figure class="tf " id="f6"><div class="tp on"><div class="stage"><div class="stage-in"><div class="w"><div class="shell"><div class="sp2"><div class="pane gd"><span class="tag neu">New to it</span><div class="grp "><div class="lb ">Sales today</div><div class="v28"><span id="ro4" data-d="$3,420">$3,420</span> <span class="up s" id="ro4b" data-d="+12% vs last Tuesday">+12% vs last Tuesday</span></div><svg data-ro="ro4" data-w="300" data-h="58" data-ys="54.0,51.8,46.2,39.6,35.1,34.0,34.9,35.4,33.7,30.1,27.1,27.1,30.8,36.1,40.1,40.3,37.1,32.8,30.0,29.6,30.3,29.5,25.7,19.7,14.1,11.9,13.7,18.0,21.6,22.5,20.8,18.7,
118.6,20.9,23.8,24.4,21.2,14.8,8.1,4.0" data-l="[["$2,000", "08:00"], ["$2,061", "08:18"], ["$2,223", "08:36"], ["$2,409", "08:54"], ["$2,536", "09:12"], ["$2,569", "09:30"], ["$2,541", "09:48"], ["$2,527", "10:06"], ["$2,577", "10:24"], ["$2,678", "10:42"], ["$2,764", "11:00"], ["$2,764", "11:18"], ["$2,660", "11:36"], ["$2,507", "11:54"], ["$2,396", "12:12"], ["$2,388", "12:30"], ["$2,480", "12:48"], ["$2,603", "13:06"], ["$2,683", "13:24"], ["$2,693", "13:42"], ["$2,673", "14:00"], ["$2,695", "14:18"], ["$2,803", "14:36"], ["$2,975", "14:54"], ["$3,132", "15:12"], ["$3,196", "15:30"], ["$3,143", "15:48"], ["$3,022", "16:06"], ["$2,919", "16:24"], ["$2,895", "16:42"], ["$2,943", "17:00"], ["$3,001", "17:18"], ["$3,006", "17:36"], ["$2,941", "17:54"], ["$2,859", "18:12"], ["$2,840", "18:30"], ["$2,933", "18:48"], ["$3,114", "19:06"], ["$3,304", "19:24"], ["$3,420", "19:42"]]" viewBox="0 0 300 58" class="gc"><line x1="0" x2="266" y1="12" y2="12" class="gl"/><line x1="0" x2="266" y1="46" y2="46" class="gl"/><text x="300" y="15" text-anchor="end">$4K</text><text x="300" y="49" text-anchor="end">$2K</text><polyline points="0.0,54.0 6.8,51.8 13.6,46.2 20.5,39.6 27.3,35.1 34.1,34.0 40.9,34.9 47.7,35.4 54.6,33.7 61.4,30.1 68.2,27.1 75.0,27.1 81.8,30.8 88.7,36.1 95.5,40.1 102.3,40.3 109.1,37.1 115.9,32.8 122.8,30.0 129.6,29.6 136.4,30.3 143.2,29.5 150.1,25.7 156.9,19.7 163.7,14.1 170.5,11.9 177.3,13.7 184.2,18.0 191.0,21.6 197.8,22.5 204.6,20.8 211.4,18.7 218.3,18.6 225.1,20.9 231.9,23.8 238.7,24.4 245.5,21.2 252.4,14.8 259.2,8.1 266.0,4.0" fill="none" stroke="var(--up)" stroke-width="1.5" vector-effect="non-scaling-stroke"/><line class="cur" x1="0" x2="0" y1="0" y2="58"/><circle class="cdot" r="2.6" fill="var(--up)"/></svg></div><div class="grp "><div data-ship><div class="v17" data-sh>3 orders to ship</div><div class="lb" data-ss>oldest from 09:12</div><div class="btns"><span class="b1" data-go>Ship them</span></div></div></div></div><div class="pane gd"><span class="tag neu">Expert</span><div class="grp "><div class="g4"><div><div class="lb">Sessions</div><div>8,214 <span class="up xs">+6%</span></div></div><div><div class="lb">Conv.</div><div>2.9% <span class="up xs">+0.2</span></div></div><div><div class="lb">Avg order</div><div>$41.20 <span class="dn xs">-3%</span></div></div><div><div class="lb">Refunds</div><div>1.2% <span class="dn xs">+0.1</span></div></div></div></div><div class="grp "><div class="xt"><div class="xr h"><span>Channel</span><span>Revenue</span><span>Conv.</span><span>vs last wk</span></div><div class="xr"><span>Search</span><span>$1,480</span><span>3.4%</span><span class="up">+8%</span></div><div class="xr"><span>Direct</span><span>$920</span><span>2.6%</span><span class="up">+2%</span></div><div class="xr"><span>Social</span><span>$610</span><span>1.9%</span><span class="dn">-6%</span></div><div class="xr"><span>Email</span><span>$410</span><span>4.1%</span><span class="up">+14%</span></div></div></div><svg viewBox="0 0 300 44" class="gc"><line x1="0" x2="266" y1="9" y2="9" class="gl"/><line x1="0" x2="266" y1="35" y2="35" class="gl"/><text x="300" y="12" text-anchor="end">$4K</text><text x="300" y="38" text-anchor="end">$2K</text><polyline points="0.0,40.0 6.8,38.4 13.6,34.4 20.5,29.6 27.3,26.4 34.1,25.6 40.9,26.3 47.7,26.6 54.6,25.4 61.4,22.8 68.2,20.6 75.0,20.6 81.8,23.3 88.7,27.1 95.5,30.0 102.3,30.2 109.1,27.8 115.9,24.7 122.8,22.7 129.6,22.4 136.4,22.9 143.2,22.4 150.1,19.7 156.9,15.3 163.7,11.3 170.5,9.7 177.3,11.0 184.2,14.1 191.0,16.7 197.8,17.3 204.6,16.1 211.4,14.6 218.3,14.5 225.1,16.1 231.9,18.2 238.7,18.7 245.5,16.4 252.4,11.7 259.2,6.9 266.0,4.0" fill="none" stroke="var(--up)" stroke-width="1.5" vector-effect="non-scaling-stroke"/></svg></div></div></div></div></div></div>
1<p class="lab mt-3 text-[13px] leading-relaxed text-foreground/45">The same shop for two readers. Someone new gets one answer and what to do next. An expert gets everything at once, with quieter accents.</p></div></figure><h2 class="mt-12 mb-2 text-[24px] leading-[32px] font-medium tracking-[-0.01em] text-foreground">The answer gets the accent</h2><p class="mt-5 text-[16px] leading-[28px] text-foreground/70">For people who know less, the answer has to be impossible to miss. You make it big, you put it where the eye lands first and you give it the colour, you don't hide it in a small tag or in the 6th column of a table. In a shop dashboard that usually means today's sales is the biggest thing on the page, the change under it carries the colour, and the chart under that is there so you trust the number.</p><p class="mt-5 text-[16px] leading-[28px] text-foreground/70">The metrics that matter less still belong there, they can explain the answer or change it, they just get less weight, smaller type and grey where the answer gets colour. That's the christmas tree from part 1. NN/g's <a class="text-foreground/90 underline decoration-foreground/40 underline-offset-[3px] transition-colors hover:decoration-foreground" href="https://www.nngroup.com/articles/visual-hierarchy-ux-definition/" target="_blank" rel="noopener">guide to visual hierarchy</a> says to use bright colours for the important items and warns that when too many colours of similar strength are used, people lose the sense of what matters most.</p><h2 class="mt-12 mb-2 text-[24px] leading-[32px] font-medium tracking-[-0.01em] text-foreground">Experts can take more</h2><p class="mt-5 text-[16px] leading-[28px] text-foreground/70">For an expert screen you can turn this down. The accent can be quieter and the density higher, because they know what they are looking for and they want it all in view. One plain table with every number in it is fine for the person who built it and uses it every day. The same table is hard for anyone else, and even for its own author after a week away, when they come back hunting for the row they used to know by heart.</p><p class="mt-5 text-[16px] leading-[28px] text-foreground/70">A common fix for AI dashboards is more density, tighter spacing and more on the screen. That's right for an expert screen and wrong for a newcomer, so it depends on who you told the AI is reading.</p><p class="mt-5 text-[16px] leading-[28px] text-foreground/70">Either way a dashboard is a set of clues for where to look. A big number or a big chart is a clue for your eyes, and colour is one of the strongest ones, which is why you can only spend it on a couple of things. How many clues you leave depends on how much the person already knows, a newcomer needs the path laid out and an expert needs it to stay out of the way.</p><h2 class="mt-12 mb-2 text-[24px] leading-[32px] font-medium tracking-[-0.01em] text-foreground">The prompt</h2><p class="mt-5 text-[16px] leading-[28px] text-foreground/70">Paste this before you ask for the screen and fill in the brackets.</p><div class="prompt"><button type="button">Copy</button><div>Before you design anything, write one line and show it to me: [who] opens this screen to find out [what], and then [what they do next]. 2The reader is [new to this / an expert who uses it every day]. 3 41. Put the answer to that question at the top as a condition, like "3 orders waiting to ship", and make it the biggest thing on the screen. 52. Use colour only for the answer and for up or down. Everything else stays white or grey. 63. Let one block stand out. Supporting numbers are smaller and quieter. 74. When nothing needs attention, say so and leave the screen mostly empty. 85. Never show 0 for data that didn't load. Show that it failed, and show how old the last update is. 96. Put detail in tooltips, side panels or a second page. 107. For a new reader: one answer, a few numbers, one chart. For an expert: denser, quieter accents, everything visible at once.</div></div><h2 class="mt-12 mb-2 text-[24px] leading-[32px] font-medium tracking-[-0.01em] text-foreground">Or put it in a skill</h2>
10<p class="mt-5 text-[16px] leading-[28px] text-foreground/70">A Claude skill is a set of instructions that <a class="text-foreground/90 underline decoration-foreground/40 underline-offset-[3px] transition-colors hover:decoration-foreground" href="https://docs.claude.com/en/docs/agents-and-tools/agent-skills/overview" target="_blank" rel="noopener">Claude uses automatically when relevant</a>, so you don't paste the prompt every time. Most of the UI design skills I've seen are about landing pages. For dashboards you can write your own from the prompt above, or use mine: the <a class="text-foreground/90 underline decoration-foreground/40 underline-offset-[3px] transition-colors hover:decoration-foreground" href="https://ssych.com/library/pricing">Style kit</a> is my dashboard and page rules packed into a Claude plugin.</p><h2 class="mt-12 mb-2 text-[24px] leading-[32px] font-medium tracking-[-0.01em] text-foreground">Check it in five seconds</h2><p class="mt-5 text-[16px] leading-[28px] text-foreground/70">A simple test is the five second test. Show the screen to someone close to the real user for 5 seconds and ask what they saw. If they say the answer, it works. If they name the loudest thing on the screen and that thing isn't the answer, the accent is in the wrong place. And if the right answer only comes from someone who already knows the product, the screen is built for experts, which is fine as long as experts are who will use it.</p><figure class="tf ftf" id="f7"><div class="tp on"><div class="stage"><div class="stage-in"><div class="w"><div class="shell"><div class="ft" data-ft><div class="fs fs-a"><div class="sl fsw"><div class="sh"><div class="st">Dashboard</div><div class="ss">Welcome back, Alex ð</div></div><div class="scg"><div class="sc"><div class="sct"><span>Revenue today</span><span class="ico" style="color:#8b5cf6;background:#8b5cf622"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 1v22M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg></span></div><div class="scv">$3,420</div><div class="scd">+12.0% from last month</div></div><div class="sc"><div class="sct"><span>Orders today</span><span class="ico" style="color:#22d3ee;background:#22d3ee22"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.7 13.4a2 2 0 0 0 2 1.6h9.7a2 2 0 0 0 2-1.6L23 6H6"/></svg></span></div><div class="scv">86</div><div class="scd">+4.1% from last month</div></div><div class="sc"><div class="sct"><span>Customers</span><span class="ico" style="color:#f472b6;background:#f472b622"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/></svg></span></div><div class="scv">1,284</div><div class="scd">+2.3% from last month</div></div><div class="sc"><div class="sct"><span>Uptime</span><span class="ico" style="color:#facc15;background:#facc1522"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg></span></div><div class="scv">99.9%</div><div class="scd">+0.1% from last month</div></div></div><svg viewBox="0 0 300 60" preserveAspectRatio="none" class="ar"><defs><linearGradient id="g5.5" x1="0" x2="0" y1="0" y2="1"><stop offset="0" stop-color="#8b5cf6" stop-opacity=".45"/><stop offset="1" stop-color="#8b5cf6" stop-opacity="0"/></linearGradient></defs><polygon points="0,60 0.0,54.0 7.7,52.0 15.4,46.8 23.1,40.7 30.8,36.6 38.5,35.6 46.2,36.5 53.8,36.9 61.5,35.3 69.2,32.0 76.9,29.2 84.6,29.3 92.3,32.6 100.0,37.6 107.7,41.2 115.4,41.4 123.1,38.5 130.8,34.5 138.5,31.9 146.2,31.6 153.8,32.2 161.5,31.5 169.2,28.0 176.9,22.4 184.6,17.3 192.3,15.2 200.0,17.0 207.7,20.9 215.4,24.2 223.1,25.0 230.8,23.5 238.5,21.6 246.2,21.4 253.8,23.5 261.5,26.2 269.2,26.8 276.9,23.8 284.6,17.9 292.3,11.7 300.0,8.0 300,60" fill="url(#g5.5)"/><polyline points="0.0,54.0 7.7,52.0 15.4,46.8 23.1,40.7 30.8,36.6 38.5,35.6 46.2,36.5 53.8,36.9 61.5,35.3 69.2,32.0 76.9,29.2 84.6,29.3 92.3,32.6 100.0,37.6 107.7,41.2 115.4,41.4 123.1,38.5 130.8,34.5 138.5,31.9 146.2,31.6 153.8,32.2 161.5,31.5 169.2,28.0 176.9,22.4 184.6,17.3 192.3,15.2 200.0,17.0 207.7,20.9 215.4,24.2 223.1,25.0 230.8,23.5 238.5,21.6 246.2,21.4 253.8,23.5 261.5,26.2 269.2,26.8 276.9,23.8 284.6,17.9 292.3,11.7 300.0,8.0" fill="none" stroke="#a78bfa" stroke-width="2"/><circle cx="0.0" cy="54.0" r="2.2" fill="#a78bfa"/><circle cx="46.2" cy="36.5" r="2.2" fill="#a78bfa"/><circle cx="92.3" cy="32.6" r="2.2" fill="#a78bfa"/><circle cx="138.5" cy="31.9" r="2.2" fill="#a78bfa"/><circle cx="184.6" cy="17.3" r="2.2" fill="#a78bfa"/><circle cx="230.8" cy="23.5" r="2.2" fill="#a78bfa"/><circle cx="276.9" cy="23.8" r="2.2" fill="#a78bfa"/></svg></div></div><div class="fs fs-b"><div class="gd fsw"><div class="grp "><div class="lb ">Sales today</div><div class="v28">$3,420 <span class="up s">+12% vs last Tuesday</span></div><svg viewBox="0 0 600 58" class="gc"><line x1="0" x2="566" y1="12" y2="12" class="gl"/><line x1="0" x2="566" y1="46" y2="46" class="gl"/><text x="600" y="15" text-anchor="end">$4K</text><text x="600" y="49" text-anchor="end">$2K</text><polyline points="0.0,54.0 14.5,51.8 29.0,46.2 43.5,39.6 58.1,35.1 72.6,34.0 87.1,34.9 101.6,35.4 116.1,33.7 130.6,30.1 145.1,27.1 159.6,27.1 174.2,30.8 188.7,36.1 203.2,40.1 217.7,40.3 232.2,37.1 246.7,32.8 261.2,30.0 275.7,29.6 290.3,30.3 304.8,29.5 319.3,25.7 333.8,19.7 348.3,14.1 362.8,11.9 377.3,13.7 391.8,18.0 406.4,21.6 420.9,22.5 435.4,20.8 449.9,18.7 464.4,18.6 478.9,20.9 493.4,23.8 507.9,24.4 522.5,21.2 537.0,14.8 551.5,8.1 566.0,4.0" fill="none" stroke="var(--up)" stroke-width="1.5" vector-effect="non-scaling-stroke"/></svg></div><div class="grp "><div class="v17">3 orders to ship</div><div class="lb ">oldest from 09:12</div></div><div class="grp q"><div class="qt"><div><div class="lb">Visitors</div><div>2,960</div></div><div><div class="lb">Conv.</div><div>2.9%</div></div></div></div></div></div><div class="fo fo-start"><div class="v17">The five second test</div><div class="lb">Look at the screen for 5 seconds, then say what you saw.</div><div class="btns"><span class="b1" data-start>Start</span></div></div><span class="ftimer" data-t>5</span><div class="fo fo-q"><div class="v17">What did you see?</div><div class="fq"><span class="b2" data-a="ok">My sales went up today</span><span class="b2" data-a="loud">A purple chart</span><span class="b2" data-a="loud">
10Four colourful cards</span></div><div class="lb fr" data-r></div><div class="btns"><span class="b1" data-next></span></div></div></div></div></div></div></div><p class="lab mt-3 text-[13px] leading-relaxed text-foreground/45">Try it: five seconds on the AI version, then on the good one. If you name the loudest thing and it isn't the answer, the accent is in the wrong place.</p></div></figure><p class="mt-5 text-[16px] leading-[28px] text-foreground/70">There is always more data than a screen can hold, so the work is knowing who is reading it, deciding what their answer is and letting everything else make room for it.</p>`;function M(v){const l=[],c=(e,t)=>l.push(window.setTimeout(e,t)),g=[],i=(e,t,o)=>{e.addEventListener(t,o),g.push(()=>e.removeEventListener(t,o))},r=(e,t=v)=>[...t.querySelectorAll(e)],b=()=>r(".tf").forEach(e=>e.style.setProperty("--s",String(e.clientWidth/680)));b();const m=new ResizeObserver(b);r(".tf").forEach(e=>m.observe(e));for(const e of r(".gc[data-ro]")){const t=(e.dataset.ys??"").split(",").map(Number),o=JSON.parse(e.dataset.l??"[]"),n=Number(e.dataset.w),d=n-34,u=[v.querySelector(`#${e.dataset.ro}`),v.querySelector(`#${e.dataset.ro}b`)],a=e.querySelector(".cur"),p=e.querySelector(".cdot");i(e,"pointermove",h=>{var y;const q=e.getBoundingClientRect(),f=Math.max(0,Math.min(t.length-1,Math.round((h.clientX-q.left)/q.width*n/d*(t.length-1)))),x=String(f*d/(t.length-1));a==null||a.setAttribute("x1",x),a==null||a.setAttribute("x2",x),p==null||p.setAttribute("cx",x),p==null||p.setAttribute("cy",String(t[f])),e.classList.add("on"),(y=o[f])==null||y.forEach((C,w)=>{u[w]&&(u[w].textContent=C)})}),i(e,"pointerleave",()=>{e.classList.remove("on"),u.forEach(h=>{h&&(h.textContent=h.dataset.d??"")})})}for(const e of r("[data-ag]")){const t=e.querySelector("[data-h]"),o=e.querySelector("[data-s]"),n=t.textContent,d=o.textContent;i(e.querySelector("[data-rev]"),"click",()=>e.classList.add("rev"));for(const u of r("[data-ok]",e))i(u,"click",()=>{var p;(p=u.closest(".agr"))==null||p.classList.add("gone");const a=e.querySelectorAll(".agr:not(.gone)").length;if(a){t.textContent=`${a} agent needs you`;return}t.textContent="Nothing needs you",o.textContent="all clear · just now",e.classList.add("clear"),c(()=>{e.className="ag",r(".agr",e).forEach(h=>h.classList.remove("gone")),t.textContent=n,o.textContent=d},3500)})}for(const e of r("[data-all]"))i(e,"click",()=>{const t=e.closest("[data-calm]");t.classList.toggle("open"),e.textContent=t.classList.contains("open")?"Hide":"Show all 14"});for(const e of r("[data-retry]"))i(e,"click",()=>{const t=e.closest("[data-rt]"),o=t.querySelector("[data-v]"),n=t.querySelector("[data-m]"),d=o.textContent,u=n.textContent;e.innerHTML='<span class="spin"></span>Loading',c(()=>{o.textContent="$3,420",o.classList.remove("faint"),n.textContent="updated just now",e.style.visibility="hidden",c(()=>{o.textContent=d,o.classList.add("faint"),n.textContent=u,e.textContent="Retry",e.style.visibility=""},5e3)},900)});for(const e of r(".lad"))r(".ll",e).forEach((t,o)=>{i(t,"mouseenter",()=>{e.dataset.f=String(o+1)}),i(t,"mouseleave",()=>{delete e.dataset.f})});for(const e of r("[data-ship]")){const t=e.querySelector("[data-sh]"),o=e.querySelector("[data-ss]"),n=e.querySelector("[data-go]"),d=t.textContent,u=o.textContent;i(n,"click",()=>{n.innerHTML='<span class="spin"></span>Shipping',c(()=>{t.textContent="All orders shipped",o.textContent="labels printed · just now",n.style.visibility="hidden",c(()=>{t.textContent=d,o.textContent=u,n.textContent="Ship them",n.style.visibility=""},4e3)},900)})}for(const e of r("[data-ft]")){e.dataset.s="start";const t=e.querySelector("[data-t]"),o=e.querySelector("[data-r]"),n=e.querySelector("[data-next]");let d=0;const u=()=>{e.dataset.s="start",o.textContent="",n.textContent="",r("[data-a]",e).forEach(a=>a.classList.remove("pick"))};i(e.querySelector("[data-start]"),"click",()=>{let a=5;t.textContent=String(a),e.dataset.s="run",clearInterval(d),d=window.setInterval(()=>{a--,t.textContent=String(a),a<=0&&(clearInterval(d),e.dataset.s="ask")},1e3),g.push(()=>clearInterval(d))});for(const a of r("[data-a]",e))i(a,"click",()=>{r("[data-a]",e).forEach(h=>h.classList.toggle("pick",h===a));const p=e.classList.contains("good");o.textContent=a.dataset.a==="ok"?p?"Thatâs the answer, and itâs the loudest thing on the screen. The accent is in the right place.":"You found the answer, but you had to look for it among four cards just as loud.":"Thatâs the loudest thing, and it isnât the answer. The accent is in the wrong place.",n.textContent=p?"Try the AI version":"Now try the good one"});i(n,"click",()=>{e.classList.toggle("good"),u()})}for(const e of r(".prompt button"))i(e,"click",async()=>{var t;try{await navigator.clipboard.writeText(((t=e.nextElementSibling)==null?void 0:t.textContent)??""),e.textContent="Copied",c(()=>{e.textContent="Copy"},1600)}catch{}});return()=>
10{m.disconnect(),g.forEach(e=>e()),l.forEach(clearTimeout)}}const S={1:{path:"/blog/good-dashboard-design-vs-ai-slop",h1:"Why AI dashboards look like slop",title:"Good Dashboard Design vs AI Slop: Bad Dashboard Examples",description:"Why dashboards built with Claude, v0 or Lovable look like slop: no answer at the top, everything equally loud, never calm, a zero that lies. Live examples of each, and what good dashboard design does instead.",published:"2026-10-07",label:"7 October 2026",sub:"Four structural tells, each with a live example you can click and a fix.",body:K,cover:"/blog/thumb-dashboard-slop-1200.webp",next:2},2:{path:"/blog/claude-dashboard-design-prompt",h1:"How to get Claude to design a good dashboard",title:"How to Get Claude to Design a Good Dashboard (Prompt + Skill)",description:"Claude, v0 and Lovable guess what a dashboard is for and who reads it. Tell them the answer and the reader: a copyable dashboard design prompt, a Claude skill, and a five second test you can try live.",published:"2026-10-07",label:"7 October 2026",sub:"Tell it the answer and the reader. A prompt you can copy, a skill, and a five second test.",body:E,cover:"/blog/thumb-dashboard-prompt-1200.webp",next:1}};function G({part:v}){const l=S[v],c=S[l.next],g=k.useRef(null);return k.useEffect(()=>g.current?M(g.current):void 0,[v]),s.jsxs("div",{className:"relative min-h-screen",children:[s.jsx(N,{title:$(l.title),description:l.description,canonicalPath:l.path}),s.jsxs("div",{className:"relative z-10",children:[s.jsx(A,{}),s.jsxs("main",{className:"pt-28 sm:pt-[188px]",children:[s.jsx("div",{className:"w-full px-5 md:px-12",children:s.jsx(j,{})}),s.jsxs("header",{className:"mx-auto w-full max-w-[1100px] px-5 pt-10 text-center sm:px-8 md:pt-12",children:[s.jsxs("p",{className:"text-[14px] text-foreground/55",children:[s.jsx("time",{dateTime:l.published,children:l.label}),s.jsx("span",{"aria-hidden":"true",className:"hidden sm:inline",children:" · "}),s.jsxs("span",{className:"block whitespace-nowrap sm:inline",children:["Dashboards that work, part ",v," of 2"]})]}),s.jsx("h1",{className:"mx-auto mt-8 max-w-[1000px] bg-gradient-to-b from-foreground via-foreground to-foreground/55 bg-clip-text pb-2 text-[42px] leading-[1.05] font-normal tracking-[-0.035em] text-balance text-transparent sm:text-[58px] md:text-[72px]",children:l.h1}),s.jsx("p",{className:"mx-auto mt-4 max-w-[640px] text-[17px] leading-[1.55] text-foreground/60 sm:text-[18px]",children:l.sub}),s.jsxs("div",{className:"mt-7 flex items-center justify-center gap-2 text-[14px] text-foreground/85",children:[s.jsx("img",{src:"/assets/avatar.webp",alt:"",className:"h-6 w-6 rounded-full bg-foreground
10/10 object-cover"}),"Savva Sicevs"]})]}),s.jsxs("div",{className:"mx-auto w-full max-w-[712px] px-5 pt-10",children:[s.jsx("div",{ref:g,className:"dash-series",dangerouslySetInnerHTML:{__html:l.body}}),s.jsxs(T,{to:c.path,className:"group mt-14 mb-24 flex overflow-hidden rounded-[12px] border border-[rgba(214,235,253,0.19)] transition-colors hover:border-white/40",children:[s.jsx("img",{src:c.cover,alt:"",className:"hidden aspect-video w-[240px] shrink-0 object-cover sm:block"}),s.jsxs("div",{className:"flex flex-col justify-center gap-2 p-4 sm:px-5",children:[s.jsx("span",{className:"text-[16px] text-foreground",children:c.h1}),s.jsx("span",{className:"text-[14px] leading-[1.5] text-foreground/60",children:c.sub}),s.jsxs("span",{className:"text-[13px] text-foreground/80",children:["ssicevs.com",c.path]})]})]})]})]}),s.jsx(I,{})]})]})}export{S as DASH_SERIES,G as default};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.