How Senior Engineers Build With AI in 2026 | Vibe Code | System Architecture

Key technological ideas & claims

• Shift in how senior engineers use AI (Meta/Apple/Nvidia): Instead of manually coding, senior engineers design the system/architecture and use AI to implement. The main competitive skill is learning to think architecturally and system-design-first, not prompting blindly.

• Why many AI projects fail: Simple projects can be completed quickly, but larger apps with strict architectural patterns and heavy business logic often end up unfinished because:

  • teams prompt without a solid plan,
  • the AI loses context mid-development,
  • later changes break earlier assumptions/features.

• Core methodology: Spec-driven development (“spec” first):

  • Build from a clear instruction manual/spec before writing code.
  • Keep consistent context so the AI stays aligned across sessions and iterations.
  • The presenter argues this prevents “vibe debugging” (wasted time diagnosing AI mistakes).

“Six-file context system” (spec-driven development)

The tutorial’s main framework is a six-file set that keeps the AI synchronized about what to build and where the project is in progress:

1. pod.md — problem statement + scope
2. text/implementation plan — steps and execution plan
3. architecture.md
4. progress.md — updated continuously as work advances
5. rules — coding/system principles the AI must follow
6. Another planning file — mentioned as part of the six-file set (subtitles specifically list pod.md plus “implementation plan / progress / rules / architecture.md” and reference six total files)

Important operational detail

At each phase, the workflow includes instructing the AI to update progress.md, so a new AI session can read the existing state and continue correctly.

Architectural-first planning walkthrough (example app)

The demo sets up a flight booking web app and shows how to generate the six files with AI.

Front end stack

• Next.js
• shadcn (component library)
• Tailwind CSS

Data/UI libraries/tools

• TanStack Query

Validation

• Zod

Backend platform

• Infr / “Inforge” — described as an all-in-one backend platform handling auth/database/storage/API/deployment to avoid manual configuration

Payments

• Stripe

Phase-based approach

The AI-generated architecture/implementation plan is described as phase-based (days/phases), including:

• foundation & infrastructure (design system, schema, auth)
• flight search as a major early feature
• booking flow

Design generation and integration features (Stitch → code)

Design creation

• Google Stitch generates UI/designs from prompts
• Uses a Booking.com-style reference (including a custom palette like “sky blue”)

Design-to-code automation via MCP

The presenter connects the design tool to the editor using MCP (Model Context Protocol).

Shown steps:

• create an API key in Stitch
• store the key in a local file
• run a Cloud Code MCP add command to connect Stitch transport with the API key
• test with Cloud Code commands (e.g., listing Stitch projects, viewing a specific screen)

After MCP is confirmed working, the AI can be prompted to analyze a Stitch design and build the homepage UI in the code editor.

Fallback approach

• Export/copy to Figma
• Later use Figma MCP for further automation (subtitles note the MCP approach could also apply to Figma components)

“Free AI agent” option (local models)

A bonus section covers a free/local AI coding agent approach.

• Uses local inference instead of paid hosted services
• Mentioned tooling:
  • Ollama (local model runner)
  • Llama (local model interface/agent context)
  • Gemma 4 (~9.6GB cited; downloading described as heavy)
  • another model variant mentioned as “Gemma 2/26B” (subtitles unclear), with commands/tests

The presenter warns the setup is large and doesn’t fully complete it in the recording.

Tutorial outputs the viewer is guided to produce

• Create a project folder in VS Code and use Cloud Code
• Generate the six context files using an AI prompt
• Generate UI/designs with Google Stitch
• Connect Stitch → Cloud Code via MCP and generate UI/code from the design
• Optionally:
  • move designs to Figma and (optionally) use Figma MCP
  • use a local free agent via Ollama + Llama + local models

Main speakers / sources

• Speaker/source: Presenter/host of the video (no specific name provided in subtitles)
• Referenced companies/products (examples): Meta, Apple, Nvidia, Netflix, Google
• Tools/brands referenced: VS Code, Cloud Code, Google Stitch, Figma, MCP, Next.js, shadcn, Tailwind CSS, TanStack Query, Zod, Stripe, Inforge, Ollama, Llama, Gemma