8 min read
This workflow is built entirely around Claude Code. Every prompt, plugin, hook, MCP configuration, and workflow step in this runbook assumes you are using Claude Code as your AI coding agent. That is a deliberate choice, not an accident.
Claude Code gives us things other AI coding tools do not: native subagent and agent team orchestration, lifecycle hooks we can customise, an MCP protocol layer for plugging in external tools, a plugin and skills ecosystem, and full control over context management. The autocomplete and inline-edit features in tools like Cursor and Windsurf are useful for different things, but they are not designed for the kind of structured, multi-phase, multi-agent product builds this workflow enables.
If you want to use a different AI coding tool as your primary agent, this is not the right runbook for you. The prompts will not transfer. The plugins will not exist. The context management strategy assumes Claude Code's specific behaviour. You would spend more time adapting this process than building your own.
Where to run Claude Code
Claude Code runs in your terminal, or as an extension inside VS Code, Cursor, and IntelliJ. Use whichever environment you prefer. The prompts, commands, and workflows in this runbook work identically regardless of where you run it. If you already use Cursor or VS Code with their own AI features, that is fine. You can have those running alongside Claude Code. This workflow simply does not use or depend on them. What matters is that Claude Code is the agent doing the work described in these pages.
What Claude Code actually does
Claude Code reads your codebase, writes code, runs shell commands, and creates git commits. It can spawn subagents for focused tasks and coordinate agent teams for parallel work. It loads a CLAUDE.md file at session start as its project memory, and connects to external tools and documentation sources through the Model Context Protocol (MCP).
If you have never used Claude Code before, that is fine. Part 1 (Prerequisites) and Part 2 (Machine Setup) walk you through installing and configuring everything from scratch.
This workflow requires a paid Anthropic account
Claude Code is not available on free Anthropic plans. You need a Pro, Max, Team, or Enterprise subscription. The recommended model configuration (opusplan) uses Opus for planning and reasoning, and Sonnet for code execution, which balances intelligence with cost. Budget for real token spend, especially when using agent teams which consume roughly 5x the tokens of a solo session. Part 10 covers cost management in detail.
Process optimises for quality and reliability, not initial speed. Someone using a looser process, prompting Claude with a vague idea and letting it rip, will ship a first version faster than you. But their first version will be the thing they spend the next three months debugging, rewriting, and apologising for.
This process front-loads the thinking. By the time you write your first line of code, you have a tested idea, a detailed spec with acceptance criteria you can actually verify, architecture decisions recorded so nobody asks "why did we do it this way?", a design system so the UI is consistent from day one, and a phased plan so Claude never tries to build everything at once and loses the plot.
The result: what you build works. It holds up under testing. It is deployable. It does not fall apart when someone pokes it. And when you need to change something three months from now, the decision trail is there.
The trade-off is real. The planning phases (Parts 4–6) take 2–4 hours before you write code. On a small prototype, that can feel like overhead. But that time comes back, in fewer rewrites, fewer "why is this broken" sessions, and fewer phases where you have to throw everything away and start again. On anything beyond a throwaway demo, the maths works out in your favour.
This process cannot protect you from a bad idea. If the Idea Pack describes something nobody wants, this system will build it beautifully and reliably. Product validation is outside the scope of this runbook, do that work separately before you invest build time.
This is a step-by-step, print-it-out-and-follow-it guide. It is split into numbered parts. You do them in order. Each part tells you exactly what to type, what to click, and what the expected result looks like so you know it worked.
Do not skip parts. Do not jump ahead. Each part builds on the one before it.
Doc | What it covers | When you do it |
|---|---|---|
Prerequisites | What you need installed before anything else | Once per machine |
Machine Setup | Install and configure Claude Code, Beads, Context7, subagents, skills | Once per machine |
Verify Your Setup | Run the verification checklist to confirm everything works | Once after setup, and whenever something feels broken |
Project Kickoff | Create a new project folder and initialise all config files | Once per new project |
Idea to PRD | Turn a raw idea into an Idea Pack, then a PRD with acceptance criteria | Once per feature or product |
Tool | What it is | Category |
|---|---|---|
Claude Code | AI coding agent that runs in your terminal/VS Code. Reads your codebase, writes code, runs commands, creates commits. | Core tool |
CLAUDE.md | A markdown file in your project root that acts as Claude's persistent memory for this project. | Configuration |
Beads (bd) | A git-backed issue tracker designed for AI coding agents. Tracks tasks so nothing gets lost between sessions. | Task management |
Context7 | An MCP server (not a plugin) that injects up-to-date library documentation into Claude's context. | Documentation |
VoltAgent subagents | A curated collection of 100+ specialist Claude Code subagent definitions (SQL, frontend, infra, QA). Maintained by the VoltAgent GitHub org. |
These rules apply to every project, every time. No exceptions.
Command | What it does |
|---|---|
/init | Bootstraps a CLAUDE.md by analysing your codebase |
/status | Shows current model, context usage, and session info |
/model | Switch models mid-session |
/cost | Shows token usage and estimated cost for this session |
/context | Visualises current context consumption |
/clear | Clears conversation history (keeps CLAUDE.md) |
/compact | Summarises and compresses conversation to free context |
/mcp | Shows status of all connected MCP servers |
/doctor |
Ready? Open Prerequisites and start.
Ready to build something?
Jiffi can help you go from idea to working prototype fast. Book a free call.
Sign up free to track your progress through this guide.
Architecture and ADRs
Create Architecture Decision Records and a technical plan |
Once per feature or product |
Build | Implement the plan phase-by-phase using Claude Code | Repeat per phase |
Test and Verify | Run tests, visual verification, and QA | After each build phase |
Review and Deploy | Code review, PR creation, CI/CD, and deployment | Once per feature completion |
Ongoing Operations | Context management, cost monitoring, error recovery, security | Continuous reference |
Troubleshooting | Common problems and how to fix them | When things break |
Glossary | What every tool, term, and abbreviation means | Reference anytime |
Subagents |
UI/UX Pro Max | A Claude Code Skill (not a plugin) providing 50+ UI styles, 97 colour palettes, 57 font pairings, and UX guidelines. | Design intelligence |
Claude in Chrome | An official Anthropic browser extension that lets Claude navigate and interact with web pages. Used for visual verification of your running app. | Verification |
Claude Code GitHub Action | An official GitHub Action for automated PR review and @claude interaction in issues/PRs. | CI/CD |
Motion (Framer Motion) | React animation library for page transitions, scroll reveals, hover states, micro-interactions, and layout animations. Installed per-project, not globally. | Animation |
Impeccable | A design skill extending Anthropic's frontend-design with curated anti-patterns, design vocabulary, and 17 design refinement slash commands (/polish, /audit, /bolder, /distill). | Design intelligence |
Runs health checks on your Claude Code installation |
/rewind | Backtracks conversation and code changes (your undo button) |
/plugin | Manage plugins (list, install, etc.) |
Shift+Tab (twice) | Toggle Plan Mode (read-only exploration, no code changes) |