像修图一样编辑 HTML，释放你的创造力
HtmlDrag 是一款专为独立开发者、营销人员和设计师打造的可视化 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 提供四种方式将内容导入编辑器，覆盖从零创作到二次加工的所有场景。
HtmlDrag 四大核心入口：一键获取、文件上传、代码粘贴、AI 生成
入口 1：一键获取 (URL Import)
将任意网站转化为您的设计画布
看到一个喜欢的网页布局？想基于竞品页面做改版分析？只需输入网址，HtmlDrag 的服务端渲染引擎会抓取整个页面，将其转化为可编辑的 HTML 项目。这比传统的 "Inspect Element"（审查元素）更进一步，让您拥有持久化的编辑能力。
功能亮点：
- 高保真还原：智能解析 CSS 样式、背景图和布局结构，尽可能还原原始设计。
- 资源本地化处理：自动将外部图片、字体资源转换为本地引用或 Base64，防止链接失效。
- 安全清洗：自动移除原网站的追踪脚本、广告代码和潜在的安全风险。
适用场景：
- 竞品像素级分析：拆解优秀网页的布局实现。
- 旧站重构：丢失源码的老网站，通过 URL 抓取找回并更新内容。
- 灵感收集：建立自己的 UI 组件素材库。
技术说明：支持抓取服务端渲染 (SSR) 和大部分单页应用 (SPA)。对于极为复杂的 Canvas 动画或受严格 CSP 保护的站点，还原度可能会有所差异。
一键获取：输入网址，获得可编辑的网页副本
入口 2：文件上传 (Upload)
复活您的本地 HTML 资产
将硬盘中沉睡的 HTML 文件拖入浏览器，立即获得现代化的编辑体验。无论是十年前的存档项目，还是营销工具导出的邮件模板，HtmlDrag 都能完美解析。
功能亮点：
- 智能结构识别：自动识别 HTML5 文档结构，区分 Head 与 Body 内容。
- 邮件模板友好：特别优化对 Table 布局和内联样式（Inline CSS）的支持，这是邮件营销（EDM）制作的关键痛点。
- 样式隔离沙箱：采用 Shadow DOM 或 Iframe 隔离技术，确保导入文件的样式不会被编辑器 UI 污染。
适用场景：
- 邮件营销 (EDM) 制作：微调从 Mailchimp 或 Stripo 导出的模板。
- 静态报告修改：编辑由 Python/R 生成的数据分析 HTML 报告。
- 遗留系统维护：在不搭建完整开发环境的情况下，快速修改老旧项目的静态页面。
文件上传：拖拽上传本地 HTML 文件
入口 3：代码粘贴 (Raw Code)
连接 AI 代码生成器的最佳桥梁
ChatGPT、Claude 或 v0.dev 生成的代码很棒，但如何微调？直接将代码粘贴到 HtmlDrag，从"代码模式"无缝切换到"设计模式"。
功能亮点：
- 即时渲染管道：粘贴 HTML/CSS 代码，毫秒级呈现可视化结果。
- Tailwind CSS 兼容：如果在代码中引入了 Tailwind CDN，编辑器能正确渲染对应的实用类样式。
- 片段组合：可以多次粘贴不同的代码片段，组合成一个完整的页面。
适用场景：
- AI 辅助开发：复制 AI 生成的代码 -> HtmlDrag 可视化微调 -> 导出成品。
- UI 组件调试：快速预览和修改 Bootstrap 或 Bulma 组件代码。
- 协作评审：将同事的代码片段放入真实环境中预览效果。
代码粘贴：粘贴 HTML 代码，即时渲染预览
入口 4：AI 生成 (AI Generator)
从灵感到线框图，只需一句话
没有现成的代码？输入您的想法，HtmlDrag 的内置 AI 引擎会为您生成一个结构完整的初始页面。这不仅仅是生成图片，而是生成真实的、可编辑的 HTML 代码。
功能亮点：
- 预设尺寸选择：提供多种常用画布尺寸（如封面、Banner、社交媒体等），让生成结果符合预期。
- 风格模板选择：内置多种设计风格，一键切换不同视觉效果，无需从零设计。
- 即时可编辑：生成结果直接进入可视化编辑器，可立即开始拖拽、替换、调整。
使用建议：AI 生成功能非常适合作为页面的"视觉初稿" (Visual Draft)。用它快速搭建页面版式，然后手动填充具体内容和调整细节设计。
AI 生成：输入文案，快速生成静态页面
三、可视化编辑器核心能力
HtmlDrag 的核心是一个强大的所见即所得编辑器，让你在真实的 HTML 环境中直接操作，告别代码编辑的繁琐。
3.1 自由拖拽布局
打破文档流限制，想放哪里放哪里
传统 HTML 元素受文档流约束，调整位置需要修改 CSS。HtmlDrag 支持绝对定位拖拽，让你像操作 PPT 或 PS 一样自由移动任意元素。
- 智能选中：点击任意元素，出现蓝色编辑边框和 8 个缩放手柄
- 自由移动：按住鼠标拖动，元素实时跟随
- 精准缩放：拖动角落手柄调整元素大小，保持比例或自由缩放
- 多选操作：按住
Shift点击多个元素，或框选进行批量移动 - 复制粘贴：
Ctrl+C / Ctrl+V快速复制元素，跨页面复用
自由拖拽布局：选中元素，自由移动和缩放
3.2 双击即可编辑文本
像编辑 Word 文档一样编辑网页文字
双击任意文本区域，即可进入编辑状态。无需查找代码中的文字位置，直接在页面上修改内容。
- 富文本支持：加粗、斜体、颜色、链接等格式一键设置
- 实时预览：编辑内容即时呈现在页面中
- 保留原样式：修改文字不会破坏原有的 CSS 样式设置
3.3 图片替换与调整
一键替换图片，拖动调整大小
点击页面中的图片，可以快速替换为本地图片或输入新的图片 URL。拖动橙色手柄调整图片大小，实时预览效果。
- 本地上传：支持 JPG、PNG、WebP、GIF 等常见格式
- URL 替换：直接粘贴图片链接进行替换
- 比例锁定：可选择保持图片原始比例或自由调整
图片编辑：一键替换图片，拖动调整大小
3.4 样式属性可视化调整
无需写 CSS，点击即可配置
选中任意元素后，可以通过属性面板直观调整其样式：
| 可调属性 | 说明 |
|---|---|
| 边距与填充 | Margin / Padding 四个方向独立调整 |
| 背景颜色 | 颜色选择器或直接输入色值 |
| 文字样式 | 字体大小、行高、颜色、对齐方式 |
| 边框与圆角 | 边框粗细、颜色、样式；圆角半径 |
| 阴影效果 | Box Shadow 可视化配置 |
| 透明度 | Opacity 滑块调整 |
3.5 图层管理与 DOM 树 (DOM Tree)
像 PhotoShop 一样管理 HTML 结构
处理复杂嵌套结构时，直接点击往往不够精准。图层面板提供了完整的 DOM 树视图，让您能穿透复杂的 div 层级，精准选中目标。
- 可视化 DOM 结构：以树形结构展示 HTML 节点，清晰理解父子关系。
- 精准定位：轻松选中被遮挡的元素或极小的图标。
- 非破坏性操作：通过隐藏/锁定功能辅助编辑，而不破坏代码结构。
图层管理：清晰的 DOM 结构视图
3.6 内置 HTML 源码编辑器
需要精细控制时，随时切换到代码视图
虽然 HtmlDrag 主打可视化编辑，但我们也为有代码能力的用户保留了源码编辑入口。点击工具栏的「代码」按钮，即可在弹窗中查看和编辑原始 HTML/CSS。
- 语法高亮：代码着色，清晰易读
- 实时同步：代码修改后，画布立即更新
- 互不冲突：可视化编辑和代码编辑可以无缝切换，互相配合
源码编辑：需要精细控制时，随时切换到代码视图
3.7 元素收藏与复用
将常用区块收藏为「我的收藏」，跨项目复用
编辑过程中发现一个设计精美的区块？可以将其收藏到「我的收藏」列表中。下次创建新项目时，直接调用插入，无需重复制作。
- 一键收藏：选中任意元素或区块，右键选择「收藏」
- 收藏管理：查看、重命名、删除已收藏的元素
- 跨项目使用：新项目中可直接点击插入已收藏的元素
3.8 视口尺寸预设
切换画布尺寸，预览不同屏幕宽度下的效果
HtmlDrag 提供多种视口尺寸预设，包括手机 (375px)、平板 (1024px)、桌面 (1280px ~ 1920px) 等常见屏幕宽度，帮你快速预览页面在不同尺寸下的显示效果。
- 多种预设：内置 7 种常见屏幕尺寸，覆盖移动端到桌面端
- 自适应原始尺寸：支持根据导入内容自动识别原始画布大小
- 预览即编辑：切换尺寸后仍可进行所有编辑操作
四、导出与分享
你的作品属于你。HtmlDrag 提供开放的导出选项，不锁定平台。
4.1 导出标准 HTML (Clean Export)
您的代码，完全自由
这是 HtmlDrag 与 Wix 或 Squarespace 最大的不同：我们不将您绑定在平台上。点击下载，您得到的是纯净的 `.html` 文件，可以部署在任何地方。
- 零运行时依赖：导出的页面不需要加载 HtmlDrag 的任何 JS 库即可运行。
- 语义化保持：编辑过程中我们极力保留原有的 HTML 语义标签（如 header、article、footer），利于 SEO。
- 两种下载模式：
- 下载当前 HTML：包含编辑后的所有修改内容，自动清理编辑器辅助标记。
- 下载原始 HTML：保留最初导入时的原始代码，方便回溯对比。
4.2 在线分享
一个链接，立即分享给任何人
不想部署服务器？可以使用 HtmlDrag 的在线分享功能。生成一个临时访问链接，发给客户、同事或朋友，对方无需登录即可查看你的作品。
- 即时生成：点击「分享」按钮，链接立即可用
- 有效期管理：链接默认有效期为 7 天，可随时更新分享以续期
- 隐私控制：可随时取消分享，链接即刻失效
在线分享：生成链接，一键分享给任何人
4.3 导出图片
将网页保存为图片，用于设计存档或社交分享
需要将页面保存为图片？HtmlDrag 支持将完整页面（包括长页面）导出为 PNG 图片。
- 全页截图：支持长页面完整截取，不会只截取一屏
- 清晰呈现：完整保留页面的文字、图片和样式
- 适用场景：设计稿存档、社交媒体分享、客户提案展示
五、与传统工具的对比
HtmlDrag 与传统在线建站平台的对比
| 对比维度 | 传统 SaaS 建站平台 | HtmlDrag |
|---|---|---|
| 核心定位 | 提供托管服务，让用户在平台上搭建整站 | 提供编辑工具，帮用户修改任何来源的 HTML |
| 代码所有权 | 代码通常被加密或混淆，难以导出独立部署 | 代码完全透明 — 导出即源码，无平台依赖 |
| 外部导入 | 通常不支持导入外部 HTML，只能使用其模板 | 兼容性极强 — 支持 AI 生成、一键获取、文件上传、代码粘贴四种导入 |
| 后期成本 | 必须持续订阅付费，否则网站下线 | 无绑定 — 导出后可放在任意免费/付费服务器 |
HtmlDrag 与本地专业代码编辑器的对比
| 对比维度 | 专业代码编辑器 | HtmlDrag |
|---|---|---|
| 使用门槛 | 需要懂 HTML 和样式语法，配置开发环境 | 零门槛 — 像演示文稿一样拖拽、双击编辑 |
| 反馈速度 | 写代码 → 保存 → 刷新浏览器预览 | 实时反馈，所见即所得，毫秒级响应 |
| 修改效率 | 调整布局需手动计算样式属性 | 直观操作，鼠标拖动即可改变位置和大小 |
| 适用场景 | 大型项目开发、逻辑功能编写 | 快速原型、落地页微调、文案图片修改 |
六、核心优势与价值
为什么选择 HtmlDrag？
- 极致轻量：无需下载安装庞大的开发工具，浏览器打开即用，随时随地修改代码。
- 隐私安全：我们尊重您的数据。可视化编辑操作均在本地浏览器执行，仅 URL 抓取和 AI 生成需要使用云端服务。除非您主动选择云端分享，否则您编辑后的代码不会上传到我们的服务器。
- 零依赖交付：导出的 HTML 文件不依赖 HtmlDrag 的任何库或服务，完全归您所有，可商用，可部署到任意环境。
七、适用场景与人群
独立开发者 / 个人站长
场景：快速构建落地页与最小可行产品
- AI 辅助起步：直接用 AI 生成产品介绍页的初稿，省去寻找模板的时间。
- 快速微调：对于购买的 HTML 模板，直接拖拽修改文案和图片，无需一行行改代码。
- 搜索引擎优化：在可视化界面中直接编辑页面标题、描述和结构，提升搜索引擎收录。
跨境电商 / 市场营销团队
场景：高频次活动页制作与邮件营销
- 竞品像素级参考：一键抓取竞品优秀的落地页，在本地进行结构拆解和文案替换，快速验证市场。
- 营销邮件模板精修：导入邮件营销工具导出的邮件 HTML，微调间距和中文字体，确保国内客户端显示正常。
- 多版本测试素材：快速制作多个版本的落地页首屏，测试不同的文案和图片组合。
界面设计师
场景：高保真原型交付与设计还原
- 设计走查：直接在工程师交付的 HTML 页面上调整间距、字号和颜色，导出修正后的样式给开发，减少沟通成本。
- 无需代码的网页制作：为自己的作品集制作个人网站，无需依赖开发人员，完全自主掌控视觉效果。
教育培训 / 知识付费
场景：课件制作与资料分发
- 交互式课件：制作包含丰富图文、视频的 HTML 课件，直接分发给学生，无需特定阅读器。
- 单页资料站：为特定的课程或资料包快速生成一个介绍页，用于社群传播。