vibiPAS RAG 範例｜對話與 Prompt 演進紀錄

[demo] RAG 範例

RJ

v

Round 01 · 提出題目

收到。這一輪只有主題，還沒定義案例、資料、流程與 UI，我先給一個最小方向：在課程網站底下開一個獨立路由 /rag，做成可操作的教學頁，而不是一張靜態說明圖。

接下來需要你決定的是：要「真的檢索」還是「概念動畫」。

需求翻譯建立獨立 /rag 教學頁　驗收頁面可開啟且主題明確

我想問一下，你現在檢索是怎麼檢索的？不可能是真的用 ChatGPT 吧？

RJ

v

Round 02 · 質疑檢索真實性

對，沒有呼叫 ChatGPT。核心問題因此從「做一個畫面」變成「必須說清楚檢索到底怎麼運作」。這一頁的檢索全部在瀏覽器本機執行：

1拆解查詢詞→ 2掃描片段→ 3BM25 計分→ 4套用門檻→ 5取 Top K

需求翻譯使用真實本機文字片段與 BM25 計分　驗收查詢會得到可重現的分數與排序

1. 那是真的有檢索嗎？ 2. 那幾個文件是真的有嗎？

RJ

v

Round 03 · 確認文件與檢索是否存在

兩題都要能被驗證，所以案例不能只播放動畫：文件與搜尋結果必須對應到實際存在的本機資料。

建立 5 份完整虛構公司文件，切成 21 個可搜尋片段。
文件庫可開啟全文，任何一筆結果都能回查原文出處。
同一個查詢重跑，分數與排序一致，可重現。

需求翻譯5 份文件 · 21 chunks · 全文閱讀器　驗收結果可回查原文

我覺得現在的概念很好，但要擴充一下： 1. UI：現在是 RAG mode，還是不是 RAG mode，整個背景可以跟著改一下。 2. 專案概念：公司可以有個名稱，例如 vibi 公司、相關文件等，讓案例更加明確。 3. 可以說明怎麼檢索；輸入內容可以改，如果有人輸入無關或有關內容，要顯示或說明搜索過程。 4. 搜索要能用視覺化呈現，例如搜尋到 RAG 檔案的流程圖。你理解下並給我規劃。

RJ

v

Round 04 · 四個擴充方向

這一輪確立了四件事，我把它拆成規劃：

① 模式差異

公司知識模式：冷色、知識連線
一般回答模式：暖色、斷線視覺

② 案例世界觀

vibiWorks 維比創新有限公司
文件、問題、規則共用同一設定

③ 自由輸入

範例題／有關題／無關題
顯示完整搜尋過程

④ 流程視覺化

query → radar → context → answer
各階段有狀態變化

需求翻譯模式差異＋世界觀＋自由輸入＋視覺流程　驗收執行查詢時各階段狀態會變

1. 我覺得整體這樣很好。我希望文件內容更豐富生動，vibi 公司的規則要很特別，才能彰顯跟沒有 RAG 的比較。 2. 關於搜尋過程的視覺化，我想確認真實 RAG 流程是不是也是這樣。 3. 我沒有打算換真的 ChatGPT 生成。

RJ

v

Round 05 · 強化文件與差異化

這一輪加上三個重要限制：

文件要有故事性：規則要特殊到一般常識猜不出來，才能證明「沒有 RAG 就答不對」。
視覺流程不能冒充唯一標準：真實系統可能加查詢改寫、權限過濾、混合搜尋、重新排序、多階段檢索，也可能省略部分步驟。
回答不使用真實生成模型：以本機命中片段做摘錄式整理。

需求翻譯加入「概念示意」註解 · 回答改摘錄式　驗收頁面明示無外部 API

2 的部分你可以註明這是概念，實際上可能不同，找個地方註解。然後可以做了！請幫我確認所有功能都要做到。

RJ

v

Round 06 · 正式實作授權

開始實作。以下是最終落地的功能結構：

案例世界觀

vibiWorks 維比創新有限公司
5 份完整虛構文件
21 個檢索片段
具記憶點的特殊公司規則

實際搜尋方式

瀏覽器本機文字檢索
BM25 相關性計分
通過 2.4 分門檻才採用
最多取 Top 3 進入脈絡

公司知識模式

搜尋 21 個片段
顯示掃描／分數／排名／引用
文件庫與流程節點可開啟
冷色知識連線背景

一般回答模式

完全略過公司文件
不提供引用與證據
文件入口停用
暖色斷線背景

視覺流程（8 步）

1輸入問題 2拆解查詢詞 3掃描 21 片段 4BM25 計分排序 5套用 2.4 門檻 6選取 Top 3 7匯入 Answer Context 8整理回答＋引用

明確沒有使用：ChatGPT、外部生成式 AI API、Embedding、向量資料庫，也沒有假裝後端存在不存在的服務。

需求翻譯完整實作＋功能完整性檢查　驗收逐項對照功能清單

1. 現在整個網站字體 UI 不好，太小了。 2. 一般回答模式的時候，應該不能點那幾個文件才對。

RJ

v

Round 07 · 字體與權限行為

第 2 點是關鍵轉折：模式差異不能只改顏色，要改元件的可操作性與資料取得能力。

全面提高 RAG 頁面的輔助字級。
一般模式下，文件庫卡片與流程圖文件節點的 disabled 為真，無法開啟全文。
切換模式時，會關閉已經開啟的文件視窗。

需求翻譯真正的 disabled 行為　驗收一般模式點不開任何全文

你預計要怎麼發佈上去？首頁要放在哪個按鈕？是否放在 05？

RJ

v

Round 08 · 發布方式與首頁位置

建議不取代 01–04，而是在首頁新增 05｜RAG 知識檢索實驗室，直接連到 /rag。這讓 /rag 從孤立頁面變成課程首頁中的正式教學單元。

需求翻譯新增首頁 05 卡片　驗收桌機與手機都能從 05 進入

好，可以，補了後確認才發佈。

RJ

v

Round 09 · 定義發布順序

順序：先補入口 → 再做桌機與手機確認 → 最後發布。驗證項目如下。

功能驗證

5 個範例問題命中預期文件
無關的拉麵問題回傳零結果
自由輸入走相同檢索流程
公司知識模式可開 5 份全文
一般模式文件卡片與雷達節點全停用
模式切換不殘留已開文件視窗
首頁 05 正確跳轉 /rag

視覺驗證尺寸

寬螢幕 1440 × 900
一般筆電 1024 × 768
平板／窄桌機 810 × 790
手機 390 × 844
矮螢幕手機 390 × 667

發布流程：本機實作 → 瀏覽器確認尺寸與互動 → 正式建置 → 保存可部署版本 → 更新公開網站 → 重新載入確認新版 CSS 與功能生效。

需求翻譯先補入口再驗證再發布　驗收所有尺寸無橫向溢出

你整個按鈕變跑版了欸，電腦版、手機版都是。上面的導覽列也是。

RJ

v

Round 10 · 響應式修正

電腦版 02–05 卡片改為一致高度。
04 與 05 的長標題不再把卡片撐高（不換行）。
平板導覽維持單列。
手機導覽改為雙層：品牌／音樂第一列、四個入口第二列。
矮螢幕允許自然捲動，避免 05 被裁掉。

需求翻譯等高卡片 · 長標題不換行 · 手機雙層導覽　驗收1440/1024/810/390px 無橫向溢出

字體還是太小。

RJ

v

Round 11 · 可讀性再提升

這次不是只放大標題，而是同步提高導覽、卡片標題、卡片說明、編號、課程資訊與手機版輔助文字。

項目	調整後字級
電腦卡片標題	約 19–25px
手機卡片標題	16px
導覽（電腦／手機）	12px／11px
卡片說明、文件編號、課程資訊、吉祥物標示	同步放大

需求翻譯提高全站字級下限　驗收放大後仍無重疊、裁切或溢出

幫我把這個對話的過程與 Prompt 過程輸出。

RJ

v

Round 12 · 交付紀錄

好的，以下是完整交付。

版本與變更紀錄

Git 變更	內容	對應網站版本
`dbc973e`	Add interactive RAG course demo	初始 RAG Demo
`0677fc8`	Expand RAG demo into vibiWorks knowledge lab	約第 16 版
`56bcbe4`	Improve RAG readability and lock document access	第 17 版
`cc503de`	Add RAG lab to course homepage	第 18 版
`45c40a4`	Fix homepage cards and responsive navigation	第 19 版
`abf16f5`	Increase homepage typography for readability	第 20 版

備註：後續儲存庫還有其他課程功能更新；上表只列本次 RAG 對話直接產生的主要變更。正式網址 vibipas.com，RAG Lab /rag。

Prompt 演進與需求翻譯總表

階段	使用者關注點	轉換後的產品需求	驗收方式
概念	想要 RAG 範例	建立獨立 `/rag` 教學頁	頁面可開啟且主題明確
真實性	到底有沒有檢索	真實本機文字片段與 BM25 計分	可重現的分數與排序
文件	文件是否真的存在	5 份完整虛構文件、21 個片段	可開全文，結果可回查原文
案例	公司需要具體名稱	建立 vibiWorks 維比創新有限公司	文件、問題與規則同一世界觀
差異	凸顯沒有 RAG 的不足	公司知識模式與一般回答模式並列	同題產生有／無引用的差異
自由輸入	問題可能相關或無關	支援自由輸入、範例題與無關題	有關題命中；無關題零結果
透明度	想知道怎麼搜	顯示拆詞、掃描、BM25、門檻、Top 3	檢查器可看分數與採用狀態
視覺化	搜尋過程看不見	query → radar → context → answer	各階段有狀態變化
誠實標示	真實 RAG 是否相同	加入「概念示意，實務可能不同」	明示查詢改寫、混合搜尋等變體
模型限制	不使用真正 ChatGPT	回答採本機摘錄式整理	明示無外部 API、無生成模型
權限	一般模式不該看文件	停用文件庫與雷達文件按鈕	`disabled` 為真，無法開全文
首頁入口	應放在 05	新增首頁 05 卡片連到 `/rag`	桌機與手機都能進入
響應式	按鈕與導覽跑版	等高卡片、長標題不換行、雙層導覽	1440/1024/810/390px 無溢出
可讀性	字體仍太小	提高導覽、卡片、說明與標示字級	放大後無重疊、裁切或溢出

Prompt 設計上的七個關鍵轉折

① 「那是真的有檢索嗎？」

從視覺假資料 → 本機文件、可重現計分、可回查原文

② 「公司可以有個名稱吧？」

從抽象知識庫 → 具體 vibiWorks 案例，情境一致

③ 「要是有人輸入無關的？」

必須有門檻、零結果狀態與透明搜尋過程

④ 「真實 RAG 也是這樣嗎？」

同時呈現常見架構與本頁實際做法，避免誤導

⑤ 「一般模式不能點文件」

從視覺切換 → 真正的權限狀態

⑥ 「是否放在 05？」

從完成頁面 → 課程首頁正式教學單元

⑦ 跑版與字體回饋

驗收標準加入多尺寸測試與字級下限

可重複使用的最終整合 Prompt　

請在既有 vibiPAS 課程網站中建立一個完整的 RAG 教學案例，路由為 /rag，並在首頁新增 05「RAG 知識檢索實驗室」入口。

案例設定：
- 使用虛構公司「vibiWorks 維比創新有限公司」。
- 建立 5 份內容完整、風格生動的公司文件，共約 20–25 個可搜尋片段。
- 公司規則要夠特殊，讓一般常識無法猜出正確答案，以凸顯 RAG 的價值。

檢索要求：
- 必須真的搜尋本機文件文字，不能只播放假動畫。
- 使用可在瀏覽器本機執行的 BM25 或等效文字檢索。
- 顯示查詢詞、文件掃描、分數、排名、門檻、Top K 與採用／略過狀態。
- 支援範例題、自由輸入、有關問題與無關問題。
- 無關問題若未通過門檻，必須明確顯示沒有命中文件，不可硬湊答案。

模式要求：
1. 公司知識模式：
   - 搜尋公司文件。
   - 顯示引用、分數與原文入口。
   - 文件庫與流程圖節點可開啟。
2. 一般回答模式：
   - 完全略過公司文件。
   - 不顯示公司引用。
   - 文件庫與流程圖節點必須是真正 disabled，不能開啟全文。

視覺要求：
- 兩種模式使用明顯不同的整體背景與狀態色。
- 用流程視覺呈現 Query → Retrieve → Rank → Context → Answer。
- 顯示實際命中的文件、分數與 Top 3，而不是固定假資料。
- 提供完整文件閱讀視窗與搜尋過程檢查器。
- UI 要適合教學展示，不能大量使用 6–8px 小字。
- 電腦卡片標題至少約 19px，手機至少 16px；手機導覽至少 11px，說明文字至少 10px。
- 驗證 1440、1024、810、390px，以及 390×667 矮螢幕。
- 不得有橫向溢出、導覽重疊、長標題撐高卡片或入口被裁切。

誠實標示：
- 清楚註明流程是常見 RAG 概念示意，真實系統可能加入查詢改寫、權限過濾、混合搜尋、重新排序或多階段檢索。
- 清楚列出本頁實際執行的流程。
- 明示本頁沒有使用 ChatGPT、外部生成式 AI API、Embedding 或向量資料庫。

驗收與發布：
- 逐一測試所有範例問題、無關問題、自由輸入、文件開關與模式權限。
- 完成響應式瀏覽器驗證與正式建置。
- 先確認所有功能和版面，再發布到既有 vibiPAS 公開網站。

如果下一次要減少迭代次數：一開始就在 Prompt 中講明這八點。

是否要真檢索，還是只做概念動畫。
文件是否需要全文與可回查引用。
是否使用外部生成模型。
有關、無關與零結果應如何處理。
模式差異是只有視覺，還是也包含操作權限。
流程圖是概念架構，還是實際系統追蹤。
最小字級與必測螢幕尺寸。
首頁入口編號與發布時機。

若以上八點在第一輪就明確，通常能避免「看起來有搜尋但其實沒有」、「一般模式仍可開文件」、「新增入口後跑版」與「字體仍太小」等返工。

RAG 範例：對話與 Prompt 演進紀錄

從一句「RAG 範例」到上線的教學頁