Beyond Vibe Coding: Advanced AI Engineering with John Lindquist

A lot of the conversation around AI coding tools focuses on getting started. We talk about writing your first prompt, generating a simple app, or what I like to call 'vibe coding'—getting a feel for what's possible. But I constantly hear from senior engineers, principals, and VPs of Engineering who are past the vibe check. They know how to write great software, and they're asking a different question:

How can these tools make me, a highly experienced developer, measurably better and faster?

That's why I was so excited to talk with John Lindquist, the co-founder of egghead.io and now AI DX at Vercel. John is a true power user of tools like Cursor and Claude Code. He's creating sophisticated, automated workflows that save time and improve code quality, and he shares his favorite tricks with us on the show.

This is an episode for those of you who want to go from a 9x to a 10x engineer.

Let's get into the workflows.

Workflow #1: Supercharge Your AI with Diagrammatic Context

One of the biggest challenges with any AI systemis its lack of memory. Every session starts fresh, with no understanding of your application's architecture. John's solution is to preload that context using a format that's far more efficient for a machine to read than a human: Mermaid diagrams.

These diagrams are a text-based way to define application flows, database schemas, and user interactions. While the resulting visual diagram can be a complex web for human eyes, the underlying text is a perfectly compressed map for an AI.

Step 1: Generate and Organize Your Diagrams

First, you need the diagrams. You can use an AI prompt to generate them from an existing codebase or integrate it into your development lifecycle, like generating diagrams for a new feature when a pull request is closed. John organizes these into a dedicated directory within his repo, like memory/ai/diagrams/, so all his context files are in one place.

Step 2: Load Context with a System Prompt

Instead of manually feeding files to the AI with @ mentions, John injects all this context at the beginning of a session using a system command in Claude Code. This forces the AI to start with a deep understanding of the codebase.

In your terminal, you can run this command:

claude append-system-prompt "$(cat memory/ai/diagrams/**/*.md)"

This command finds all markdown files in your diagrams directory, concatenates them, and appends them to Claude's system prompt. It's a one-time setup for your working session.

The Outcome: Faster, More Accurate Responses

The tradeoff is a higher upfront token cost, but the value is immense. The AI can now answer complex questions about your codebase almost instantly, without needing to perform slow file searches. When John asked, "please explain the authentication flow," Claude didn't need to read a single file; the answer was already in its context. This leads to faster, more reliable, and more insightful assistance.

Workflow #2: Build Your Own AI Toolkit with Aliases and CLIs

As you develop your AI workflows, you'll find yourself running the same commands or prompts repeatedly. John's philosophy is to automate that repetition away, either with simple shortcuts or by building his own small, dedicated tools.

Part A: Creating Simple Aliases

If you're using a shell like Zsh, you can create aliases for your most-used Claude Code commands. This reduces multi-word commands to just a few keystrokes. John shared a few of his:

# Set the model to the fast but less powerful Haiku
alias h='claude set-model claude-3-haiku-20240307'
# Enable the 'dangerously' mode to bypass permissions
alias x='claude set-permission-mode bypass-permissions'
# Load all my diagrams into context (from Workflow #1)
alias cdi='claude append-system-prompt "$(cat memory/ai/diagrams/**/*.md)"'

This is a simple but powerful way to codify your preferences and make your AI interactions more fluid.

Part B: Building Custom Command-Line Tools

John takes this a step further. As he says, "I tend to build any idea I come up with." Instead of wrestling with prompts in a chat interface, he builds small command-line interface (CLI) tools that script the AI to do exactly what he wants. He showed me a tool he built called sketch which wraps the Gemini CLI to generate website design mockups.

When he runs it, the tool asks a series of questions:

1. What type of website do you want to build? (A store for selling Christmas decorations)
2. What page do you want to design? (The homepage)
3. What style? (Creative and artistic)

It then takes these inputs, combines them with a pre-written prompt structure, and calls the Gemini API to generate a series of design images. This is brilliant because the constrained UI of the terminal forces you to focus only on the essential inputs, making prototyping incredibly fast.

Workflow #3: Enforce Code Quality with Automated Stop Hooks

This was my favorite workflow and arguably the most advanced. An AI can generate code that looks correct, but fails a TypeScript check or violates a linting rule. Instead of manually finding and fixing these errors, John uses Claude Code's hooks to create an automated quality gate.

Step 1: Define the Logic in a Hook Script

John created a stop hook, which is a script that runs automatically every time Claude finishes a task. The script, written in TypeScript using the Claude Agent SDK, implements a clear logical flow:

1. Check for file changes. If no files were touched, the hook does nothing.
2. Run quality checks. If files were changed, the script runs bun typecheck.
3. Handle errors. If the type check fails, the hook sends the error report back to Claude with a new instruction: {"prompt": "Please fix the TypeScript errors. Here is the report: ..."}. This is sent back to Claude by being the console.log output of the script.
4. Commit successful work. If the checks pass, the hook instructs a background agent to generate a commit message and commit the work.

Step 2: Configure the Hook in Claude Code

He configured this hook to run for his project by adding it to his settings.local.json file. The configuration simply points to the script that should be executed:

{
  "claude.hooks.stop": [
    {
      "command": "bun run claude-hooks/index.ts"
    }
  ]
}

The Outcome: An Automated "Fix and Commit" Loop

In his demo, John asked Claude to create a file with a syntax error. Claude created the file and would have stopped. But the stop hook kicked in, ran the type check, and found the error. It automatically prompted Claude to fix it. Claude made the fix. The hook ran again, confirmed the tests passed, and then triggered an automatic commit. This entire cycle—check, fail, fix, re-check, pass, commit—happened without any manual intervention.

This is how you get scaled leverage. By investing in shared configurations like this, an entire engineering team can benefit from a baseline of quality and efficiency.

The Takeaway

What I love about John's approach is that it treats AI not as a magic box, but as a powerful, scriptable engine. To get real, production-level value from these tools, we need to move beyond simple chat. We need to architect our environment by preloading context, automating repetitive tasks, and building automated quality gates.

If you're a senior engineer looking for that next level of efficiency, the answer isn't better prompting. It's in building better systems, and scaling those across the team.

Thanks to our sponsors!

This episode of How I AI is brought to you by:

• WorkOS: Helping you make your app Enterprise Ready with features like SSO, SCIM, and RBAC.
• Tines: The platform for building intelligent, automated workflows across your security, IT, and operations teams.

Find John

• egghead.io
• AI Dev Essentials Newsletter
• LinkedIn
• X

Tools Referenced:

• Claude Code
• Cursor
• Gemini
• Claude Hooks Documentation