How PMs Can Run Their Own Quality Gates

Hướng dẫn chi tiết về How PMs Can Run Their Own Quality Gates trong Vibe Coding dành cho pm.

How PMs Can Run Their Own Quality Gates

The “Is it Ready?” Anxiety: Reclaiming the Ship Button

As a Product Manager in the era of Vibe Coding, you’ve likely experienced a specific, recurring form of stress. Your developers—or your AI agents—are moving at terminal velocity. Features that used to take weeks now appear in hours. On the surface, it’s a dream. But beneath that speed lies the “Black Box Problem.”

You receive a message: “Feature complete. Ready for review.” You open the staging link, and within thirty seconds, you find a broken button, a missing translation, or a layout that collapses on mobile. The “vibe” was there, but the quality wasn’t. Suddenly, you’re back in a loop of manual testing, bug reporting, and waiting. You’ve become the bottleneck, the human “Quality Gate” that can’t keep up with the machine’s output.

In Vibe Coding, traditional QA is too slow. If your AI can write a feature in ten minutes, but it takes you two hours to verify it, the system is broken. This article is your guide to moving from a passive receiver of code to an Active Quality Orchestrator. We’re going to show you exactly how PMs can run their own automated quality gates—using the same tools the engineers use—to verify work in real-time and ship with total confidence.


Core Concepts: What is a Quality Gate in Vibe Coding?

In the Todyle/Cody Master ecosystem, a Quality Gate is not a person or a meeting; it is a programmable “checkpoint” that code must pass before it moves to the next stage. Traditionally, these were the exclusive domain of DevOps engineers. In Vibe Coding, we’ve abstracted them into human-readable commands.

The 8-Gate Philosophy

Our framework operates on an 8-Gate system designed to catch errors at the source. As a PM, you don’t need to know how to write the tests for all eight, but you must understand how to trigger them and read the signals.

  1. Identity Gate: Ensuring the work is being done in the right environment (e.g., the correct GitHub account or Cloudflare project).
  2. Spec Gate: Does the implementation actually match the product.md or spec.md you wrote?
  3. Lint/Type Gate: Is the code structurally sound? (AI catches this, but you verify the “Green” light).
  4. I18n Gate: Are there hardcoded strings? Did the translation break the UI?
  5. Visual Gate: Does the UI match the design tokens? Are there regressions in the layout?
  6. Safety/Secret Gate: Did the AI accidentally leak an API key or a hardcoded password?
  7. Business Logic Gate: Does the “Happy Path” work? Can a user actually complete the goal?
  8. Deploy Gate: The final automated check before the staging URL is generated.

The Shift: From “Bug Finder” to “Goal Validator”

Your job isn’t to find “null pointer exceptions.” Your job is to validate that the Job-To-Be-Done (JTBD) is fulfilled. By running your own gates, you are verifying that the software “solved the problem” before you even look at the UI.


How It Works: The PM’s Quality Dashboard

You don’t need to open VS Code. Most PMs running Vibe Coding workflows interact with the CM Dashboard (cm-dash.js) or a simplified CLI. Here is the technical workflow for a PM-driven quality check.

1. Defining the “Success Criteria” in Markdown

Everything starts with your spec.md. In Vibe Coding, your specification is more than documentation; it’s the input for the quality gate.

  • Action: When you define a feature, include a “Verification” section.
  • Example:
    ### Verification Requirements
    - [ ] User can click 'Refer' and see a unique link.
    - [ ] The link is copied to clipboard (Toast notification appears).
    - [ ] The page works in English and Spanish without text overflow.
    - [ ] Mobile view shows the button full-width.

2. Triggering cm-quality-gate

Once the AI claims the task is done, you run a single command (or click a button in the dashboard): cm-quality-gate.

This doesn’t just “run tests.” It orchestrates a series of sub-agents:

  • The Auditor: Scans the code for hardcoded strings (using scripts/audit-i18n.js).
  • The Visual Validator: Takes a screenshot of the new component (using get_screenshot) and compares it to the design system.
  • The Logic Agent: Runs the “Happy Path” using Playwright to ensure the button actually works.

3. Reading the “Signal”

The output you get is designed for product clarity, not just stack traces.

  • Green: The feature matches the spec, has no I18n errors, and the UI is stable. Permission to Vibe.
  • Yellow: Functional but has “technical debt” (e.g., missing meta tags or suboptimal mobile padding).
  • Red: Hard failure. The AI is sent back to the “Implementation Phase” automatically.

Practical Example: The “Referral Program” Launch

Let’s look at a real-world scenario. You are launching a new referral popup. You’ve used cm-brainstorm-idea to design it, and a sub-agent has implemented it.

Step 1: The AI says “Done”

The agent reports: “Referral popup implemented in src/components/ReferralModal.tsx. Staging ready.”

Step 2: You Run the I18n and Visual Gate

Before you even click the staging link, you want to make sure the “Vibe” isn’t ruined by sloppy execution. You run: node scripts/gate-3-i18n.js

The Finding: The script finds a hardcoded string: "You get $20!" inside the code instead of using the translation file. The PM Action: You don’t fix it. You simply reject the gate. The agent sees the rejection, reads the audit log, and moves the string to i18n/en.json and i18n/es.json automatically.

Step 3: Running the Visual Verification

You want to see how it looks on a Pixel 7 vs. an iPhone 15 without having twenty devices on your desk. You trigger the Pencil Integration: pencil get_screenshot --nodeId "referral-modal-container" --device "mobile"

The tool returns a high-res PNG. You notice the “Close” button is partially obscured by the notch on the iPhone. The PM Action: You add a comment to the task_plan.md: “Visual Gate failed: Increase top padding for mobile safe-areas.”

Step 4: Final Sign-off

After the AI fixes the padding and the translations, you run cm-quality-gate one last time. Every light is green. You haven’t spent a single minute “repro-ing” bugs in a browser. You’ve let the gates do the heavy lifting.


Best Practices & Tips for PMs

Running quality gates is a superpower, but it requires discipline to avoid becoming a “Micro-manager of Code.”

1. Write “Testable” Specs

If your spec says “Make the UI feel premium,” the quality gate will fail because “premium” isn’t a measurable metric. Instead, use design tokens: “Use --color-primary-600 for buttons and shadow-xl for the modal container.” This allows the visual-validator agent to verify the change mathematically.

2. Use “Evidence-Based” Verification

Never accept a “fixed” status without evidence. Your cm-quality-gate should be configured to require a screenshot or a log output before it marks a task as complete. This is the core of Epistemic Quality Control—knowing that you know.

3. The “Two-Round” Rule

In Vibe Coding, if a feature doesn’t pass your quality gates in two rounds of AI self-correction, it usually means the Spec is the problem, not the code. Stop the implementation, go back to cm-planning, and clarify the requirements.

4. Protect the “Global Context”

As a PM, ensure that the GEMINI.md or product.md files are always up to date. These are the “Constitution” of your project. If the quality gates are checking against an old version of the truth, you’ll get “Green” results for “Wrong” features.


Conclusion: Reclaiming Your Time

The goal of Vibe Coding is to let humans stay in the “Idea and Strategy” layer while the machines handle the “Syntax and Execution” layer. However, strategy without verification is just a wish.

By running your own Quality Gates, you are no longer the person who “waits for the dev to finish.” You are the pilot of a high-speed delivery system. You define the destination (The Spec), you set the safety parameters (The Gates), and you simply monitor the flight.

When you can run a cm-quality-gate and see a wall of green lights, the “Is it ready?” anxiety disappears. You don’t need to ask if it’s ready; you know it’s ready.

Now, go to your terminal, run cm-status, and see which gates are waiting for your command. It’s time to ship.