此篇文章會分享我建立一個用來查找設計規格資料並回答設計師問題的 AI Chatbot 的經驗，解決設計團隊中察覺到的需求和痛點。
寫在前面 ✍🏼
這個領域的變動速度頗快，不久後資訊就會過時，因此本文雖然會帶到一些實作方法，但目標還是希望啟發大家思考我們可以運用這些新的技術「解決什麼問題」。
為什麼想要嘗試做 AI Chatbot ? 🤖
iCHEF 設計師主要記錄規格的平台是以 Figma 為主，Notion 為輔，因此有大量的產品規格描述散落在 Figma 檔案中，不易於快速查找。主要碰到的痛點有：
- iCHEF 產品分多個平台（後台、POS、消費者端），每個平台都有各種規格與流程，做專案時常常需要查找規格的相關內容
- 規格內容記錄四散在各專案設計稿，不易搜尋
- 盤點過程很耗時
以下是一些設計師最常碰到的問題：
#規格相關
- 找出包含 功能 A 的專案
- 規格 A 改成 規格 B 的原因是什麼
- 總共有哪些地方顯示 X 字詞
#專案相關
- 專案 A 檔案在哪
- 專案 B 的估時資訊是如何
#設計系統相關
- 元件 A 目前被用在哪幾個頁面
- 元件 B 在 disabled 狀態時會有哪幾種說明文字情境
- 元件 C 的使用規範
- 元件 D 最近的更新是在哪個專案中執行現況，設計師大部分是憑印象到相關檔案中查找，如果找不到就直接丟問題到頻道上詢問，讓有處理過相關規格的設計師協助提供相關回饋。同一個問題可能每幾個月就會再被問一次，花費許多時間，也影響產品探索的節奏。
在稍微了解 Generative AI 的能力後，我覺得上面這個問題有機會利用這種新的技術解決這個痛點，協助團隊提高工作效率。秉持 Learning by doing 的精神，想透過實作這個工具來學習這個專業領域的實作經驗。
專案概念介紹 📝
本專案主要使用的工具：Google Colab、LangChain、Gradio
▲ Google Colab 讓開發者可以在瀏覽器中快速建立一個編寫及執行 Python 程式的環境，除去繁雜的安裝流程，且可以很方便分享文件、共同編輯。
▲ LangChain 大語言模型 (Large Language Model, LLM) 應用開發框架有提供許多簡單易用的程式模組，讓開發者簡單快速實現開發大語言模型相關的專案。
▲ Gradio 這個 UI 框架讓開發者可以用簡單幾行程式就生出有互動功能的視覺化網頁。
專案主流程 🏗️
- 整理 Figma 文件做成 PDF 上傳到 Google Drive 。
- 讀取並將文件內容切成數個碎片（e.g. 字數 1000 為一個單位）。
- 將這些碎片進行向量化 (Embedding）後，儲存在向量資料庫（Vector Store）。
- 建立文件檢索機制（Retrieval）。
- 使用者提問文字 → 將此提問內容向量化 → 找到跟此提問內容關聯度最高的幾個碎片 → 把找到的碎片文件跟使用者提問的內容一起丟給語言模型，請它思考後給予答案。
- 套用 Chatbot UI 提供順暢的互動體驗。
大功告成！
建立 Chatbot 過程遇到的問題 🧠
1. 整理 Figma 文件是個坑 🕳️
- Figma 不是文字編輯器，Figma 檔案所有的文字都是由圖層堆疊起來的
- 文字圖層彼此沒有上下文關係（但卻是語言模型最需要的結構）
- UI 畫面上參雜許多無效的文字圖層（e.g. 按鈕名稱、對話窗訊息）
- 設計稿上的規格描述資訊，有些是重要的，也有很多是無用的（已封存的舊版本規格）
在嘗試過幾種做法後，結果都還是需要人工做一輪資料清理，因此決定自己手動整理，將每個檔案從頭到尾掃一次，將相關資訊整理進工作區 (Notion) 中，再匯出成 PDF。
2. 使用 LLM 做應用較難 debug 🪲
- 當 Chatbot 給出的答案不滿意或答非所問時，比較難追查是文字向量化做得不好、或是框架預設帶入額外 prompt 影響輸出結果、或是我下的 prompt 不好、或其實是語言模型本身的能力限制。
- 原本準備處理的解法是不使用框架，去除不必要的黑盒子內容，然後重點調教 System prompt 去更貼近我們想要的角色功能，此外也需要研究 Embedding 的操作細節。
- 但 OpenAI AI GPTs 出來後，很有機會可以直接拋棄原先的整套做法，直接用 OpenAI 整套去搞定。
未來優化方向 🛤
經過這次嘗試，我認為雖然此工作流程還有需要花時間人工處理的部分，但已證明是可行的方向，接下來準備執行一些優化項目，希望可以讓這個工具產生更大的效益。
- 優化文件內容整理方式（讓 Chatbot 輸出更正確且穩定）
- 優化 System prompt（讓 Chatbot 輸出更正確且穩定）
- 加入更多設計規格文件來源（e.g. Notion, Website）
- 讓 AI 針對圖片做視覺化問答（e.g. 給一個截圖並詢問問題）
學習資源 🌐
以下是我在產生專案構想前後有看過的一些影片與課程，網路上討論 Generative AI 的資源很多，可以挑一些喜歡的主題去研究。
- Gen-AI 年會
- Deeplearning.ai
- LLM 工作坊
- Twitter(X) 和 Facebook 上也有非常多人分享相關知識，若有興趣可以追蹤相關帳號 (e.g. swyx, 寶玉, 歸藏, axton, Jeffery Kaneda, IEObserve, 蔡旻錫, Liang-Bin Hsueh, Muyueh Lee, 尹相志, Explain this)
閱讀完此篇內容分享後產生哪些有趣的想法？歡迎留言一起討論！
