📌 重要備忘 #48

🚀 專案框架快速建構流程

📅 2026-04-10　⏱️ 04:57

torecord-doc inserthtml downloadsite replace-content replaceimage upload-html skill-health-check deploy-rollback memory-compact nav-editor

📋 場景描述

應用情境

學員使用 torecord-doc 將工作中指定的內容收集並製作成 doc，排版後轉成 html，然後使用 inserthtml 插入到目標 html 的指定位置，完善目標 html 的過程。例如：用 downloadsite 下載線上參考網站作為專案基礎框架，再用 inserthtml 補充內容、replace-content 取代文字、 replaceimage 取代圖片，快速建立專案框架。

🔄 完整 9 步工作流

downloadsite — 下載參考網站

下載線上參考網站作為專案基礎框架，保存為本地 HTML 檔案

⚠️ 適用範圍：限靜態 HTML 網站（SSR / 純 HTML/CSS/JS 頁面）。React / Vue SPA 為動態渲染，下載後為空殼，不適用此工具。

✅ 已存在（v1.0）

→

主公決策 — 確定框架目標

選擇下載的網站作為基礎，指定要修改的區塊和位置

提供目標網址，說「以此為框架」

→

torecord-doc — 收集內容並製作成 doc

將工作中指定的內容搜集整理，製作成排好版的 doc 文檔

⚡ 可與 Step 1 並行執行，不依賴框架下載完成後才能開始。

✅ 已存在（v2.0）

提供要記錄的內容（URL / 對話 / Word / 自然語言）

→

mergehtml / inserthtml — doc 轉 html 並插入目標

將 doc 排版後轉成乾淨的 html，使用 inserthtml 插入到目標 html 的指定位置

✅ 已存在

→

replace-content — 取代目標文字

根據主公指示，批量或個別取代目標 html 中的文字內容

✅ 已存在（v1.0）

→

replaceimage — 取代圖片

批量或個別取代目標 html 中的圖片資源

✅ 已存在（v1.0）

→

主公審核 — 最終確認

檢查最終產出的 html 是否符合預期

說「確認 ok」或提出修改

🔁 修改時的迭代流程

→ 需改文字內容 → 回到 Step 5 replace-content
→ 需改圖片資源 → 回到 Step 6 replaceimage
→ 需補內容段落 → 回到 Step 3 torecord-doc → Step 4 mergehtml
→ 需換框架 → 回到 Step 1 downloadsite

→

7.5

本地預覽驗收 — 部署前最後把關

在瀏覽器開啟本地 index.html，確認版面、文字、圖片皆正確後再上線

✅ 由主公在本地瀏覽器確認

說「確認 ok」表示預覽通過 → 進入 Step 8

→

upload-html（已存在） — 部署到 Cloudflare Pages

使用 wrangler CLI 將完成的 HTML 部署到 Cloudflare Pages，發布上線

✅ 已存在

🛠️ 技能矩陣

下載參考網站

downloadsite

輸入：目標網址
輸出：本地 HTML 檔案
包含：HTML + CSS + JS + 圖片

收集內容並轉檔

torecord-doc

輸入：工作內容（URL / 對話 / Word / 自然語言）
輸出：docx 檔案
格式：{月}-{日}-{關鍵詞}.docx

doc 轉 html 並插入

mergehtml

輸入：docx + 目標 HTML
輸出：更新的目標 HTML
模式：insert / replace
⚡ 支援 --dry-run：先預覽插入效果，確認 selector 正確後再實際執行

取代文字內容

replace-content

輸入：目標 selector + 新文字
輸出：更新的 HTML
支援：單一 / 批量取代、--regex 正規表達式

取代圖片資源

replaceimage

輸入：目標 selector + 新圖片
輸出：更新的 HTML
支援：單一 / 批量替換、--cdn CDN 模式

部署到 Cloudflare Pages

upload-html

輸入：本地 HTML 檔案
輸出：線上發布 URL
支援：wrangler CLI + 自定義網域

💡 核心設計原則

🎯 主公只做判斷

選擇框架網址 → 主公一句話
指定插入位置 → 主公一句話
取代內容確認 → 主公一句話
其餘全部由技能執行

💾 修改前自動備份

每次 replace 前自動備份原檔（`原檔名.bak`）
每次 mergehtml 前自動備份目標檔
保留最近 5 個備份版本
主公可隨時說「恢復上個版本」

🔄 增量式完善

先有框架，再補內容
內容從 doc 來，保持結構化
局部替換，不動整體
隨時可回滾修改

📁 檔案流向圖

步驟	輸入	輸出	產出位置
Step 1 downloadsite	目標網址	完整網站檔案	`C:\...\workspace\reference\`
Step 3 torecord-doc	工作內容	`{月}-{日}-{關鍵詞}.docx`	`C:\...\工作備忘\prepare\`
Step 4 mergehtml	docx + 目標 HTML + selector	更新的 HTML	覆蓋目標檔案
Step 5 replace-content	目標 selector + 新文字	更新的 HTML	覆蓋目標檔案
Step 6 replaceimage	目標 selector + 新圖片	更新的 HTML	覆蓋目標檔案
Step 7.5 本地預覽驗收	本地 index.html	主公確認或提出修改	瀏覽器本地開啟
Step 9 upload-html	本地 HTML 檔案	線上發布 URL	Cloudflare Pages

✅ 主要技能清單

Step 1

downloadsite

下載線上網站作為專案框架

Step 3

torecord-doc

收集內容並製作成 doc

Step 4

mergehtml

doc 轉 html 並插入目標

Step 5

replace-content

取代目標 HTML 的文字內容

Step 6

replaceimage

取代目標 HTML 的圖片資源

Step 7.5

本地預覽

部署前在瀏覽器確認版面正確

Step 9

upload-html

部署到 Cloudflare Pages（v3.1 支援批量部署）

輔助技能

skill-health-check

檢查所有技能配置完整性

輔助技能

deploy-rollback

快速回滾到指定 deployment

輔助技能

memory-compact

自動整理超過30天的記憶檔案

輔助技能

nav-editor

視覺化編輯 aiworkforme 導航欄

📊 技能總覽

本次更新（2026-04-10）

原有技能：downloadsite、torecord-doc、mergehtml、replace-content、replaceimage、upload-html
新增技能：skill-health-check、deploy-rollback、memory-compact、nav-editor
技能總數：10 項（原有 6 + 新增 4）