[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"capsule:a3a4e00a-989d-4900-8050-f98d2d57dcc7":3},["Reactive",4],{"id":5,"user_id":6,"title":7,"prompt_content":8,"prompt_type":9,"is_locked":10,"is_public":10,"fork_of":11,"created_at":12,"updated_at":13,"category":14,"brief":15,"attachments":16,"expected_markers":17,"user":19},"a3a4e00a-989d-4900-8050-f98d2d57dcc7","695c8e6c-9654-4858-b2d3-925adefacc35","The Ghost Dashboard","Design and build a single-page analytics dashboard for \"Fenwick\", a fintech startup that helps small businesses track cash flow and spending.\nRequirements:\nDeliver as a single self-contained HTML file (inline CSS and JS; you may use CDN links for libraries such as Chart.js or similar).\nThe dashboard should give a business owner an at-a-glance view of their financial health.\nInclude at least the following data points, with realistic sample values you invent: total balance, monthly revenue, monthly expenses, a spending breakdown by category, and a trend over the last 6 months.\nThe dashboard must include at least one chart or graph.\nDesign it to feel modern and trustworthy, appropriate for a financial product.\nYou have full creative freedom over layout, color palette, typography, and how information is organized. There is no wireframe to follow.\nDo not include any explanatory text about your design choices — output only the working HTML file.","text",true,null,"2026-07-10T13:33:14.062654+00:00","2026-07-10T13:34:36.734992+00:00","vibe_design","# Brief — The Ghost Dashboard (Vibe Design)\n\n## Rationale\n\nThis capsule tests aesthetic judgment rather than technical correctness. The prompt is deliberately vague on layout, palette, and composition — it only fixes the data points and the domain (fintech). The goal is to see whether a model makes deliberate, coherent design decisions or defaults to generic, unstyled, \"bootstrap-y\" output.\n\nUnlike prior capsules (Ray Marching, Silent Regression), there's no single hidden bug to find. Instead, GT criteria are built around observable, low-ambiguity visual signals that a non-designer can judge from a screenshot: does it look intentional, is it legible, is it coherent. This keeps scoring objective despite the subjective subject matter.\n\n## Expected model spread\n\n- Frontier models with strong front-end training data (Claude, GPT, Gemini top tier) should produce a genuinely styled, cohesive dashboard with a real color system and considered spacing.\n- Mid-tier models likely default to a generic card-grid layout with default chart library colors (Chart.js default rainbow palette) and inconsistent spacing.\n- Weaker\u002Fsmaller models risk one of: broken chart rendering (CDN script fails silently, blank canvas), Lorem-ipsum-style placeholder content instead of realistic fintech labels, or literal template-cloning of a well-known dashboard (Stripe, Linear) that isn't actually adapted to \"Fenwick.\"\n\n## Known implementation risks \u002F cheats to watch for\n\n- **CDN failure**: Chart.js or similar loaded from a CDN that doesn't resolve in the render sandbox — chart area renders blank. This must be treated as a hard fail on GT6, not a partial, since it's a broken deliverable regardless of surrounding design quality.\n- **Palette cheat via screenshot bias**: a model could use a single flashy color (e.g., neon gradient hero header) that looks good in isolation but clashes with the rest of the page. Judge palette coherence across the *whole* page, not just the top fold.\n- **Generic default detection**: watch for unmodified Bootstrap\u002FTailwind default component styling (default blue buttons, default table borders) sitting next to custom-styled sections — signals low design effort even if some parts look intentional.\n- **Data realism cheat**: some models may reuse placeholder values like \"Lorem ipsum\" or \"$XXXX\" instead of committing to plausible numbers — this isn't a visual bug but reflects low effort and should count against GT3.\n- **Exact clone risk**: a memorized close copy of a known real dashboard product (not just \"inspired by\" a style) should be flagged in notes even if it scores well, since it demonstrates memorization rather than design generation.\n\n## Ground Truth checklist\n\nRender each submission in headless Chromium at standard desktop viewport (1440×900) and capture a full-page screenshot before scoring.\n\n- **GT1 — Visual hierarchy**: Is there one clear focal point (e.g., total balance or a headline metric) that draws the eye first, with everything else clearly secondary?\n- **GT2 — Palette coherence**: Does the page use a limited, deliberate color palette (roughly 2–4 core colors plus neutrals), with a consistent accent color used purposefully rather than a rainbow of unrelated colors?\n- **GT3 — Content realism**: Are the data labels and values plausible for a real fintech dashboard (real-sounding category names, sane dollar amounts), not placeholder\u002Florem-ipsum content?\n- **GT4 — Layout & spacing consistency**: Is spacing\u002Fpadding consistent across cards and sections, with proper alignment on a grid (no overlapping elements, no ragged edges)?\n- **GT5 — Typography hierarchy**: Is there a clear, consistent distinction between headers, metric values, and body\u002Flabels (size and\u002For weight), rather than uniform text throughout?\n- **GT6 — Functional chart**: Does at least one chart\u002Fgraph render correctly and legibly (not blank, not broken, not illegible due to overlapping labels)?\n- **GT7 — Generic-template avoidance**: Does the page avoid leaving visible, unstyled default component styling (raw Bootstrap buttons\u002Ftables) next to custom-styled sections?\n- **GT8 — Domain trustworthiness (bonus, not required for pass)**: Does the overall look read as \"trustworthy financial product\" rather than a generic admin panel or consumer app? Note qualitatively, don't require for tier decisions.\n\n## Tiers\n\n- **PASS**: GT1, GT2, GT4, GT5, GT6 all met, plus at least one of GT3\u002FGT7.\n- **PARTIAL**: GT6 met (chart functional) but two or more of GT1\u002FGT2\u002FGT4\u002FGT5 fail, OR GT6 fails but everything else is strong (broken chart pulling down an otherwise good design).\n- **FAIL**: GT6 fails (broken\u002Fblank chart) AND two or more of GT1\u002FGT2\u002FGT4\u002FGT5 also fail, or the output is not a working single HTML file.\n\n## Scoring checklist block (per run)\n\n```\nModel: [name]\nGT1 Visual hierarchy:        [PASS\u002FFAIL]\nGT2 Palette coherence:       [PASS\u002FFAIL]\nGT3 Content realism:         [PASS\u002FFAIL]\nGT4 Layout\u002Fspacing:          [PASS\u002FFAIL]\nGT5 Typography hierarchy:    [PASS\u002FFAIL]\nGT6 Functional chart:        [PASS\u002FFAIL]\nGT7 Generic-template avoid.: [PASS\u002FFAIL]\nGT8 Trustworthiness (bonus): [note only]\nTier: [PASS\u002FPARTIAL\u002FFAIL]\nNotes: [cheats detected, clone risk, CDN failure, etc.]\n```",[],{"items":18,"matchAll":10},[],{"username":20,"avatar_url":21},"Ezarwebmaster","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F42354978?v=4"]