iT邦幫忙

鐵人檔案

2026 iThome 鐵人賽
回列表
Software Development

當 AI 會寫 Code 之後:前端工程師的 30 天 SA/SD 學習筆記 系列

當 AI 越來越會寫程式,我開始思考:身為前端工程師,自己還需要練習哪些能力?
這 30 天想記錄學習系統分析與設計(SA/SD)的過程。
從「加個按鈕」這樣的小需求出發,練習拆解問題、釐清狀態與資料責任,再把想法整理成 Prompt,以及能重複使用的 AI Skill。
這是一份邊學邊寫的筆記,會透過前端情境與小型電商案例,留下自己的理解、疑問和修正。
希望在與 AI 協作的過程中,慢慢養成先想清楚、再動手寫的習慣。

參賽天數 10 天 | 共 17 篇文章 | 0 人訂閱 訂閱系列文 RSS系列文
DAY 1

Day 01|AI 都幫我寫 Code 了,但我卻更需要 SA/SD

先記住:拿到需求先問目的、規則、未知、失敗與驗收。需要深入時:再使用完整 SA 工具。 畫面出來了,事情卻還沒做完 想像這個情境:你把購物車設計稿交給 AI...

2026-09-15 ‧ 由 lunausemail 分享
DAY 2

Day 02|如何拆解 PM 的「簡單做一個按鈕」?

先記住:一句「很簡單」先拆成角色、目標、成功與不做範圍。需要深入時:再整理完整 Use Case。 「這應該很快吧?」 假設 PM 希望在購物車加一個「套...

2026-09-16 ‧ 由 lunausemail 分享
DAY 3

Day 03|隱性需求才是魔鬼:狀態、錯誤與邊界條件

先記住:先抓錯金額、錯權限、資料消失與重複提交。需要深入時:再畫狀態與事件表。 為什麼只是多點兩下就壞了? 優惠券單次送出測試通過了。使用者先輸入 A,立刻...

2026-09-17 ‧ 由 lunausemail 分享
DAY 4

Day 04|欸欸別再用感覺估時:試試 WBS 與風險係數

先記住:估時要拆交付物、依賴與未知。需要深入時:再做 WBS 與風險紀錄。 「以為只是串個 API」 假設你估優惠券功能一天,實際花了三天。 回頭看,不是三...

2026-09-18 ‧ 由 lunausemail 分享
DAY 5

Day 05|API 還沒出來怎麼估?先分析前端資料模型!

先記住:畫面欄位不等於 API 契約,先問資料語意與權威。需要深入時:再整理 DTO、領域與畫面模型。 畫面有六個欄位,不代表 API 只要六個欄位 設計稿...

2026-09-19 ‧ 由 lunausemail 分享
DAY 6

Day 06|跨團隊溝通:把「資料很爛、設計一直改」變成可處理的問題

抱怨很真實,但不能直接拿來排工作 假設 API 有時回傳數字、有時回傳字串;UI/UX 又把固定折扣改成可展開的優惠明細。前端夾在中間,很容易覺得所有變動都落在...

2026-09-20 ‧ 由 lunausemail 分享
DAY 7

Day 07|週小結:一份能拿來開工的前端需求分析檢核表

先記住:檢核表只阻擋高風險未知,不必每次寫大文件。需要深入時:再補完整分析。 寫了很多筆記,怎麼還是不知道能不能開始? 我們在前六天談了目標、狀態、估時與契...

2026-09-21 ‧ 由 lunausemail 分享
DAY 8

Day 08|Garbage in, Garbage out:AI 為什麼總在幻覺沒有的事情?

先記住:AI 需要事實、限制與未知,不是更多形容詞。需要深入時:再整理來源優先順序。 它寫得很完整,卻沒有一條 API 是真的 你輸入「幫我做會員優惠券功能...

2026-09-22 ‧ 由 lunausemail 分享
DAY 9

Day 09|用 SA 思維寫 Prompt:Context、Constraint 與驗收

先記住:Prompt 至少要有背景、目標、限制、驗收與交付。需要深入時:再拆成多輪任務。 「你是資深工程師」之後,還是得把事講清楚 替 AI 加上專家角色,...

2026-09-23 ‧ 由 lunausemail 分享
DAY 10

Day 10|使用者旅程與元件邊界:先走流程,再切 Component

先記住:先走使用者旅程,再決定元件和狀態擁有者。需要深入時:再畫流程圖。 設計稿切得很細,操作卻接不起來 購物車被拆成商品列、優惠框、摘要卡和結帳按鈕,每個...

2026-09-24 ‧ 由 lunausemail 分享