---
title: "把 HTML 粘贴进画布"
description: "把浏览器、原型工具或生成片段里的结构化 HTML 带入 flare.design，继续作为可编辑画布素材使用。"
locale: "zh"
section: "Import"
updated: "2026-06-22"
source: "https://flare.design/zh/docs/paste-html-into-canvas"
---

# 把 HTML 粘贴进画布

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

> 分类: 导入

[HTML](https://flare.design/zh/docs/paste-html-into-canvas) | [Markdown](https://flare.design/zh/docs/paste-html-into-canvas/index.md)

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