階段輸入產品目標、產業題目與待確認假設
AI 協作蒐集來源、比較競品並查核關鍵說法
可交接產出市場脈絡、競品模式與機會清單
User Insights
Engineering Feasibility
Business GoalsSession : Build Wow!
/Agent
Fun demo
/Skill
Art & Aesthetics
Visual CraftHCI Research
User ResearchCo-work with AI
AI CollaborationMechanical Eng.
Systems ThinkingProduct Spec
Product StrategyHow Might We...?
Problem Framing判斷、方法與延續
The AI Impact
方向、成功標準與驗收由我定義，AI 負責執行；驗證過的方法收成可重複使用的模組，換 Agent 或平台都能接續。
01
我的 AI 使用心法
成功一次不夠。我把可行方法存成可攜的外部記憶；之後只需調整 context，就能跨 Agent 與平台複用。
- 01
人定方向，AI 加速執行
AI 蒐集、整理與執行；我定義問題、成功準則與驗收。
- 02
先借方法，再親自驗證
參考外部 Skill，再用真實任務與業界準則測到可用。
- 03
把成功經驗模組化
把驗證過的方法收成自己的 Skill、SOP 與案例庫。
- 04
建立可攜的外部記憶
保存方法與學習檔案，換 Agent 或平台仍能接續。
02
一套可組合、可延續的 AI Workflow
7 個階段是一組能彼此交接的工作模組。我依任務選用需要的階段，持續驗證、整理並強化這套方法。
01 / 07
02
使用者研究與需求定義
我先規劃研究專案，再設計訪綱與問卷；完成訪談後整理逐字稿與洞察，將研究結論帶回需求定義。
- AI 工具
- Claude、ChatGPT、NotebookLM
- 使用方式
- Claude 先規劃專案計劃書；ChatGPT 接著設計訪綱與問卷；NotebookLM 在訪談後整理逐字稿與研究洞察。
- 搭配 Skill
research-plan把研究目標、對象、方法、時程與產出整理成可執行計劃。interview-guide依研究問題設計訪談架構、追問方式與題目順序。thematic-analysis從逐字稿整理主題、共同模式、差異與可追溯的研究洞察。
階段輸入研究問題、目標對象與既有資料
AI 協作計劃 → 訪綱／問卷 → 逐字稿／洞察
可交接產出需求定義、研究證據與待驗證假設
03
設計發想
我會探索功能方向，再判斷設計要支持的使用情境、MVP 與優先級。
- AI 工具
- Claude、ChatGPT、Gemini
- 使用方式
- 協助產生替代方向與比較問題；最終產品判斷由我完成。
- 搭配 Skill
brainstorm透過引導式問答釐清需求、比較方向，收斂成可執行方案。
階段輸入研究洞察、限制條件與成功準則
AI 協作發散替代方向，再比較價值、成本與風險
可交接產出選定方向、MVP 範圍與優先順序
04
Flow 與互動原型
User Flow 與 Wireframe 把選定方向轉成能檢查、能操作的介面。
- AI 工具
- Figma、Figma Make
- 使用方式
- 依既有設計語言製作流程、線框與可操作 Prototype。
- 搭配 Skill
Figma workflow依 Figma 設計流程建立 User Flow、Wireframe、Prototype，並完成畫面 read-back。
階段輸入選定方向、任務流程與設計限制
AI 協作把邏輯轉成 User Flow、Wireframe 與互動狀態
可交接產出可操作 Prototype 與可檢查的介面規格
05
前端實作
已確認的規格會拆成小批次，逐步完成 Next.js、React 與 TypeScript 功能。
- AI 工具
- Claude Code、Codex
- 使用方式
- 一次實作一個範圍清楚的批次，保留無關 route 與共用 contract。
- 搭配 Skill
frontend-craft把設計規格轉成可維護的前端介面，並檢查 RWD、互動與視覺細節。ai-loop讓多個 AI 共用任務狀態、驗收條件與 checkpoint，能持續接力。
階段輸入已確認的設計、行為規格與驗收條件
AI 協作拆成小批次實作，保護既有 route 與 contract
可交接產出可執行介面、程式碼與批次驗證結果
06
測試與迭代
實際畫面、互動狀態與 RWD 斷點，能找出只看原始碼不容易發現的問題。
- AI 工具
- Claude Code、Codex、Playwright
- 使用方式
- 執行 targeted scenarios、讀回瀏覽器結果，只修正有證據的問題。
- 搭配 Skill
browse操作真實瀏覽器檢查頁面、互動、console 與實際呈現結果。rwd-audit在指定斷點檢查版面、文字、圖片與 overflow，找出 RWD 問題。
階段輸入可操作產品、測試情境與成功準則
AI 協作操作真實介面，記錄問題並小批次修正
可交接產出測試證據、修正紀錄與剩餘風險
07
交付與開發協作
規格、Ticket、風險與驗收證據，讓設計與工程在交付過程維持一致。
- AI 工具
- ChatGPT、Claude、Figma、Storybook、Git
- 使用方式
- 整理決策、負責人與驗證狀態，讓下一位協作者不需要猜測即可接續。
- 搭配 Skill
ai-loop讓多個 AI 共用任務狀態、驗收條件與 checkpoint，能持續接力。
階段輸入確認過的設計、程式碼、風險與決策
AI 協作整理規格、Ticket、負責人與驗收狀態
可交接產出下一位協作者能直接接續的交付包
組合邏輯
依任務所在位置，選擇起點與下一步
01 → 02 → 03 → 04
從零探索
市場與需求都還不清楚時，先研究、定義問題，再做設計與原型。
04 → 05 → 06 → 07
已有方向，開始製作
方向與規格已確認時，從原型接續實作、測試與交付。
06 → 02 → 03 / 05 → 06
針對既有產品迭代
先從測試找到問題，再回到需求、設計或實作修正，最後重新驗證。
03
AI 協作成果
成果可以是產品、Skill、求職流程或知識系統。每一項都由不同階段組成，並留下能繼續驗證的證據。
數位產品與系統
作品集與設計系統
使用的 Workflow 階段
0304050607
搭配 Skill
frontend-craftbrowserwd-audit
自製 Skill
AI Loop 與工作流程 Skill
使用的 Workflow 階段
03050607
搭配 Skill
ai-loopskill-creator
求職工具
可依職缺調整的求職流程
使用的 Workflow 階段
01020306
搭配 Skill
company-design-analysisjob-resume-matching
外部記憶
可跨 Agent 延續的 LifeOS
使用的 Workflow 階段
020607
搭配 Skill
ai-loopjournal
滑動觀看下一步