iT邦幫忙

鐵人檔案

2026 iThome 鐵人賽
回列表
Vibe Coding

從 0 到 1: 產品設計師用 Vibe Coding 打造呼吸放鬆 App 系列

呼吸,是最簡單但也是最不簡單的事。在快步調的現代中,我們常忘記好好地深呼吸,讓自己慢下來。我是一位 Product Designer,過去曾因為工作壓力大而有自律神經失調症狀,練習深呼吸讓我更平靜、專注以及穩定情緒。這 30 天,我想從自己的需求出發,用 Vibe Coding 打造一個呼吸放鬆的 App。我會把想法整理成 PRD、決定要做什麼與不做什麼、進入我陌生的 iOS 開發,過程中與 LLMs 和 Coding Agent 進行協作,最後做出一個自己每天想用的呼吸放鬆 App。

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

Day1 | 呼吸放鬆 App 這麼多,為何要自己做一個

為何是呼吸放鬆這件事 曾經因工作壓力而有自律神經失調,時常會有心悸和無法專注的情況,第一次接觸到呼吸放鬆法是搭乘高鐵從新竹去台北上班時,打開 Netflix...

2026-09-11 ‧ 由 astro_tw 分享
DAY 2

Day 2 | 在寫 PRD 之前,先來談如何透過呼吸進行放鬆

用深層呼吸刺激負責放鬆的副交感神經 呼吸,是我們無時無刻每分每秒都在執行的動作,但日常的呼吸屬於淺層的呼吸,當我們要達到放鬆的效果,就需要透過深層的呼吸來刺激...

2026-09-12 ‧ 由 astro_tw 分享
DAY 3

Day 3 | PRD 初稿撰寫

什麼是 PRD PRD(Product Requirements Document,產品需求文件)是一份用來定義產品或功能「為什麼做、為誰做、要解決什麼問題,...

2026-09-13 ‧ 由 astro_tw 分享
DAY 4

Day 4 | 產品視覺設計方向介紹與初探

什麼是產品視覺設計方向 💡 定義視覺風格,再從風格中去發展設計元素 視覺風格: 第一印象看起來怎麼樣一件作品帶給你的直覺感受與情緒共鳴。換句話說,就是...

2026-09-14 ‧ 由 astro_tw 分享
DAY 5

Day 5 | 來畫 Wireframe 階段 1 - 呼吸練習

什麼是 Wireframe? Wireframe(線框稿)是將 PRD 或腦中的想法具體化,用來呈現介面結構、內容配置與操作流程的設計稿。形式可以很簡單,例如...

2026-09-15 ‧ 由 astro_tw 分享
DAY 6

Day 6 | 來畫 Wireframe 階段 2 - 呼吸練習視覺化紀錄

為什麼想做呼吸練習紀錄的視覺化 對我來說,看見呼吸練習的紀錄會帶來一種踏實感。每次練習可能只有幾分鐘,但當這些零散的時間被記錄下來,我就能看見自己確實有留一些...

2026-09-16 ‧ 由 astro_tw 分享
DAY 7

Day 7 | 請 ChatGPT、Claude、Grok Bot 大大們來指點我的 PRD

與 AI 討論的目標 協助我思考沒想到的事情以及不熟悉的技術領域知識,但最後的建議和產品判斷仍需要自己做決策。 使用哪些 AI 工具 ChatGPT...

2026-09-17 ‧ 由 astro_tw 分享
DAY 8

Day 8 | AI 大大們給的 PRD 建議這麼多,如何進行有效資料整理?

前言 Day 7,我請 AI 大大們 ChatGPT、Claude、Grok Bot 檢視 PRD,收到不少建議。內容落落長,可以怎樣有效地整理這些建議呢?...

2026-09-18 ‧ 由 astro_tw 分享