Two-Layer Architecture
Why AI-generated code for humans needs a different quality standard — and how we enforce it.
The Problem
AI writes code. A lot of it. But there's a dirty secret: AI-generated frontend code fails in ways that backend/API code doesn't.
A Python module with a missing closing parenthesis throws an ImportError — caught immediately, easy to debug. But a JavaScript file with a missing closing brace? The entire page silently breaks. The login button does nothing. The user sees a white screen. Zero error messages.
This isn't a bug in the AI — it's a category error. We were applying the same quality standard to code meant for other AIs as to code meant for humans. They're fundamentally different.
Two Layers
| Dimension | Layer A (AI→AI) | Layer B (AI→Human) |
|---|---|---|
| Who consumes | Other AI agents, APIs, configs | Humans — browsers, buttons, UIs |
| Error tolerance | Partial — AI can infer intent | Zero — invisible failures |
| Typical failure mode | ImportError, log message | Silent breakage, button does nothing |
| Verification | Logic test, import check | Syntax check + API test + visual |
| Examples | Skills, anchors, configs, APIs | Web pages, JS, login forms, chat UI |
🔴 Layer A Rule: Logic correct = deliver. Syntax can be approximate; AI consumers adapt.
🔴 Layer B Rule: Syntax zero-tolerance. node -c before deploy. Any unclosed brace = entire page dead.
Where AI-Generated Frontend Breaks
From real incidents across our 6-site fleet, these are the patterns that fail every time:
| Pattern | Symptom | Fix |
|---|---|---|
Unclosed { | Entire JS block fails, all buttons dead | node -c catches it |
()=>try{} | SyntaxError — try is not an expression | ()=>{try{}catch(e){}} |
Orphaned .then() | Dangling promise chain, runtime error | Remove dead code |
Orphaned catch | }catch(e){ with no try | Wrap or use .catch() |
| Duplicate handlers | Function + arrow assigned to same onclick | One pattern, one source of truth |
| Inline script tag | Can't independently syntax-check | Extract to static/app.js |
The Quality Gate
Every AI in our system that touches frontend code must pass through this gate before reporting "done":
# 1. JS must be a separate file
# No inline <script> allowed
# 2. Syntax check (mandatory, not optional)
node -c static/app.js
# 3. Scan for known traps
grep -n "alert(" static/app.js # no debug artifacts
grep -n "}catch(" static/app.js | grep -v try # no orphan catch
# 4. Verify critical functions exist
grep -c "loginBtn\|authOK\|setLang" static/app.js # > 0
# 5. API endpoint test
curl -s -X POST https://site.com/v1/auth/login ... | grep "ok"
# 6. Only then: report "fixed"
Why This Matters
As AI-generated code becomes the majority of all new code, the distinction between AI-to-AI and AI-to-human quality standards will define which systems users trust.
A system that silently delivers broken UIs because "the AI wrote it" is not production-ready. A system that enforces a quality gate between what AI produces and what humans see — that's a system that respects its users.
We run this gate on every deploy across our fleet of 6 VPS nodes serving 6 public sites, tracked in a shared anchor file that every AI agent reads before touching code.
References
• EITE Benchmark — 134 lifecycle tests, 50 universal black-box tests, cross-system rankings
• eite-benchmark — Open-source benchmark framework for AI agent systems
• ticalasi.cloud — AI Chat Center with auto-archive, smart classification, full-text search