# 從研究到上線：全流程設計與 AI 協作專案實戰 - Niki Liu

{%hackmd o8oUosN0QnqMSkF1_6kH7g %}

#### 📚 議程介紹

{%preview https://webconf.tw/agenda/8 %}

###### ▼▼▼ 開始筆記 ▼▼▼

## 01 那個混亂的專案現場
> 我們遇到了什麼牆？

- 起源：一個混亂的專案
薛丁格的需求
越快越好

- 資訊多 不等於 清楚
- 迷思：以為資料越多，決策越精準？
- 現實：雜訊比訊號多，團隊淹沒在碎片化的參考圖裡，看不見核心邏輯。
- 關鍵：缺的不是更多資料，而是一個過濾雜訊的框架

AI 是你的思維夥伴
演講的核心不在於教導特定的 Prompt 技巧或模型架構，而在於思維的轉變。

* 鏡像效應：Prompt 的過程其實是「自我釐清」的過程。如果 AI 給出的答案很爛，通常是因為我們問了爛問題。AI 能照出你的思維盲區。
* 角色定位：你是機長，AI 是副駕。方向盤始終在人手上，AI 負責看儀表板、報數據、預警天氣，但不會對結果負責，只有你會。
* 價值轉型：AI 不只是加速產出，而是陪你思考。設計師的角色從單純的「執行者」轉變為「判斷者」與「策展人」。

## 02 我們踩坑後的實戰技巧
> 實戰解法：如何用 AI 打通協作？

世界上最遙遠的距離 → 不同的角色的認知
我們是如何淹沒在競品的截圖海裡
理想狀況：看了上百頁參考案例

「最昂貴的成本不是產出，而是做決策。」
不是缺資料，我們缺的是資料整理框架。排除資訊、整理資料會是最辛苦的

AI 當成思考擴充工具，但需要**框架**去約束他的分析：用結構（STP, user Journey）去限制

### STP 框架
Segmentation：AI 負責整理，設計師負責解讀
Targeting：設計師做選擇，AI 負責驗證
Positioning：設計師做取捨與決策，AI 延展形式

### AIDA 框架
> 視覺框架

- A 受眾判斷 -> Designer
- I 快速出版本 -> AI
- D 感性判斷 → Designer
- 由設計師做選擇
- A 引導行動 -> Design X AI
-

### 設計規劃的拆彈專家
> AI 可以輔助拆解需求

- 拆解模糊願景：把「大需求」炸成「小任務」
- 建立完整骨架：「白紙空想」轉變為「清單上的刪減確認」
- 消除遣漏焦慮：協助掃描盲點與Edge Cases

1. user stories
2. 使用者目的

### 從「微原型」時做到「策展人」思維

類似概念 PRP Product Requirement Prototyping [參考](https://hackmd.io/@webconf/HJiwwqnxZe/%2Ff1Eeu9_HTWKIey9mRPBr0A#lt%E5%B9%B4%E5%BA%95gt)

- 拋棄式微原型，透過「玩」介面來輔助思考與發想
- 不一定去找競品，而是直接請 AI 提供原型
- 不管是用figma make, lovable, stitch 都可以
- 告訴 AI 他扮演什麼角色
- 將抽象需求轉化為具體的可操作介面
- 角色轉型，從操作者到策展人

> 以前做 Prototype 是為了交付，現在是為了幫助發想

### 打破「程式碼」的技能高牆
從「遙不可及」到「觸手可及」
從「使用者」，進化成「工具創造者」

- 本來要看工具有多少人會用到，多人使用才能排進開發，但是因為有 AI 工具，所以設計師也可以自己打造自己需要的工具。
- 利用 AI 工具節省工時，讓設計師可以把時間放在更重要的任務。（e.g. 用廠商提供的內容，匯入的文字素材，把frame都開好 & 背景圖層做好、設計師只進去調整視覺重心）
-

### 打破巴別塔： AI 是我們的語意翻譯機

把 UI 情境丟給 AI 討論
↓
AI 會幫設計師整理出清楚的邏輯

- 把設計意圖（自然語言描述）轉換成工程語言（工程需求規格表）
- AI 也能補齊原本自己遺漏的細節
- 和 AI 描述一次設計，若 AI 誤解那代表合作的工程師也有可能誤解，提前先調整

AI 應用：

雙向翻譯：AI 是設計師與工程師之間的翻譯機。設計師可以將 User Flow 丟給 AI，請它轉換為工程師看得懂的 State Model 或邏輯表格。

費曼學習法：請 AI 扮演一個「聽你講解的人」（例如 5 歲小孩或特定用戶 Persona），如果你能教會 AI，代表你的邏輯沒有漏洞；反之，AI 能幫你照出盲點。

跨域整合：未來屬於「懂技術的設計師」和「有產品感的工程師」，AI 降低了跨領域學習的門檻。


### AI 扮演角色：最強的思考加速器

- 利用 AI 扮演不同 **Personal 預演驗證**：解決「這真的是我們要的嗎？」
- 費曼學習法：利用 AI 扮演「聽你講解的人」
    - 學習金字塔理論：聽講座大約記得 5%、看書約記住 10%，把學到的內容講給別人聽，記住的比例能高達 90%

### 從「手握方向盤」到「自動駕駛」的心理轉變
- 可以在上UAT的時候，就用AI瀏覽器去跑test case，讓他進行自主實測
- 喪失「手感」的不安->擁抱與調整

### 小結
:::info
AI 不只是加速產出，而是陪你思考的夥伴
:::


- 從「做東西」→「一起做決策」
    - STP/AIDA/NotebookLM：讓AI幫你整理混亂、收斂 方向
    - 設計師從執行者變成「判斷者」
- 從「重複勞動」→ 專注在最有價值的 20%
    - 腳本、Figma Plugin、自動化流程
    - 拋棄式微原型：快速驗證邏輯
- 從「語意斷層」→ 跨領域的共同語言

    - AI 當翻譯機（User Flow <-> State Modal）
    - persona 與 Feynman 學生：找出盲點、補思維漏洞
## 03 AI 帶來的思維改變
> 核心觀念：從工具人到架構師

### 人的責任：你是機師，他是副駕
- 以前覺得 AI 是工具，現在覺得是副駕，會在旁邊輔助 
- 方向盤在人手上
    - AI 負責看儀表板、報數據、預警天氣
    - AI 不會對結果負責，人才會(背鍋)


### AI 能照出你的「盲區」
Prompt的過程，其實是「自我釐清」的過程
給出爛答案，通常是因為你問了爛問題
他是你的思維鏡子。

### 跨域整合是王道
設計師要懂一點 code 邏輯
工程師要懂一點產品思維
AI 是我們的通用翻譯機
未來屬於「懂技術的設計師」和「有產品感的工程師」


### 行動路徑與願景
> AI 進到團隊的三個階段
* L1 補流程：用在瑣碎、重複的是（例如整理會議記錄）
* L2 協作：用在腦力激盪、邏輯檢視（如我們這次做的）
* L3 文化化：變成團隊的肌肉記憶（遇到問題先問 AI）

### 擁抱混亂，享受協作
AI 工具會變，但「解決問題的心法」不會變。
重要的不是工具，而是你面對問題時的姿態。


AI 工具會不斷演變，但「解決問題的心法」不會變。重要的是面對問題時的姿態，擁抱混亂，並享受與 AI 及團隊的協作。



---

( ੭ ̇ᗜ ̇ )੭ 聊天室 ( ੭ ̇ᗜ ̇ )੭

也想聽這邊的演講，跪求共筆，感謝的心~~
>↑ 樓上是不是和上一場同一人，用同一個prompt 
>> is me！但 prompt 是有微調的 >_^
嘸蝦米
> 這是另類鼓勵大家寫共筆的手段 :D
> ：）

講者演示的介面操作機器人是哪一個AI??
+1 同問 謝謝！！！
看起來像是perplexity的瀏覽器 - comet
https://mrmad.com.tw/perplexity-comet-download-free-vs-paid
>感謝前方幫忙問的夥伴 <3
>我跑到不適合我的場，所以一直關注這版。上面那個「僅技術的設計師」這句，是不是應該是「懂技術的設計師」？->YES