The Engineering of Intent, Chapter 30: Vibe Coding in the Frontend

This is Part 30 of a series walking through my book The Engineering of Intent. In the previous chapter, we covered backend work. Chapter 30 turns to the frontend — visual, fast-iterating, immediate-feedback — and the specific failure modes that come with that territory.

Frontend Has a Different Shape

The output is visual. The iteration cycle is fast. The feedback from users is immediate. Vibe Coding in the frontend is especially productive — and especially prone to specific failure modes: accessibility regressions, design-system violations, state-management complexity that emerges over time.

Four Domains That Matter Most

1. Design System Adherence. The single most common frontend failure mode: agents produce custom components when the design system has equivalents. Remedy: make the design system discoverable to the agent — include canonical components by name in conventions.md; when in doubt, the agent uses existing; when the design system genuinely doesn’t cover the need, the agent stops and asks.
2. Accessibility. Agents produce accessible code when asked and inaccessible code when not asked. The asymmetry is brutal. Every new component: explicit ARIA roles, documented keyboard navigation, color-contrast check. Automated tooling (axe, pa11y) integrated into the gate stack — not aspirational.
3. State Management. Agents produce state fluently but inconsistently. Write the rules down: local UI state uses useState. Shared UI state uses context. Domain state uses the store. Server state uses the query library. A quarterly state audit with an agent classifying every piece of state pays back across the whole quarter.
4. Performance. Measure before asking. Give the agent the actual measurement (“this component renders in 220ms when the list is 1,000 items”). Generic “optimize this” requests produce generic optimizations; specific requests produce specific ones.

The Dashboard Rebuild in Eleven Days

A SaaS company I advised had a dashboard accreting features for four years. Slow, inconsistent, hard to maintain. Two engineers. Classical estimate: three months. AI-native estimate: ten days. Actual: eleven.

• Day 1: extracted canonical component catalog via agent — deduped to seventeen.
• Day 2: Figma-linked spec per canonical component.
• Days 3–7: rebuilt the seventeen in a new typed, design-system-first shell. Parallelized: one engineer on inputs/tables, one on layouts/charts.
• Days 8–9: wired to data layer; parallel-mode rollout with user toggle.
• Day 10: accessibility audit (three issues, fixed), perf audit (p95 render time 4x better), internal user test.
• Day 11: shipped to 10%.

Over two weeks, ramped to 100%. Zero regressions. Measurable improvement in user-reported satisfaction.

“Frontend rebuilds are among the highest-leverage AI-native projects. The visual feedback loop is fast; the component-by-component decomposition maps naturally to agent-sized chunks; the design-system constraint gives the agent a clear target. This is a domain where AI-native speed is not marginal. It is transformative.”

Next up — Chapter 31: Vibe Coding in Data and ML. Data and ML work is where the gap between prototype and production is widest — and where agents both help and mislead the most. Chapter 31 walks the practices that keep data work honest.