How the prompts on this site are written

Every snippet ships with a prompt, and every prompt follows the same shape. This page explains the shape, so you can write your own when the shelf does not have what you need.

The one rule: describe the result, not the code

An AI coding tool is good at turning a precise description into CSS. It is bad at guessing what "make it look nicer" means. So the prompt names the colour as a hex value, the radius in pixels, the shadow with its offsets and blur, and what happens on hover, focus and active. Nothing is left to taste.

Here is the prompt for Cobalt block:

A solid blue button #2563eb with white 15px semibold text, 8px radius and 13px by 24px padding. It has a faint 1px blue shadow; on hover it darkens to #1d4ed8 and the shadow grows to 0 4px 12px at 35% blue. Active goes to #1e40af with no shadow. Focus shows a 3px translucent blue outline.

Read it again and count the numbers. Six of them. That is the difference between a prompt that reproduces the button and one that produces "a blue button", which every tool already does on its own, usually badly.

The four parts

1. Shape and size. Padding, radius, border, font size and weight. If the element has a fixed width, say so.
2. Colour. Background, text, border, each as a hex or an rgba value. Name the colour space only when it matters (oklch for gradients that should not go muddy).
3. States. Hover, focus-visible, active, disabled. Say what changes, by how much, and how long the transition is.
4. Motion. If something animates, give the duration, the easing, and whether it loops. Mention prefers-reduced-motion when the animation is decorative.

What the tool picker adds

The small "For" menu next to each Copy prompt button prepends one sentence tuned to the tool: keep the class names, use plain CSS, do not add a library. Claude Code and Cursor will happily install a dependency to draw a spinner if you let them. That sentence stops it. The choice is remembered in your browser so you set it once.

Why the markup is pasted along

The prompt copies the demo HTML underneath the description. Without it, the tool invents its own structure, and a card with a different element order needs different CSS. With it, the tool styles exactly what is on this page.

Writing your own

Open the browser inspector on any element you like, read the computed values, and write them down in the four-part order above. Skip adjectives. If you catch yourself typing "modern" or "clean", replace the word with a number. A prompt written this way is usually shorter than the CSS it produces, and it survives being pasted into a different tool next month.