Codex prompts for dashboards and app shells

Start from the data file

Write a small JSON fixture before the brief: ten rows of the real table, a month of the real series, with realistic lengths and extremes. A long customer name, a zero, a negative, a value in the millions. Put it in the repository and name it in the brief.

The design of a data screen is mostly decided by its awkward values. A table designed around "Item 1, Item 2" breaks on the first real row.

Specify density in numbers

Dashboards are judged by how much fits and how calm it stays. That is a set of numbers: row height, cell padding, the base type size, the gap between panels, the sidebar width. Give them. Say that figures use tabular numerals and align right, and say how numbers are formatted: thousands separators, decimals, currency, dates.

Three states for every panel

Each panel that shows data has at least three more faces: loading, empty and error. Say what each looks like. A skeleton with the same row height. One line of text and one action. A message and a retry button. Ask for a way to force each state, such as a query parameter, so you can review them without breaking the network.

These states are also the easiest things for the agent to test, which gives it something concrete to run before it reports back.

What a dashboard brief for Codex should contain

• The shell: sidebar width, top bar height, content grid.
• A fixture file with the real data shape and awkward values.
• Each panel: what it shows and which fields it reads.
• Density: row height, type size, padding, gaps, number format.
• States: loading, empty and error for every data panel.
• Narrow screens: what the sidebar and the table become.

A prompt to start from

Task: build the app shell and the Overview screen for [product], a [what it tracks] tool. Data comes from src/fixtures/overview.json; read its shape and use it as is. No back end in this task.

Stack: Vite + React + TypeScript, plain CSS with custom properties in src/styles/tokens.css. Charts are hand-written SVG. No UI or chart library.

Shell: a sidebar 232px wide, ground #101216, with [five nav items]; the active item has a #1c2028 fill, radius 8px. A top bar 56px tall with the screen title on the left and a date-range button on the right. Content ground #16191f, 24px padding, panels on #1c2028 with a 1px #2a2f39 border, radius 12px, 16px gaps.

Type: "Inter". Base 13px, panel titles 12px uppercase #8b93a1, key figures 28px weight 600 with tabular numerals. Text #e7eaf0. One accent, #5ee0a0, for positive change; #ff6b5e for negative.

Overview screen, 12-column grid:
1. Four stat tiles (3 columns each): label, figure, change against the previous period.
2. A line chart (8 columns, 280px tall): one series, 1.5px line, a hover line that shows the value and date.
3. A ranked list (4 columns): top five [items] with horizontal bars.
4. A table (12 columns): [columns], rows 40px tall, numbers right-aligned, sortable by clicking a header.

States for panels 2 to 4: loading (skeleton blocks pulsing between 40% and 70% opacity over 1.2s), empty ("No [items] in this range" and a Reset range button), error (message and Retry). Force a state with ?state=loading, empty or error.

Below 900px the sidebar becomes a 56px icon rail; below 600px it becomes a bottom bar, tiles go two per row, and the table scrolls sideways inside its panel. With prefers-reduced-motion the skeletons do not pulse.

Done when npm run build and npm run typecheck pass, sorting is covered by a test, and each forced state renders. Run it, check all three states at 390px and 1440px, and report.

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

• Design rules in AGENTS.mdAn AGENTS.md example for front-end work: where design rules go, what to include, and a rules block to copy so every Codex task follows the same system.
• Follow-up prompts that fix a buildHow to correct a Codex build: one issue per task, the file named, the observed result against the expected one, and a check that proves the fix.

• Whole websites
• Landing pages
• UI components
• 3D websites
• Restyles