vi3ecoding Team
An AI agent that ships great work and one that ships generic work usually use the same model.
The difference is which layers of context you fed it.
There are exactly four layers of context every AI agent needs. Miss one and the AI fills the gap with averages — which is why so many AI-built products look like the same product.
Related reading from vi3ecoding:
- Context Engineering: The Skill That Separates Good AI Builders From Great Ones
- Context Files for Lovable Projects
- What Is Vibe Coding, Really?
I use this framework on every Vi3ecoding project. It came out of pattern-matching across maybe 40 client builds. Here's the whole thing.
Layer 1 — Product context
Who is the product for. What problem it solves. What success looks like.
Without it, the AI builds something technically correct and strategically pointless. Every feature suggestion becomes a coin flip.
What it looks like:
- One paragraph on the target user, in their words.
- One paragraph on the outcome they want.
- One paragraph on what failure looks like — what the product must not become.
That last one is underrated. Knowing what not to build is half the battle.
Layer 2 — Technical context
The stack. The conventions. The non-negotiables.
Without it, you get React Router in a TanStack Start app. You get default exports in a codebase that uses named exports. You get the AI's "best practices" instead of your team's.
What it looks like:
- Framework and version.
- Folder structure with examples.
- Naming rules (file names, exports, components).
- A short "we don't do this" list.
If your tech context is over one page, you're describing a textbook, not a project.
Layer 3 — Design context
Tokens, not adjectives.
"Warm but professional" means nothing to an AI. --primary: hsl(220 90% 56%) means everything. Same for spacing, radius, type scale, voice.
What it looks like:
- The actual design tokens — colors, fonts, spacing, radius.
- Two example sentences showing your voice.
- One paragraph on what the brand should never feel like.
Two examples beat ten rules. Always.
Layer 4 — Decision context
The layer most builders never write. The one that compounds the most.
A running log of what you tried, what you rejected, and why.
Without it, the AI happily re-proposes the dead idea you killed last week. With it, you keep moving forward instead of in circles.
What it looks like:
- Date.
- The decision in one sentence.
- The reason in one sentence.
That's the whole format. Three lines per decision. Add to it every Friday.
A real example from foodla.eu
When I rebuilt the restaurant onboarding flow, the context files were:
- Product: "Independent restaurant owners onboarding themselves in under 5 minutes, no sales call required."
- Technical: Lovable + Supabase, kebab-case files, RLS by default, no client-side admin checks ever.
- Design: Warm cream background, charcoal text, one accent orange, generous spacing.
- Decisions: No public reviews module. No complex tag system. No multi-step wizard (single page form instead).
That setup turned a feature request like "add a menu upload step" into one good prompt instead of a 40-message thread.
What happens when a layer is missing
Quick diagnostic — if your AI keeps producing one of these symptoms, you know which layer to fix:
- Output is technically right but feels off-strategy → product context is thin.
- Output keeps importing the wrong libraries → technical context is missing.
- Output looks like a generic AI app → design context is missing.
- Output keeps suggesting things you already rejected → decision context is missing.
The pattern is consistent enough that I now use these symptoms as the diagnostic before I read a single prompt log.
How to roll this out without overthinking it
Start with one screen of each file. Don't try to be exhaustive. Ship one feature. Notice which layer the AI struggled with. Strengthen that layer. Repeat.
Within a month you'll have context files that fit the project like a glove. Within a quarter, they'll be the most valuable asset in the repo.
So — what are the 4 layers every AI agent needs?
Product. Technical. Design. Decision.
Skip any one of them and you'll feel exactly which one is missing within the first three prompts.
The model is rarely the bottleneck. The four layers almost always are.