Beyond Vibe Coding with Addy Osmani — Key Notes

Source: Beyond Vibe Coding with Addy Osmani - YouTube

Addy Osmani is an engineering leader on Google’s Chrome team, focused on web performance and developer tooling; he’s also the author of “Learning JavaScript Design Patterns.”

TL;DR

LLMs can get you ~70% of the way fast; the last 30% (quality, security, edge cases, maintainability) still requires engineers who understand the system. “Vibe coding” is great for prototypes; AI-assisted engineering keeps a human firmly in control for production.

Vibe Coding vs AI-Assisted Engineering

  • Vibe coding: high-level prompts, rapid acceptance of suggestions; useful for prototypes/MVPs/learning.
  • AI-assisted engineering: engineer owns architecture, reviews all changes, enforces security/perf/maintainability before merge.
  • Treat vibe-coded prototypes as ideas, not production code.

The 70% Problem

  • LLMs quickly produce most of an app but struggle with the final mile: hidden bugs, integration issues, security gaps, maintainability drift.
  • Senior engineers close this gap more reliably; juniors often keep re-prompting instead of debugging and reasoning.

Workflow Recommendations

  • Spec-Driven Development: write expectations/requirements before generation.
  • Test early/first to de-risk output and keep the project “green.”
  • Decompose into small, verifiable chunks; avoid one giant prompt.
  • Read the model’s thinking/plan and manually review diffs before PRs.
  • Keep human oversight central—don’t let AI write and approve code.

Context and Quality

  • Practice context engineering (right files, examples, constraints) to improve output inside finite context windows.
  • Assume training data trends toward “works, not best”—you still harden for security, performance, accessibility.

Next Workflows and Tools

  • Background/async agents for low-risk changes (tests, migrations, small UI work) with human-verifiable diffs and CI gates.
  • Give models browser eyes (e.g., DevTools integrations) to inspect the live page/console and tighten the feedback loop.
  • Vibe-designing: designers prototype interactive UIs with AI, then engineers productionize.

Tools Mentioned

  • Cline (VS Code) — open-source coding agent with MCP integrations.
  • Bolt.new — agentic scaffolder from the StackBlitz team.
  • Chrome DevTools MCP — lets agents inspect and reason about the running page.

Team and Role Shifts

  • Code review becomes the bottleneck as velocity rises; AI reviews are signals, not substitutes.
  • PM/EM evolution: more focus on problem framing, evals, governance, safety reviews.
  • Education: teach prompt/context engineering; use AI as a learning/onboarding tool for codebase comprehension.

Practical Guardrails (Checklist)

  • Keep a human in the loop; require manual review on AI-authored diffs.
  • Enforce tests, security checks, quality gates in CI.
  • Be deliberate about library vs AI-generated code (maintenance & security trade-offs).
  • Periodically code without AI to preserve debugging and critical-thinking muscles.

References