My day-to-day vibe coding workflow

What is vibe coding?

The term "vibe coding" describes a way of working where you dialogue with an AI agent capable of reading, writing and executing code. Not code generated without thought: conceptual work — understanding the need, choosing an architecture, validating the result — remains human. The agent is a fast pair-programmer to whom you delegate the mechanics, not a substitute for the brain.

The word gained popularity in late 2025 and early 2026 with the maturity of agents like Claude Code, Cursor or Copilot Workspace. It is sometimes used pejoratively to describe sloppy code. My definition is the following: vibe coding = AI-assisted workflow with the usual rigor (tests, security, reviews). Nothing is sacrificed, everything is accelerated.

What follows is my practitioner's feedback after several months of daily use on client and personal projects: this site (QA Consulting), vitefait-bienfait-sp, white-label-hotel-platform, chatbot-booking-poc. The workflow has stabilized around 5 chained tools.

The workflow at a glance

Five tools, each with a clear role, passing the baton. Each step produces a deliverable that the next step consumes.

Let's detail each tool and its role in the chain.

The 5 tools in detail

Claude Code is the agent at the heart of the setup. It runs as a CLI in the terminal and integrates with VSCode and JetBrains. It exposes tools: Read, Edit, Write, Bash, Grep, and skills that are scripted competencies. Everything relies on a simple principle: the model only sees its context, so you optimize the context you give it.

superpowers is an open-source collection of skills created by Jesse Vincent. Each skill is a way of working: brainstorming to explore an idea, writing-plans to produce an execution plan, subagent-driven-development to delegate to sub-agents, code-review to read back. It's what turns a free conversation into a disciplined workflow. On this site, every feature follows the triptych brainstorm → spec → plan → exec.

claude design is a mode where the agent proposes mockups (HTML/SVG) that you visualize in a browser and validate by click. Ideal for layout choices, palettes, components. You no longer describe UI with words that say nothing — you look, compare, choose. This site's de-AI design refresh (move to forest green) was conducted via this mode.

Playwright paired with the playwright-cli skill is the winning combo for end-to-end tests. The playwright-cli binary is exposed via MCP. The matching skill teaches the agent how to use it effectively. Concretely, the agent can launch a real browser, click a selector, wait for an element to appear, screenshot, check a text — all without leaving the conversation. Visual QA becomes conversational.

GitHub and CI/CD close the chain. The agent prepares the PR, writes the title and description, proposes atomic commits. GitHub Actions workflows (or Azure DevOps Pipelines) trigger lint, typecheck, unit tests, e2e tests, security audit. If everything passes, the PR is mergeable. Otherwise, the agent iterates on feedback. We'll detail integration in chapter 6.

Prompt well and save your tokens

A good prompt to an agent looks like a good Jira issue: clear objective, explicit constraints, verifiable success criterion. No ambiguity, no "do your best". If the objective is fuzzy, the agent invents — and its invention is convincing but often wrong.

Objective: add a /pricing page with 3 price tiers.

Constraints:
- Reuse the existing <PricingCard> component
- Bilingual FR + EN (existing dicts)
- No back-office, data hardcoded in pricingContent.ts

Success criterion: route renders, 3 cards display, typecheck +
lint + Jest pass.

Saving tokens means paying less AND going faster. Three main levers: prompt caching, model fit to the task, context hygiene. Anthropic's prompt caching caches the stable part of the context (system, CLAUDE.md). A clean and stable CLAUDE.md saves ~90% on input tokens per turn.

On models: Claude Opus for reasoning tasks (design, complex debugging), Sonnet for most cases (guided implementation), Haiku for mechanical operations (renames, formatting). A tool like RTK (Rust Token Killer) intercepts common shell commands (git, npm, jest) and saves 60-90% on those operations by filtering the noise.

What we don't forget

AI accelerates; it doesn't relieve you from rigor. Four pillars never to sacrifice, on pain of paying later for what you gained now.

These four pillars are not specific to vibe coding. They are classic software development best practices. The difference: with AI, they become even more critical because execution speed goes up. Without a safety net, you ship bugs as fast as you ship features.

Integrate into your project and CI/CD

On the project side, three minimum files in the repo: a CLAUDE.md at the root (conventions, stack, attention points), a .claude/settings.json folder (permissions and hooks), and a docs/superpowers/ folder for specs and plans kept as a trace. All versioned like code.

On the CI/CD side, two setups recur depending on the client context. Setup 1 — GitHub Actions on modern web projects (Vercel, Cloudflare). It's this site's setup (QA Consulting, direct Vercel deployment without GitHub CI) and vitefait-bienfait-sp, whose ci.yml workflow chains lint (ESLint + Prettier), typecheck (tsc), unit tests (vitest) and e2e tests (playwright). Pre-commit hooks via husky + commitlint for local discipline, Vercel previews per PR.

# .github/workflows/ci.yml excerpt
jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: 22, cache: npm }
      - run: npm ci
      - run: npm run lint && npm run format:check

  typecheck:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: 22, cache: npm }
      - run: npm ci
      - run: npm run typecheck

  test-e2e:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: npm ci
      - run: npx playwright install --with-deps
      - run: npm run test:e2e

Setup 2 — Azure DevOps on enterprise projects. It's the setup of white-label-hotel-platform and chatbot-booking-poc: PR → CI → CD pipeline on Azure DevOps, Jest + Enzyme tests on React components, Snyk audit at build for dependency and code vulnerabilities. Deployment is automatic after merge on the release branch. The agent maintains the pipeline YAML like any other repo file: it proposes adjustments, you validate, you merge.

Well-integrated AI is not magic. It is one more tool in the chain, treated as such: with process, tests, and review. Done well, it changes the relationship to code — less friction on mechanics, more time for what matters: understanding the need and validating the result.