browser-demo-screenshots：網頁原生截圖與離線留本 Skill（完整 SKILL.md）
Copyright Notice: This article is an original work licensed under the CC 4.0 BY-NC-ND license.
If you wish to repost this article, please include the original source link and this copyright notice.
Source link: https://v2know.com/article/1439
你是否做過這種操作手冊：截圖裡有自己的姓名、郵件或環境名稱，不能直接給別人看，於是蓋上白塊，再貼一個 Sample？資訊藏起來了，畫面卻多了一塊和網站風格不搭的貼紙。
browser-demo-screenshots 是一份交給 Codex 使用的工作指引。它會指導 Codex 在工具支援的情況下，把網頁上的私人資訊換成示例文字，讓網站原本的字體、位置和間距繼續負責排版，再截成圖片；同時保存日後還能修改的離線網頁。
第一次接觸 Skill，可以先照下面的說明安裝，再從一張網頁截圖開始試用。熟悉用法的讀者，也可以直接複製完整 SKILL.md。
它可以幫你做什麼？
假設你要教同事怎麼操作一個網頁後台，但截圖右上角會顯示真實帳號。使用這份 Skill 後，可以要求 Codex：
- 把帳號文字換成「示例帳號」或
[email protected]，保留網站原有外觀。 - 移除與教學無關的個人頭像或選單，保留讀者需要辨認的按鈕、欄位與操作位置。
- 截取處理後的示例畫面，並保存可繼續修改的離線副本。
- 更新 Word 操作手冊中的網頁配圖，按照你指定的範圍保留正文、圖注與版式。
這裡說的「修改網頁元素」，就是在瀏覽器的畫面結構中調整文字或元件，技術名稱叫 DOM。例如把姓名放回原來顯示姓名的位置，而不是在圖片上另外蓋一塊東西。你平常不需要自己寫 JavaScript，可以直接用自然語言交代需要處理的範圍。
它適合操作手冊、教學文件與對外演示等示例截圖。原始執行證據要另外保留；成功或失敗、權限、版本與統計數字等事實不能為了美化畫面而改掉。Windows 桌面程式的畫面，例如 Report Builder，也不屬於這份網頁 Skill 的處理範圍。
使用前需要準備什麼？
Skill 可以理解成一份可重複使用的工作說明書。SKILL.md 是存放這份說明的文字檔。Codex 讀取後，會依照裡面的流程使用現有工具；檔案本身不會自動安裝瀏覽器工具。
- 一個支援讀取本地 Skill 的 Codex 環境。
- 能由 Codex 操作的瀏覽器，以及保存檔案的能力。
- 你有權查看和製作示例的網頁；需要登入時，先自行完成登入。
- 如果要一起修 Word，還需要能處理 DOCX 與檢查文件版面的工具。
不確定目前有沒有這些能力，可以先問 Codex：「請檢查你現在能否操作瀏覽器、保存網頁與處理 DOCX，先不要修改任何內容。」部分工具只能讀取網頁，不能直接修改 DOM；Skill 會要求它確認能力、使用允許的方式，並說明做不到的部分。
怎麼安裝？把完整內容交給 Codex 就可以開始
- 到本文下方的「完整 SKILL.md」，按程式碼區塊右上角的 Copy，複製整份內容。最上方的
---也要保留。 - 在 Codex 開一個會話，貼上下面的安裝要求，再貼上剛剛複製的完整內容。
- 等 Codex 確認已保存並能讀取這份 Skill，再開始交代截圖任務。若技能清單尚未更新，可以重新啟動 Codex 後再確認。
請把我接下來貼上的完整內容安裝成我的個人 Skill。
Skill 名稱：browser-demo-screenshots
檔名：SKILL.md
請使用你目前支援的個人技能目錄，完成後確認能讀取它。
以下是完整內容：
［在這裡貼上本文下方完整 SKILL.md 區塊的內容］想手動保存也可以：建立名為 browser-demo-screenshots 的資料夾，把完整內容以 UTF-8 存成其中的 SKILL.md，再放到你的 Codex 技能目錄。注意不要存成 SKILL.md.txt。不同環境的技能位置與載入方式，可以查看官方 Skill 使用說明。
第一次使用：先處理一張網頁截圖
先給 Codex 一個明確的網頁網址或受控瀏覽器分頁，告訴它哪裡需要換成示例資料。可以從下面這段開始，把方括號的內容換成自己的需求：
使用 browser-demo-screenshots，幫我製作一張教學用網頁截圖。
目標頁面：［網頁網址或目前的瀏覽器分頁］
需要處理：把右上角的姓名改成「示例帳號」，郵件改成 [email protected]。
保留網站原有字體、顏色、按鈕位置與業務狀態，不加白塊或 Sample 貼紙。
不要提交表單、儲存設定或執行匯入。
請交付截圖，以及可修改、已實際重開驗證的離線網頁。
完成後告訴我檔案存在哪裡，並列出沒有保存成功的區域。Codex 會按工具能力檢查頁面、處理展示用資訊、截圖和驗證離線副本。有些環境需要先保存真實頁面的靜態副本，才能在本地修改展示內容；有些動態區域則可能無法完整保存。這些結果應如實交代。
如果要修改已經做好的 Word 手冊
把要修改的文件提供給 Codex，說清楚只改哪些圖、哪些內容必須保留。例如：
使用 browser-demo-screenshots 修正「操作手冊.docx」的網頁截圖。
將指定的私人資訊改成原生網頁元素中的示例文字，移除對應的舊白塊與 Sample 貼紙。
正文、圖注、圖片尺寸與版式保持，原生桌面程式的截圖先不動。
不要覆蓋來源文件，請另存修正版。
同時保存可修改的離線網頁，完成全部頁面的版面檢查，並列出未完成事項。最後應該拿到哪些東西？
| 成果 | 用途 |
|---|---|
| 截圖 | 放進手冊、簡報或教學文章，呈現已整理好的示例畫面。 |
| 離線 HTML 與必要資源 | 日後修改示例姓名或文字，再用瀏覽器重新排版、截圖。若附有 assets 資料夾，應和 HTML 一起保留。 |
| 修正版 Word（有要求時） | 已更新指定配圖的文件，來源文件仍保留。 |
| 簡短結果說明 | 交代檔案位置、已驗證項目，以及缺失的字體、canvas 或其他無法保存的區域。 |
離線 HTML 是用來修改展示畫面的靜態留本，不會變成可以離線操作的完整網站或 App。拿到成果後，先看截圖是否自然，再打開離線副本確認文字與版面；後續需要調整時，就能從這份留本接著處理。
完整 SKILL.md
下面是完整單檔版，DOM 編輯與離線保存規則都已合併，不需要另外建立 references 資料夾。整個區塊可以直接複製保存。
---
name: browser-demo-screenshots
description: "為操作手冊、訓練教材或對外演示製作保留網頁原生外觀的示例截圖，並保存可離線重開修改的網頁副本；需要去識別化時，透過開發者工具暫時替換或刪除網頁元素，避免白塊和 Sample 貼紙。用於網頁截圖、離線頁面留存及既有文件配圖更新；不適用於原始採證截圖或原生桌面應用程式截圖。"
---
# 網頁示例截圖去識別化
優先保留網頁 Original 的呈現，只在確有隱私需求時暫時替換識別資訊，讓網頁自行排版後截圖；同時保存可離線重開和繼續修改的頁面副本。優先重用已登入的內建瀏覽器，保留產品原有字型、顏色、間距、表格和對話框；不要用白色矩形、浮動圖層、圖片塗抹或 Word 遮蔽形狀覆蓋網頁截圖，也不額外在右上角等位置添加 `Sample` 貼紙或浮水印。
## 適用範圍與真實性
- 適用於使用者要給他人看的手冊、教材、演示等示例畫面。原始執行證據、事故採證、稽核或事實核對截圖保持原樣，和去識別化示例分開保存。
- 允許替換帳號、姓名、郵件、組織／環境／工作區名稱、主機、路徑、GUID、檔名等識別資訊；允許刪除無關的個人選單、頭像、導覽項目或提示。保留理解該步驟所需的按鈕、欄位標籤和上下文。
- 不改變成功／失敗、開關狀態、權限、版本、統計結果、匯入進度等業務事實，不刪除與結論相關的錯誤或警告。沒有實際出現的成功畫面，不能用 DOM 造出來。
- 原生桌面應用程式依相應工具流程處理。Report Builder、RDL Connection Properties 等原生畫面不因本 Skill 自動重拍或修改。
- 使用者已滿意的文件，以其明確指出的問題為修訂範圍；例如只要求修右上角 `Sample`，就保留其他已經確認的內容和版式，不擴大成整份重拍。沒有隱私需求時直接使用原生頁面，不為了標成示例而強加 `Sample`。
- 修改僅作用於目前頁面的展示 DOM。不得為改截圖而將虛構帳號／連線值保存到伺服器端、提交表單、呼叫業務 API、修改儲存資料，或將開發者工具 Overrides 設為持續生效。不要為了補圖重新執行 Reset、刪除、匯入或發佈。
## 選擇實際可用的編輯方式
先閱讀目前瀏覽器工具文件並確認能力。使用受支援的 DevTools Elements 編輯／刪除節點、DevTools 主控台，或明確支援寫入 DOM 的頁面執行能力，達到 F12 檢查元素的效果。具體處理見本文「DOM 編輯與還原」部分。
`evaluate` 或類似 API 若明確限定為唯讀，不要嘗試寫入 DOM，也不要繞過限制、猜測未提供的 CDP／偵錯連接埠或讀取登入資料。改用現有受控瀏覽器支援的 DevTools UI；涉及 Windows 原生視窗時，先使用目前的 computer-use 技能及其文件。若允許的方式仍無法編輯，明確指出具體能力缺口，保留已完成工作；不要悄悄退回白塊遮蓋、假網頁或外部 Headless 截圖。
## 截圖流程
1. 閱讀任務和文件限制，確認本次頁面、需要隱藏的識別資訊及必須保留的操作資訊。僅對需要去識別化的欄位維護示例值對照表；同一物件跨圖使用同一示例值。使用者指定值時沿用；未指定時使用明顯虛構且格式合理的值，郵件使用 `example.invalid`。示例值放回網頁對應的原生元素，不添加角標貼紙。
2. 導覽至真實目標頁面，確認目標帳號／環境和實際狀態。選擇最小必要的頁面範圍，從目前 DOM 或 Elements 面板定位節點，不猜測選擇器，也不進行整頁大量替換。原始私有值只在本次工作目錄按需保留，不寫進 Skill 或對外交付資料。
3. 按本文「離線網頁保存」部分保存目前實際渲染的頁面及所需資源，再逐項替換葉節點文字或必要屬性。輸入框僅修改展示用的原生 DOM 值，不派送 `input`／`change`、不執行應用程式回呼、不點擊保存；存在自動儲存風險時，改用不與應用程式表單綁定的展示節點替換。刪除元素前確認不會去掉步驟必需內容。記錄本次還原方式。
4. 頁面穩定後重新檢查實際 DOM 和畫面，確認 SPA 沒有把私有值重繪回來，替換值沒有溢出、截斷、擠動按鈕或破壞版面。對 iframe 使用工具支援的對應 frame／DevTools 上下文，不繞過同源限制。無須修改時，不要為了使用本 Skill 而改頁面。
5. 用瀏覽器本身的截圖介面保存真實像素。按任務要求設定檢視區；正式手冊未另指定時，優先使用 1920×1080。關閉 DevTools 再截圖，避免它壓縮檢視區；暫時的檢視區設定在結束後還原。網址列、系統標題列或瀏覽器外框不屬於頁面 DOM，優先截取網頁檢視區，避免帶入這些區域。
6. 逐張實際看圖，檢查頁首、側欄、麵包屑、表格、選取項目、對話框、頭像、郵件、URL、檔名及 QR code 等是否還有私有資訊，同時檢查功能語意、可讀性和構圖。修正後重新從瀏覽器截圖，不在圖片上補白塊。
7. 保存和最終截圖對應的可編輯離線頁面版本，驗證它確實可以離線重開。內部清單記錄原始離線留本、最終離線副本、截圖路徑／SHA、來源頁面、檢視區、示例對應關係、修改或移除的節點、實際視覺審閱及還原結果。截圖的 `示例` 屬性記錄在內部清單或按文件約定標註，不擅自給正式說明書加入製作過程筆記。
8. 用記錄的反向操作還原，或在確認使用者沒有尚未儲存的工作後重新載入目前頁面；核對示例值已消失且沒有觸發儲存。只關閉本次自己的暫時分頁，不關閉使用者其他分頁。不要宣稱已確認焦點隔離或零網路寫入，除非有相應證據。
## 更新既有 Word／其他文件配圖
- 先盤點圖片與遮蔽物件的對應關係。保留正文、章節、表格、圖注、原圖比例和已確認的版式，輸出本次的新檔案，不覆蓋來源。
- 以新瀏覽器截圖替換對應網頁圖片，並移除這些圖片上方舊的白塊／VML／DrawingML 遮蔽物件及相關示例文字疊層。不要全域刪除形狀；原生 RDL 截圖及其既有遮蔽處理，按使用者本次範圍保留。
- 檢查最終 DOCX 的整個媒體封裝，避免可見圖片已替換，但未引用的舊私有圖片仍藏在檔案中。確認關聯和引用後，僅移除不再使用的相關舊資源；不刪除仍被其他頁或原生截圖使用的元件。
- 配圖文字、操作步驟和示例值保持一致；不把示例截圖描述成未經處理的雲端執行證據。不為補齊歷史畫面而重做有外部影響的部署。
- 歷史成功通知或空環境畫面已消失時，優先使用能證明同一步驟結果的目前真實頁面，並只調整必要圖注、步驟或交叉引用。沒有意義相同的畫面時，省略該圖，用明確文字保留操作資訊，並在交付說明中列出未重拍的範圍；不保留白塊舊圖冒充本次新圖。只有任務明確要求每張原圖必須保留，且沒有可用替代時，才就該具體衝突請使用者選擇。
- 按文件類型使用相應技能，完成最終檔案的全部頁面渲染和逐頁視覺檢查；渲染成功與 Microsoft Word 實際正常開檔分別回報。輸出檔名遵守任務要求及日本時間後綴。
僅交付要求的配圖、更新文件和必要說明。私人原圖、DOM 傾印和真實值對照表留在本次工作目錄，不放進技能儲存庫或公開附件。
## DOM 編輯與還原
### 使用前確認
這是暫時修改真實頁面展示內容的操作指引，不是繞過瀏覽器工具限制的入口。只有工具明確允許頁面寫入，或能正常控制 DevTools 時，才執行修改。目前內建瀏覽器的某些 `playwright.evaluate` 實作只提供唯讀 DOM；即使 JavaScript 語法支援賦值，也不能把它當作寫入權限。
F12 是開發者工具入口，不要求一定傳送全域 F12。優先使用綁定至目標瀏覽器的受支援入口；避免把快捷鍵傳送給使用者的 Word、Report Builder 或其他視窗。DevTools 獨立視窗、停駐方式，以及關閉後的頁面檢視區都要重新核對。
### 定位、替換和刪除
- Elements 的 Edit text／Edit as HTML／Delete element 應針對已實際觀察到的具體節點。選擇器必須只符合一個節點，或逐項確認符合的集合；不要對整個 `document.body.innerHTML` 做字串替換。
- 文字在混合內容節點中時，只改目標 Text 節點的 `nodeValue`；直接寫入父元素的 `textContent` 會刪除按鈕、圖示及其子節點。
- 與表單綁定的 `.fill()`、鍵盤輸入或前端事件可能觸發自動儲存，不能當作無副作用的去識別化手段。對輸入框使用允許的原生 DOM 展示編輯，且不派送事件；不能確保安全時，換成獨立、同風格的展示節點，不保留表單綁定／事件處理常式。
- 網址或路徑同時出現在文字、`value`、`title`、預留位置文字、`aria-label` 等位置時，按畫面需要分別處理。連結顯示文字可以用示例值，但不要點擊虛構連結。改 `src`／`href`／CSS URL 可能發出請求，不載入第三方素材，也不把真實識別資訊寫進對外 URL。
- 刪除頭像／個人選單可以使用真正的節點刪除；要保留其空間時，可暫時設定 `visibility:hidden`。減少無關導覽可刪除目標項目或使用 `display:none`，然後實際核對重新排版結果。保留操作上下文，不能用覆蓋層把整塊錯誤或身分區域蓋住。
- SPA 重繪後，以新 DOM 為準重新編輯；不要安裝長期背景指令碼、跨頁面注入或持續的 MutationObserver 來強行維持修改。
### DevTools Console 示例
以下僅用於**允許寫入的 DevTools／頁面執行上下文**。不在唯讀 evaluate 中執行。`$0` 表示在 Elements 中已人工選取並核對的元素；先透過 UI 檢查它確實是目標葉節點。
替換純文字葉節點，並保留同一節點供還原使用：
```javascript
const demoNode = $0;
if (!(demoNode instanceof Element) || demoNode.childElementCount !== 0) {
throw new Error('請選擇只含目標文字的葉節點元素');
}
const demoOriginalText = demoNode.textContent;
demoNode.textContent = 'Sample 環境';
// 截圖完成後在同一頁面還原：
// demoNode.textContent = demoOriginalText;
```
暫時移除已確認無關的個人導覽項目，保留原位置供還原使用：
```javascript
const demoRemovedNode = $0;
if (!(demoRemovedNode instanceof Element) || !demoRemovedNode.parentNode) {
throw new Error('請選擇需要暫時刪除的具體元素');
}
const demoParent = demoRemovedNode.parentNode;
const demoNextSibling = demoRemovedNode.nextSibling;
demoRemovedNode.remove();
// 截圖完成後，在原父節點仍連接且相鄰節點仍有效時還原：
// demoParent.insertBefore(demoRemovedNode,
// demoNextSibling?.parentNode === demoParent ? demoNextSibling : null);
```
示例變數只在該 DevTools 工作階段有效。不要反覆貼上導致變數重名後盲目重跑；檢查已保存的節點參照，或使用本次唯一的變數名稱。先看修改後的實際頁面，再關閉 DevTools 和截圖。
### 最小內部清單
按既有任務清單擴充即可，不必額外設計複雜格式。每張圖至少能回答：
- 來自哪個頁面／步驟；這是示例還是原始證據。
- 哪些節點被替換或刪除、使用哪些一致示例值；原始敏感值可以不放進清單正文。
- 最終像素尺寸、檔案路徑和 SHA；是否已實際看圖檢查殘留隱私和版式。
- 如何還原、是否實際還原；若頁面已重繪或有使用者尚未儲存的工作，說明不能直接 reload 的原因。
整合至 Word 時，把每張網頁圖與其舊遮蔽物件一一對應。刪除範圍無法確定時，先查圖片關聯／圖形錨點，不能僅按白色填滿就刪除整份文件的所有形狀。
## 離線網頁保存
使用者希望截圖以後還能調整網頁元素，不必再次重演業務操作。網頁截圖任務同時保存對應的離線頁面，留在本次工作目錄；不要只交一張圖片，或把一份 HTML 文字直接宣稱為可用離線頁面。
### 保存什麼
- 優先保存可直接修改的 HTML＋本機資源目錄，或資源內嵌的單檔 HTML。瀏覽器支援的 MHTML／完整網頁保存也可以使用；MHTML 能否重開、修改及再次保存，要以目前瀏覽器實際驗證為準，不能只因副檔名正確就認定可用。
- 擷取**目前已渲染的狀態**，包括所需文字、表單展示值、展開區域和樣式；首次請求的 HTML 往往只有 SPA 外殼，不能代替目前頁面。保留截圖所需 CSS、字型、圖片、圖示和相對路徑，避免以後因資源失效而變樣。
- 在展示修改前保留一份頁面留本；截圖完成時，再保存與最終圖片對應的頁面副本。兩者可放在同一資源包中分別命名，不為每次輕微調整而無限複製整套素材。原始留本若含畫面中的私人識別資訊，只保存在工作目錄，不作為公開附件。
- 不保存 Cookie、存取權杖、密碼、瀏覽器設定檔目錄或工作階段儲存資料來實現離線查看；離線副本也不依賴複製登入狀態。清除匯出內容中不需要的驗證欄位和應用程式狀態，靜態副本不保留提交表單、自動儲存或連回業務服務的活動程式碼。只保留視覺重現需要的內容與資源。
### 用什麼方式保存
先核實工具提供的匯出能力，使用明確支援的 Save page／完整網頁保存／頁面快照，或允許讀取的目前 DOM 與可取得的資源。不得猜測 CDP 方法、偵錯連接埠或未開放的介面，也不因保存頁面而安裝額外擴充功能。使用瀏覽器保存 UI 時，按實際視窗和下載結果確認檔案位置。
唯讀 DOM 工具可以用於讀取可見頁面資料，但不代表已經支援完整離線匯出；不要把唯讀 `outerHTML` 加一份截圖冒充保存成功。若允許的方式只能取得 DOM，盡量補齊可合法取得的樣式和本機資源，再實際重開驗證；無法補齊的部分，如實記為有限保存，不讓截圖重新依賴真實業務服務。
### 驗證離線副本
1. 用工具允許的方法在本機頁面重開，停用該副本的遠端資源依賴，或使用有記錄的網路隔離方式，確認它不依賴線上來源網站或既有快取。不要為此改變整台 PC 的網路設定。
2. 按截圖時的檢視區實際看圖，檢查字型、圖示、行列、輸入框展示值、彈出視窗及捲動位置；在副本中暫時改一個可見文字節點，確認它確實可繼續編輯，並還原該次試改。
3. 記錄保存格式、入口檔案、資源目錄、來源／時間、檢視區、與截圖的對應、實際驗證方式及限制。canvas、跨來源 iframe、影片或互動控制項可能只能保留靜態影像區域；明確指出哪些區域可編輯，哪些只是視覺留本。不要把靜態快照稱為可離線執行的完整應用程式。
4. 截圖日後來自離線副本時，在內部清單記錄其來源和修改；它是來源頁面的離線示例版本，不是當時的即時服務狀態或新的雲端執行證據。原始證據仍保留原日期和含義。
只保存本次截圖所需頁面和資源，不大量擷取全站。若目前工具無法匯出或驗證完整副本，保留既有成果並列明缺失資源／能力，不迴避這項要求，也不宣稱已經完成離線保存。
This article was last edited at