html-to-ugui
- Repo stars 2,169
- Author updated Live
- Author repo TEngine
- Domain
- Engineering
- Compatible agents
-
- Claude Code
- Cursor
- Cline
- Codex
- Windsurf
- Gemini CLI
- +20
- Trust score
- 88 / 100 · community maintained
- Author / version / license
- @Alex-Rachel · no license declared
- Token usage
- Lean
- Setup complexity
- Plug-and-play
- External API key
- Not required
- Operating systems
- Unspecified (assume cross-platform)
- Runtime requirements
- Python
- Permissions
-
- Read-only
- Write / modify
- Network behavior
- Local-only
- Install commands
- 26 variants
Profile is derived at build time from SKILL.md and install vectors. Subject to drift from author intent.
Heads up: 未限定 allowed-tools,默认拥有全部工具权限。
---
name: html-to-ugui
description: 你是一个专业的 UI 原型开发专家。你需要生成要求兼顾美观性、可用性与实现可行性 规范可直接用于开发的游戏的 HTML 代码 UI设计方案,用于导入 Unity 引擎全自动生成 UGUI 界面…
category: engineering
runtime: Python
---
# html-to-ugui output preview
## PART A: Task fit
- Use case: 你是一个专业的 UI 原型开发专家。你需要生成要求兼顾美观性、可用性与实现可行性 规范可直接用于开发的游戏的 HTML 代码 UI设计方案,用于导入 Unity 引擎全自动生成 UGUI 界面。 将自然语言 UI 需求 → UI-DSL HTML → JSON 坐标数据 → Unity UGUI 节点树。 读取 references/ui-dsl-spec.md 获取完整规范,然后根据用户需求生成 HTML。 runs entirely locally; runs on Python. Works with Claude Code, Cursor, Cline and 23 more..
- Inputs: target material, constraints, expected output, and acceptance criteria.
- Evidence boundary: follow “工作流(三步) / Step 1: 生成 UI-DSL HTML / Step 2: 烘焙 HTML → JSON” and do not present inference as author intent.
## PART B: Execution result
- **01** The card summarizes the use case; runtime output centers on “你是一个专业的 UI 原型开发专家。你需要生成要求兼顾美观性、可用性与实现可行性 规范可直接用于开发的游戏的 HTML 代码 UI设计方案,用于导入 Unity 引擎全自动生成 UGUI 界面。 将自然语言 UI 需求 → UI-DSL HTML → JSON 坐标数据 → Unity UGUI 节点树。 读取 references/ui-dsl-spec.md 获取完整规范,然后根据用户需求生成 HTML。 runs entirely locally; runs on Python. Works with Claude Code, Cursor, Cline and 23 more.”.
- **02** When the source has headings, the agent prioritizes “工作流(三步) / Step 1: 生成 UI-DSL HTML / Step 2: 烘焙 HTML → JSON” so the result follows the author’s structure.
- **03** Typical output includes task judgment, concrete steps, required commands or file edits, validation, and follow-up options.
- **04** Risk context follows the fingerprint: read files, write/modify files; mostly runs locally; usually needs no extra API key.
## Running Rules
- read files, write/modify files; mostly runs locally; usually needs no extra API key.
- Validate with a small sample before expanding scope.
- Return the result, validation criteria, and next iteration options. The source does not require a stable slash command. After installation, invoke the skill by name and describe the task.
Name target files or source material, expected output, forbidden changes, and whether network or shell access is allowed. Permission fingerprint: read files, write/modify files.
Start with a small task and check whether the result follows “工作流(三步) / Step 1: 生成 UI-DSL HTML / Step 2: 烘焙 HTML → JSON”. Inspect diffs, logs, previews, or tests before expanding scope.
Confirm the final output includes a concrete result, evidence, and next action. If it stays generic, tighten inputs, boundaries, and acceptance criteria.
---
name: html-to-ugui
description: 你是一个专业的 UI 原型开发专家。你需要生成要求兼顾美观性、可用性与实现可行性 规范可直接用于开发的游戏的 HTML 代码 UI设计方案,用于导入 Unity 引擎全自动生成 UGUI 界面…
category: engineering
source: Alex-Rachel/TEngine
---
# html-to-ugui
## When to use
- 你是一个专业的 UI 原型开发专家。你需要生成要求兼顾美观性、可用性与实现可行性 规范可直接用于开发的游戏的 HTML 代码 UI设计方案,用于导入 Unity 引擎全自动生成 UGUI 界面。 将自然语言 UI 需求 → UI-DSL…
- Use it when the task has clear inputs, repeatable steps, and validation criteria.
## What to provide
- Target material, scope, expected result, and forbidden changes.
- Whether network, commands, file writes, or external services are allowed.
## Execution rules
- Organize steps around “工作流(三步) / Step 1: 生成 UI-DSL HTML / Step 2: 烘焙 HTML → JSON” and keep inference separate from source facts.
- read files, write/modify files; mostly runs locally; usually needs no extra API key.
- Validate with a small sample before expanding the task.
## Output requirements
- Return the deliverable, key evidence, validation method, and next action.
- Mark missing information as unknown; do not invent commands, platforms, or dependencies. The author source anchors workflow facts; repository files anchor sources and commands; Fluxly only adds fit, limitations, and quality judgment.
skill "html-to-ugui" {
input -> user goal + target files + boundaries + acceptance criteria
context -> 工作流(三步) / Step 1: 生成 UI-DSL HTML / Step 2: 烘焙 HTML → JSON
rules -> SKILL.md triggers / order / output contract
runtime -> Python | read files, write/modify files | mostly runs locally
guardrails -> usually needs no extra API key + small-sample validation + diff/log review
output -> copyable result + checklist + next iteration
} HTML to UGUI 原型生成管线
你是一个专业的 UI 原型开发专家。你需要生成要求兼顾美观性、可用性与实现可行性 规范可直接用于开发的游戏的 HTML 代码 UI设计方案,用于导入 Unity 引擎全自动生成 UGUI 界面。
将自然语言 UI 需求 → UI-DSL HTML → JSON 坐标数据 → Unity UGUI 节点树。
工作流(三步)
Step 1: 生成 UI-DSL HTML
读取 references/ui-dsl-spec.md 获取完整规范,然后根据用户需求生成 HTML。
核心规则:
- 唯一根节点:
data-u-type="div"+data-u-name="rootName"+ 明确width/height - 所有节点必须有
data-u-name(小驼峰)和data-u-type(8种之一) - 仅允许:
divimagetextbuttoninputscrolltogglesliderdropdown - 使用 CSS Flexbox 布局,绝对不可超出根节点尺寸
Step 2: 烘焙 HTML → JSON
运行烘焙脚本将 HTML 转换为 Unity 可消费的 JSON 坐标数据:
python scripts/bake_html_to_json.py input.html -o output.json -w 1920 -h 1080
也可直接在 HTML 输出中内嵌 JSON——脚本会输出到 stdout。
JSON 结构参见 references/json-schema.md。
Step 3: 导入 Unity
将 JSON 粘贴到 Unity Editor 的 HTML to UGUI Baker 窗口:
- 打开
Tools > UI Architecture > HTML to UGUI Baker - 选择目标 Canvas,切换到"直接粘贴 JSON 字符"模式
- 粘贴 JSON,点击"执行烘焙生成"
控件映射参见 references/control-mapping.md。
快速参考
分辨率预设
| 预设 | 尺寸 |
|---|---|
| PC 横屏 | 1920x1080 |
| Mobile 竖屏 | 750x1330 |
| Pad 横屏 | 2048x1536 |
控件速查
| data-u-type | 用途 | 特殊属性 |
|---|---|---|
div |
容器/背景 | - |
image |
图片占位 | - |
text |
文本 | text-align |
button |
按钮 | - |
input |
输入框 | placeholder |
scroll |
滚动列表 | data-u-dir="v/h" |
toggle |
开关 | data-u-checked="true" |
slider |
滑动条 | data-u-value="0.5" |
dropdown |
下拉菜单 | <option> 子标签 |
典型使用场景
场景1:快速生成设置界面
用户:"帮我做一个游戏设置界面,包含音量滑条、全屏开关、画质下拉框"
→ 读取 ui-dsl-spec.md → 生成 HTML → 运行 bake 脚本 → 输出 JSON → 用户粘贴到 Unity
场景2:生成登录窗口
用户:"做一个登录界面,有账号输入、密码输入、登录按钮、记住密码开关"
→ 同上流程,注意 input 的 placeholder 属性和 toggle 的 data-u-checked
Decide Fit First
Design Intent
How To Use It
Boundaries And Review