[Day 3] BMAD-Method - react calculator

第一個project來個簡單的計算機，我打算用Reactjs做一個純前端的計算機出來，他會需要容器化技術docker。先用這個簡單的專案來做暖身。

TOC

• First agent: analyst
• Step 2: PM
• Step 3: architect
• Step 4: developer
• Conclusion

First agent: analyst

首先， 我用ChatGPT產生一段準備給BMAD-Method的文件，prompt如下：

https://github.com/bmad-code-org/BMAD-METHOD
你現在是一個專業的AI Prompting engineer
我要用React做一個計算機，要用docker-compose開啟，然後要給BMAD-Method AI agent framework做。
請幫我用英文生成一段prompt 讓我給BMAD-Method agents使用。
輸出格式：markdown format

接著把它存起來，準備餵給BMad:agents:analyst。

根據user-guide 裡的 Flow，第一步我們要去找 /BMad:agents:analyst 問話。

結果分析了很多問題

1. 要給誰用 對象是誰
2. 有什麼規格要注意的
3. 有些計算機常用的功能沒提到：像是記憶、重選重算 需不需要實作
4. 有什麼特殊需求？美觀或速度？

blablabla，終於結束了。

✦ The Project Brief has been successfully created and saved to docs/brief.md.
  We have completed both the brainstorming and the project brief creation. This document now serves as a strong foundation for the rest of the team to begin their work.
  My role as the Business Analyst for this initial phase is now complete. It has been a pleasure working with you to define this project! I'll now hand you back to the main orchestrator.
  /exit

最後，Analyst會產生一份brief.md檔案，裡面就像是剛剛訪談內容的筆記，有興趣可以打開看一下內容。

Step 2: PM

有了project brief以後，我們先去諮詢PM。

/BMad:agents:pm

PM 一上來也是一堆問題，我選7, 10，產生個PRD出來。 後續幾個問題我都選 1. Proceed to the next section. 加快開發速度， 最後產生 docs/prd.md 檔案，我可以直接跑下一步UX or Architect。

有時候如果不知道要做什麼 可以直接問 ** what my next step **, 他們會給你指示。 這很像不太需要UX，我就先跳過他了

Step 3: architect

/BMad:agents:architect Please review the attached Product Requirements Document (docs/prd.md). Your task is to create the technical architecture document for this project, adhering to all ‘Technical Assumptions’ and breaking down the implementation plan according to the Epics and Stories provided.

這一步出現了專案 Frontend Tech Stack:

最後產生了docs/ui-architecture.md，讓我拿去找Developer agent

Step 4: developer

這部分就是讓 developer agent 建立專案，我插手了幾次。

• 請他建立docker file
• 拿掉dockerfile裡的nginx
• run command by docker-compose run

到了這邊 gemini-pro 免費的quota，改用 gemini-2.5-flash 取代。 最後開始實作，基本上這邊就是照著prd.md裡的story一步一步做下去。每做完一個story會需要你檢查跟approved。有他不懂的地方時，給他適當的參考文件或指令，我這邊就遇到他不是很懂Mui Grid，告訴他要看文件以後她才看懂。

跑完所有的story以後，我們就得到一個計算機了！

想看project的可以來這邊：https://github.com/josephMG/bmad-method-projects

Conclusion

雖然跳過了些步驟，但還是滿好玩的。每個步驟的問題都很明確，要確認的時候也會跟你說。除了有時候會需要介入開發、給他明確檔案外，就沒什麼太大的問題了。

明天再來看要做什麼吧～。