H2D (HTML to Design)

H2D (HTML to Design) converts HTML code or a webpage URL into an editable Tencent Design file in one step, helping designers restore live pages or bring development output back into the design system.

Overview

Paste HTML code / webpage URL → AI parses DOM structure and styles → Generates corresponding design layers

Use cases:

• Restore a live webpage as an editable design file
• Compare development output against design specs
• Convert HTML components into design system components

---

Steps

Paste HTML Code

1. Open a design file and click the 「AI」 icon in the toolbar
2. Paste an HTML code snippet into the AI assistant input
3. AI automatically detects the HTML and triggers the conversion
4. The result is inserted into the canvas

Example input:

<div class="card" style="background:#fff; border-radius:8px; padding:16px;">
  <h2 style="font-size:18px; color:#333;">Product Name</h2>
  <p style="color:#999; font-size:14px;">Product description text</p>
  <button style="background:#0052d9; color:#fff; padding:8px 16px; border-radius:4px;">
    Buy Now
  </button>
</div>

Via Webpage URL

1. Paste a full webpage URL into the AI assistant input
2. The system automatically fetches and parses the page content
3. Wait for conversion to complete (typically 20–60 seconds)

Note: The target page must be publicly accessible. Pages requiring login or with CORS restrictions are not supported.

---

Supported HTML Elements

H2D can parse the following common HTML elements:

HTML element	Converted to
<div> / <section> / <article>	Frame or Group
<p> / <h1>–<h6> / <span>	Text layer
<img>	Media layer
<button> / <a>	Styled Frame + Text
<input> / <textarea>	Input field component
<ul> / <li>	List layout Frame
<svg>	Vector graphic layer

Supported CSS properties:

• Dimensions: width, height, padding, margin
• Colors: color, background-color, border-color
• Typography: font-size, font-weight, font-family, line-height
• Corners: border-radius
• Shadows: box-shadow
• Layout: flex, grid (partial support)

---

AI Assistant Integration

H2D is deeply integrated into the AI assistant conversation flow:

• Mention "convert this HTML to a design" in the AI chat to trigger H2D automatically
• Chain follow-up requests: "Convert this code to a design, then change the primary color to red"
• The AI assistant provides editing suggestions after conversion

---

Limitations

Limitation	Details
Animations	CSS animations and transitions are not converted
Complex layouts	Deeply nested CSS Grid layouts may not be fully accurate
Fonts	Web fonts not installed locally are replaced with the default font
Image assets	Requires publicly accessible image URLs; otherwise shows a placeholder
JavaScript rendering	Only static HTML is parsed — JS-rendered dynamic content is not included