How to express CSS intentions clearly
so AI knows what we mean

_{—Part of CSS Primer for the AI Era — CSS Communication Toolkit}

AI does not guess well. It fills in gaps. It assumes patterns. It invents structure when the request is vague.

So, the first skill in CSS communication is simple:

We say what we want in terms of intention,
not code.

Instead of:

“Fix this”
“Make it better”
“Center this”
“Improve the layout”

We use language that reveals the purpose:

“I want this element centered horizontally 
within its parent.”

“I want equal spacing between these items.”

“I want this section to remain stable at 
all screen sizes.”

“I want this layout to adapt without breakpoints.”

“I want this component to stay visually quiet.”

A simple principle:

AI writes code.
We describe intention.
Collaboration is the bridge between the two.

This chapter teaches the reader how to express:

• spatial intentions
• visual intentions
• structural intentions
• behavioral intentions
• constraints and boundaries
• what must not change

When we say:

“Fix this”
“Make it better”
“Improve the layout”
“Center this”

AI must choose:

• what “better” means
• what “improve” means
• what “center” means
• what “fix” means

And its choices may not match ours.

A simple truth:

AI writes code.
We express purpose.
Collaboration is the bridge
between the two.

Instead of describing what to do,
we describe what we want to happen.

Examples:

“We want this element centered horizontally 
within its parent.”

“We want equal spacing between these items.”

“We want this layout to remain stable at 
all screen sizes.”

“We want this section to feel quiet 
and low‑contrast.”

“We want this component to adapt without breakpoints.”

“We want this card to align with the baseline grid.”

These statements give AI:

• a purpose
• a direction
• a constraint
• and a boundary

They remove ambiguity.

However, intention is incomplete without protection.

So, we may also add:

“Do not change the HTML structure.”

“Do not introduce new classes.”

“Do not modify the spacing scale.”

“Do not alter the behavior on small screens.”

“Do not refactor the layout.”

Something to keep in mind:

Intention without boundaries
invites overreach.

AI works better
when it knows why.

So, we add:

“We want this centered because 
the hero needs visual balance.”

“We want equal spacing because 
the design uses a consistent rhythm.”

“We want stability because 
this layout is part of a legacy system.”

“We want quiet styling 
because this section supports the main content.”

Reason gives AI context.
Context gives AI restraint.

A complete request looks like this:

“We want this element centered horizontally 
within its parent.
Do not change the HTML structure.
This is part of a stable layout, 
so keep the solution minimal.”

Or:

“We want equal spacing between these items 
using the existing spacing scale.
Do not introduce new classes.
This keeps the design consistent with 
the rest of the page.”

Or:

“We want this section to feel visually quiet.
Avoid strong colors or heavy shadows.
This is supporting content, not primary content.”

A simple reminder:

Clarity is not verbosity.
Clarity is purpose, boundaries,
and reason.

When we describe intention clearly:

• AI stops guessing
• the work becomes predictable
• the collaboration becomes calmer
• the results become more aligned
• and the system remains coherent

A simple closing thought:

We describe what we want.
AI writes the code.
And clarity is the bridge between the two.

• Suggested Next Reading: How to Point to the Right Parts of the Code

_{Tony de Araujo —New York | Lisbon}

• Top↑
• Back to Topic ↔
• Home←