把 HTML 粘贴进画布

把浏览器、原型工具或生成片段里的结构化 HTML 带入 flare.design,继续作为可编辑画布素材使用。

当你已经在浏览器、no-code 工具或生成 artifact 里有一个视觉布局时,可以通过 HTML paste 把它带进画布继续处理。

从来源复制

选中你想带入的渲染内容,然后从浏览器或来源工具里复制。对于生成出来的 HTML 片段,优先复制渲染后的结果,而不是只复制源码。

粘贴到 flare.design

打开一块画布,点击空白区域,然后粘贴。flare.design 会把支持的文字、图片和布局信息转换成可以继续整理的画布素材。

通过 MCP 导入

Agent 也可以调用 flare.design MCP server 的 insert_html。一段 HTML snippet 或完整 HTML document 会转换成画布上的一个可编辑 frame;支持的文字、简单盒子和公开 HTTPS 图片会作为这个 frame 的子图层。

这个 MCP 导入适合结构化、可编辑素材,不是浏览器截图,也不是 Playwright 渲染。如果需要像素级 HTML 渲染,先把页面渲染成图片,再把本地图片作为 asset 上传并放到画布。

准备更干净的 HTML

为了得到更稳定的结果,来源内容尽量保持简单:

  • 使用真实文字,不要把文字烘焙在截图里。
  • 保持布局块清晰,避免过深的 wrapper 嵌套。
  • 如果来源工具支持,保留关键颜色、字号和间距。
  • 避免脚本、表单、iframe 和只适合交互页面的元素。

粘贴后整理

粘贴后检查阅读顺序、字体 fallback、图片比例和文字对比度。把导入结果当成起点,然后整理成真正适合动效和导出的版本。