在 Codex 中建立並分享互動原型 ☕ Buy me a coffee

🧑‍🏫 這支影片示範在 Codex（OpenAI 能幫你寫程式的 AI 工具）裡，用 Product Design 外掛把一個產品點子做成能實際操作的原型，再分享給團隊。流程從討論需求、出設計、寫程式、自我檢查，一路到交給同事，都在同一個地方完成。就算不寫程式，也能看懂現在 AI 可以幫設計工作做到哪一步。

• 00:00 OpenAI Product Design plugin 協助產品設計師改變工作方式。它把「從想法到可分享原型」這個設計上最大的挑戰之一，變成流暢的工作流程。
  ↳ plugin（外掛）是加裝上去、多出一組功能的擴充。prototype（原型）是正式開發前先做出來試用的樣品。這個外掛要把「想法變成能給人看的原型」這段常卡關的路，串成一條順的流程。
• 00:00 影片說這個 plugin 能讓公司更快做出更好的產品。
  ↳ 這是影片自己的說法。背後的道理是：原型越快做出來、越早給人試，就越早發現問題、越早修正，產品的速度和品質都會受益。
• 00:00 示範範例：在 ChatGPT 裡設計一個新的行事曆（calendar）功能。
  ↳ 後面整段都用同一個例子：假設要在 ChatGPT 裡加一個行事曆功能，看設計師怎麼從零走到能分享的成品。
• 00:00 第一步，模型會先問幾個釐清問題來掌握方向。使用者回答後，再提供一個參考檔案，當作視覺簡報（visual brief）。
  ↳ 模型不會一收到指令就開畫，會先問清楚你要什麼，就像設計師接案前先開需求會議。接著你給一份參考檔當 visual brief（視覺簡報），讓它知道你要「大概長這種感覺」。
• 00:00 模型充分理解方向後，才開始發想（ideation）流程。
  ↳ ideation（發想）就是開始提出各種設計點子的階段。重點在順序：先確認方向對了才動手，免得做了半天才發現跟你想的不一樣。
• 00:30 模型產生三種不同的視覺方向。使用者可以逐一檢視、比較，再決定要做成原型的是哪一個。示範中選了選項一。
  ↳ 它一次給三種風格不同的畫面，不是只給一個答案，你可以像挑樣品一樣比較完再決定。示範裡選了第一個，後面都以它為基礎繼續做。
• 00:30 模型拿選定的圖片，開始用程式碼建出互動原型，並產生這個體驗所需的輔助圖片與素材（assets）。
  ↳ 選定的只是一張圖，模型接著寫程式，把它變成真的能操作的畫面。畫面上需要的圖示、插圖等 assets（素材）也由它一起做出來，不用你另外找。
• 00:30 交付之前，模型會自己測試原型，包括檢查不同的螢幕尺寸。
  ↳ 交給你之前，它會先自己點點看有沒有壞掉，也會檢查在不同螢幕大小下（例如手機和筆電）排版是否正常，不必等你踩到問題才發現。
• 00:30 模型還會拿參考圖和本機原型做比對，確認成品看起來沒問題。
  ↳ 「本機原型」是在你自己電腦上跑的版本。它會把這個版本和當初選的參考圖放在一起比對，確認做出來的樣子沒有跑掉。
• 01:00 使用者自己測試：用全螢幕開啟原型，四處點擊、切換功能開關、捲動畫面，實際感受行事曆功能的運作方式。
  ↳ interactive prototype（互動原型）是能點、能切換、能捲動的原型，不是只能看的靜態圖。你親手操作一輪，才會真的知道這個行事曆用起來順不順。
• 01:00 想再調整的話，可以在原型的特定部分加上註解（annotate），請模型修改。
  ↳ annotate（註解）是直接在畫面的某個位置標記意見，例如圈起一個按鈕寫「改大一點」。這比用文字形容「右上角那個」更精準，模型也比較好改。
• 01:00 分享給團隊的做法之一，是建立 Figma artifact。
  ↳ Figma 是很多設計團隊共用的線上設計工具。Figma artifact 就是把這次的成果打包成 Figma 裡的內容，讓習慣在 Figma 工作的同事直接接手。
• 01:31 Figma artifact 會把作品送進現有的 Figma board，也可以另外產生一個新的 board。
  ↳ Figma board 是 Figma 裡放設計稿的工作區。成果可以放進團隊已經在用的 board，也可以另開一個新的，看你要併入現有專案還是獨立存放。
• 01:31 打開 Figma 檔案後，可以看到新增了一個 Agenda co-pilot 頁面。
  ↳ 示範中打開 Figma 後，多了一個叫 Agenda co-pilot 的頁面，這個行事曆功能的成果就整理在這裡。
• 01:31 送進 Figma 的不只是截圖，而是這個功能的完整脈絡，團隊可以接著編輯、修改。
  ↳ 這是最關鍵的一點：同事拿到的不是看完就沒用的截圖，而是有前因後果、還能繼續修改的內容，可以直接接著做，不必從頭重來。
• 01:31 Figma 檔案裡直接放了原型截圖、user story 的脈絡說明，以及針對這個功能的 critique notes（評論筆記）。
  ↳ user story（使用者故事）是用「誰、想做什麼、為什麼」來描述需求的寫法。檔案裡同時放了畫面、需求背景和設計評論（critique notes），同事一次就能看懂。
• 02:02 最後一步，用新功能 Sites 分享給更大範圍的團隊：同一個原型會變成全隊都能存取的互動網站。
  ↳ Sites 是影片介紹的新功能，能把同一個原型變成一個網站。Figma 比較適合設計同事，其他人不一定會用，給一個網址點開就能看，分享範圍就擴大到整個團隊。
• 02:02 團隊成員可以在網站上瀏覽、點擊各個元素，體驗這個功能放進 ChatGPT 後可能的樣子。
  ↳ 同事打開網站就能自己點、自己試，想像這個功能真的放進 ChatGPT 會是什麼樣子，給出的回饋也會比只看簡報更具體。
• 02:02 原本可能很費力的流程，現在集中在同一個地方完成，幫助團隊打造並推出更好的產品。
  ↳ 以前發想、畫圖、做原型、整理文件、分享給別人，可能要在好幾個工具之間來回切換。現在都在同一個地方完成，省下的力氣可以拿來把產品做得更好。

在示範中，模型開始發想（ideation）後，一次產生了幾種不同的視覺方向讓使用者比較？