BMAD Development Demo

こんにちは、次世代システム研究室のN.M.です。

The BMAD Method: Automating the Journey from Idea to Code

The gap between a product idea and a ready-to-build codebase often delays software projects due to monolithic requirements and complex setup. The BMAD (Build More, Architect Dreams) Method solves this by leveraging specialized AI agents to automate the entire software development lifecycle.

BMAD agents collaborate sequentially—from the Product Manager defining requirements to the Full-Stack Developer generating scaffolded code. This approach replaces manual, error-prone tasks with automated, transparent processes.

In this blog, we follow a simple “Todo Web App” project from PRD specification, through to implementation, demonstrating how each agent contributes to turning a single concept into a fully structured, scalable project ready for complete development.

The BMAD Development Flow

This diagram illustrates the main components of the BMAD development process

 

diagram source: https://github.com/bmad-code-org/BMAD-METHOD?tab=readme-ov-file#-see-it-in-action

Of the roles listed in the diagram key, in this demo, we will use the Project Manager, UX Designer, Scrum Master, and lastly, the Developer.

 

BMAD: Accelerating Requirements Definition within the PRD

This video demonstrates the Product Manager (PM) Agent’s capability to rapidly define a project by generating a detailed Product Requirements Document (PRD). The entire process is contained within the requirements gathering step.

The sequence starts with the user executing the todo create-prd command (0:05). The use of YOLO (You Only Live Once) Mode (0:30) allows the user to define the project with minimal input (a todo web app). The PM Agent then immediately generates the foundational content, including the Core Concept, Target Users, and MVP Scope (1:02).

The core of the demo shows the agent’s ability to elaborate on the PRD document structure. After the user refines the tech stack (1:29), the PM Agent systematically adds complex, detailed sections to the single PRD file, including:

1. Non-Functional Requirements (NFRs) (2:03), covering performance and reliability criteria.
2. UX Design Goals (2:24), defining interface principles and accessibility standards.
3. Structured decomposition into Epics and User Stories (2:48).

The entire PRD document is considered complete once the PM Agent generates and appends the Architect Report (3:55). This report serves as a final, comprehensive technical review section, finalizing the exhaustive specification generated for the PRD.md file.

Translating Requirements into Design and Front-End Specification

This video demonstrates the core function of the UX Expert Agent (ux-expert@agents)—the process of taking the previously defined PRD and transforming it into a complete, technical UX/Front-End Specification document.

The agent is activated and the user executes the todo create-front-end-spec command (0:09). Critically, the agent first loads the existing project context, including the docs/prd.md file (0:19), ensuring continuity with the work from the PM Agent.

The UX Expert Agent then generates the docs/front-end-spec.md document, which outlines the comprehensive technical and design details. This output is divided into several sections that extend the PRD into an actionable design blueprint:

1. Overall UX Goals/Principles (0:43) and Target User Personas (1:04).
2. Detailed definition of Component States and Variants (1:53), defining UI elements like toasts, spinners, and empty states.
3. A comprehensive Design Token Extraction (1:41) section, defining specific typography, iconography, and spacing rules for the chosen technology stack (React with Tailwind).
4. Final detailed elements, including Wireframes (2:34) and a complete Timeline for the UX and Architecture phases.

The video concludes with the agent presenting the successfully completed UX/Front-End Specification (2:39), which serves as the exhaustive technical guide for the implementation stage.

 

From Design Blueprint to Technical Full-Stack Architecture

This video demonstrates the role of the Architect Agent (architect@agents), which synthesizes the Product Requirements Document (PRD) and UX/Front-End Specification to create the final Full-Stack Architecture Document.

The agent is activated (0:05) and immediately loads the existing project context, including all previous specifications (0:11). The user executes the command to generate the full-stack architecture document.

The core of the demo shows the agent’s complex decision-making process by generating two primary sections:

1. Architecture Overview and Decisions (0:29): The agent defines the high-level architecture, including Monorepo vs. Microservices tradeoffs, and key architectural choices like using TypeScript, real-time sync via WebSockets, and database rationale.
2. Tech Stack Comparison (1:40 – 2:00): The agent dives deep into vendor comparisons (e.g., Render, Railway, Fly.io, Neon) for the deployment and database layers. It presents a detailed Trade-Offs Summary table, comparing setup, cost, performance, and features to recommend the most optimal stack (Neon + Render).

Following the high-level architecture, the agent proceeds to define detailed components for the complete solution:

• Data Models (7:36 – 8:15): Defining the relational schema, key constraints, and entity relationships.
• Component Architecture (9:45): Breaking down the application into modular components (App Shell, Task Management, Authentication).

The video concludes with the agent completing the comprehensive Full-Stack Architecture Document, providing the final technical plan for implementation.

Scrum Master Ensures Actionable Stories via Document Sharding

This video demonstrates the role of the Scrum Master (SM) Agent (sm@agents), introduced in the video as the “Technical Scrum Master,” whose primary job is to ensure the requirements documents (PRD and Architecture) are properly structured for implementation.

The SM Agent is launched (0:06) and immediately executes a task (selecting option 3, story-checklist or option 5, exit – Leave Scrum Master mode). The agent first loads the existing PRD document (0:25).

A core function of the SM Agent is demonstrated when it identifies a Configuration Mismatch (0:40). The agent notes that while the project is structured with multiple epics, the key configuration (prdShared) indicates all epic stories are improperly monolithic—they are all contained in a single docs/prd.md file, rather than being sharded into separate files per epic.

The agent presents the user with multiple resolution options (0:48). After the user confirms the intended sharding option, the agent automatically executes the necessary steps (1:41), performing document sharding. It splits the monolithic docs/prd.md into individual epic files, such as epic-1-foundation-core-task-management.md, making the individual work packages clear and manageable for development teams.

The video concludes with the agent then creating the next, first story file for the project (5:47), confirming that the project is now properly structured and ready for the next phase of development.

 

Automated Monorepo Setup and Tooling for Implementation

This video marks the start of the Build (B) and Deploy (D) phases of the BMAD flow, driven by the Full-Stack Developer Agent (dev@agents), identified as “James” in the video. This agent is tasked with implementing the first story: “1.1 Project Setup & Monorepo Infrastructure.”

The agent is launched (0:01) and the user selects the “develop-story” command (0:08). The agent immediately loads the architecture documents and the specific story file (1.1.project-setup.md), establishing the execution context (0:34).

The core of the demo is the agent’s work in setting up the monorepo structure using the recommended TurboRepo framework. This involves executing several complex, multi-step tasks automatically, including:

1. Initializing the Monorepo: The agent starts by running commands to initialize the TurboRepo monorepo structure (0:50).
2. Scaffolding Applications: It proceeds to scaffold the individual applications defined in the architecture: the frontend application (apps/web) using React and Vite, and the backend API (apps/api) using Node.js and Express (1:01).
3. Configuring Shared Packages: It creates and configures the essential shared TypeScript packages (shared-types, shared-packages) (1:20), ensuring all parts of the monorepo use the same data types and configurations.
4. Installing Quality Tools: The final step involves installing and configuring code quality tools, specifically ESLint and Prettier, and integrating Husky git hooks (1:39 – 2:38).

The video demonstrates the agent’s ability to handle complex setup tasks, including resolving package reference errors and installing dependencies automatically, quickly moving the project from a set of specifications to a fully functional monorepo structure with all necessary tooling in place.

Summary & Remaining Work

We’ve progressed through the core phases of the BMAD Method: from PRD creation, through UX/front-end specification and full-stack architecture, to the initial monorepo setup.
What remains: the Scrum Master Agent will generate the individual story files, and the Developer Agent will implement those stories (write code, integrate modules, deploy). Cooperatively, they bring the “Todo Web App” to its completed, production-ready form.

次世代システム研究室では、グループ全体のインテグレーションを支援してくれるアーキテクトを募集しています。インフラ設計、構築経験者の方、次世代システム研究室にご興味を持って頂ける方がいらっしゃいましたら、ぜひ募集職種一覧からご応募をお願いします。