Claude dashboard prompts

Start with a mock data file

Ask Claude Code to write the types and forty or so rows first, then stop and show you the types. You will spot a missing field or a wrong unit in ten lines of TypeScript far sooner than in a finished table. Ask for bad rows on purpose: a name that is too long, a null, a number in the millions. Those rows are what test the layout.

Fix the frame in pixels

Dashboards are dense, and density is arithmetic. Give the design size, the sidebar width, the top bar height, the grid, the gutter and the row height. Give type at two or three small sizes with tabular figures. Reserve colour for status and say so, or every tile gets its own tint.

Say how charts are made. Hand-drawn SVG keeps the look yours and adds no dependency. If you want a chart library, name it; otherwise Claude will pick one and its defaults will set the look of half the screen.

Ask for the states and a way to see them

Loading, empty and error are screens too. Ask for each, and for a small developer menu that switches between them, so you and Claude Code can both look. Then tell it what to exercise: sort each column, hover the chart, open the screen at phone width. For the look of the panels themselves, a finished design is a faster start than a description.

What a Claude dashboard prompt should contain

• The question the screen answers, in one line.
• Mock data first: typed, realistic, with bad rows, and a stop to review the types.
• The frame: design size, sidebar, top bar, grid, gutters, row height.
• Colour rules: neutrals for everything, colour only for status.
• Each panel: its width in columns, its height, what it shows.
• States and a dev menu: loading, empty, error, and what to click when checking.

A prompt to start from

Build one dashboard screen for [product], used by [who] to [the one question the screen answers, e.g. "see which orders are late right now"].

First, before any interface code, write src/data/mock.ts: typed mock data for 40 rows with realistic values, including 3 late, 2 failed and 1 with a missing field. Show me the types and wait.

Stack: Vite + React + TypeScript, plain CSS with custom properties. Charts drawn in SVG by hand; no chart library, no UI library.

Frame: 1440 × 900 design size. A 232px sidebar, a 56px top bar, and the content on a 12-column grid with 20px gutters and 24px padding.

Look: ground #f5f5f2, panels #ffffff with a 1px #e4e3de border, radius 14px, no shadows. Text #17171a, secondary #74747c. Colour is for status only: late #c9731a, failed #c2331f, fine #2a7d55. [Typeface], 13px body, 12px uppercase labels with 0.06em tracking, tabular figures everywhere.

Content:
1. Four number tiles, 3 columns each: label, value at 32px, change against yesterday.
2. A line chart, 8 columns, 280px tall: today against the 7-day average, hourly, with a hover readout.
3. A "Needs attention" list, 4 columns: the late and failed rows only.
4. A table, 12 columns: 44px rows, sticky header, sortable by any column, a status pill, row hover #fafaf8.

States: loading (grey blocks in the final layout for 0.6s), empty ("Nothing is late"), and an error row with a Retry button.

Motion: numbers count up over 0.5s on first load only. With prefers-reduced-motion they appear at once.

Phones: the sidebar becomes a bottom bar of four labelled items, the tiles go 2 × 2, the table becomes cards.

Run it, sort each column, switch through every state from a small dev menu, and tell me what you checked.

Written for this page as a starting point; swap the parts in [brackets] for your own. The full prompt of each uberdesigner template is longer and specific to one finished design, and it is tested by rebuilding the template from the prompt alone.

Keep reading

• How to prompt Claude for designThe working method for design work with Claude and Claude Code: brief, plan first, build, run and look, then correct with specifics.
• Design rules in CLAUDE.mdHow to keep design rules in a CLAUDE.md file so every Claude Code session follows them, with an example rules block to copy.

• Whole sites
• Landing pages
• Components
• Artifacts
• Redesigns
• Animation