Vibe Engineering Hero
CLAUDE CODE WORKFLOW

How a Product Person Ships Real Products

With Claude Code + Opus 4.5

Joe Hu

Joe Hu

Product Person & Vibe Engineer

๐Ÿ’ก

TL;DR

The essentials in 30 seconds

  • 1 Write what you want first without AI
  • 2 Use Plan Mode with ultrathink to break it down
  • 3 Keep context window under control by compacting and using subagents
  • 4 Test manually
  • 5 When debugging, act like a PM and provide evidence

โšก The bottleneck is not AI's capability, it's your ability to articulate what you want.

Introduction

๐Ÿ’ป

What is Claude Code?

Claude Code Interface

๐ŸŽฎ Reminds me of grinding in WoW during college... except now shipping real products instead of raiding dungeons.

Disguised as a developer tool, but it's actually a general agent that handles any computer task via code or terminal.

Create anything in the digital world as long as you know how to articulate what you want. It's the most powerful tool to build for yourself - right now.

๐Ÿ’ก My Favorite Product of 2025 โ€” Subscribed to Claude Max ($200/month). With Opus 4.5, building real products with backend, cloud, payment systems.

๐Ÿš€ The Evolution โ€” Last summer it wasn't as powerful. Now I can do anything I want with a longer plan.

๐Ÿ‘ค

My Background

Joe's Background
PRODUCT PERSON

I am a product person without a strong technical background.

Fortunately, I'm already familiar with the software development process, which means I am better positioned than most people for vibe coding.

I am a living example of how AI empowers skills.

๐ŸŽฏ

Why Do We Have This Session/Page

This month, I'm at Ottawa's first AGI Ventures Hacker House alongside some high-agency people. I'm also excited (and grateful) to have been accepted into the first cohort.

The core: Explore a better workflow for you and me.

For Claude Code, everyone has different usage and workflows. I came up with an idea to share my workflow and trigger discussion to learn from each other.

This is how I use Claude Code currently (Tuesday, January 14, 2026). It updates rapidly.

Fun fact: Claude Cowork was written 100% by Claude Code itself

AGI Ventures Hacker House
WHAT I DO

What I Do with Claude Code

As long as a task can be done on your computer, Claude Code is likely to complete it.

๐ŸŽจ

Display

Website / Slide deck

(This page is also an example!)

๐Ÿ“

Write

Assignment, Report

Claude Code can complete 100+ page project reports in a few hours with enough context.

Key Principles

Things that remain unchanged in the short term

๐Ÿ“„

1. Document First

Detailed Documentation

Hover to learn moreTap to learn more

Your Demands First

Articulate what you want. Most issues arise because you don't know what you want or haven't clarified your requirements.

Since I don't know the code, this is the core part to validate if AI understands my demands by reading documents.

๐Ÿง 

2. Context Window

Memory Management

Hover to learn moreTap to learn more

Manage the 200K Limit

Context window = AI's memory. Opus 4.5 has 200K tokens. Performance degrades as it fills up.

โ€ข Break tasks into smaller pieces
โ€ข Implement one at a time
โ€ข Use subagents & compact manually

๐Ÿ”

3. Manual Testing

Your Taste Matters

Hover to learn moreTap to learn more

The Key to Quality

Manual testing is the key to delivering better results with your taste.

It takes time, but ensures the output matches YOUR expectations, not just what AI thinks is correct.

๐Ÿ’ก

4. Mindset

Stay Curious

Hover to learn moreTap to learn more

Keep Your Passion

Ask any questions. If AI's response has unreasonable areas, ask it to clarify.

You can say you don't know code, but you can't say you don't know the logic. Your curiosity is the key!

Pushback and investigate when something seems off:

Pushback and Investigate

The Context Quality Curve

100% 80% 60% 40% 20% 0% 20% 40% 60% 100% Context Usage % Quality DANGER ZONE "Lost in the Middle" begins

โš ๏ธ Key insight: Quality degrades non-linearly. The last 20% of context is poison.

> source: arxiv:2307.03172 โ€” "Lost in the Middle: How Language Models Use Long Contexts"

To manage the context window:

  • โ€ข Break tasks into smaller pieces
  • โ€ข Implement tasks one at a time
  • โ€ข Document the status
  • โ€ข Use Subagent and compact manually

My Workflow

A complete walkthrough from planning to deployment

โ— Before Running Claude Code

Use the native build (install it with homebrew)! Much nicer syntax highlighting. This is the reply I received from Claude Code creator Boris Cherny (@bcherny).

You can also run Claude Code on Claude Desktop directly now if something doesn't work on your terminal. (P.S. Anthropic just released Cowork on January 12, 2026 for non-technical people to use Claude Code in a more user-friendly way. The raw text and polishing were handled by Claude Cowork.)

โ— Decision Tree

New Task? Coding Project Visualization Big / Main Feature โ†’ CC Local Other Features โ†’ CC Web (parallel!) CC + Opus 4.5 Plan Mode + Frontend Design Skills Always have a markdown editor alongside to draft your thoughts

Run multiple CC Web sessions in parallel - even on your smartphone:

Claude Code Web Parallel Sessions

โ— Draft Plan

This is the most important phase. Spend time here to save time later.

1

No AI. Just Write What I Want First

Don't worry about the grammar. Just write. Even for this sharing session, I wrote my raw thoughts first.

Raw Draft Statistics
Plan Document Phases Plan Verification Steps
2

Send Raw Text to CC

Refer to other context (for example, mention the specific document like docs/PHASE_9_NEXT_STEPS.md) to Claude Code, start with Plan mode and add ultrathink.

Generally, CC will ask you some questions to clarify. You answer and will get version 1 of the document.

3

Use "ask-questions-if-underspecified"

Always add: "If you have any questions, use 'ask-questions-if-underspecified' to ask me questions."

If I don't know the answers to some questions, I usually type "follow the best practice".

Ask Questions Skill Example
4

Read the Document Carefully

If you have any questions, send the feedback to CC. Back and forth.

Document Version History
5

For Big Projects, Clear Context and Review Again

If this is a big project or crucial feature, I will clear the context window and send the draft document to CC again to allow it to review it. I usually have 3 rounds.

I will also let CC break it down into different phases. I will have another specific document for each phase. For each phase, break it down into small tasks that can be verified at each step.

This usually takes several hours per phase document. This is absolutely worthwhile. It's better than dealing with future revisions later.

6

Allow CC to Check Status Before Coding

You can allow CC to check the status before coding and documenting. This will allow CC to check and verify the code itself (the actual status) to enhance the documentation.

Pre-Implementation Checklist
Visual UI Mockup
7

Allow AI to Draft the Plan Visually

Allow AI to draft the plan visually with diagrams and even UI prototype with elements. This shows you more directly what you want and allows you to change it before coding.

8

For Bug/Issue, Investigate First. Don't Code.

If it is a bug/issue, let CC write an issue and investigate/reproduce it first. Don't code.

Bug Investigation Document

๐Ÿ’ก Tips for Planning

  • โ–ธ
    Shift + Tab switches to Plan Mode. The benefit is that it will automatically launch subagent to search for information (save the context window) and write a plan and seek your feedback first.
    Plan Mode Subagents
  • โ–ธ
    Add ultrathink if it's a huge and complex task

โ— Execution

I'd suggest learning some basic git, CLI, and version control knowledge to help you feel more confident. Return to the fundamentals.

1. Start with Plan Mode Again

Once I have a plan, I will clear the context window and start with plan mode again to implement it. In my main product, I always open a new branch to add new features and debug.

New Branch Plan Mode

2. If Something Broken, Escape Escape (Rewind)

If something is broken, press Escape twice (Rewind) to pick the restore point.

3. Run /context to Monitor Context Window

Run /context or install some plugins to understand the current context window consumption.

Context Usage Display
Auto Compact Notification

4. Compact Context Window

While people recommend compacting the context window manually, for my convenience, I still use auto-compact. But I will manually compact it when I see this information.

I will run /smart-compact first to show me the preserved information and then run /compact to compact it.

5. Update Documents After Execution

After the execution, allow CC to update documents to keep the documentation consistent.

Document Update Diff
State Machine Diagram

6. Visualize the Logic

To help you understand the code better, tell CC to write a document to list and visualize the logic. You may not know the code but you should know the logic and control it.

About CLAUDE.md

CLAUDE.md is the document that allows CC to read each time. I didn't write CLAUDE.md from scratch. I copied from others and talked with AI to keep it simple.

โ— Test and Deploy

๐Ÿ”
01

Manual Test

Manually test to make sure it matches my requirements. Cover the core workflow at minimum.

๐Ÿ‘€
02

Code Review

Claude Code/Codex will review and send feedback. Evaluate feedback before implementing.

๐Ÿš€
03

Run /pre-flight

Use /pre-flight to review code, add comments, write tests.

Test Suite Running

(2000+ tests - how to run faster?)

๐Ÿ”„
04

GitHub PR, Issue, CI

Learn the GitHub workflow. I didn't know what a PR was 3 months ago!

GitHub PR Checks
๐ŸŒ
05

Browser Tools

Use MCP or Vercel Agent Browser for UI validation.

Dev Browser
๐Ÿ“ฆ
06

Deploy

Sequential deployment flow below.

Vercel Deployments

Deployment Flow (Sequential)

localhost
Vercel Preview
staging
main

๐Ÿ’ก For commercialized product: localhost โ†’ Vercel preview โ†’ staging โ†’ main

๐Ÿ’ก For general products: localhost โ†’ Vercel preview โ†’ main

(P.S. I just learned that if it is a commercialized product, you need to subscribe to Vercel Pro otherwise your project might be disabled. The hobby project is just for personal use.)

โ— Debug

Be a PM to help AI solve issues. Just like my previous work, be a PM to help R&D solve issues, provide suggestions as an outsider.

๐Ÿ“‹
01

Provide Evidence

Your responsibility to provide AI with logs and behavior. Ask AI to add logs. Report bugs professionally.

๐Ÿ”€
02

Compare Commits

Have a workable node? If broken later, ask AI to check that commit to learn the pattern.

๐Ÿ“
03

Document Issues

If AI keeps breaking features, document issues each round with reflections.

Incident History
๐Ÿ”
04

Search Online

AI stuck on same issue? Search online for similar situations.

API Discovery
๐Ÿ”ง
05

Use Other Tools

Codex or Cursor debug - feed feedback between tools. Used codex-5.2-xhigh to solve PWA issue!

๐Ÿ“Š
06

Sentry & PostHog

Use for production analysis. Monitor logs for evidence when users report bugs.

๐Ÿ“ธ
07

Ctrl+V Screenshots

Ctrl + V to paste screenshots directly into Claude Code for visual bugs. No need to save files - just copy and paste.

๐Ÿ”ฌ
08

Use /investigate

/investigate one issue at a time. Get a detailed report with root cause analysis.

Investigate

Tips Summary

โ‡งโ‡ฅ

Plan Mode

Shift+Tab to enter Plan Mode

๐Ÿง 

ultrathink

Add for complex tasks

๐ŸŒ

CC Web

Run multiple sessions simultaneously

๐Ÿ“Š

Context Management

Realize context engineering

/

Slash Commands

/context, /compact, /clear

๐•

Stay Updated

Follow @hubeiqiao for tips

Custom slash commands: /investigate, /pre-flight, /smart-compact

(Full text shared in the Appendix below)

๐Ÿ’ฌ

Discussion

Let's learn from each other

๐Ÿค”

What is something I don't realize I don't know but I should know?

(Something I don't know how to ask about) Do you have any suggestions about my workflow?

๐Ÿ’ก

What's your workflow? Do you have any tips you want to share?

๐Ÿ“Š How do you manage context window? When do you use compact?
โšก How can we get AI to run tests faster?
๐Ÿช Do you have any tips about using hooks?
๐Ÿ“ Should I keep per doc tokens within 25K intentionally?

Share your thoughts and feedback:

Discuss on X
โœจ

One More Thing

99% of people don't realize Claude Code's potential.

This is the opportunity for all of us.

What does the world look like next year? Or how could my process be improved? On-demand software generation is truly approaching (while it's still a monthly timeline to build a whole application by myself now). My feeling is that the true bottleneck is myself...

Appendix: My Tool List

Custom slash commands I use daily

๐Ÿ“Š

/context

Context Usage Details

View detailed breakdown of your context window: tokens used by system prompt, tools, agents, memory files, skills, and messages. Track free space and autocompact buffer.

Context Usage Detailed
๐Ÿ› ๏ธ

/context

Tools, Agents & Skills

Lists all available MCP tools, custom agents (project & user-level), memory files, and skills with their token usage. Useful for understanding what's loaded in your session.

Tools Agents Skills List
โšก

Core Commands

Essential workflows for daily use

/preflight
---
description: Review code, add comments, write tests, and run quality checks
allowed-tools: Read, Write, Bash(npm test:*), Bash(npm run lint:*), Bash(npm run format:*), Bash(git:*)
argument-hint: [file-or-directory]
---

Review and test: $ARGUMENTS

## Rules:
- **NO regressions** - run `npm test` after EVERY file change
- **NO logic changes** - only add comments, never modify functional code
- If tests fail after a change -> revert immediately with `git checkout -- `

## Process:

1. **Baseline**: Run `npm test` first. If failing, STOP.

2. **Review code** for bugs, security issues, and missing error handling

3. **Add comments**:
   - Explain WHY, not what
   - Document edge cases and assumptions
   - Reference related code/docs

4. **Write tests** for new functionality (target 80% coverage)

5. **Run quality checks**:
   npm run lint && npm run format && npm test
   Revert any change that breaks tests.

6. **Update** `/tests/README.md` with new test files or testing instructions

7. **Report**: Show test results, linting summary, and files changed
๐ŸŽฏ

Planning & Clarity

Get requirements right before coding

/ask-questions-if-underspecified
---
name: ask-questions-if-underspecified
description: Clarify requirements before implementing.
---

# Ask Questions If Underspecified

## Goal

Ask the minimum set of clarifying questions needed to avoid wrong work; do not start implementing until the must-have questions are answered (or the user explicitly approves proceeding with stated assumptions).

## Workflow

### 1) Decide whether the request is underspecified

Treat a request as underspecified if after exploring how to perform the work, some or all of the following are not clear:
- Define the objective (what should change vs stay the same)
- Define "done" (acceptance criteria, examples, edge cases)
- Define scope (which files/components/users are in/out)
- Define constraints (compatibility, performance, style, deps, time)
- Identify environment (language/runtime versions, OS, build/test runner)
- Clarify safety/reversibility (data migration, rollout/rollback, risk)

If multiple plausible interpretations exist, assume it is underspecified.

### 2) Ask must-have questions first (keep it small)

Ask 1-5 questions in the first pass. Prefer questions that eliminate whole branches of work.

Make questions easy to answer:
- Optimize for scannability (short, numbered questions; avoid paragraphs)
- Offer multiple-choice options when possible
- Suggest reasonable defaults when appropriate (mark them clearly as the default/recommended choice)
- Include a fast-path response (e.g., reply `defaults` to accept all recommended/default choices)
- Include a low-friction "not sure" option when helpful
- Separate "Need to know" from "Nice to know" if that reduces friction

### 3) Pause before acting

Until must-have answers arrive:
- Do not run commands, edit files, or produce a detailed plan that depends on unknowns
- Do perform a clearly labeled, low-risk discovery step only if it does not commit you to a direction

### 4) Confirm interpretation, then proceed

Once you have answers, restate the requirements in 1-3 sentences, then start work.
/smart-compact
---
description: Compact context with explicit preservation rules
---

Perform a smart compaction:

## MUST PRESERVE (never summarize away):
1. Current task/goal
2. All file paths mentioned in last 10 messages
3. Any explicit decisions or constraints I stated
4. Error messages and their solutions
5. The current plan/checklist if one exists

## CAN SUMMARIZE:
1. Exploration that led to dead ends
2. Verbose output from commands (keep just the conclusion)
3. File contents that haven't been modified
4. General discussion that led to decisions (keep just decisions)

## FORMAT:
After compaction, start your next message with:

๐Ÿ“ฆ Context compacted. Preserved:
- [key item 1]
- [key item 2]
- [current goal]

Now perform /compact with these rules in mind.
๐Ÿ”

Debugging

Systematic investigation for tricky bugs

/investigate
---
description: Deep dive into a bug or behavior
allowed-tools: Read, Grep, Glob, Bash(git log:*), Bash(git blame:*)
argument-hint: [issue-description]
---

Investigate: $ARGUMENTS

Follow this systematic process:

## Phase 1: Understand
- What is the expected behavior?
- What is the actual behavior?
- When did this start? (check git log if relevant)

## Phase 2: Locate
- Search for relevant code with Grep
- Trace the code path from entry point
- Identify all files involved

## Phase 3: Analyze
- Use git blame to understand history
- Look for recent changes that might have caused this
- Check for related issues/patterns elsewhere

## Phase 4: Report
Provide a structured report:
1. **Root Cause**: [one sentence]
2. **Affected Files**: [list]
3. **Recommended Fix**: [approach]
4. **Risk Assessment**: [what could break]
5. **Test Plan**: [how to verify]

Do NOT make any changes. Investigation only.

References