Design Prompts for AI – Free UI Prompt Library

Dark SaaS Dashboard

HTML · CSS

codeinfoweb.com/design-prompts/saas-dashboard-dark

The prompt

Build a dark analytics dashboard for a SaaS product called Northwind, using only HTML and CSS.

Typography:
- Instrument Sans from Google Fonts for the interface, weights 400 to 700
- JetBrains Mono for every number, with font-variant-numeric: tabular-nums so figures do not jitter
- Headings at -0.025em letter-spacing, big numbers tighter at -0.03em

Palette:
- Near-black ground #0A0C10, panels #11141B, hairline borders #1F2530
- A single lime accent #C8F751 with near-black text on it, used only for: the active nav item, the chart line, the upgrade button and one avatar
- Green, amber and rose reserved for status only, never decoration
- Lay a faint 46px grid over the background plus one soft lime radial glow in the top right

Layout:
- Sidebar 252px: wordmark with an icon mark, two labelled nav groups (Workspace, Revenue) with inline SVG icons, a count badge on Reports, and a plan-usage card pinned to the bottom with a progress meter
- Header: page title, one supporting line, a search field, a date-range chip and an avatar
- Four KPI cards: label, large mono value, a coloured delta pill, and a mini sparkline drawn as inline SVG
- A revenue panel with a legend, a dashed previous-period line, a solid accent line with a gradient area fill and a glow, dashed gridlines and a mono x-axis
- Below that a two-column split: a five-row activity table with initial avatars and status pills, beside a top-channels list with animated bars

Motion, all CSS:
- KPI cards rise and fade in, staggered 70ms apart using a --d custom property
- The chart line draws itself with stroke-dasharray and stroke-dashoffset, then the area fill and the end dot fade in after it
- Progress meters grow from zero width, staggered
- Every hover transition 160-200ms, ease
- A prefers-reduced-motion block switches all of it off and shows the final state

Rules:
- One HTML file, one CSS file, no JavaScript at all
- CSS custom properties for every colour and radius
- Use color-mix() for the translucent status and accent tints
- KPI grid drops to two columns under 1080px and one under 620px; the sidebar becomes a scrollable horizontal bar under 900px; the least important table column is hidden under 620px
- Semantic HTML: real table markup with scope on the headers, aria-labels on each section, visible focus states everywhere

Return the complete code, ready to open in a browser.

Edit anything above before copying. Change the first line to rename the build, or the style word to shift the look.

A prompt library, not a component kit

Asking an AI for “a nice dashboard” gets you a grey card grid. The difference between that and something you would actually ship is the brief. Every prompt here spells out the layout, the type scale, the colour rules and the breakpoints, so the first answer is close enough to keep.

Each one is written and tested against a real build. Open any prompt to see the interface it produced, run it in the live preview, and read the HTML and CSS behind it. If the result is not what you wanted, edit the prompt in the box and copy your version instead.

New prompts are added regularly. If you are after finished tutorials with full source code instead, the main blog covers the same ground in long form.

Questions

What is a design prompt?

A design prompt is a written brief you hand to an AI model instead of a design file. It names the layout, the style rules and the constraints, so the model returns a finished interface rather than a rough guess.

Which AI tools do these prompts work with?

All of them. Every prompt here is plain text with no tool-specific syntax, so it works the same in Claude, ChatGPT, Cursor, Codex, v0 and Gemini.

Are the prompts free to use?

Yes. There is no signup and no paywall. Copy any prompt and use it in personal or commercial work.

Can I edit a prompt before copying it?

Yes. Every prompt sits in an editable box on its page. Change the first line to rename the build, or change a style word to shift the look, then copy the edited version.

Do I get the code as well as the prompt?

Yes. Each prompt page shows the exact build the prompt produced, with a live preview and the full HTML, CSS and JavaScript you can read or copy.