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 开发效率。两种工作流灵活选择工作流 AAI 直接生成 UXML/USS推荐最高效的方式——无需浏览器无需 HTML直接用自然语言描述想要的界面。将内置的SKILL.md作为 AI 系统提示词用自然语言描述你想要的 UI 布局AI 直接返回符合 Unity 6 标准的 UXML/USS 代码保存为.uxml和.uss文件直接在 Unity 中使用AI 客户端 SKILL Prompt → 生成 UXML/USS → 保存文件 → Unity 中使用工作流 BHTML 浏览器转换适合已有 HTML/CSS 设计稿的场景所见即所得地转换。打开 在线工具 或本地 HTML 文件粘贴 HTML 代码左侧实时预览效果点击执行转换右侧显示 UXML/USS 输出一键下载或复制导入 Unity 即可使用HTML/CSS 源码 → 浏览器预览 → 转换 → 下载 UXML/USS → Unity 中使用核心功能智能 HTML 标签映射自动将 30 HTML 元素映射为 UI Toolkit 控件HTML 标签UI Toolkit 元素div,section,nav,table,tr,td…ui:VisualElementp,h1-h6,aui:Labelbuttonui:Buttonimgui:Imageinput[typetext]ui:TextFieldselectui:DropdownFielddetailsui:Foldoutmeter,progressui:ProgressBarinput[typerange]ui:Sliderinput[typecheckbox]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-weightfont-style→-unity-font-styleTransformtranslate、scale、rotate自动展开为 USS 独立属性伪类:hover、:active、:focus、:disabled等 8 种CSS 简写background→background-color/image/repeatborder→ 四边独立属性内联元素智能分组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。使用示例示例 1AI 生成登录表单将以下 Prompt 发送给 AI已内置 SKILL.md 提示词#请生成Unity UIToolKit的uxml/uss格式的内容##严格按照unity6最新标准uxml/uss格式设计避免使用旧版的语法生成一个居中显示的登录表单包含用户名输入框、密码输入框、记住我复选框和登录按钮。AI 直接返回专用格式的 UXML 和 USSui:UXMLxmlns:uiUnityEngine.UIElementsxmlns:uieUnityEditor.UIElementsui:VisualElementclassform-containerui:VisualElementclassform-panelui:LabeltextWelcomeclassform-title/ui:TextFieldnameusernamelabelUsernameclassform-field/ui:TextFieldnamepasswordlabelPasswordis-password-fieldtrueclassform-field/ui:Togglenameremember-melabelRemember Meclassform-checkbox/ui:Buttonnamelogin-buttontextLog Inclassform-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页面通过浏览器工具一键转换在Unity中打开Tools/HtmlToUIToolKit/浏览器打开HTML转UIToolKit工具自动打开浏览器工具将 HTML 粘贴到编辑器左侧设置分辨率 1920x1080点击执行转换下载生成的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单位需设置固定分辨率CSStransition不被转换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
将 HTML+CSS 转换为 Unity UI Toolkit 工具
发布时间：2026/5/30 12:51:38
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 开发效率。两种工作流灵活选择工作流 AAI 直接生成 UXML/USS推荐最高效的方式——无需浏览器无需 HTML直接用自然语言描述想要的界面。将内置的SKILL.md作为 AI 系统提示词用自然语言描述你想要的 UI 布局AI 直接返回符合 Unity 6 标准的 UXML/USS 代码保存为.uxml和.uss文件直接在 Unity 中使用AI 客户端 SKILL Prompt → 生成 UXML/USS → 保存文件 → Unity 中使用工作流 BHTML 浏览器转换适合已有 HTML/CSS 设计稿的场景所见即所得地转换。打开 在线工具 或本地 HTML 文件粘贴 HTML 代码左侧实时预览效果点击执行转换右侧显示 UXML/USS 输出一键下载或复制导入 Unity 即可使用HTML/CSS 源码 → 浏览器预览 → 转换 → 下载 UXML/USS → Unity 中使用核心功能智能 HTML 标签映射自动将 30 HTML 元素映射为 UI Toolkit 控件HTML 标签UI Toolkit 元素div,section,nav,table,tr,td…ui:VisualElementp,h1-h6,aui:Labelbuttonui:Buttonimgui:Imageinput[typetext]ui:TextFieldselectui:DropdownFielddetailsui:Foldoutmeter,progressui:ProgressBarinput[typerange]ui:Sliderinput[typecheckbox]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-weightfont-style→-unity-font-styleTransformtranslate、scale、rotate自动展开为 USS 独立属性伪类:hover、:active、:focus、:disabled等 8 种CSS 简写background→background-color/image/repeatborder→ 四边独立属性内联元素智能分组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。使用示例示例 1AI 生成登录表单将以下 Prompt 发送给 AI已内置 SKILL.md 提示词#请生成Unity UIToolKit的uxml/uss格式的内容##严格按照unity6最新标准uxml/uss格式设计避免使用旧版的语法生成一个居中显示的登录表单包含用户名输入框、密码输入框、记住我复选框和登录按钮。AI 直接返回专用格式的 UXML 和 USSui:UXMLxmlns:uiUnityEngine.UIElementsxmlns:uieUnityEditor.UIElementsui:VisualElementclassform-containerui:VisualElementclassform-panelui:LabeltextWelcomeclassform-title/ui:TextFieldnameusernamelabelUsernameclassform-field/ui:TextFieldnamepasswordlabelPasswordis-password-fieldtrueclassform-field/ui:Togglenameremember-melabelRemember Meclassform-checkbox/ui:Buttonnamelogin-buttontextLog Inclassform-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页面通过浏览器工具一键转换在Unity中打开Tools/HtmlToUIToolKit/浏览器打开HTML转UIToolKit工具自动打开浏览器工具将 HTML 粘贴到编辑器左侧设置分辨率 1920x1080点击执行转换下载生成的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单位需设置固定分辨率CSStransition不被转换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
