Build the card with AI

¶The 20% you must own before you prompt

You cannot review what you do not understand. For a card, the mental model you need fits on a postcard:

• Every element is a box: content → padding → border → margin, from the inside out.
• box-sizing: border-box makes width include padding and border — the difference between layouts that hold and layouts that overflow.
• Padding is space inside the box; margin is space outside it. Faking one with the other is the single most common AI mistake.

¶The prompt

A good prompt names the constraints a senior would name. Vague in, vague out:

Build a reusable "card" component in plain HTML and CSS — no framework, no build step.
 
Constraints:
- Set box-sizing: border-box globally so width includes padding and border.
- Card: max-width 320px, 24px internal padding, 16px corner radius.
- One soft elevation shadow. No border.
- Dark surface (#11151c) with legible body text — check the contrast.
- A primary button with its own padding and a hover state.
 
Output one index.html and one styles.css. Add one short comment per rule explaining the spacing decision.

¶Review what it writes

This is the senior move. Run the output against a checklist before you trust it:

Now take the model’s output and change one thing — bump the padding, soften the shadow — and watch it respond. Editing what the AI wrote is how you learn faster than it does: