把 AI 導入團隊的工作流程

AI 正在改變工作方式，找出適合公司的用法並將它們導入工作流程已是必做項目，目的不是取代非工程人員，而是讓 AI 接手重複工作、讓團隊專心在核心問題的討論上。

第一階段：一套讓非工程同伴可透過 AI Agent 做出與線上一致、可互動的 prototype 網站，用來於功能開發的對齊會議。

第二階段：作為 Product Builder 改動線上產品。透過 vibe coding 把 UI 改動寫進原生 App。

隨著 AI 不斷更新，AI 工作流程一定會滾動式修正。第一階段剛開始第一次正式跑動、二階還在個人的運行嘗試中。可以知道這篇專案可能沒有起承轉合，但我正是想分享在這途中探索的過程。

目標：讓不會 code 的人也能做出 prototype，並用這個 prototype 來溝通構想。

PO 過去是拿設計建好的 template、加上截圖拼出畫面，再用文字描述互動。對熟練的 PO 來說，手工拼畫面其實很快，但在討論的時候，也容易漏掉那些負向流程。

設計師接著還要照 PO 拼出來的畫面，做出完整的 UI Flow。把兩邊的痛點各自整理一下：

工程師協助建立 agent plugin，透過 /Prototype 讓 AI 可以在網頁上生成 prototype，我負責讓產出變得可信：主要把常用產品頁面設計調整到跟線上版一模一樣、prototype 的控制項 UI 等設置。

工具確定之後，我利用小幅度的 UI 修改專案測試工作流程後整理成教學文件、帶團隊成員跑 workshop，讓大家都可以開始應用這套工作流程。

由於直接改動線上版程式碼（原生 App）瀏覽成本較高，第一階段先採用 html 的方式生成 App 畫面做 Demo 使用。

現在 PO 可以快速透過 AI agent 把正向跟負向流程做進可互動的 Prototype 網頁，專案團隊甚至可以提早討論細節（原本細節討論會發生在設計師出 UI Flow 期間）。直接把 prototype 操作錄成影片放進 PRD，不但省下設計師出大量設計稿的時間，也幫助開發中期間 RD 跟 QA 可以作為流程基準來對照。

第二階段試行方式是從 App 的 UI 開始，把重新設計的 UI 上線。這正好是個「對比新功能很難被排進去 Roadmap、但又得做」的事項。所以我想如果設計師能自己改、自己開 PR，就可以不用佔到太多工程資源，還可以確保效果是設計師想要的樣子，豈不是雙贏？

因為是用原生的程式，所以 iOS 跟 Android 是兩套 codebase，要把它 build 出來並安裝到手機上，直到真的看到我做的 UI，這部分才是真正的挑戰。不過也不是這麼難解決，只要第一次先請工程師協助設定好環境，其實就可以解決這個問題。

不過這邊我還是先自己嘗試用 AI Agent 做每個步驟，然後把自己踩到的坑，以及該如何修復的一些流程，都寫成教學文件，提供給之後可能要開始用同樣工作流程的同事參考。

由於 AI 在不改動功能本身的情況下（僅移動位置或是調整 UI 樣式），是可以非常依照原本的線上版本製作的，所以發 PR 給工程師 review 過後，未來其他的 UI 改動都可以慢慢地安排上線。

應該會好奇為什麼把一個還沒有完成，也沒有任何數據跟成效的專案放進作品集？每一個團隊都會有適合自己、不同的工作流程，所以需要探索、嘗試。我想分享在嘗試這些工作流程時遇到的問題，以及一些實際產出。當然，這邊僅列出已經正在使用的流程，如果想知道更多，可以再深入聊聊。AI 進步得很快，可能過幾週，團隊又是使用不同的工作方法。

下一步會繼續翻新 App 內的 UI，因為新的 UI 其實已經做好兩三年了，一直沒有時間重新上線。未來也會嘗試讓 PO 直接 vibe code 產出比較複雜的功能，至於這樣做對工程端會有什麼風險，也是團隊要嘗試才知道。