开学特惠 会员低至4.4折 限时加赠 10000 AI积分 立即前往 arrow
墨刀 · HTML 在线编辑

在线 HTML 编辑器让已有页面,继续进化

在 AI 产物预览中点击“编辑”,或在原型中导入 HTML。
保留动态交互继续修改,按需转为原生元素,衔接标注、切图与分享。

已有网页代码,也能成为下一版设计的起点

墨刀 AI HTML 编辑器展示山野周末旅行网页与 HTML 代码窗口
HTML 可视化编辑AI 局部修改按需转原生元素团队评审与交付

两个入口,接着完成已有页面

先编辑 HTML,
再决定如何交付

墨刀的 HTML 可视化编辑,可以从 AI 生成产物进入,也可以从原型中的 AI 组件进入。导入原型时,页面默认以 AI 组件承载 HTML 和动态交互;需要原生组件编辑时,再转换为可编辑元素。

入口一 · 墨刀 AI

在产物预览区,点击“编辑”

打开 AI 生成的 HTML 页面,在预览区域找到“编辑”选项,进入 HTML 可视化编辑,继续调整页面或选中局部修改。

进入墨刀 AI
入口二 · 墨刀原型

打开“HTML转墨刀”,导入文件或代码

选择 HTML 文件,或粘贴代码后转换。页面默认成为 AI 组件,保留 HTML 动态交互,也能继续进行 HTML 可视化编辑。

查看导入方式
01 / 从原型导入 HTML

文件或代码,
都能接入原型画布

在墨刀原型中打开“HTML转墨刀”,上传文件或粘贴代码。已有网页不用重新搭建,导入后先以 AI 组件保留 HTML 内容与动态交互。

  • 选择 HTML 文件,或直接粘贴 HTML 代码
  • 默认生成 AI 组件,以 HTML 容器承载页面
  • 继续可视化编辑,无需先转换为原生元素
了解 HTML 导入与转原型
墨刀 HTML转墨刀弹窗支持上传 HTML 文件或粘贴代码,导入后以完整 AI 组件保留网页
“HTML转墨刀”提供文件导入和代码粘贴两个入口。
02 / 进入 HTML 可视化编辑

预览里点“编辑”,
把想法直接改到页面上

AI 生成 HTML 后,在产物预览区域点击“编辑”,就能进入可视化编辑。整页调整可以继续对话;局部优化可以先选中区域,再说明修改要求。原型中的 AI 组件同样支持 HTML 可视化编辑。

试试这样描述

将行程卡改为三列,保留标题和图片;按钮统一为深绿色。

  • 从 HTML 预览直接进入编辑
  • 选定局部,针对具体内容与样式继续修改
  • 边预览边调整,保留页面的 HTML 表达
通过 AI 产物预览工具栏中的编辑按钮进入山野周末网页的 HTML 可视化编辑
在生成产物的预览区点击“编辑”,继续修改 HTML 页面。
03 / 按编辑目标,选择页面形态

保留 HTML 交互,
或转为原生可编辑元素

导入原型,不意味着立刻拆成文字和图片。默认的 AI 组件是 HTML 容器,适合继续修改和演示原有动态页面;需要用原型工具逐个调整元素时,再选择转换。

  • AI 组件:保留 HTML 内容及动态交互
  • 可编辑元素:转为墨刀原型原生数据格式
  • 转换后,继续调整元素、布局与原型交互
探索墨刀原型编辑能力
墨刀默认导入完整 AI 组件保留 HTML 动态交互,并可按需转换成可编辑的原生元素
默认保留 AI 组件,需要原生元素编辑时再转换。
默认导入形态

AI 组件 · 保留 HTML

用 HTML 容器承载页面结构、样式与动态交互,支持继续进行 HTML 可视化编辑。

适合:继续改 HTML、演示已有动态页面
按需转换形态

可编辑元素 · 原生原型

转换为墨刀原型的原生数据,分别编辑文字、图片、按钮和布局,并按原型方式完善交互。

适合:精细设计、原型编排与元素交付
04 / 把页面交给团队

能编辑,也能
评审、分享与交付

保留 AI 组件,分享包含 HTML 动态交互的页面;转换为原生可编辑元素后,继续完成原型标注、切图和样式代码交付。让评审方式跟上页面当前的形态。

分享与评论集中查看页面,讨论修改
标注与切图传递尺寸、样式和素材
HTML 代码在 AI 中查看、下载页面代码
组件样式代码辅助研发理解和还原设计
查看 AI 编辑与导出操作
墨刀 HTML 网页预览展示分享下载入口及导出至墨刀对话框
从个人修改到团队协作,让页面和反馈一起流转。

已有页面,新的可能

这些时候,接着编辑更合适

从手上的材料出发,选择最适合当前任务的修改方式。

大模型生成后,再打磨

将生成的 HTML 带入墨刀,继续调整页面层级、视觉和局部细节,把第一版变成可讨论的方案。

适合已有 HTML 初稿

活动页改版,先看效果

围绕主视觉、卡片、报名入口进行修改,快速比较新方案,再把确认后的页面交给研发。

适合营销页与网页改版

产品方案,继续做成交互

需要保留 HTML 动态交互,就使用 AI 组件;需要原生原型编辑,就按需转换元素,再补齐页面关系与操作反馈。

适合产品验证与团队评审

从第一版到下一步

在线编辑 HTML,按这四步开始

  1. 01

    选择入口

    在 AI 产物预览中点“编辑”,或在原型中通过“HTML转墨刀”导入文件或代码。

  2. 02

    修改 HTML

    进入可视化编辑,继续 AI 对话或选中局部修改。原型中默认保留 AI 组件形态。

  3. 03

    按需转换

    继续使用 HTML 交互就保留 AI 组件;需要原生元素编辑,再转换为可编辑元素。

  4. 04

    预览并交付

    检查页面与交互,分享评审;在墨刀 AI 中下载 HTML,或转换为原生元素后完成标注与素材交付。

先拿一个页面试起,把最想改的地方说清楚。开始 HTML 可视化编辑

你可能还想了解

在线 HTML 编辑
常见问题

分清入口与页面形态,选择合适的编辑方式。

从哪里进入 HTML 可视化编辑?
有两个入口。第一,在墨刀 AI 生成产物的预览区域点击“编辑”,进入 HTML 可视化编辑。第二,在墨刀原型中打开“HTML转墨刀”,导入文件或粘贴代码,默认生成 AI 组件;这个 AI 组件也支持 HTML 可视化编辑。
HTML 导入原型后,默认是什么形态?
默认是 AI 组件。它以 HTML 容器承载页面,保留 HTML 内容、样式及动态交互,可以继续可视化编辑。导入本身不等于已经转换为墨刀原生的文字、图片和按钮元素。
AI 组件和“可编辑元素”有什么区别?
AI 组件保留 HTML 表达与动态交互;转换成可编辑元素后,数据形态变为墨刀原型的原生格式,可以按原型方式编辑文字、图片、按钮和布局。希望继续改 HTML 或演示其交互时,保留 AI 组件;希望进行原生元素编辑与交付时,再转换。
转换为原生元素后,HTML 的交互也会完全一样吗?
保留 HTML 动态交互的形态是 AI 组件。转换为原生元素后,应按墨刀原型的元素与交互方式继续编辑,并检查按钮去向、状态变化和关键操作;不能把两种数据形态当成同一回事。
能只改一个按钮或一组卡片吗?
可以。在 HTML 可视化编辑中,选中需要修改的区域再提出要求;如果已经转换为原生可编辑元素,则可以选中对应元素调整文字、位置和样式。先确定当前编辑的是 HTML 还是原型原生元素,再选择操作方式。
编辑后能导出 HTML、分享或交付给研发吗?
墨刀 AI 支持查看和下载 HTML 页面代码,并分享产物。进入原型后,可围绕页面继续演示、评审;转换成原生可编辑元素后,还可衔接标注、切图与样式代码交付。业务接口和运行环境仍由研发结合项目接入。

让你的 HTML,
成为更好的下一版

从已有代码开始,在墨刀继续编辑、演示与交付。