H2D（HTML 转设计）
H2D（HTML to Design）功能将 HTML 代码或网页 URL 一键转换为可编辑的腾讯设计稿，帮助设计师快速还原线上页面或将开发成果转回设计系统。
功能简介
粘贴 HTML 代码 / 网页 URL → AI 解析 DOM 结构和样式 → 生成对应的设计图层
适用场景：
- 将已上线的网页还原为可编辑设计稿
- 将开发实现与设计稿对比还原
- 快速将 HTML 组件转为设计系统组件
操作步骤
粘贴 HTML 代码
- 打开设计文件，点击工具栏「AI」图标
- 在 AI 助手输入框粘贴 HTML 代码片段
- AI 自动识别 HTML 内容并触发转换
- 生成结果插入画布
示例输入：
html
<div class="card" style="background:#fff; border-radius:8px; padding:16px;">
<h2 style="font-size:18px; color:#333;">商品名称</h2>
<p style="color:#999; font-size:14px;">商品描述文字</p>
<button style="background:#0052d9; color:#fff; padding:8px 16px; border-radius:4px;">
立即购买
</button>
</div>通过网页 URL
- 在 AI 助手输入框粘贴完整的网页 URL
- 系统自动抓取页面内容并解析
- 等待转换完成（通常 20~60 秒）
注意：需要目标页面可公开访问，不支持需要登录或有 CORS 限制的页面。
支持的 HTML 元素
H2D 能解析以下常见 HTML 元素：
| HTML 元素 | 转换为设计图层 |
|---|---|
<div> / <section> / <article> | Frame 或 Group |
<p> / <h1> ~ <h6> / <span> | Text 图层 |
<img> | Media 图层 |
<button> / <a> | 带样式的 Frame + Text |
<input> / <textarea> | 输入框组件 |
<ul> / <li> | 列表布局 Frame |
<svg> | 矢量图形图层 |
支持的 CSS 属性：
- 尺寸：
width、height、padding、margin - 颜色：
color、background-color、border-color - 字体：
font-size、font-weight、font-family、line-height - 圆角：
border-radius - 阴影：
box-shadow - 布局：
flex、grid（部分支持）
与 AI 助手集成
H2D 深度集成到 AI 助手对话流程中：
- 在 AI 对话中提及"将这段 HTML 转为设计稿"，自动触发 H2D
- 可连续对话："帮我把这段代码转成设计稿，然后把主色改成红色"
- AI 助手会在转换后提供编辑建议
限制说明
| 限制项 | 说明 |
|---|---|
| 动效 | CSS 动画、Transition 效果不会被转换 |
| 复杂布局 | 深度嵌套的 CSS Grid 布局可能不完全准确 |
| 字体 | 系统未安装的 Web 字体会被替换为默认字体 |
| 图片资源 | 需要公开可访问的图片 URL，否则显示占位图 |
| JavaScript 渲染 | 仅解析静态 HTML，不执行 JS 动态渲染内容 |