Figma转HTML/CSS转换器开发：HTML结构构建指导请求

1. 建立Figma节点到HTML标签的映射规则 #

先给不同类型的Figma节点定义基础标签映射，再结合语义做调整：

• Frame/Group（容器类）：默认映射为<div>，如果节点名称带有语义化关键词（如header/section/card），则对应<header>/<section>/<article>等标签；
• 文本节点：根据文本样式（字号、字重、样式名称）映射：
  • 样式名包含Heading 1-6或字号大于18px且字重≥600 → 对应<h1>到<h6>；
  • 普通正文文本 → <p>；
  • 列表项文本 → <li>；
• 重复子节点组：如果一个容器下有≥2个结构/样式一致的子节点，判定为列表，外层用<ul>（无序列表）或<ol>（有序列表，若Figma里有编号）；
• 组件（Component）：预定义组件映射，比如按钮组件→<button>，输入框→<input>，自定义卡片组件→<div class="card">。

2. 还原Figma的层级结构为HTML嵌套 #

直接对应Figma的父子节点关系：

• Figma里的父容器（Frame/Group）作为HTML的父元素；
• 子节点直接嵌套在父元素内部；
• 过滤掉Figma里的隐藏节点、切片、辅助线等无实际内容的节点，只保留可见的内容节点。

以你期望的示例HTML为例，对应的Figma节点处理逻辑：

Figma节点结构：
- Frame（名称：container）
  - 文本节点（样式：Heading 3，内容：Template List Activities）
  - Group（名称：content wrapper）
    - 文本节点（样式：Heading 6，内容：Account Name）
    - Group（名称：meta）
      - 文本节点（内容：Activity Type）
      - 文本节点（内容：Yesterday）

转换后HTML结构：
<div class='container'>
   <h3>Template List Activities</h3>
   <div class='content__wrapper'>
      <h6>Account Name</h6>
      <div class='meta'>
         <ul> <!-- 两个同结构文本节点判定为无序列表 -->
            <li>Activity Type</li>
            <li>Yesterday</li>
         </ul>
      </div>
   </div>
</div>

3. 类名生成规则 #

直接复用Figma节点的名称，做简单格式转换：

• 节点名称空格转下划线或短横线，比如content wrapper→content__wrapper（用BEM命名法更规范）；
• 如果节点有自定义样式名称，优先用样式名作为类名，方便后续CSS关联。

4. 优化语义化判断的进阶逻辑 #

可以增加一些智能判断规则提升HTML语义化：

• 如果容器节点包含多个列表项+标题，判定为<section>；
• 如果文本节点是页面的主标题，强制映射为<h1>；
• 如果容器是导航类内容，映射为<nav>。

内容的提问来源于stack exchange，提问作者nimsrules