極點宏觀｜Financial Cloud Cloud · 建構文章
利用 Vibe Coding 開發技巧打造 AWS 證照模擬練習室
這篇文章介紹如何透過 Vibe Coding（氛圍編程），將一段粗糙的提示詞歷程轉化為可運作的 AWS 證照模擬練習室。文中將說明如何將開發意圖轉化為資料規格、打造快速的靜態原型、保持使用者介面（UI）簡潔，並將每一次的提示詞視為一項產品決策。我們的焦點在於實務應用：從小處著手建置、驗證行為、保留上下文脈絡，並在不失去開發動能的情況下，透過下一個提示詞持續微調系統。
免責聲明
目的： 本平台為一項獨立專案，專為推動教育探索與人工智慧研究而建置。旨在促進對現代科技的深入理解，不受任何外部影響。使用者可在此安全環境中研究複雜系統、測試創新想法並安全地學習。
非商業性： 本獨立專案絕無任何潛在的商業模式。嚴禁且不旨在產生任何財務收益、貨幣利潤或任何實質商業價值。我們的核心焦點純粹在於學術發展，確保使用者在存取時完全免於隱藏成本、企業贊助或廣告企劃。
無擔保保證： 由於本平台是利用實驗性人工智慧的教育工具，產生的輸出內容有時可能不準確、具誤導性或完全不完整。所有提供的內容均嚴格依「現狀」（as is）提供，不提供任何明示或暗示的保證、事實正確性擔保或對整體可靠性的任何承諾。
目錄
● 第一部分：從產品合約開始
第一章節解釋此 Demo 如何從原始的考試內容和零散的想法，演變成穩定的產品合約（Product Contract）：JSON 資料、靜態 HTML、查詢字串路由（query-string routing）以及直觀的學習者回饋。
● 第二部分：將提示詞視為產品增量
本章節說明為何最有效的提示詞是微小的產品增量（Product Deltas）而非寬泛的指令，以及每條指令如何改變開發者可立即檢查的介面。
● 第三部分：在美化裝飾前建立信任感
本章節解釋深色 AWS 風格的登陸頁、免費贈送訊息、證照題庫卡片、文章連結和 Metadata，如何作為建立信任的訊號，而非僅僅是裝飾性的設計。
● 第四部分：堅持靜態 Demo，直到非變不可
本章節主張採用靜態檔案、簡單的 JavaScript、可重複使用的 JSON，並且在產品明確證實系統何處真正需要引入複雜度之前，絕不輕易使用框架。
● 第五部分：將提示詞日誌轉化為建置藍圖
本章節展示如何將提示詞歷程記錄轉化為開發意圖、設計決策、修正過程的紀錄，並作為未來教學 Vibe Coding 實務的部落格題材。
第一部分：從產品合約開始
目標： 建置一個學習產品，使其能從單一的 AWS Certified Data 模擬試題集擴展為可重複使用的證照練習室，而無需為每個新主題重新建構 UI。
提示詞：
提示詞歷程始於內容轉換：保留原始內容，將輸出格式變更為範本格式，接著遵循題目指引，將 JSON 升級至更專業的水準。
結果： 系統最終採用了一套 JSON 規格合約，其中包含考試 Metadata、章節、題目、選項、答案、答案摘要和選項解析。這套合約讓 HTML 播放器的設計變得非常簡單。
技巧：
● 在美化 UI 之前，先定義好資料結構。
● 將第一個 JSON 檔案作為未來所有題庫的範本。
● 保留答案解析，因為「回饋」才是學習產品的核心。
● 使用章節和題號作為穩定的導覽錨點。
● 將每個內容檔案視為 API，即使它只是靜態 JSON。
資料夾結構訊號（Folder signals）：
● 首頁（Landing page）： index.html，一個深色 AWS 風格的教育首頁，包含 Open Graph Metadata、漢堡選單導覽、獨立的語言選擇器、焦點區塊（hero section）、免費活動訊息、證照題庫網格、AWS Builder 文章卡片以及響應式行為。
● 練習播放器（Practice player）： practice-room.html，一個簡單的深色模式單選與複選應用程式，可從 URL 查詢字串中讀取考試、章節和題號，並載入對應的 JSON 檔案。
● 語言層（Language layer）： 包含 20 個已翻譯的首頁，加上英文版的 index.html。每個選擇器選項都指向已部署的絕對路徑，格式如 index_{lang_code}.html。
● 題庫合約（Exam-bank contract）： 每個 JSON 檔案均使用 exam、title、source、chapters、questions、number、question、options、answer、answer_summary 和 explanations。這項合約能讓單一前端載入多個不同的練習題組。
● 題目指引素材（Question-guide material）： 該指引強調效度、信度、公平性、具誘惑力的干擾項、主動語態、角色對齊、認知複雜度以及證明正確答案為何正確的解析。
● 提示詞歷程（Prompt trail）： 迭代建置筆記記錄了範本轉換、行動裝置版面配置、提交與下一步行為、證照卡片、螢幕截圖、語言在地化以及絕對路徑語言 URL 的指令。
題庫規模：
● AWS AI Development 證照考試：1 章，共 20 題。
● AWS Generative AI Dev Organization 證照考試：4 章，共 80 題。
● AWS Networking Core 證照考試：2 章，共 98 題。
● AWS FSI Trading Desk Design 證照考試：34 章，共 680 題。
● AWS Certified Cloud Operations 證照考試：5 章，共 520 題。
● AWS FSI Macro Trading 證照考試：23 章，共 380 題。
● AWS Certified Machine Learning 證照考試：4 章，共 460 題。
● AWS Certified Data 證照考試：5 章，共 82 題。
● AWS Certified Data 證照考試 (Version 1)：5 章，共 82 題。
第二部分：將提示詞視為產品增量
目標： 透過一次只要求一個肉眼可見的變更，在每次迭代後依然保有可運作的 Demo，藉此維持開發動能。
提示詞：
最有效的提示詞都非常具體：新增行動裝置響應式練習室、放大題目按鈕、新增證照卡片、將語言選擇器移到卡片外、使用絕對 URL。
結果： 最終的 Demo 反映了許多細微但保持一致的變更，因為每個提示詞都指明了檔案、介面、目標行為或可重複使用的實作風格。
技巧：
● 指明哪個檔案負責該變更。
● 使用現有的 UI 作為樣式來源。
● 在連結至關重要時，提供精確的查詢字串。
● 將版面配置（layout）請求與資料請求分開。
● 在加入下一項功能之前，先審查目前的結果。
形塑此系統的提示詞摘錄：
● 建立多選題證照練習的行動裝置響應式 HTML 網頁。
● 桌上型電腦版面配置：左側為題目列表，右側為題目與答案選擇區域。
● 行動裝置版面配置：上方為題目與答案選擇區域，下方為題目按鈕列表。
● 點擊「送出（Submit）」應顯示正確與錯誤答案的解析；點擊「下一步（Next）」應跳至下一題。
● 使用 URL 查詢字串中的考試名稱、章節和題號來導向相關題目。
● 建立一個名為 index.html 的全新網頁，作為教育科技新創公司的官方網站。
● 醒目顯示免費活動，並在 HTML 網頁上展示可用的考試主題。
● 使用導覽列漢堡選單，並讓整張卡片皆可作為連結點擊。
● 在 AWS Exam Library 區塊加入主視覺圖片，行動裝置版使用 screenshot2.png。
● 參照 AWS Certified Data Exam Questions 的樣式來新增證照卡片。
● 新增選擇語言導覽列，將其移至卡片外，翻譯所有網頁，並使用絕對語言 URL。
第三部分：在美化裝飾前建立信任感
目標： 在加入繁複的視覺效果或複雜的應用程式架構之前，先讓登陸網頁顯得專業且可信。
提示詞：
提示詞要求建立一個具備現代 AWS 風格、社群 Metadata、醒目免費活動、證照題庫入口以及 AWS Builder 文章卡片的教育科技新創官方網站。
結果： 登陸網頁成了一個建立信任感的基石：包含焦點定位、語言選擇器、免費活動訊息、證照卡片、全卡片點擊連結、螢幕截圖、文章連結和簡潔的頁尾。
技巧：
● 提早使用 Metadata，因為分享也是產品的一部分。
● 將卡片轉換為連結，以提升行動裝置上的可探索性。
● 使用單一且明確的焦點訊息，避免多個訴求互相競爭。
● 保持深色模式簡潔且易讀。
● 讓螢幕截圖發揮作用，這比用文字解釋題庫更快速有效。
關鍵洞察：
信任感是可以被規劃出來的。網頁不需要絢麗的動畫來營造真實感，它需要的是一致的字型排版、符合預期的連結、清晰的狀態標籤，以及能向使用者證明練習題組目前已可使用的實證。
第四部分：堅持靜態 Demo，直到非變不可
目標： 在驗證學習流程、目錄、在地化和內容模型的階段，避免不必要的後端開發工作。
提示詞：
提示詞從未要求建立帳戶、註冊、付款或伺服器工作階段（sessions）。它們只要求提供連結、靜態 HTML、載入 JSON，以及讓 AWS 開發者能直接存取。
結果： 產品保持可作為靜態資產部署的狀態。瀏覽器會根據名稱載入 JSON、更新查詢字串、轉譯題目、檢查答案並顯示解析。
技巧：
● 當狀態模型（state model）很清晰時，「靜態優先」絕非簡陋。
● 查詢字串（Query Strings）非常適合用來分享目前的學習狀態。
● 在有真正必要的需求之前，避免加入登入功能。
● 不要僅為了轉譯卡片就引入專案建置管線（build pipeline）。
● 讓內容檔案來承載系統的擴展規模。
這是一個經典的 Vibe Coding 勝利：
原型之所以能順利上線，是因為我們拒絕讓系統架構變得比使用者的體驗旅程還要複雜有趣。
第五部分：將提示詞日誌轉化為建置藍圖
目標： 將提示詞歷史紀錄當作文件，記錄產品的演變歷程以及各項決策背後的原因。
提示詞：
提示詞歷程記錄了關於範本、行動裝置版面配置、卡片連結、漢堡選單、語言名稱、翻譯、絕對路徑、新增考試以及練習室行為的各項決策。
結果： 這段提示詞歷程現在可重複使用，作為新手引導教材、QA 測試筆記、部落格素材以及未來的提示詞種子。它不僅說明了完成後的 Demo，也記錄了達成此結果的實作路徑。
技巧：
● 在想法還在發展階段時，將提示詞日誌保留在 Demo 檔案附近。
● 將每個提示詞總結為一個「意圖」，而不僅僅是指令。
● 利用日誌找出可重複套用的模式。
● 當 Demo 規模擴大時，將草稿筆記移至開發（dev）資料夾中。
● 將最佳的提示詞模式轉化為檢驗清單。
對於 Vibe Coding 而言，日誌本身就是產品的一部分。 它不是開發過程中的意外產物，而是記錄人類引導、AI 執行、修正調整以及最終上線行為的珍貴紀錄。
1：提示詞壓縮
背景： 早期的開發筆記充斥著繁複的願望：一個練習室、一個登陸頁、免費活動、各種證照題庫以及行動裝置的行為。其中最關鍵的實用技巧，就是將每個願望壓縮成一條指令，並明確指名檔案名稱與可見的變更。
目標： 將寬泛的意圖轉化為 AI 程式代理（coding agent）可以直接執行的提示詞，無需讓 AI 去猜測歸屬或範圍。
提示詞：
使用簡短的增量指令，例如「index.html 新增 AWS Certified Machine Learning 卡片」或「practice-room.html 放大行動裝置版按鈕」。
結果： 產品持續演進，且完全沒有破壞現有已正常運作的功能，因為每個提示詞都擁有微小的目標以及顯而易見的審查點。
技巧：
● 優先指名檔案名稱。
● 點名預期的 UI 元素。
● 在關鍵之處提供精確的連結或查詢字串。
● 避免將不相關的版面配置與內容變更混在一起。
● 在送出下一個提示詞之前，先進行審查。
來自 Demo 的佐證： 產品持續演進，且完全沒有破壞現有已正常運作的功能，因為每個提示詞都擁有微小的目標以及顯而易見的審查點。這是評估者可以直接檢查的部分。實戰筆記應與此實證保持關聯，而非流於對 Vibe Coding 的泛泛談論。
審查步驟： 針對「提示詞壓縮」，請確認三件事：背景是否描述了真實的專案壓力、目標是否指明了預期行為，以及結果是否指向檔案或瀏覽器中肉眼可見的部分。若缺少其中任何一項，請在發佈前重新撰寫筆記。
2：規格優先思維
背景： 考試內容最初是範本文字和從 PDF 擷取的素材，但在應用程式擴展至其他主題之前，需要一個穩定的資料架構。
目標： 將 JSON 規格合約作為產品的核心，以便同一個轉譯器（renderer）能載入所有的證照題庫。
提示詞：
遵循 AWS Certified Data 的題目 JSON，作為新證照題組的範本。
結果： Schema（資料規格）變得符合預期：包含考試 Metadata、章節、題號、題目文字、選項、答案陣列、答案摘要和選項解析。
技巧：
● 將 JSON 視為 API。
● 將答案保持為陣列格式。
● 使用以選項為鍵（option-keyed）的解析。
● 將標題儲存在資料中。
● 拒絕一次性的特殊內容格式。
來自 Demo 的佐證： Schema（資料規格）變得符合預期：包含考試 Metadata、章節、題號、題目文字、選項、答案陣列、答案摘要和選項解析。這是評估者可以直接檢查的部分。實戰筆記應與此實證保持關聯，而非流於對 Vibe Coding 的泛泛談論。
審查步驟： 針對「規格優先思維」，請確認三件事：背景是否描述了真實的專案壓力、目標是否指明了預期行為，以及結果是否指向檔案或瀏覽器中肉眼可見的部分。若缺少其中任何一項，請在發佈前重新撰寫筆記。
3：行動裝置優先審查
背景： 第一個桌上型電腦設計很簡單：左側為題目按鈕，右側為作答區域。然而，行動裝置需要完全不同的閱讀順序。
目標： 在加入視覺修飾之前，先確保練習流程在小螢幕上順暢好用。
提示詞：
行動裝置版本：上方為題目與答案選擇區域，下方為題目按鈕區域，放大提交與下一步按鈕。
結果： 練習室採用了響應式排序和更大的觸控目標，這讓測驗體驗顯得經過精心設計，而非只是硬塞進手機畫面中。
技巧：
● 測試大拇指的點擊動線（thumb path）。
● 在行動裝置上，將核心內容置於導覽列之上。
● 增加點擊目標的大小。
● 保持目前題目清晰可見。
● 不要把提交按鈕藏得太深。
來自 Demo 的佐證： 練習室採用了響應式排序和更大的觸控目標，這讓測驗體驗顯得經過精心設計，而非只是硬塞進手機畫面中。這是評估者可以直接檢查的部分。實戰筆記應與此實證保持關聯，而非流於對 Vibe Coding 的泛泛談論。
審查步驟： 針對「行動裝置優先審查」，請確認三件事：背景是否描述了真實的專案壓力、目標是否指明了預期行為，以及結果是否指向檔案或瀏覽器中肉眼可見的部分。若缺少其中任何一項，請在發佈前重新撰寫筆記。
4：克制的深色模式
背景： 使用者要求深色模式以及無多餘裝飾的簡單設計。這項限制保護了 Demo，使其免於產生過度包裝與雜亂的設計輸出。
目標： 採用克制的視覺系統，以利於使用者集中注意力、進行長時間閱讀並快速檢視答案。
提示詞：
網頁設計：深色模式，簡單且不加任何裝飾。
結果： 最終的網頁使用了柔和的邊框、易讀的對比度、緊湊的卡片排版，並搭配類似 AWS 的經典橘色作為點綴，完全沒有多餘的動畫。
技巧：
● 謹慎著色，避免色彩過於雜亂。
● 將文字對比度視為首要考量。
● 寧可使用邊框，也不要使用厚重的陰影。
● 保持表單的沉穩與簡潔。
● 讓內容本身成為網頁的主角。
來自 Demo 的佐證： 最終的網頁使用了柔和的邊框、易讀的對比度、緊湊的卡片排版，並搭配類似 AWS 的經典橘色作為點綴，完全沒有多餘的動畫。這是評估者可以直接檢查的部分。實戰筆記應與此實證保持關聯，而非流於對 Vibe Coding 的泛泛談論。
審查步驟： 針對「克制的深色模式」，請確認三件事：背景是否描述了真實的專案壓力、目標是否指明了預期行為，以及結果是否指向檔案或瀏覽器中肉眼可見的部分。若缺少其中任何一項，請在發佈前重新撰寫筆記。
5：行銷誘因
背景： 官方網頁需要在訪客點擊練習連結之前，清楚說明為什麼他們應該關注這個平台。
目標： 將免費活動和證照題庫轉化為清晰的誘因（hook），而不將產品隱藏在註冊機制之後。
提示詞：
醒目顯示免費活動：免費存取 AWS Certified Data、Generative AI、Machine Learning、Cloud Operations、Networking、Financial Service Trading Desk on AWS。
結果： 首頁焦點區塊讓產品價值一目了然，而證照題庫網格則能立刻呈現目前可用的練習題組。
技巧：
● 說清楚什麼是免費的。
● 列出高辨識度的主題。
● 將行動呼籲（Call to Action）置於誘因附近。
● 避免使用含糊不清的平台術語。
● 用直接的連結來證明所言非虛。
來自 Demo 的佐證： 首頁焦點區塊讓產品價值一目了然，而證照題庫網格則能立刻呈現目前可用的練習題組。這是評估者可以直接檢查的部分。實戰筆記應與此實證保持關聯，而非流於對 Vibe Coding 的泛泛談論。
審查步驟： 針對「行銷誘因」，請確認三件事：背景是否描述了真實的專案壓力、目標是否指明了預期行為，以及結果是否指向檔案或瀏覽器中肉眼可見的部分。若缺少其中任何一項，請在發佈前重新撰寫筆記。
6：卡片一致性
背景： 每張新加入的證照卡片，在樣式、用字和行為上都可能產生偏差。重複使用 Data 卡片的規格能有效避免這個問題。
目標： 讓目錄的擴展變得標準化且簡單：在不重新設計題庫版面的情況下，直接新增主題。
提示詞：
新增 AWS AI Development 模擬試題，遵循 AWS Certified Data 模擬試題的樣式，並提供連結 aws_ai_development_exam_questions&chapter=1&question=1。
結果： 新的考試主題以卡片形式加入網格中，具備一致的狀態標籤、描述文字和點擊提示。
技巧：
● 複製經過驗證的卡片樣式。
● 僅修改標題、描述和連結。
● 保持完全相同的狀態用語。
● 使用全卡片點擊連結。
● 確認目標 JSON 檔案確實存在。
來自 Demo 的佐證： 新的考試主題以卡片形式加入網格中，具備一致的狀態標籤、描述文字和點擊提示。這是評估者可以直接檢查的部分。實戰筆記應與此實證保持關聯，而非流於對 Vibe Coding 的泛泛談論。
審查步驟： 針對「卡片一致性」，請確認三件事：背景是否描述了真實的專案壓力、目標是否指明了預期行為，以及結果是否指向檔案或瀏覽器中肉眼可見的部分。若缺少其中任何一項，請在發佈前重新撰寫筆記。
7：迭代日誌
背景： 提示詞歷程記錄了許多微小的修正：修改文字、移動元素、新增卡片、翻譯網頁以及轉換 URL。
目標： 將建置歷史當作產品規劃圖，而非用完即丟的對話廢棄物。
提示詞：
透過指明最新需要調整的行為，持續進行微調。
結果： 這些筆記成為撰寫技術說明與重構產品決策的可靠資訊來源。
技巧：
● 記錄開發意圖，而非僅僅是輸出結果。
● 在腦海中將相關的提示詞進行分組。
● 尋找重複出現的指令模式。
● 將修正措施轉化為規則。
● 將歷程紀錄用於 QA 品質測試。
來自 Demo 的佐證： 這些筆記成為撰寫技術說明與重構產品決策的可靠資訊來源。這是評估者可以直接檢查的部分。實戰筆記應與此實證保持關聯，而非流於對 Vibe Coding 的泛泛談論。
審查步驟： 針對「迭代日誌」，請確認三件事：背景是否描述了真實的專案壓力、目標是否指明了預期行為，以及結果是否指向檔案或瀏覽器中肉眼可見的部分。若缺少其中任何一項，請在發佈前重新撰寫筆記。
8：免建置的靜態部署
背景： 本專案從不需要後端伺服器來驗證學習閉環。靜態檔案已足夠應付登陸頁、在地化網頁、JSON 題庫與測驗播放器。
目標： 以最小的部署範圍（deployment surface）交付實用的 Demo。
提示詞：
在 exam-practice-room 資料夾中建立 HTML 網頁和 JSON 檔案。
結果： Demo 可直接作為靜態資產運作：由瀏覽器處理資料擷取、畫面轉譯、答案檢查與網頁導覽。
技巧：
● 除非應用程式狀態確實需要伺服器，否則應優先考慮靜態部署。
● 保持檔案名稱具有清晰語意。
● 使用查詢字串（Query Strings）來實現深層連結（Deep Links）。
● 避免為簡單網頁引入複雜的建置工具。
● 讓靜態部署來簡化除錯流程。
來自 Demo 的佐證： Demo 可直接作為靜態資產運作：由瀏覽器處理資料擷取、畫面轉譯、答案檢查與網頁導覽。這是評估者可以直接檢查的部分。實戰筆記應與此實證保持關聯，而非流於對 Vibe Coding 的泛泛談論。
審查步驟： 針對「免建置的靜態部署」，請確認三件事：背景是否描述了真實的專案壓力、目標是否指明了預期行為，以及結果是否指向檔案或瀏覽器中肉眼可見的部分。若缺少其中任何一項，請在發佈前重新撰寫筆記。
9：遵循出題指引
背景： 出題指引中引入了效度、信度、公平性、具誘惑力的干擾項、主動語態以及認知複雜度。
目標： 採用專業的試題撰寫標準，避免 AI 產生的模擬試題流於膚淺的冷知識。
提示詞：
遵循出題指引，並將練習題組升級至專業水準。
結果： 內容模型保留了選項級別的邏輯解析，使每一次的解釋都成為學習價值的一部分。
技巧：
● 撰寫具說服力的干擾項。
● 避免使用陷阱式字眼。
● 採用主動語態。
● 契合角色定位與認知層級。
● 詳細說明答案正確的原因。
來自 Demo 的佐證： 內容模型保留了選項級別的邏輯解析，使每一次的解釋都成為學習價值的一部分。這是評估者可以直接檢查的部分。實戰筆記應與此實證保持關聯，而非流於對 Vibe Coding 的泛泛談論。
審查步驟： 針對「遵循出題指引」，請確認三件事：背景是否描述了真實的專案壓力、目標是否指明了預期行為，以及結果是否指向檔案或瀏覽器中肉眼可見的部分。若缺少其中任何一項，請在發佈前重新撰寫筆記。
10：直接存取
背景： 行銷企劃書中明確指出：無需信用卡、無需註冊，直接為開發者提供網站連結。
目標： 消除讀者與模擬練習體驗之間的阻礙與摩擦。
提示詞：
直接為每位 AWS 開發者提供網站連結；無需信用卡，也無需註冊。
結果： 每張可用的卡片都直接連結至練習室的查詢狀態網址。
技巧：
● 不要對免費的價值設置過多門檻。
● 確保使用者的第一次點擊是實用的。
● 點開即直接進入實際題目。
● 避免彈出視窗（modal）的干擾。
● 使用可供分享的網址連結。
來自 Demo 的佐證： 每張可用的卡片都直接連結至練習室的查詢狀態網址。這是評估者可以直接檢查的部分。實戰筆記應與此實證保持關聯，而非流於對 Vibe Coding 的泛泛談論。
審查步驟： 針對「直接存取」，請確認三件事：背景是否描述了真實的專案壓力、目標是否指明了預期行為，以及結果是否指向檔案或瀏覽器中肉眼可見的部分。若缺少其中任何一項，請在發佈前重新撰寫筆記。
11：克制的焦點圖片
背景： 證照題庫需要視覺上的佐證，但原先的社群橫幅（social banner）區塊反而成了多餘的雜訊。
目標： 利用螢幕截圖說明產品介面，同時移除無法引導使用者採取行動的裝飾性區塊。
提示詞：
在 AWS Exam Library 區塊中加入焦點圖片：screenshot.png；行動裝置版則使用 screenshot2.png。
結果： 題庫區塊成功加入了響應式圖片，同時移成了不相關的橫幅文案。
技巧：
● 將產品螢幕截圖作為最佳佐證。
● 針對桌上型電腦與行動裝置的長寬比進行優化。
● 移除重複的視覺訴求。
● 保持替代文字（alt text）有其實際意義。
● 絕不要讓圖片取代了清晰的連結。
來自 Demo 的佐證： 題庫區塊成功加入了響應式圖片，同時移成了不相關的橫幅文案。這是評估者可以直接檢查的部分。實戰筆記應與此實證保持關聯，而非流於對 Vibe Coding 的泛泛談論。
審查步驟： 針對「克制的焦點圖片」，請確認三件事：背景是否描述了真實的專案壓力、目標是否指明了預期行為，以及結果是否指向檔案或瀏覽器中肉眼可見的部分。若缺少其中任何一項，請在發佈前重新撰寫筆記。
12：漢堡選單導覽
背景： 網頁需要在桌上型電腦和行動裝置上採用相同的緊湊型導覽模式，而非使用兩種各自獨立的架構邏輯。
目標： 讓導覽選單在不同螢幕尺寸上皆顯得緊湊且符合預期。
提示詞：
使用導覽列漢堡選單；不論是桌機版或手機版，均統一改為行動裝置版的導覽列。
結果： 頁首使用了一個選單按鈕，可切換各區塊連結，並在使用者選取連結後自動關閉。
技巧：
● 使用 aria 屬性以提升無障礙性。
● 保持導覽標籤簡短。
● 在使用者選取後立即關閉選單。
● 避免使用單獨的桌機專用導覽邏輯。
● 確保品牌標誌（brand logo）持續清晰可見。
來自 Demo 的佐證： 頁首使用了一個選單按鈕，可切換各區塊連結，並在使用者選取連結後自動關閉。這是評估者可以直接檢查的部分。實戰筆記應與此實證保持關聯，而非流於對 Vibe Coding 的泛泛談論。
審查步驟： 針對「漢堡選單導覽」，請確認三件事：背景是否描述了真實的專案壓力、目標是否指明了預期行為，以及結果是否指向檔案或瀏覽器中肉眼可見的部分。若缺少其中任何一項，請在發佈前重新撰寫筆記。
13：語言選擇器的置放位置
背景： 選擇器起初位於焦點卡片（hero card）內部，但這使其看起來像卡片本身的內容，而非全域導覽控制項。
目標： 在焦點訊息之前，將語言選擇功能移至獨立的控制項中。
提示詞：
將選擇語言功能移出卡片，作為一個獨立的元素。
結果： 選擇器目前位於卡片上方，明確發揮了網頁級別控制項的功能。
技巧：
● 全域控制項不應看起來像文章的本文內容。
● 儘早置放語言選擇控制項。
● 保持標籤簡潔。
● 保留已選擇的語言狀態。
● 移動後，請測試其中一個在地化網頁。
來自 Demo 的佐證： 選擇器目前位於卡片上方，明確發揮了網頁級別控制項的功能。這是評估者可以直接檢查的部分。實戰筆記應與此實證保持關聯，而非流於對 Vibe Coding 的泛泛談論。
審查步驟： 針對「語言選擇器的置放位置」，請確認三件事：背景是否描述了真實的專案壓力、目標是否指明了預期行為，以及結果是否指向檔案或瀏覽器中肉眼可見的部分。若缺少其中任何一項，請在發佈前重新撰寫筆記。
14：絕對路徑指令
背景： 相對語言連結在本地端運作正常，但公開發佈的網頁需要能從任何路由導向可預期的目的地。
目標： 確保部署後的語言重導向機制安全可靠。
提示詞：
針對所有的語言選項，使用已部署的絕對路徑 index_{lang_code}.html 格式之網址。
結果： 每個語言選項都指向部署的目標路徑，而部落格則避免直接提及公開的網域名稱。
技巧：
● 使用統一的基礎 URL 格式。
● 更新每一個網頁，而非僅更新英文版。
● 驗證使用者選擇的數值是否保留。
● 搜尋是否有殘留的相對路徑。
● 確保選擇器中同樣保留英文選項。
來自 Demo 的佐證： 每個語言選項都指向部署的目標路徑，而部落格則避免直接提及公開的網域名稱。這是評估者可以直接檢查的部分. 實戰筆記應與此實證保持關聯，而非流於對 Vibe Coding 的泛泛談論。
審查步驟： 針對「絕對路徑指令」，請確認三件事：背景是否描述了真實的專案壓力、目標是否指明了預期行為，以及結果是否指向檔案或瀏覽器中肉眼可見的部分。若缺少其中任何一項，請在發佈前重新撰寫筆記。
15：翻譯審查
背景： 第一批翻譯好的網頁在本文區塊中仍含有殘留的英文。使用者要求重新檢查整個網頁。
目標： 將在地化（localization）視為內容的品質保證（QA），而不僅僅是自動產生。
提示詞：
重新檢查所有在地化網頁；確保整個內容網頁均已完成翻譯。
結果： 所有語言網頁上的可見區塊、卡片描述、研究筆記以及頁尾文字，皆已同步更新完成。
技巧：
● 搜尋是否有殘存的英文。
● 單獨檢查從右至左書寫（RTL）的網頁。
● 翻譯正文內容，而不僅僅是選單。
● 保持產品名稱具辨識度。
● 審查具代表性的文字語系。
來自 Demo 的佐證： 所有語言網頁上的可見區塊、卡片描述、研究筆記以及頁尾文字，皆已同步更新完成。這是評估者可以直接檢查的部分。實戰筆記應與此實證保持關聯，而非流於對 Vibe Coding 的泛泛談論。
審查步驟： 針對「翻譯審查」，請確認三件事：背景是否描述了真實的專案壓力、目標是否指明了預期行為，以及結果是否指向檔案或瀏覽器中肉眼可見的部分。若缺少其中任何一項，請在發佈前重新撰寫筆記。
16：證照題庫規模
背景： 資料夾中包含了大規模題庫，如 FSI trading desk、cloud operations、machine learning、networking、AI development 以及 generative AI。
目標： 在不干擾焦點區塊的前提下，讓登陸網頁能清晰展示題庫目錄的豐富度。
提示詞：
在 HTML 網頁上列出考試主題，並遵循現有樣式新增卡片。
結果： 目錄轉化為易於瀏覽的網格，其中每個可用主題均有著一致的入口點。
技巧：
● 將主題分組在網格中展示。
● 桌機版面每行使用三張卡片。
● 保持描述文字結構對稱一致。
● 清楚標示未來即將推出的主題。
● 避免對使用者提及原始 JSON 資料。
來自 Demo 的佐證： 目錄轉化為易於瀏覽的網格，其中每個可用主題均有著一致的入口點。這是評估者可以直接檢查的部分。實戰筆記應與此實證保持關聯，而非流於對 Vibe Coding 的泛泛談論。
審查步驟： 針對「證照題庫規模」，請確認三件事：背景是否描述了真實的專案壓力、目標是否指明了預期行為，以及結果是否指向檔案或瀏覽器中肉眼可見的部分。若缺少其中任何一項，請在發佈前重新撰寫筆記。
17：從共同創辦人到課程講師
背景： 網頁最初使用「共同創辦人」的用字，隨後調整為「課程講師」的定位。
目標： 將個人品牌與學習體驗緊密連結，而非強調新創企業的自傳背景。
提示詞：
將「共同創辦人」改為「課程講師」。
結果： 信任卡片目前可更妥善地支援該教育產品，且不會分散使用者點選練習的注意力。
技巧：
● 確保身分定位與使用者的核心意圖相符。
● 保持個人簡介卡片可點選。
● 避免冗長繁複的生平自傳。
● 一致地使用角色職稱。
● 讓文章本身提供深度內容。
來自 Demo 的佐證： 信任卡片目前可更妥善地支援該教育產品，且不會分散使用者點選練習的注意力。這是評估者可以直接檢查的部分。實戰筆記應與此實證保持關聯，而非流於對 Vibe Coding 的泛泛談論。
審查步驟： 針對「從共同創辦人到課程講師」，請確認三件事：背景是否描述了真實的專案壓力、目標是否指明了預期行為，以及結果是否指向檔案或瀏覽器中肉眼可見的部分。若缺少其中任何一項，請在發佈前重新撰寫筆記。
18：提示詞具體性
背景： 最有效的提示詞都包含了要替換的確切文字、要使用的精確連結，或是要實現的明確版面行為。
目標： 藉由提供可衡量的細節，大幅降低 AI 理解時的模糊性。
提示詞：
將「Explore Exam JSON Library」改為「Explore AWS Exam Library」；將「AWS Learning Forge」改為「Exam Practice Room」。
結果： 由於期望的輸出極為明確，文字修改變得迅速且風險極低。
技巧：
● 精確引用原字串。
● 提供要替換的新文字。
● 當某個詞彙至關重要時，避免使用「改善文案」這種模糊指令。
● 修改後仔細檢查 UI 文字。
● 保持名稱前後一致。
來自 Demo 的佐證： 由於期望的輸出極為明確，文字修改變得迅速且風險極低。這是評估者可以直接檢查的部分。實戰筆記應與此實證保持關聯，而非流於對 Vibe Coding 的泛泛談論。
審查步驟： 針對「提示詞具體性」，請確認三件事：背景是否描述了真實的專案壓力、目標是否指明了預期行為，以及結果是否指向檔案或瀏覽器中肉眼可見的部分。若缺少其中任何一項，請在發佈前重新撰寫筆記。
19：微調修正迴路
背景： 許多要求只是針對先前的置放位置、用字或連結行為進行局部修正，而非要求重寫整個檔案。
目標： 利用修正型提示詞引導運作中的系統，同時不丟失任何現有進度。
提示詞：
移動語言選擇器、加入英文、移除所有提及網域的地方、移除直接提及開發筆記檔名的地方。
結果： 檔案在原處持續演進並完整保留了可運作的 Demo，同時契合了全新的發佈限制。
技巧：
● 寧可進行局部修補（patching），也儘量避免重寫。
● 明確列出禁止使用的詞彙。
● 移除特定術語後，務必進行全域搜尋確認。
● 保留實用的程式結構。
● 確保最終發佈的檔案安全無虞。
來自 Demo 的佐證： 檔案在原處持續演進並完整保留了可運作的 Demo，同時契合了全新的發佈限制。這是評估者可以直接檢查的部分。實戰筆記應與此實證保持關聯，而非流於對 Vibe Coding 的泛泛談論。
審查步驟： 針對「微調修正迴路」，請確認三件事：背景是否描述了真實的專案壓力、目標是否指明了預期行為，以及結果是否指向檔案或瀏覽器中肉眼可見的部分。若缺少其中任何一項，請在發佈前重新撰寫筆記。
20：讀者優先的成效
背景： 最終產出的不只是程式碼；它還為開發者提供了直接的學習連結、清晰的反饋、多國語言存取以及顯著的信任訊號。
目標： 以讀者的實際成效來評估 Vibe Coding 的成果，而非僅僅炫耀工具的新奇度。
提示詞：
根據此 Demo 建立技術部落格文章，分享 Vibe Coding 的開發技巧。
結果： 本系列文章能詳細說明提示詞如何轉化為產品決策，以及每一個交付上線的細節如何具體協助學習者。
技巧：
● 將每一項技巧與使用者行為緊密連結。
● 使用 Demo 作為實證。
● 避免提及不公開的內部實作細節。
● 分享可重複套用的提示詞模式。
● 在結尾提供開發者可重複使用的審查步驟。
來自 Demo 的佐證： 本系列文章能詳細說明提示詞如何轉化為產品決策，以及每一個交付上線的細節如何具體協助學習者。這是評估者可以直接檢查的部分。實戰筆記應與此實證保持關聯，而非流於對 Vibe Coding 的泛泛談論。
審查步驟： 針對「讀者優先的成效」，請確認三件事：背景是否描述了真實的專案壓力、目標是否指明了預期行為，以及結果是否指向檔案或瀏覽器中肉眼可見的部分。若缺少其中任何一項，請在發佈前重新撰寫筆記。