Claude Code prompt to build a dashboard UI
Point Claude Code at your frontend and this prompt produces a working dashboard: summary cards, an activity chart, and a sortable table, each with loading, empty, and error states wired in. The agent reuses whatever component and charting conventions your repo already has, so the result looks native rather than pasted in.
Last updated
Build a dashboard page in this codebase's existing frontend stack that surfaces {{resource}} metrics. Layout: a stat row with four summary cards (total, active, created this week, error count), a time-series chart of {{resource}} activity over the last 30 days, and a sortable table of the 20 most recent records with status badges. Fetch data through a typed client module rather than inline fetch calls, and handle three states per widget: loading skeleton, empty dataset with a short explanation, and fetch failure with a retry button. Keep the chart dependency-light; use whatever charting library is already installed before adding one. Make the grid collapse to a single column below tablet width. Add a component test for the table's sort behavior and the empty state. Run the dev build and the tests, then summarize the components you added and where they mount.Customize it
Runs in your browser. Nothing you type here is sent anywhere.
Build a dashboard page in this codebase's existing frontend stack that surfaces users metrics. Layout: a stat row with four summary cards (total, active, created this week, error count), a time-series chart of users activity over the last 30 days, and a sortable table of the 20 most recent records with status badges. Fetch data through a typed client module rather than inline fetch calls, and handle three states per widget: loading skeleton, empty dataset with a short explanation, and fetch failure with a retry button. Keep the chart dependency-light; use whatever charting library is already installed before adding one. Make the grid collapse to a single column below tablet width. Add a component test for the table's sort behavior and the empty state. Run the dev build and the tests, then summarize the components you added and where they mount.
Same task in other tools
Questions about this prompt
Will the dashboard match my existing design system?
Only if you name it. Add a line like "use the Card, Table, and Badge components from components/ui" and Claude Code will import them instead of writing raw markup with one-off styles.
The chart compiles but shows nothing. What usually went wrong?
The agent guessed the API response shape. Paste one real JSON payload into the prompt or point it at the endpoint's type definition, then ask it to rerun the component test against that fixture.
Can Claude Code verify the dashboard visually?
Not from the terminal alone; it verifies through the build, type checks, and component tests. Ask it to leave the dev server running so you can do the browser pass, or have it drive a Playwright screenshot if your repo already includes Playwright.