iT邦幫忙

2025 iThome 鐵人賽

DAY 8
0
生成式 AI

AI協作開發實戰:從需求到原型的挑戦系列 第 8

AI Prompt工程:如何讓AI理解iPad使用情境

  • 分享至 

  • xImage
  •  

昨天經歷了一次「被現實打臉」的震撼教育後,我開始深刻反思:為什麼Claude產出的第一版prototype明顯還是mobile的思維?為什麼即使我明確說了「iPad版本」,AI還是給了我手機式的小按鈕和直向滾動佈局?

這個問題的核心不在於AI不夠聰明,而在於我沒有學會如何精準地描述iPad的使用情境。今天,我想分享如何透過Prompt工程,讓AI真正理解iPad使用者的需求,同時建立一套「記憶系統」來避免每次都要重新解釋。

昨天的「Mobile思維陷阱」

回想我昨天的第一版prompt:

我想開發一款居家品牌店員業務建立報價單以及櫃檯生成訂單結帳的網頁系統(for iPad版本)

看起來我有說「iPad版本」,但這個描述的問題是:

問題1:缺乏具體的使用情境

  • 我只說了「iPad版本」,但沒有描述iPad是怎麼被使用的
  • AI很可能把iPad當作「大一點的手機」來理解

問題2:沒有強調觸控體驗的差異

  • 缺少對觸控友好設計的明確要求
  • 沒有說明店員如何操作、客戶如何觀看

結果就是Claude按照最常見的「行動裝置」經驗來設計,產出了適合手機的小按鈕和縱向佈局。

iPad使用情境的獨特性

經過實地觀察門市操作,我發現iPad在線下零售的使用情境有這些特點:

展示型互動:

  • 店員拿著iPad,螢幕朝向客戶
  • 客戶主要是「看」,店員負責「操作」
  • 需要清晰的視覺層級,讓客戶一眼看懂

移動式查詢:

  • 店員帶著iPad在門市內走動
  • 需要快速切換功能,查詢庫存、價格等
  • 一隻手拿iPad,另一隻手操作的情境

這些情境對設計的具體要求:

  • 字體要夠大,客戶在一米外也能看清
  • 按鈕至少44px,適合手指觸控
  • 善用橫向空間,減少上下滾動
  • 重要資訊放在上半部,符合視線習慣

Prompt工程的實戰優化

從抽象描述到具體情境

優化前的描述:

設計一個iPad版本的報價系統界面

優化後的描述:

設計一個店員使用的iPad報價系統界面。使用情境:
- 店員小美拿著iPad站在客戶面前,螢幕朝向客戶展示商品
- 客戶坐在沙發上,距離螢幕約80公分,需要能清楚看到商品圖片和價格
- 店員需要用右手拇指快速點選,查詢不同商品和規格
- 整個過程客戶都在觀看,界面要專業且易懂

關鍵詞彙的精準使用

我發現某些詞彙能有效引導AI產出更符合iPad情境的設計:

有效的描述詞彙:

  • 「觸控友好」vs「點擊按鈕」
  • 「展示給客戶看」vs「使用者介面」
  • 「站立操作」vs「桌面使用」
  • 「專業展示」vs「個人使用」

建立AI協作的「記憶系統」

跨對話記憶的挑戰

昨天的痛苦經驗讓我意識到一個嚴重問題:每次新的對話,Claude都會「忘記」我前一天建立的設計原則。我需要重複解釋:

  • 為什麼按鈕要48px以上
  • 為什麼要橫向佈局
  • 為什麼字體要夠大
  • 為什麼要考慮展示情境

這不只浪費時間,也很容易因為token限制而被迫簡化說明,導致設計品質下降。

解決方案:使用Claude Project建立記憶系統

經過研究,我發現Claude的Project功能正是為了解決這個跨對話記憶問題而設計的!

在Claude中建立一個Project後,我可以在Project Knowledge中上傳多個.md檔案,這些檔案會成為AI的「記憶庫」。每次對話時,Claude都能自動搜尋和引用這些檔案中的相關資訊,而不需要我重複上傳或解釋。

https://ithelp.ithome.com.tw/upload/images/20250908/201781501jesBZAD72.png

通過這個功能,我可以建立一套完整的「AI協作記憶系統」:

1. 建立iPad設計規範.md

# iPad使用情境設計規範

## 基本原則
- 觸控區域最小44px,推薦48px以上
- 字體大小最小16px,推薦18px以上
- 按鈕間距最小8px,推薦12px以上

## 使用情境
- 店員單手持iPad,另一手指向商品
- 客戶距離50-100cm觀看螢幕
- 站立操作為主,移動展示為輔

## 佈局原則
- 橫向佈局,善用寬螢幕優勢
- 重要資訊放置上半部
- 避免過度滾動,資訊分層顯示

2. 建立成功Prompt模板.md

# iPad界面設計Prompt模板

## 基礎模板
設計一個適合[功能名稱]的iPad界面:
- 使用情境:店員[具體操作],客戶[觀看方式]
- 觸控要求:[操作手勢說明]
- 視覺要求:[字體、顏色、佈局要求]
- 業務要求:[具體功能需求]

## 成功案例
[記錄已驗證的優秀Prompt和對應結果]

3. 建立業務邏輯.md

# 業務邏輯規範

## 報價流程
1. 產品選擇 → 2. 規格確認 → 3. 數量調整 → 4. 折扣計算 → 5. 報價生成

## 庫存邏輯
- 多倉庫庫存顯示
- 規格別庫存查詢
- 即時庫存更新

.md檔案間的相互關聯

更進階的做法是讓不同的.md檔案相互關聯:

# 報價系統設計.md

參考設計規範:詳見 `iPad設計規範.md`
業務邏輯:參考 `業務邏輯.md` 中的報價流程

## 特殊要求
在基礎iPad設計規範的基礎上,報價系統還需要:
- 支援即時價格計算預覽
- 客戶友好的價格展示方式
- 快速修改數量和規格的互動設計

這樣Claude就能理解檔案間的關聯,綜合多個文件的資訊來產出更精準的設計。

實際應用案例:登入頁面設計

讓我用即將設計的登入頁面來演示完整的流程:

Step 1: 情境分析

  • 使用者:門市結帳人員
  • 情境:上班時開啟iPad,登入系統
  • 特殊需求:可能有其他同事在旁邊,密碼輸入要注意隱私

Step 2: 應用記憶系統的Prompt設計

設計Mr.Living居家先生的結帳人員登入頁面(iPad橫向使用):

使用情境:
- 門市結帳人員上班時使用iPad登入系統
- iPad放置在櫃檯上,可能有同事或客戶在附近
- 需要快速登入,但要確保資訊安全

參考資料:
- 遵循 `iPad設計規範.md` 的所有觸控和佈局要求
- 應用 `Prompt模板.md` 中的界面設計模板
- 考慮 `業務邏輯.md` 中的員工權限說明

這樣的Prompt結合了具體情境、設計要求和記憶系統的參考,Claude就能產出真正符合iPad使用情境的登入頁面設計。
https://ithelp.ithome.com.tw/upload/images/20250908/20178150yNebsfJPsy.png

為後續開發奠定基礎

昨天的教訓告訴我,試圖一次產出完整系統會觸發token限制且品質無法保證。今天建立的iPad設計規範和記憶系統,正是為了解決這個問題。

接下來我們將採用「one by one」的策略,每次專注一個頁面的深度設計。今天建立的方法論將會是每個頁面開發的基礎:

  • 設計規範.md 確保每個頁面都符合iPad使用情境
  • Prompt模板.md 讓每次協作都更精準有效
  • 業務邏輯.md 保持功能設計的一致性
  • 成功案例記錄 讓經驗可以累積和重複使用

今天的核心收穫

Prompt工程的關鍵原則

  1. 情境比功能重要 - 描述使用場景比列出功能清單更有效
  2. 具體比抽象重要 - 「店員站立操作」比「使用者友好」更精準
  3. 記憶比重複重要 - 建立記憶系統比每次重新解釋更有效率

記憶系統的價值

使用Claude Project的記憶系統後,AI協作從「一次性對話」升級為「累積性協作」。每一次的成功經驗都會成為下一次協作的基礎,這才是AI時代工作方式的真正變革。

AI協作不是「告訴AI要做什麼」,而是「教會AI理解你的工作情境」。當我們能夠精準描述iPad在線下零售的真實使用場景,並建立有效的記憶系統時,AI就能成為真正實用的設計夥伴。

工具會變,但理解工具的方法論會成為你最寶貴的資產。


上一篇
AI協作原型設計:從理想到現實的落差與調整
下一篇
登入系統原型設計:AI協作的第一個成功案例
系列文
AI協作開發實戰:從需求到原型的挑戦9
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言