iT邦幫忙

2025 iThome 鐵人賽

DAY 3
2
佛心分享-SideProject30

AI-Driven Development 實戰篇:30 天 Side Project 開發全紀錄系列 第 3

Day 3 - MenuBar Todo 專案啟動:用 Claude Code 打造系統級應用

  • 分享至 

  • xImage
  •  

經過兩天的規劃,今天正式進入第一個專案的開發!接下來的 7 天,我們要打造一個 macOS MenuBar Todo App,並且全程使用 Claude Code 作為 AI Agent,實踐 AI-DLC Sprint 的開發流程。

https://ithelp.ithome.com.tw/upload/images/20250917/20149301RFuSbC2O7O.png

為什麼從 Desktop App 開始?

在四個專案中選擇先做 MenuBar Todo,有幾個考量:

  • 技術挑戰適中:Electron 開發不算太難,但系統級整合有學習價值
  • 個人需求強烈:我每天都需要這樣的工具
  • 可快速驗證:7 天內可以做出能用的版本

專案願景:重新定義待辦事項管理

筆者想要比較直覺的 ToDo List,在 Mac 的 Menu Bar 就可以直接打開使用,然後只輸入簡單的任務名稱就好,有想到要設定多餘的東西再打開主視窗設定。

This application provides quick access to your to-do items through the macOS Menu Bar, allowing you to view and manage daily, weekly, and monthly tasks without switching between applications.

另外一個重點是市面上的 app 都好複雜,然後要錢XD

使用場景

場景 1:正在寫程式,突然想到一個待辦事項

  • 傳統方式:切換到 Todo App → 新增 → 切回 IDE(中斷思緒)
  • MenuBar Todo: 按下 Menu Bar App Icon → 輸入 → Enter(5 秒完成)

場景 2:早上開始工作,想看今天的任務

  • 傳統方式:打開 Todo App → 等待載入 → 查看
  • MenuBar Todo:點擊圖標 → 立即顯示(0.5 秒)

場景 3:規劃下週的工作

  • 傳統方式:開啟完整應用 → 切換視圖
  • MenuBar Todo:點擊圖標 → 切換到 Weekly 視圖

MVP 功能定義

根據筆者提出的 AI-DLC Sprint,我們先定義最小可行產品:
MVP Features:

  • Menu Bar icon with popover window (320x480px)
  • View tasks by: Daily, Weekly, Monthly
  • Mark tasks as complete/incomplete
  • Add new tasks from main window
  • Auto-save functionality
  • Light/Dark mode support

成果

目前已經用這個流程跑出來了一個 MVP 的版本:

Menu Bar Icon Window

https://ithelp.ithome.com.tw/upload/images/20250917/2014930108jfynP3fn.png

Main Window

https://ithelp.ithome.com.tw/upload/images/20250917/20149301YmfLxnlCBP.png

AI-DLC Sprint

接下來的文章(預計一個 Side Project 一週),會詳細使用 AI-DLC Sprint 的開發流程以及 Spec-Driven Development 的概念去完成專案,拭目以待~


上一篇
Day 2 - 四個 Side Projects 的戰略布局:從痛點到解決方案
下一篇
Day 4 - AI-DLC Sprint 實戰:MenuBar Todo 的 PRD 速成魔法
系列文
AI-Driven Development 實戰篇:30 天 Side Project 開發全紀錄4
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言