Chrome 擴充功能・Manual Draft 手冊筆記

別再把時間,
花在重複貼圖與排版

操作一次→確認內容→匯出交付

直接在 Chrome 操作你的網頁系統,小助手依你的動作擷取畫面、
整理成有圖有步驟的使用手冊。

  • 4種擷取觸發
  • 3種交付格式
  • 0帳號登入、AI 金鑰
示範系統 工作台 訂單 報表

工作台 / 客戶管理 / 新增客戶

新增客戶

產業別資訊服務 狀態啟用

客戶資料新增作業

操作手冊 | 客戶管理 | 0 個步驟

    點左側畫面上的按鈕或欄位,
    擷取第一個步驟。

    示意互動:點畫面上的元素即擷取一步(實際預設為雙擊右鍵)。

    01 / Why

    程式寫好了,
    手冊卻還沒開始

    對網站後台與客戶專案來說,程式完成不代表使用者能獨立操作。切換看看,同一份手冊用傳統作法和用Manual Draft 手冊筆記的差別。

    1. 製作分散

      截圖、貼圖、編號、排版分散在瀏覽器與文件工具之間,還得回想哪張圖對應哪一步。

      在操作當下擷取畫面,圖片、點擊標記與來源網址直接排進同一份草稿。

    2. 反覆重走流程

      素材沒有當場整理,只好重新登入、還原測試資料,再走一次流程補截圖。

      驗證流程時就順手擷取,重要畫面隨操作一路累積。

    3. 資訊不足

      開發者太熟系統,容易省略前置條件、權限與成功判斷,使用者一再詢問。

      每一步都有畫面、紅框與說明欄,補上前置條件、規則與完成結果。

    4. 機敏資訊暴露

      截圖裡有客戶資料、帳號或金額,交付前還要另開影像工具處理。

      在編輯器直接矩形塗黑,交付前一併檢查說明文字與網址。

    5. 更新困難

      只留下最後的 PDF,畫面一改版就缺少可編輯素材,更新等於重做。

      另存 .sop.json 草稿,日後匯入即可修訂文字與順序,再重新匯出。

    6. 交接靠口頭

      操作經驗留在原開發者身上,人員異動時,客戶與接手同仁只能反覆詢問。

      把個人操作經驗整理成可保存、可照做的文件,交接有依據。

    02 / How it works

    操作一次,
    就有圖有步驟

    素材蒐集移到實際操作的當下。工具產生可整理的圖文草稿,你保留最重要的人工確認:內容正確、資料遮蔽、交付品質。

    1. 01 操作並擷取可視畫面・手動框選

      在重要畫面觸發擷取,記下截圖、點擊位置與元素文字。

    2. 02 調整與遮蔽檢查文字、圖片與順序

      改寫說明、調整排序,把機敏資料塗黑。

    3. 03 匯出手冊HTML・PDF・JSON 草稿

      閱讀檔交給客戶,可編輯備份自己留著。

    左側為示範系統的新增客戶畫面,在儲存按鈕上擷取步驟;右側為產生的客戶資料新增作業 HTML 手冊,含步驟編號、畫面與說明
    操作與輸出示意|示範資料,非實際客戶畫面。

    03 / Features

    不只是截圖,
    是整份手冊的製作流程

    每一張卡片都可以動手試:換擷取按鍵、拖出框選範圍、切換分頁、塗黑資料、調整步驟。

    01

    四種擷取觸發

    單擊或雙擊、左鍵或右鍵,配合你的使用習慣。擷取用的按鍵會被攔截,另一個按鍵照常操作網站。

    就緒

    在這裡雙擊右鍵試擷取

    已記錄 0 步

    右鍵用來擷取,左鍵照常點按鈕、換頁。

    02

    手動框選範圍

    只要畫面中的一小塊?拖出虛線框,手冊只保存框內圖片,減少不相關畫面的干擾。

    按住拖曳,框出要保存的範圍

    按 Esc 可取消;小於約 8 像素會要求重新拖曳。

    03

    換頁接續同一份手冊

    同一個 Chrome 視窗裡換網址、切分頁,新的步驟仍接在原手冊。滑鼠旁的提示告訴你何時可以擷取。

    crm.example.com/customers就緒

      切到任一分頁,再擷取這一頁。

      04

      機敏資料遮蔽

      交付前在截圖上拖曳矩形,把姓名、電話、帳號永久塗黑。可重複處理多個位置。

      按「遮蔽機敏資料」開始,滑鼠會變成十字。

      遮蔽無法復原,也沒有自動個資辨識;文字與來源網址需另外檢查。

      05

      步驟整理與編輯

      修訂手冊名稱與作業目的,把自動產生的「點選」文字改成讀者能照做的指令。用 ↑ ↓ 調整順序、刪除多餘步驟,或補一個純文字步驟。

      手冊名稱作業目的與注意事項操作說明補充說明

      已儲存於本機

        共 3 個步驟。

        04 / Export

        閱讀檔交出去,
        編輯檔留下來

        HTML 與 PDF 給讀者看;要延續修改,另存 .sop.json 草稿。分開保存,下次更新不用重做。

        客戶資料新增作業

        操作手冊 | 客戶管理 | 2 個步驟

        1填寫客戶基本資料

        依序填寫客戶名稱、代碼與產業別,確認資料正確。

        2儲存並完成新增

        確認內容後點選「儲存」,完成客戶建檔。

        儲存
        用途
        瀏覽器閱讀、離線分享
        可匯入繼續編輯
        否

        05 / Time

        你每天花多少時間
        整理使用手冊?

        效益來自減少重複處理:不必逐張貼圖、手動編號、再對照圖片來源。拉動看看你的情境,每月能回收多少時間。

        每日時間差
        35分
        傳統每月
        20小時
        使用工具每月
        8.3小時
        每月可回收時間
        11.7小時

        (60 − 25) 分 × 20 天 ÷ 60 = 11.7 小時情境試算:25 分鐘為試行目標假設,非實測結果。套用到團隊前,請先確認每位成員工作量相同。

        • 總製作時間從準備到交付的分鐘數,含編輯、遮蔽與確認,不只比按下擷取的那一刻。
        • 擷取成功情況有效圖片數與重試次數,確認跨頁與框選符合工作需求。
        • 內容可用性請沒操作過的同仁照文件執行,不需要製作者口頭補充。
        • 資料處理逐張檢查圖片、文字與網址,交付資料已妥善遮蔽。

        06 / Privacy & scope

        資料留在你的瀏覽器,
        邊界也講清楚

        目前版本不需要登入產品帳號或提供 AI API 金鑰,程式沒有設置接收手冊資料的服務端。

        • 草稿保存在本機存放於 Chrome 擴充功能的本機儲存;HTML、PDF、JSON 由你自行下載管理。
        • 不主動記錄欄位輸入值但截圖仍可能含個資或商業資訊,交付前請逐張檢查並遮蔽。
        • 重要手冊另存外部備份移除擴充功能、清除資料或更換 Chrome 設定檔,都可能讓本機草稿無法取回。

        本機保存不等同於資料已加密或完成企業資安認證;工具需要網站存取權限以支援跨站截圖,企業使用前請先評估允許的網站。

        這個畫面能錄嗎?選一個情境:

        可以錄製

        同一個 Chrome 視窗中的一般網頁,是Manual Draft 手冊筆記主要支援的範圍。

        步驟上限
        100步/份
        匯入備份
        100MB
        本機草稿
        1份

        07 / Use cases

        誰需要Manual Draft 手冊筆記

        • 開發與接案人員

          網站後台與客戶專案交付。驗證新增、查詢、送審、設定流程的同時取得畫面素材,交付前補上角色權限與操作前提,成為客戶的操作指南。

        • 系統導入與客服人員

          同一流程依角色拆成多份手冊,例如申請人操作與管理員設定分開;常見問題整理成短流程,客服用具體畫面回覆,減少理解落差。

        • 企業內部團隊

          教育訓練前整理關鍵畫面,讓學員依序練習;人員交接時,把個人操作經驗留成可保存、可照做的文件。

        08 / Pilot

        從一個真實流程
        開始試行

        先挑一個 5 至 10 步、沒有高敏感資料的代表流程,傳統版與工具版經過相同的校稿與遮蔽,再比較總工時。

        1. 挑選流程

          確認使用角色、成功條件與交付對象,優先使用測試資料。

        2. 安裝與權限

          載入擴充功能、釘選圖示,依組織政策允許要錄製的網站。

        3. 錄製擷取

          建議雙擊右鍵+可視畫面,在重要畫面觸發擷取。

        4. 編輯與遮蔽

          改寫說明、補前置條件與結果,塗黑機敏資料。

        5. 匯出與驗收

          匯出 HTML 或 PDF,請沒操作過的同仁照文件執行。

        6. 比較與擴大

          總工時下降、照做成功率不降,再擴大流程數量。

        擷取觸發
        4種
        步驟上限
        100步/份
        匯入備份
        100MB
        目前版本
        0.3.1MVP

        09 / FAQ

        常見問題

        想看完整的功能與限制,歡迎索取《Manual Draft 手冊筆記服務白皮書》與《使用者操作手冊》。

        Manual Draft 手冊筆記是什麼?

        Manual Draft 手冊筆記是一個 Chrome 擴充功能。你直接在 Chrome 操作自己的網頁系統,在重要畫面觸發擷取,小助手會把截圖、點擊位置與元素文字整理成步驟草稿;再補上說明、遮蔽機敏資料,就能匯出 HTML 或列印成 PDF 交付。

        需要登入帳號或 AI 金鑰嗎?資料會上傳嗎?

        目前版本不需要登入產品帳號,也不需要 AI API 金鑰,程式沒有設置接收手冊資料的服務端。草稿保存在 Chrome 擴充功能的本機儲存,HTML、PDF 與 JSON 由你自行下載管理。這不等同於資料已加密或完成企業資安認證,企業使用前請依內部規定評估。

        錄製時還能正常操作網站嗎?

        可以。選定的擷取按鍵會被攔截,另一個按鍵照常使用。預設是雙擊右鍵擷取,左鍵就能正常點按鈕、換頁;若選左鍵擷取,網站按鈕不會照原本左鍵動作執行,可改用鍵盤導覽或停止錄製後再操作。

        可以只截取畫面的一部分嗎?

        可以。開始錄製前把截圖範圍選為「手動框選」,觸發擷取後用左鍵拖出虛線框,手冊只保存框內圖片;按 Esc 取消,範圍小於約 8 像素會要求重拉。手動框選限當前可視範圍,不支援整頁長截圖。

        哪些頁面不能錄製?

        錄製限同一個 Chrome 視窗中的一般網頁。Chrome 內部頁面(chrome://)、線上應用程式商店等受保護頁面、iframe 內部操作、桌面程式,以及跨不同 Chrome 視窗跟錄,目前都不支援。

        截圖裡有客戶資料怎麼辦?

        在編輯器按「遮蔽機敏資料」,拖曳矩形即可永久塗黑,可處理多個位置。遮蔽無法復原,也沒有自動個資辨識;手冊名稱、說明文字與來源網址需另外檢查。未遮蔽的原始備份不應隨交付檔散發。

        可以匯出 Word 嗎?

        目前沒有原生 Word 匯出。可匯出圖片內嵌的 HTML 手冊、透過 Chrome 列印另存 PDF,並備份 .sop.json 草稿供日後匯入修改。

        手冊之後要改,怎麼做?

        每次交付時另存一份 .sop.json 備份,之後按「匯入草稿」就能繼續修改文字、順序並重新匯出。HTML 與 PDF 是閱讀檔,不能還原成草稿。若畫面已改版,目前需重新擷取,不會自動同步更新。

        Manual Draft 手冊筆記可以幫我省多少時間?

        取決於流程長度、內容品質與修改次數。白皮書以情境試算:傳統每天 60 分鐘、使用工具的試行目標 25 分鐘、每月 20 天,每月約可回收 11.7 小時;25 分鐘是評估假設,並非實測結果。建議用一個真實流程,以完成一份可交付文件的總時間比較。

        Chrome Extension

        把時間留給交付,
        把手冊交給Manual Draft 手冊筆記

        告訴我們你要交付的系統與流程,我們協助你規劃第一份手冊的試行流程。

        或直接來信 jdyu.taiwan@gmail.com