工具包：瀏覽、預覽與新增模組

Explorer 正好分為三層，每一層都存在頁面自己的網址中，而不只是元件狀態：分類格線（/projects/kit 或 /projects/<id>/kit）、單一分類的模組清單（加上 ?cat=<key>），以及單一模組的完整詳細頁面（再加上 &module=<id>）。這表示瀏覽器的返回按鈕總能正確運作，而且特定模組的詳細頁面是真正可分享的連結——你可以直接傳給別人「這就是報價或估價申請表單能帶給你的內容」，而不必告訴對方該去哪裡點。按 Escape 會一次返回一層，與返回按鈕相同。

從專案內部開啟（/projects/<id>/kit）時，頁面會知道你正在查看哪個專案，因此能顯示專案上已有的內容，並讓你直接新增至該專案。若獨立開啟（/projects/kit，從 Kit 分頁的連結進入，或直接前往），它同樣是三個層級，但不含任何特定專案的資訊——適合在決定要建構什麼之前先瀏覽，或在不開啟特定專案的情況下向他人展示目錄。

在分類格線的最上方，與 aiKit 其他地方相同的雙向切換會將整個目錄分為兩類：網站 Kit 是會成為網站或應用程式本身一部分的區段與功能（頁面、表單、圖庫、商店、預約、SEO）；商務工具 Kit 則是與專案並行運作、而非放在專案內部的工具（行銷自動化、開立發票、CRM、員工工具、報表）。每個分類方塊會顯示其包含的模組數量；只要其中至少有一個「現已可用」模組（見下文），就會出現「N 個現已可用」的標籤。

分類上方的搜尋框會比對整個目錄中所有模組的名稱或說明——同時涵蓋網站 Kit 與商務工具 Kit，不論目前選的是哪個切換——因此即使你正在查看網站 Kit，搜尋「invoice」仍能找到發票相關模組。

從專案內部開啟，且只在未搜尋時，若 aiKit 有實際建議，分類格線上方會出現「為此專案推薦」列。這些建議來自簡單、非 AI 的規則，依據專案類型比對（例如網站會建議報價表單、聯絡表單、評價展示、在地 SEO 與常見問題頁面；線上商店會建議購物車與結帳、購物車放棄挽回與商品評價；落地頁、應用程式、管理系統、儀表板、客戶入口、部落格與行銷自動化專案也各有對應建議），並加上幾個與專案目標文字相符的關鍵字比對（提到「報價」、「預約」、「評價」、「電子郵件」、「發票」或「線上銷售」，都會顯示對應模組及其一行理由）。專案上已有的項目會被排除，清單上限為六項。

每個模組都帶有兩種狀態標籤之一，且用字刻意保持客觀，而非行銷語言。「現已可用」表示該模組是建構引擎經過測試的模組之一——真正的程式碼會渲染出實際頁面，並以範例資料代替你的資訊，與正式網站使用的範本完全相同。「為你打造」表示該模組是目錄中真實規劃的一部分，但目前尚未有任何東西可以渲染：選擇它會將其加入計畫並建立一項真實的工作項目，該模組會以網站自己的程式碼、依你的品牌與文字打造，與其他任何 AI 編輯的方式相同——只是今天還沒有經過測試、可直接使用的範本。

這兩種狀態都不代表「不是真的」或「只是假設」。兩者都是 aiKit 會真正為你建構的內容。標籤所表達的唯一差別，是你現在能否看到它完成後的樣子，還是必須從描述與示意圖去想像。

開啟分類時，會以卡片形式顯示其中的每個模組：縮圖、模組名稱、狀態標籤、簡短的一行說明、「最適合」標籤列（最多三個），以及若已加入則顯示「在此專案上」（在專案內瀏覽時）。「現已可用」模組的縮圖是真實頁面的小型即時預覽——只有捲動到可見範圍時才會載入，且畫面上同時最多六個即時縮圖，因此很長的分類也不會拖慢頁面；超過上限的部分會顯示一般載入佔位圖，直到真正可見為止。「為你打造」模組的縮圖則是下文所述的示意圖，只是尺寸較小——但有可運作預覽的模組除外（見下文），其卡片會縮小顯示真實的範例網站、一個「可運作預覽 · N 種變化」標籤，以及「查看運作」按鈕，而非「查看詳情」。「查看詳情」會開啟該模組自己的頁面。

對於「Ready now」模組，預覽是實際已測試頁面的真實 iframe，以完整尺寸呈現，外觀像一個小型瀏覽器視窗，並附有「桌面／手機」切換鈕，可真正調整視窗大小，方便您檢查在手機上的呈現效果（在實際手機上，切換鈕會換成單純的「手機預覽」標籤，且視窗會直接捲動到表單處，讓您看到的是欄位，而不只是頁首區塊）。視窗底部會逐漸淡出；其下方的「開啟完整預覽」會在新分頁中開啟整個頁面，而下方的說明文字會標示替代資料所屬的範例企業。若在專案內開啟，「以此網站的配色顯示」切換鈕會重新載入同一預覽，並使用專案自身的品牌色（直接讀取簡報品牌備註中輸入的任何 #hex 色碼）及替換為專案名稱，讓您看到的更接近實際網站的樣貌，而非一般範例。

對於「為您打造」模組，沒有即時 iframe，而是提供與分類列表相同的示意線框圖，但放大顯示：以單線條 SVG 圖表呈現版面形狀（表單的欄位、行事曆的格線、儀表板的磚塊，依模組適合的畫面類型而定），並附上幾個取自該模組預覽資料的簡短標籤。每一個圖下方都必定有說明文字，且不會移除：「版面示意圖。您的版本會設計成符合您的網站。」此說明專門用來確保版面草圖不會被誤認為已完成、符合品牌的預覽。

可用預覽（2026-10-04）：越來越多「為您打造」模組略過草圖，改為開啟完整、可點擊的範例網站，並在詳細資訊上方以全寬顯示。所有十二個電子商務／線上商店模組都會開啟同一個範例陶藝店 Juniper Kiln，各自聚焦於該模組的功能：商品目錄（篩選、排序、搜尋、開啟商品並選擇釉料與尺寸，圖片與價格隨之變動）、購物車與結帳（變更數量、移除商品、輸入 WELCOME10、FREESHIP 或 GIFT-2580、依郵遞區號估算運費，並結帳至確認頁面）、付款選項（信用卡、Pay in 4 及電子錢包按鈕）、運費費率、折扣碼與禮品卡、商品評價（依星級或照片篩選、標示為有幫助、撰寫評價）、組合商品與加購項目、銷售稅（變更配送州別，稅額行會隨之改變）、客戶帳戶（登入、再次購買、追蹤包裹、申請退貨）、訂單電子郵件（確認、已出貨及已送達郵件，並附可運作的追蹤頁面）、退換貨（尋找訂單、選擇商品與原因、取得退貨標籤），以及庫存（擁有者檢視模式，變更庫存會改變購物者所見內容）。所有十個線上課程與數位產品模組都會開啟範例麵包學校 Rise & Crumb：播放課程（速度、字幕）、標示為已完成、觀看進度環填滿、參加測驗、從免費預覽報名、查看結業證書、在課程下方提問、購買數位下載、選擇課程組合或勾選結帳加購項目，並切換至擁有者檢視，以重新命名、重新排序、新增或下架課程，以及設定每週開放時間。在發布排程模組中，畫面上方的「預覽時間」列提供「跳至一週後」（及「回到今天」），讓您觀看上鎖的課程如何在指定日期開放。

在畫面上方：每個模組提供的變化選項各有一列選擇（例如 店面版面：格線、列表或精選；購物車：滑出式購物車或購物車頁面，以及 結帳：單頁或分步驟；發布規則：依指定日期、加入後經過天數，或完成最後一堂課後）。選擇後會立即以該變化版本重繪範例網站，並儲存於頁面網址（?v=…）中，因此可分享特定變化版本的連結。「桌面」與「手機」會調整視窗大小，讓範例網站以在手機上的方式重新排版（在實際手機上則為單純的「手機檢視」標籤）。「重設」會將範例網站恢復為初始狀態。簡短的「待辦事項」列會列出應先點擊的項目，而每個已選變化版本的說明則位於視窗下方。在簡報含有品牌色的專案中，「以此網站的配色顯示」會將範例網站的主色替換為專案自身的顏色（僅當該顏色夠深，足以讓白色按鈕文字清晰可讀時才會替換）。

可用預覽中的任何內容都不會傳送至伺服器。沒有任何付款連線：結帳頁面標示「預覽 — 不會收費，也不會送出訂單」，信用卡號碼為固定的唯讀範例，而電子錢包按鈕（Apple Pay、Google Pay、PayPal）僅顯示一則說明。不會寄出任何電子郵件、不會發布任何評價，也不會儲存任何內容；離開頁面後，所有資料都會被清除。範例企業、商品、人員與價格皆為虛構。視窗下方的說明文字亦註明：「使用虛構企業範例資料的可用預覽。您的版本會使用您自己的商品、價格、文字與品牌。此處的內容不會收費、儲存或寄送。」其他所有「為您打造」模組仍會顯示版面示意圖。

• 訪客所見——以編號、淺白易懂的逐步說明，呈現使用此模組者實際體驗的過程。
• 您獲得的內容——模組交付給專案擁有者的成果（例如記錄在實際位置的潛在客戶、可由您更新的狀態等）。
• 功能，以及——僅限於目錄中定義了明確具名變體的模組——本節中一組可選取的「選擇變體」卡片（預設選取第一個，並以小核取記號標示），讓真正的二選一決定可在此直接選擇，而非手動輸入。
• 重要性——說明企業為何需要此模組的誠實理由。
• 如何自訂（Ready now）或可選擇的變體（為您打造）——此模組真正可以做出哪些不同之處。
• 最適合的對象——與卡片上相同的行業類型標籤，完整顯示。
• 如何建成 — 用一句簡單的話說明這個模組實際上如何誕生（是引擎目前會渲染的已測試頁面，或是 AI 在建置期間內建到網站中），若需要第三方帳戶（例如付款或地圖）請一併註明。

在所有內容的最下方是「加入至 <專案名稱>」（若尚未選擇專案，則顯示「加入至您的專案」）。如果此模組有任何已記錄的自訂建議，會先以清單形式顯示——對於「立即可用」的模組標示為「建議的自訂項目」，對於「為您建置」的模組則標示為「選擇您想要的版本」——勾選其中任何一項，都會把該項目的確切內容加入送出的內容中，而不只是默默勾選。

對於有可用預覽的模組，面板位於預覽下方的左欄，並以「您的變體」開頭——即您在預覽的選擇列中挑選的變體（例如「購物車：購物車頁面 · 結帳：分步驟」）。按下新增時預覽中顯示的內容，就是被記錄的內容：它會連同該模組一起儲存在專案的簡報中，工作項目會顯示「變體：…」，讓負責建置的人依該版面來建置。若模組在「功能」區段中也有命名選項，面板會在那裡詢問「哪一項對您最重要？」，以免兩個選擇混淆。

「您希望有什麼不同之處？」是一個自由文字備註，與 aiKit 其他地方相同，附有語音輸入按鈕，另有「附加照片或 PDF」按鈕（僅限圖片與 PDF，每個最大 2.5 MB），可用於上傳標誌、參考照片或規格表——附加的檔案會以可移除的標籤顯示在該處。若模組有真正具體的問題需要先回答才能建置得好，這些問題會顯示在「我們會問您」之下，每題都有自己的選填文字欄位，讓您可以事先回答，而不必等待之後再被詢問。

一旦您位於實際的專案中，「加入至計畫」隨時可用：它會將您的選擇記錄在專案簡報上（與「網站計畫」畫面和專案頁面所讀取的計畫相同），並在「意見回饋」分頁中建立一個真正、供團隊查看的工作項目，標示為「等待我們處理」，與其他任何請求的方式完全相同。「加入並立即建置」只會在專案已有可編輯的實際檔案時才會出現在旁邊——也就是其首次建置已完成，或已上線——它會執行相同的兩個步驟，接著立刻透過「用 AI 修正」所使用的相同 AI 編輯器執行該工作項目，不會另外排隊。若嘗試新增專案中已存在的模組，系統會直接拒絕，並顯示簡單的「已在此專案中」訊息，而不會新增重複項目。

送出後，確認訊息會取代按鈕，顯示實際發生的結果——簡單的「已加入計畫為工作項目」訊息，或若是立即建置的請求，則顯示實際狀態（已開始，或無法開始的具體原因，例如因等待先審核而暫停）——並附上兩個直達連結「開啟計畫」和「查看請求」，讓您不會不知道它去了哪裡。

在 /projects/kit 頁面——與託管專案儀表板其他部分相同的真實登入，無需專案——所有功能都完全相同地運作，直到您嘗試新增項目為止。按下「加入至專案」（未載入專案時，按鈕會顯示此文字，而非「加入至計畫」）會開啟「加入至哪個專案？」，這是一個小型選擇器，列出您帳戶中的每個專案。選擇一個後，您會直接前往該專案自己的 Kit Explorer，同一個模組仍保持開啟，準備完成新增。若您還沒有任何專案，選擇器會明確告知，並提供直接的「開始專案 →」連結，而不會讓您卡住。