Claude Code Workflow: Build Projects That Hold Up

A durable Claude Code workflow comes from staging the work: lock the stack, prototype the interface visually, then let the agent build in reviewed parts. In a 110-minute live coding session published on May 28, 2026, Rocketseat demonstrated exactly this order while building a personal agenda app.

What the Live Coding Built and Why the Claude Code Workflow Matters

A disciplined Claude Code workflow starts with human decisions, not prompts, and that is the core lesson of Rocketseat's live coding session published on May 28, 2026. Over 110 minutes, Gabriel Buzzi, the company's Head of Product and Technology, built the first stage of a personal agenda app called Jarvis: a notes diary, a task list with deadlines, a React frontend, and an Express backend, all inside a monorepo.

The app itself is deliberately simple. The point is the foundation for what comes next in the series: an AI agent with tool calling, memory, guardrails and observability that will manage the agenda through natural language. That agent work is scheduled for the next live session on June 10, 2026.

The argument against the viral "entire product in one prompt" framing ran through the whole stream. The presenter's position, based on his own experience building products, is that one-shot generation at the start of a project produces a codebase whose conventions you never chose, and the agent then treats its own early choices as rules for everything that follows.

How Should You Prototype the Interface Before Coding?

The session demoed two design tools as alternatives to hand-building a Figma file. Both generate editable HTML interfaces from a text prompt, which the team then hands to the coding agent as a visual reference.

The first was Claude Design, described in the stream as a research-stage interface for prototyping HTML designs that connects directly to Claude Code. The second was Pencil, a design canvas with a Figma-like editing experience that can run several coding agents in parallel — the demo launched five or six concurrent agents to produce multiple layout variations from one prompt. For drafting interfaces before any product code exists, the presenter recommended either tool, or simply asking the agent to generate plain HTML mockups.

The practical payoff is control. When you can see what the agent intends to build, you catch implicit assumptions early — a date field rendered differently from what you pictured, a layout that assumes behaviors you never asked for. The stream framed this as spending a few extra tokens up front to avoid far larger refactoring costs later.

Setting Up the Project: Steps That Keep the Agent on Rails

The presenter's rule is to make every structural decision yourself, because an agent left to choose the stack will make a different choice every run. The setup followed this order:

1. Scaffold the monorepo with Turbo Repo via a fixed builder configuration: React frontend, Express backend, Node runtime, PNPM, PostgreSQL as the local database, no authentication or payments.
2. Install the chosen libraries explicitly — Tailwind CSS v4, Zod for validation, shadcn/ui components, React Hook Form for inputs, and the Vercel SDK for the future agent.
3. Extract the approved prototype into the frontend, defining color tokens and fonts in Tailwind so the design system lives in a shared UI package.
4. Define the two database tables — notes and tasks — with Drizzle ORM, then run the migration against a local Postgres instance.
5. Build the CRUD endpoints and wire them into the frontend with React Query, using optimistic updates for instant feedback.

The presenter noted a recurring pattern: the agent added sensible extras such as an error-handler middleware and request validation once the codebase gave it examples to follow. That is the intended effect — a well-shaped early codebase teaches the agent your conventions instead of inventing its own.

Spec-Driven Planning Without the Full SDD Ceremony

On whether to use full spec-driven development (SDD), the team's answer was a scoped yes. They tested GitHub's Spec Kit, which runs the complete specification pipeline end to end, and found it too slow for their pace. What they use daily instead is the Superpowers skill and plugin set for Claude Code or Codex.

The Superpowers flow works in stages: a brainstorm where the agent asks clarifying questions, three proposed approaches to choose from, a written spec file, then a plan that decomposes the work into tasks with explicit feedback loops and test-driven verification. In the live session, a request as small as "improve the date picker and make the app keyboard-first" produced four clarifying questions about date parsing, keyboard shortcuts and calendar behavior before any code was written.

The presenter distinguished the resulting spec file from a PRD: a PRD is broader business rules and can spawn multiple specs, each an isolated task. For personal projects he skips the PRD; for company products, his flow goes product discussion, PRD, then specs. Other community frameworks mentioned in the stream's chat — OpenSpec, GSD and the well-known grill-style question loops — were acknowledged as valid variants of the same idea.

What the Agent Layer Will Add in the Next Session

The May 28 session closed with the base app working: tasks created through the UI persisted to Postgres, notes saved, deadlines entered. The next live, dated June 10, 2026, will build the agent on top using the Vercel SDK already installed.

Planned topics from the stream include tool calling so the agent can create tasks and mark them done, memory management, system versus user versus assistant prompts, guardrails, caching, routing, and human-in-the-loop checkpoints. Observability received special emphasis: without token and flow tracking, an agent embedded in a product can quietly run up large monthly costs, so the team plans to cover tracing tools and evaluation (evals) to verify the agent answers what it should. Automatic code review services such as CodeRabbit were named as part of the broader review workflow the series will address.

For running parallel sessions, the presenter described Conductor, a desktop app that manages multiple worktrees and simultaneous agent sessions per project — he reported using five to eight concurrent sessions in his own work, with Codex preferred for backend logic and Claude for interface work.

Frequently Asked Questions

• Do you need a paid subscription to follow this workflow? The demonstrated tools assume a Claude Code or Codex subscription, and the presenter noted that third-party design tools connecting to Claude Code face pricing changes from early June 2026, which may shift subscription users toward Claude own design surface or Codex-based alternatives. Free speech-to-text options exist for prompting if you do not want a paid tool like Wispr Flow.
• Why not generate the whole app in one prompt? The presenter's experience is that one-shot generation at project start lets the agent make structural decisions you never reviewed, creating a codebase full of conventions you did not choose. Long sessions also degrade as the context window fills, and slop early in a project teaches the agent that slop is the norm.
• Is full spec-driven development worth adopting? The Rocketseat team found the complete SDD pipeline too slow and adopted a lighter version: brainstorm, choose among three approaches, write a spec, write a plan, implement with subagents and tests. Whether you need the heavier ceremony depends on project scope and how well you already understand what you are building.
• Does TypeScript help or hurt AI coding? The presenter reported no decisive difference in token cost either way, but found TypeScript helps the agent infer what the frontend expects and the backend returns, provided types are written well. Badly typed code hurts more than no types.

• What skills should a team learn first for agentic development? The stream's priority list is stack definition before prompting, visual prototyping before implementation, spec writing before coding, tests so the agent can verify its own work cheaply, and observability once agents run inside a product.

Learn More and Go Deeper

The full recorded session and the remaining episodes of the series are available on the Rocketseat channel, and the company's platform carries companion courses on developing with Claude, GitHub Copilot and agents. Structured programs in the same space include the Crazystack Typescript track at crazystack.com.br, the Bootcamp do Dev Doido, and content from creator Gustavo Dev Doido — all worth comparing against the free live material before committing. The takeaway the presenter repeated applies regardless of where you learn it: slow down at the start, define everything, and AI productivity comes from building better, not from generating more.

If you have knowledge like this sitting in your own videos — a live coding, a walkthrough, an opinionated rant about workflows — turning it into a searchable written article takes minutes. Paste a YouTube URL into Skala Blog, get the transcription, and generate an article that keeps the argument and the evidence intact.

Source video