HtmlToUIToolKit：让 HTML 秒变 Unity UI Toolkit 界面

一个轻量级 Unity 编辑器包，将 HTML/CSS 布局一键转换为 UXML/USS，支持 AI 直接生成和浏览器可视化转换两种工作流。

---

引言

Unity UI Toolkit 是 Unity 官方力推的现代 UI 框架，但直接用 UXML/USS 手写界面布局，学习曲线陡峭，调试效率低。尤其是对设计师和前端开发者来说，从熟悉的 HTML/CSS 切换到 UXML/USS，就像换了一门语言。

HtmlToUIToolKit 正是为了解决这个问题而生。它提供了一个浏览器端的 HTML → UXML/USS 可视化转换工具，并内置 AI Prompt，让你可以直接用自然语言描述 UI，让 AI 生成标准 UXML/USS 代码。无论你是游戏开发者、Unity 插件作者还是编辑器工具开发者，都能大幅提升 UI 开发效率。

---

两种工作流，灵活选择

工作流 A：AI 直接生成 UXML/USS（推荐）

最高效的方式——无需浏览器，无需 HTML，直接用自然语言描述想要的界面。

1. 将内置的SKILL.md作为 AI 系统提示词
2. 用自然语言描述你想要的 UI 布局
3. AI 直接返回符合 Unity 6 标准的 UXML/USS 代码
4. 保存为 .uxml 和 .uss 文件，直接在 Unity 中使用

AI 客户端 + SKILL Prompt → 生成 UXML/USS → 保存文件 → Unity 中使用

工作流 B：HTML 浏览器转换

适合已有 HTML/CSS 设计稿的场景，所见即所得地转换。

1. 打开 在线工具 或本地 HTML 文件
2. 粘贴 HTML 代码，左侧实时预览效果
3. 点击"执行转换"，右侧显示 UXML/USS 输出
4. 一键下载或复制，导入 Unity 即可使用

HTML/CSS 源码 → 浏览器预览 → 转换 → 下载 UXML/USS → Unity 中使用

---

核心功能

智能 HTML 标签映射

自动将 30+ HTML 元素映射为 UI Toolkit 控件：

HTML 标签	UI Toolkit 元素
div, section, nav, table, tr, td…	ui:VisualElement
p, h1-h6, a	ui:Label
button	ui:Button
img	ui:Image
input[type=text]	ui:TextField
select	ui:DropdownField
details	ui:Foldout
meter, progress	ui:ProgressBar
input[type=range]	ui:Slider
input[type=checkbox]	ui:Toggle
…	…

CSS → USS 自动转换

支持 50+ CSS 属性到 USS 的精确转换：

• 盒模型：margin、padding、border 自动展开为长格式
• Flexbox 布局：flex-direction、align-items、justify-content 完整支持
• 文本样式：font-size、text-align（→ -unity-text-align）、font-weight + font-style（→ -unity-font-style）
• Transform：translate、scale、rotate 自动展开为 USS 独立属性
• 伪类：:hover、:active、:focus、:disabled 等 8 种
• CSS 简写：background → background-color/image/repeat，border → 四边独立属性

内联元素智能分组

<span>、<b>、<i> 等内联元素自动包裹为 flex-direction: row 的横向容器，无需手动调整。

富文本支持

<b>/<strong>、<i>/<em>、<u>、<s>/<del>、<a> 等标签自动转换为 Unity 富文本标记语法。

编辑器路径后处理

在 Unity Project 窗口中右键 .uxml 或 .uss 文件，使用HtmlToUIToolKit菜单：

• uxml、uss转图集切片路径：将独立图片路径转为 Sprite Atlas 引用
• uxml、uss转切片路径：将 Sprite Atlas 引用转回独立图片路径

适合批量调整项目中 UI 文件的资源引用方式。

---

安装

在 Unity Package Manager 中通过 Git URL 安装：

https://github.com/jixinhaoqi/HtmlToUIToolKit.git

或（速度更快）

https://gitee.com/jixinhaoqi/HtmlToUIToolKit.git

推荐环境：Unity 2022.3+

安装后可在 Package Manager 的 Samples 列表中找到示例场景，点击 Import 导入即可查看完整 Demo。

---

使用示例

示例 1：AI 生成登录表单

将以下 Prompt 发送给 AI（已内置 SKILL.md 提示词）：

#请生成Unity UIToolKit的uxml/uss格式的内容
##严格按照unity6最新标准uxml/uss格式设计，避免使用旧版的语法
生成一个居中显示的登录表单，包含用户名输入框、密码输入框、"记住我"复选框和登录按钮。

AI 直接返回专用格式的 UXML 和 USS：

<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements">
    <ui:VisualElement class="form-container">
        <ui:VisualElement class="form-panel">
            <ui:Label text="Welcome" class="form-title" />
            <ui:TextField name="username" label="Username" class="form-field" />
            <ui:TextField name="password" label="Password" is-password-field="true" class="form-field" />
            <ui:Toggle name="remember-me" label="Remember Me" class="form-checkbox" />
            <ui:Button name="login-button" text="Log In" class="form-button" />
        </ui:VisualElement>
    </ui:VisualElement>
</ui:UXML>

.form-container {
    flex-grow: 1;
    justify-content: center;
    align-items: center;
    background-color: rgb(30, 30, 30);
}

.form-panel {
    width: 320px;
    padding: 32px 28px;
    background-color: rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    border-width: 1px;
    border-color: rgba(255, 255, 255, 0.1);
    flex-direction: column;
    align-items: stretch;
}

.form-title {
    font-size: 24px;
    color: white;
    margin-bottom: 24px;
    -unity-font-style: bold;
    align-self: center;
}

.form-field {
    margin-bottom: 16px;
    color: white;
}

.form-field .unity-text-field__label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
}

.form-field .unity-base-text-field__input {
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    border-width: 1px;
    border-color: rgba(255, 255, 255, 0.15);
    color: white;
    padding: 8px;
}

.form-checkbox {
    margin-bottom: 20px;
    color: rgba(255, 255, 255, 0.8);
}

.form-button {
    height: 40px;
    background-color: rgb(0, 122, 204);
    border-radius: 8px;
    border-width: 0;
    color: white;
    font-size: 16px;
    -unity-font-style: bold;
    transition: background-color 0.15s;
}

.form-button:hover {
    background-color: rgb(0, 140, 230);
}

.form-button:active {
    background-color: rgb(0, 100, 180);
}

示例 2：浏览器转换静态Html

给定一个已有的或者AI生成的静态Html页面，通过浏览器工具一键转换：

1. 在Unity中打开Tools/HtmlToUIToolKit/浏览器打开HTML转UIToolKit工具，自动打开浏览器工具
2. 将 HTML 粘贴到编辑器左侧
3. 设置分辨率 1920x1080
4. 点击"执行转换"
5. 下载生成的 output.uxml 和 output.uss

工具自动将每个Html元素映射为UXML元素，并尽可能还原 CSS 的样式。

---

适用场景

• 使用 AI 从零生成 UI 布局
• 将设计师的 HTML 稿快速转为 Unity UI
• 编辑器工具界面的原型开发
• 批量生成模板化 UI 组件
• 将 Web 前端技能直接应用于 Unity UI 开发

---

已知限制

限制项	说明
position: fixed/sticky	不支持
CSS Grid 模板	自动转为 Flexbox 近似布局
vh/vw/em/rem 单位	需设置固定分辨率
CSS transition	不被转换（Unity 使用不同动画系统）
部分 CSS 属性	当前支持约 50 个，复杂属性需手动补充

---

结语

HtmlToUIToolKit 是一个小而美的工具，它的核心价值在于降低 Unity UI Toolkit 的入门门槛，让习惯 Web 开发的技术人员能无缝过渡到 Unity UI 开发。

无论你是想用 AI 快速出 UI，还是要把现有 HTML 设计稿导入 Unity，这个工具都能帮你省下大量手写 UXML/USS 的时间。

欢迎在 GitHub 上给项目点个 Star，也欢迎提 Issue 和 PR！

---

项目地址：https://github.com/jixinhaoqi/HtmlToUIToolKit
在线体验：https://jixinhaoqi.github.io/HtmlToUIToolKit/
作者：xxhq
协议：MIT License