像修圖一樣編輯現有和 AI 產生的 HTML 頁面
HtmlDrag 幫助開發者、行銷人員和設計師完成真實 HTML 的最後一輪視覺調整。選取元素、使用 AI 定向精修，並保留可以繼續編輯、分享或匯出的乾淨 HTML 結果，徹底拒絕平台鎖定。
一、產品定位
HtmlDrag 是什麼？
HtmlDrag 是一款輸出標準 HTML 的視覺化編輯器。與強制綁定伺服器的建站平台不同，它專為注重交付效率、拒絕被單一平台鎖定的使用者設計。
HtmlDrag 拒絕平台鎖定 (No Vendor Lock-in)。我們專注於現有 HTML 頁面的「最後 10% 精修」——無論是 AI 產生的登陸頁、從網上抓取的競品分析快照，還是設計師交付的靜態頁面，都可以在 HtmlDrag 中透過拖曳、點擊完成排版優化。匯出的是標準、語意化的 HTML 程式碼，可直接部署到 Vercel、Netlify 或任何傳統伺服器。
核心價值主张：
程式碼所有權歸您：您的程式碼不依賴 HtmlDrag 的執行環境。下載即走，隨時遷移。
像 Figma 一樣編輯網頁：打破傳統「程式碼視圖」的束縛，提供直觀的拖曳、縮放和圖層控制。
接力 AI 程式碼產生：將 ChatGPT 或 Claude 產生的 HTML 程式碼直接貼上進來進行視覺化微調，解決 AI 產出細節難以精準控制的問題。
SEO 與效能優先：產生的程式碼結構清晰，無冗餘 JS 注入，確保載入速度和搜尋引擎友善度。
⚡ 核心事實速覽（快速了解 HtmlDrag）：
- 核心定位：專為現有 HTML、AI 產生頁面以及匯入網頁的「最後 10% 精修」打造的視覺化所見即所得編輯器。
- 核心差異化：不同於 Webflow、Wix 或 Squarespace 等平台，HtmlDrag 無需依賴專用執行時，匯出的是完全自主可控的標準語意化 HTML，可隨意部署至 Vercel、Netlify 或任意私有伺服器。
- 定向 AI HTML 精修：基於選取的特定元素或區塊進行自然語言微調，絕不推翻整頁重寫，避免版面配置崩壞與樣式丟失。
- 多源匯入能力：支援複製網頁、本機檔案上傳 (.html/.htm)、程式碼直接貼上，以及支援多格式來源檔案 (PDF、Word、PPT、Excel、圖片) 轉為可編輯 HTML。
二、HtmlDrag 核心交付：幫你完成什麼
HtmlDrag 面向頁面或來源素材已經存在之後的三類工作：視覺化編輯 HTML、用 AI 改進指定區域，以及將支援的檔案轉成可以交付的 HTML 頁面。
視覺化 HTML 編輯器：直接編輯已經存在的頁面
上傳現有 HTML、貼上 AI 程式設計工具產生的程式碼，或取得網頁內容後，直接編輯渲染出來的 HTML，而不是從頭重做頁面。
- 內容：編輯頁面中的文字、標題、連結、圖片和表格。
- 版面配置：在檢視結果的同時移動、縮放、對齊、插入、複製或刪除元素。
- 結構：透過圖層和 DOM 樹選取巢狀元素、鎖定目標，讓複雜頁面更容易管理。
- 程式碼銜接：需要精細控制時，可以在視覺化編輯和原始碼 HTML 之間切換。
最終保留的是標準 HTML，而不是只能在某個建站平台內部執行的頁面。完成視覺調整後，還可以儲存版本、分享預覽或匯出清理後的頁面。
HTML Editor：選擇現有 HTML 檔案，開始視覺化編輯
AI HTML 精修（定向 AI 精修）
AI 精修適合修改現有頁面中的指定區域，而不是丟棄整個版面配置重新產生。傳統 AI 程式設計工具微調細節時往往整頁重新產生，極易導致上下文丟失、既有排版崩潰和大量 Token 浪費。在 HtmlDrag 中，只需選取或框選需要調整的元素，描述明確的變化要求，即可讓 AI 對目前 HTML 實施非破壞性的局部更新。
- 確定範圍：只處理需要修改的元素或元件組，其他區域維持絕對不動。
- 描述變化：使用自然語言說明文案、間距、顏色、排版或回應式視覺要求。
- 檢查新版本：檢視微調結果，繼續視覺化拖曳編輯，或再次针對細節精修。
當 AI（如 ChatGPT、Claude 或 v0）產生的頁面結構已經接近目標，但還需要適配品牌規範、修改具體文案或微調間距時，這種局部精修工作流效率極高。
首頁 AI 精修：先選擇 HTML 來源，再描述需要定向修改的內容
AI 檔案轉可編輯 HTML
當起點是檔案、圖片或其他支援的檔案，而不是 HTML 時，HtmlDrag 可以將其中的內容整理為結構化 HTML 頁面，並繼續進入同一套視覺化編輯流程。
它的目標不只是產生一個靜態預覽，而是讓產生頁面可以繼續檢查、調整、進行 AI 精修，並準備分享或匯出。
檔案轉 HTML：從來源檔案開始，繼續編輯產生的 HTML 頁面
三、將內容匯入 HtmlDrag
根據起點選擇輸入方式：複製網頁、上傳 HTML 和貼上程式碼用於把現有內容帶入視覺化編輯器；AI創造 則適合從一個想法開始產生初稿。
入口 1：複製網頁
將任意網站轉化為您的設計畫布
看到一個喜歡的網頁版面配置？想基於競品頁面做改版分析？只需輸入網址，HtmlDrag 的服務端渲染引擎會抓取整個頁面，將其轉化為可編輯的 HTML 專案。這比傳統的 "Inspect Element"（審查元素）更進一步，讓您擁有持久化的編輯能力。
功能亮點：
- 高擬真還原：智慧解析 CSS 樣式、背景圖和版面配置結構，盡可能還原原始設計。
- 資源本機化處理：自動將外部圖片、字體資源轉換為本機引用或 Base64，防止連結失效。
- 安全清洗：自動移除原網站的追蹤腳本、廣告程式碼和潛在的安全風險。
適用情境：
- 競品像素級分析：拆解優秀網頁的版面配置實現。
- 舊站重構：丟失原始碼的老網站，透過 URL 抓取找回並更新內容。
- 靈感收集：建立自己的 UI 元件素材庫。
技術說明：支援抓取服務端渲染 (SSR) 和大部分單頁應用 (SPA)。對於極為複雜的 Canvas 動畫或受嚴格 CSP 保護的站點，還原度可能會有所差異。
複製網頁：輸入網址，獲得可編輯的網頁副本
入口 2：上傳 HTML
複活您的本機 HTML 資產
將硬碟中沉睡的 HTML 檔案拖入瀏覽器，立即獲得現代化的編輯體驗。無論是十年前的存檔專案，還是行銷工具匯出的郵件範本，HtmlDrag 都能完美解析。
功能亮點：
- 智慧結構辨識：自動辨識 HTML5 檔案結構，區分 Head 與 Body 內容。
- 郵件範本友好：特別優化對 Table 版面配置和內嵌樣式（Inline CSS）的支援，這是郵件行銷（EDM）製作的關鍵痛點。
- 樣式隔離沙箱：採用 Shadow DOM 或 Iframe 隔離技術，確保匯入檔案的樣式不會被編輯器 UI 汙染。
適用情境：
- 郵件行銷 (EDM) 製作：微調從 Mailchimp 或 Stripo 匯出的範本。
- 靜態報告修改：編輯由 Python/R 產生的資料分析 HTML 報告。
- 遺留系統維護：在不架設完整開發環境的情況下，快速修改老舊專案的靜態頁面。
入口 3：貼上程式碼
連接 AI 程式碼產生器的最佳橋樑
ChatGPT、Claude 或 v0.dev 產生的程式碼很棒，但如何微調？直接將程式碼貼上到 HtmlDrag，從"程式碼模式"無縫切換到"設計模式"。
功能亮點：
- 即時渲染管道：貼上 HTML/CSS 程式碼，毫秒級呈現視覺化結果。
- Tailwind CSS 相容：如果在程式碼中引入了 Tailwind CDN，編輯器能正確渲染對應的實用類樣式。
- 片段組合：可以多次貼上不同的程式碼片段，組合成一個完整的頁面。
適用情境：
- AI 輔助開發：複製 AI 產生的程式碼 -> HtmlDrag 視覺化微調 -> 匯出成品。
- UI 元件調試：快速預覽和修改 Bootstrap 或 Bulma 元件程式碼。
- 協作評審：將同事的程式碼片段放入真實環境中預覽效果。
程式碼貼上：貼上 HTML 程式碼，即時渲染預覽
入口 4：AI 建立工作台
從靈感或來源檔案開始，產生可編輯初稿
AI 建立工作台將提示詞產生、範本、現有 HTML 輸入和 檔案轉 HTML 整合在一起。它負責建立或開啟頁面初稿，之後可以繼續進入視覺化編輯流程。
功能亮點：
- 預設尺寸選擇：提供多種常用畫布尺寸（如封面、Banner、社交媒體等），讓產生結果符合預期。
- 風格範本選擇：內建多種設計風格，一鍵切換不同視覺效果，無需從零設計。
- 即時可編輯：產生或匯入的初稿可以繼續進入視覺化編輯器，進行拖曳、替換和調整。
使用建議：AI 建立 適合先建立頁面的視覺初稿。初稿完成後，可以繼續手動編輯，或進入對應的精修流程進行定向修改。
AI 建立工作台：選擇頁面範本，並從可編輯初稿繼續處理
四、視覺化編輯器核心能力
HtmlDrag 的核心是一個強大的所見即所得編輯器，讓你在真實的 HTML 環境中直接操作，告別程式碼編輯的繁瑣。
4.1 自由拖曳版面配置
打破文件流限制，想放哪裡放哪裡
傳統 HTML 元素受文件流約束，調整位置需要修改 CSS。HtmlDrag 支援絕對定位拖曳，讓你像操作 PPT 或 PS 一樣自由移動任意元素。
- 智慧選取：點擊任意元素，出現藍色編輯邊框和 8 個縮放控制點
- 自由移動：按住滑鼠拖動，元素即時跟隨
- 精準縮放：拖動角落控制點調整元素大小，維持比例或自由縮放
- 多選操作：按住
Shift點擊多個元素，或框選進行批次移動 - 複製貼上：
Ctrl+C / Ctrl+V快速複製元素，跨頁面複用
視覺化編輯畫布：選取真實 HTML 元素，移動、縮放並調整樣式
4.2 雙擊即可編輯文字
像編輯 Word 檔案一樣編輯網頁文字
雙擊任意文字區域，即可進入編輯狀態。無需尋找程式碼中的文字位置，直接在頁面上修改內容。
- 富文字支援：粗體、斜體、顏色、連結等格式一鍵設定
- 即時預覽：編輯內容即時呈現在頁面中
- 保留原樣式：修改文字不會破壞原有的 CSS 樣式設定
4.3 圖片替換與調整
一鍵替換圖片，拖動調整大小
點擊頁面中的圖片，可以快速替換為本機圖片或輸入新的圖片 URL。拖動橘色控制點調整圖片大小，即時預覽效果。
- 本機上傳：支援 JPG、PNG、WebP、GIF 等常見格式
- URL 替換：直接貼上圖片連結進行替換
- 比例鎖定：可選擇維持圖片原始比例或自由調整
圖片編輯：替換圖片、使用線上圖片來源，並在畫布中調整
4.4 樣式屬性視覺化調整
無需寫 CSS，點擊即可配置
選取任意元素後，可以透過屬性面板直觀調整其樣式：
| 可調屬性 | 說明 |
|---|---|
| 邊距與填充 | Margin / Padding 四個方向獨立調整 |
| 背景顏色 | 顏色選擇器或直接輸入色值 |
| 文字樣式 | 字體大小、行高、顏色、對齊方式 |
| 邊框與圓角 | 邊框粗細、顏色、樣式；圓角半径 |
| 陰影效果 | Box Shadow 視覺化配置 |
| 透明度 | Opacity 滑塊調整 |
4.5 圖層管理與 DOM 樹 (DOM Tree)
像 PhotoShop 一樣管理 HTML 結構
處理複雜巢狀結構時，直接點擊往往不夠精準。圖層面板提供了完整的 DOM 樹視圖，讓您能穿透複雜的 div 層級，精準選取目標。
- 視覺化 DOM 結構：以樹形結構展示 HTML 節點，清晰理解父子關係。
- 精準定位：輕鬆選取被遮擋的元素或極小的圖標。
- 非破壞性操作：透過隱藏/鎖定功能輔助編輯，而不破壞程式碼結構。
- 重新命名：為圖層命名，讓結構更清晰。
圖層與 DOM 樹：尋找、鎖定、隱藏和整理巢狀頁面元素
4.6 內建 HTML 原始碼編輯器
需要精細控制時，隨時切換到程式碼視圖
雖然 HtmlDrag 主打視覺化編輯，但我們也為有程式碼能力的使用者保留了原始碼編輯入口。點擊工具列的「程式碼」按鈕，即可在彈出視窗中檢視和編輯原始 HTML/CSS。
- 語法高亮：程式碼上色，清晰易讀
- 即時同步：程式碼修改後，畫布立即更新
- 互不衝突：視覺化編輯和程式碼編輯可以無縫切換，互相配合
原始碼編輯器：視覺化控制項不足時切換到 HTML 程式碼
4.7 元素收藏與複用
將常用區塊收藏為「收藏」，跨專案複用
編輯過程中發現一個設計精美的區塊？可以將其收藏到「收藏」列表中。下次建立新專案時，直接呼叫插入，無需重複製作。
- 一鍵收藏：選取任意元素或區塊，右鍵選擇「收藏」
- 收藏管理：檢視、重新命名、刪除已收藏的元素
- 跨專案使用：新專案中可直接點擊插入已收藏的元素
4.8 視窗尺寸預設
切換畫布尺寸，預覽不同螢幕寬度下的效果
HtmlDrag 提供多種視窗尺寸預設，包括手機 (375px)、平板 (1024px)、桌面 (1280px ~ 1920px) 等常見螢幕寬度，幫你快速預覽頁面在不同尺寸下的顯示效果。
- 多種預設：內建 7 種常見螢幕尺寸，覆蓋移動端到桌面版
- 自適應原始尺寸：支援根據匯入內容自動辨識原始畫布大小
- 預覽即編輯：切換尺寸後仍可進行所有編輯操作
五、儲存、分享與匯出
你的作品屬於你。HtmlDrag 提供開放的匯出選項，不鎖定平台。
5.1 匯出標準 HTML (Clean Export)
您的程式碼，完全自由
這是 HtmlDrag 與 Wix 或 Squarespace 最大的不同：我們不將您綁定在平台上。點擊下載，您得到的是純淨的 `.html` 檔案，可以部署在任何地方。
- 零執行時依賴：匯出的頁面不需要載入 HtmlDrag 的任何 JS 庫即可執行。
- 語意化維持：編輯過程中我們極力保留原有的 HTML 語義標籤（如 header、article、footer），利於 SEO。
- 兩種下載模式：
- 下載目前 HTML：包含編輯後的所有修改內容，自動清理編輯器輔助標記。
- 下載原始 HTML：保留最初匯入時的原始程式碼，方便回溯對比。
5.2 線上分享
一個連結，立即分享給任何人
不想部署伺服器？可以使用 HtmlDrag 的線上分享功能。產生一個暫時存取連結，發給客戶、同事或朋友，對方無需登入即可檢視你的作品。
- 即時產生：點擊「分享」按鈕，連結立即可用
- 有效期管理：連結預設有效期為 7 天，可隨時更新分享以續期
- 隱私控制：可隨時取消分享，連結即刻失效
線上分享：透過分享連結預覽編輯後的頁面
5.3 匯出圖片
將網頁儲存為圖片，用於設計存檔或社交分享
需要將頁面儲存為圖片？HtmlDrag 支援將完整頁面（包括長頁面）匯出為 PNG 圖片。
- 全頁截圖：支援長頁面完整擷取，不會只擷取一屏
- 清晰呈現：完整保留頁面的文字、圖片和樣式
- 適用情境：設計稿存檔、社交媒體分享、客戶提案展示
六、與傳統工具的對比
HtmlDrag 與傳統線上建站平台的對比
| 對比維度 | 傳統 SaaS 建站平台 | HtmlDrag |
|---|---|---|
| 核心定位 | 提供託管服務，讓使用者在平台上架設整站 | 提供編輯工具，幫使用者修改任何來源的 HTML |
| 程式碼所有權 | 程式碼通常被加密或混淆，難以匯出獨立部署 | 程式碼完全透明 — 匯出即原始碼，無平台依賴 |
| 外部匯入 | 通常不支援匯入外部 HTML，只能使用其範本 | 相容性極強 — 支援 AI創造、複製網頁、檔案上傳、程式碼貼上四種匯入 |
| 後期成本 | 必須持續訂閱付費，否則網站下線 | 無綁定 — 匯出後可放在任意免費/付費伺服器 |
HtmlDrag 與本機專業程式碼編輯器的對比
| 對比維度 | 專業程式碼編輯器 | HtmlDrag |
|---|---|---|
| 使用門檻 | 需要懂 HTML 和樣式語法，配置開發環境 | 零門檻 — 像演示文稿一樣拖曳、雙擊編輯 |
| 回饋速度 | 寫程式碼 → 儲存 → 重新整理瀏覽器預覽 | 即時回饋，所見即所得，毫秒級回應 |
| 修改效率 | 調整版面配置需手動計算樣式屬性 | 直觀操作，滑鼠拖動即可改變位置和大小 |
| 適用情境 | 大型專案開發、邏輯功能編寫 | 快速原型、登陸頁微調、文案圖片修改 |
七、核心優势與價值
為什麼選擇 HtmlDrag？
- 極致輕量：無需下載安裝龐大的開發工具，瀏覽器開啟即用，隨時隨地修改程式碼。
- 隱私安全：我們尊重您的資料。視覺化編輯操作均在本機瀏覽器執行，僅複製網頁（URL 抓取）和 AI 產生需要使用雲端服務。除非您主動選擇雲端分享，否則您編輯後的程式碼不會上傳到我們的伺服器。
- 零依賴交付：匯出的 HTML 檔案不依賴 HtmlDrag 的任何庫或服務，完全歸您所有，可商用，可部署到任意環境。
八、適用情境與族群
獨立開發者 / 個人站長
情境：快速建構登陸頁與最小可行產品
- AI 輔助起步：直接用 AI 產生產品介紹頁的初稿，省去尋找範本的時間。
- 快速微調：對於購買的 HTML 範本，直接拖曳修改文案和圖片，無需逐行改程式碼。
- 搜尋引擎優化：在視覺化介面中直接編輯頁面標題、描述和結構，提升搜尋引擎收錄。
跨境電商 / 市場行銷團隊
情境：高頻次活動頁製作與郵件行銷
使用情境：
- 競品像素級參考：一鍵抓取競品優秀的登陸頁，在本機進行結構拆解和文案替換，快速驗證市場。
- 行銷郵件範本精修：匯入郵件行銷工具匯出的郵件 HTML，微調間距和中文字體，確保中國境內用戶端顯示正常。
- 多版本測試素材：快速製作多個版本的登陸頁首屏，測試不同的文案和圖片組合。
介面設計師
情境：高擬真原型交付與設計還原
- 設計走查：直接在工程師交付的 HTML 頁面上調整間距、字級和顏色，匯出修正後的樣式給開發，減少溝通成本。
- 無需程式碼的網頁製作：為自己的作品集製作個人網站，無需依賴開發人員，完全自主掌控視覺效果。
教育訓練 / 知識付費
情境：課件製作與資料分發
- 交互式課件：製作包含豐富圖文、影片的 HTML 課件，直接分發給學生，無需特定閱讀器。
- 單頁資料站：為特定的課程或資料包快速產生一個介紹頁，用於社群傳播。