CSS Primer For the AI Era

A vocabulary for shaping interfaces with AI

User Tools

Site Tools


working_with_existing_code:when_ai_misunderstands_the_system

10. When AI Misunderstands the System (How to Reveal the Missing Context)

How we help AI see
the parts of the system it cannot
infer on its own

AI does not understand the system.
It understands only the text we show it
such as the snippet, the file, the fragment.

When the system is larger, older,
or more interconnected than the snippet suggests,
AI will make confident guesses that do not match reality.

Misunderstanding is not failure.
It is simply the absence of context.

A quiet mental model:

AI cannot see the system.
So, we reveal the relationships it cannot infer.
Collaboration is the act of supplying
missing context
.

This page teaches us how to recognize when AI has misunderstood the system,
and how to reveal the missing context so the collaboration becomes accurate, predictable, and safe.


1. How We Know AI Has Misunderstood the System

AI misunderstands the system when it:

  • proposes changes that break other components
  • renames classes used across the theme or plugin
  • restructures markup that other layers depend on
  • removes wrappers that serve invisible purposes
  • simplifies patterns that are intentionally complex
  • assumes modern conventions where legacy ones apply
  • treats temporary hacks as permanent architecture
  • misreads the relationship between files

These are not “mistakes”, though,
they are symptoms of missing context.

A simple truth:

When an AI result
misunderstands the system,
it is inferring from an
incomplete view
.


2. The First Step: Name the Missing Context

AI cannot guess the invisible parts of the system.
We must name them.

For example:

“This class is used by multiple components.
Do not rename it.”

Or:

“This wrapper is required for layout.
It cannot be removed.”

Or:

“This markup comes from a plugin.
The theme depends on it.”

Or:

“This pattern is legacy but intentional.
Please keep it as is.”

A simple reminder:

AI works with the context we describe.
It cannot account for what we do not show
.


3. The Second Step: Reveal the Relationship Between Parts

AI cannot infer relationships such as:

  • theme ↔ plugin
  • markup ↔ CSS
  • legacy ↔ modern
  • parent component ↔ child component
  • server output ↔ client rendering
  • data structure ↔ template structure

We reveal these relationships explicitly:

“This markup is generated by the plugin.
The theme only styles it.”

Or:

“This CSS applies globally.
Do not change the selector.”

Or:

“This component inherits spacing from its parent.
Do not override it here.”

A simple principle:

AI understands relationships only when
we narrate them
.


4. The Third Step: Show the Surrounding Context (But Only What’s Needed)

When AI misunderstands the system,
it often needs a slightly wider view —
not the whole codebase,
just the relevant surroundings.

We show:

  • the parent component
  • the sibling component
  • the plugin output
  • the theme override
  • the legacy pattern
  • the dependency chain

We avoid showing:

  • the entire theme
  • the entire plugin
  • unrelated files
  • global configuration
  • noise

A simple truth:

We reveal only the context that clarifies —
never the context that distracts
.


5. The Fourth Step: Explain the Purpose Behind the Pattern

AI cannot infer why something exists.

We explain to ai:

“This wrapper exists for alignment across breakpoints.”

Or:

“This naming is legacy but required for compatibility.”

Or:

“This structure is tied to a plugin filter.

Do not change it.”

Or:

“This spacing is inherited from the layout system.
It must remain untouched.”

A simple principle:

Purpose is invisible to AI
until we name it
.


6. The Fifth Step: Ask AI to Restate Its Understanding

Before 'continuing',
we ask AI to summarize to us the following:

  • the task
  • the constraints
  • the relationships
  • the boundaries
  • the purpose
  • what must remain unchanged

For example:

“Before continuing or go on with the next step, 
please restate your understanding of the system 
and the task.”

This reveals whether AI is aligned
or still misunderstanding.

A simple truth:

Understanding becomes visible
when AI explains it back to us
.


7. The Sixth Step: Provide a Clean, Anchored Prompt

If misunderstanding persists,
we reset with clarity:

  • a clean snippet
  • a clear description
  • explicit boundaries
  • explicit relationships
  • explicit constraints
  • the desired outcome

For example:

“Let’s reset.
Here is the component.
Here is the context.
Here is what must stay the same.
Here is what may change.”

A simple reminder:

A clean prompt is often the fastest path
to alignment
.


8. The Seventh Step: Use Before‑and‑After Examples to Reveal Intent

When AI misunderstands the system,
examples anchor it.

We show:

  • the current version
  • the desired version
  • the minimal change needed

For example:

“Here is the current markup.
Here is the desired structure.
Please generate the minimal CSS needed.”

A simple principle:

Examples reveal intent more clearly
than explanation
.


9. The Eighth Step: Decline and Redirect When Needed

If AI continues to misunderstand,
we decline:

“This does not respect the system’s structure.
Please stay within the existing pattern.”

Or:

“This changes behavior.
We need a minimal, safe adjustment.”

Or:

“This crosses boundaries between theme and plugin.
Please keep responsibilities separate.”

A simple three‑line principle:

Declining is part of guiding.
Guidance is part of collaboration.
Collaboration is how we steward the architecture
.


10. Closing Note — AI Understands Only What We Reveal

AI cannot see the system.
It cannot see the history,
the constraints, the relationships,
or the purpose behind the patterns.

It sees only the text we provide.

  • We reveal the missing context.
  • We narrate the relationships.
  • We protect the boundaries.
  • We restore the shape of the task.
  • We help AI understand the system it cannot see.

A simple closing thought:

AI misunderstands the system.
We reveal the system.
That is the heart of collaboration
.



Tony de Araujo —New York | Lisbon


working_with_existing_code/when_ai_misunderstands_the_system.txt · Last modified: by editor