当你已经在浏览器、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、图片比例和文字对比度。把导入结果当成起点,然后整理成真正适合动效和导出的版本。