前端设计
- 作者仓库星标 2,169
- 作者更新于 实时读取
- 作者仓库 TEngine
- 领域
- 工程开发
- 兼容 Agent
-
- Claude Code
- Cursor
- Cline
- Codex
- Windsurf
- Gemini CLI
- +20
- 信任分
- 88 / 100 · 社区维护
- 作者 / 版本 / 许可
- @Alex-Rachel · 未声明 license
- Token 消耗评级
- 低消耗
- 接入复杂程度
- 即装即用
- 是否需要外部 API Key
- 不需要
- 兼容的系统
- 未声明（默认跨平台）
- 底层运行要求
- Python
- 文件与系统权限
-
- 只读
- 允许写入 / 修改
- 网络行为
- 仅限本地
- 安装命令数
- 26 条
档案由构建时根据 SKILL.md 与安装命令自动衍生，可能与作者实际意图存在差异。
需要注意： 未限定 allowed-tools，默认拥有全部工具权限。
---
name: html-to-ugui
description: HTML原型转Unity UGUI界面生成管线。通过AI生成符合UI-DSL规范的HTML，烘焙为JSON坐标数据，再导入Unity自动生成UGUI节点树。触发场景：(1) 需要快速生成Uni…
category: 工程开发
runtime: Python
---
# html-to-ugui 输出预览
## PART A: 任务判断
- 适用问题：代码实现、重构、调试或代码审查。
- 输入要求：目标材料、限制条件、期望输出和验收方式。
- 证据边界：围绕“工作流（三步） / Step 1: 生成 UI-DSL HTML / Step 2: 烘焙 HTML → JSON”读取原文规则，不把推断写成作者承诺。
## PART B: 执行结果
- **01** 任务判断：确认你的需求是否属于代码实现、重构、调试或代码审查，并标出输入、限制和预期结果。
- **02** 执行计划：优先按“工作流（三步） / Step 1: 生成 UI-DSL HTML / Step 2: 烘焙 HTML → JSON”拆成步骤，说明每一步会读取什么、修改什么、产出什么。
- **03** 交付结果：给出可复制的命令、文件改动、检查清单或内容草稿，并说明如何继续迭代。
- **04** 风险边界：结合 读取文件、写入/修改文件、主要在本地完成、通常不需要额外 API Key 给出执行前确认项。
## Running Rules
- 读取文件、写入/修改文件；主要在本地完成；通常不需要额外 API Key。
- 先小样例验证，再放大到真实任务。
- 交付时同时给结果、检查口径和下一步迭代建议。原文没有稳定的斜杠命令要求。安装验证后通常全局生效，直接在对话里点名这个 Skill 并描述任务即可。
告诉 Agent 目标文件或材料、期望结果、不可改范围、是否允许联网或执行命令。本 Skill 的权限画像是：读取文件、写入/修改文件。
先用一个小任务确认它会围绕“工作流（三步） / Step 1: 生成 UI-DSL HTML / Step 2: 烘焙 HTML → JSON”工作；涉及文件或命令时，先看 diff、日志、预览或测试结果。
检查最终产物是否包含明确结果、必要证据和下一步动作；如果输出泛泛而谈，就补充输入、边界和验收标准后重跑。
---
name: html-to-ugui
description: HTML原型转Unity UGUI界面生成管线。通过AI生成符合UI-DSL规范的HTML，烘焙为JSON坐标数据，再导入Unity自动生成UGUI节点树。触发场景：(1) 需要快速生成Uni…
category: 工程开发
source: Alex-Rachel/TEngine
---
# html-to-ugui
## 什么时候使用
- 把工程方向的常用动作沉淀成 Agent 可调用的技能 适合处理工程开发场景下的代码实现、调试、重构、测试或代码审查，核心价值是把输入、判断、执行、验证和交付边界固定下来，避免 Agent 泛泛回答。 把任务拆成可执行、可检查、可继续迭代…
- 面向代码实现、重构、调试或代码审查，优先处理能明确输入、步骤和验收标准的工作。
## 需要提供什么
- 目标材料、目录范围、期望结果和不可改动内容。
- 是否允许联网、执行命令、读写文件或调用外部服务。
## 执行规则
- 围绕「工作流（三步） / Step 1: 生成 UI-DSL HTML / Step 2: 烘焙 HTML → JSON」组织步骤，不把推断写成作者事实。
- 读取文件、写入/修改文件；主要在本地完成；通常不需要额外 API Key。
- 先跑小样例，确认结果可检查后再扩大任务范围。
## 输出要求
- 给出最终产物、关键证据、验证方式和下一步动作。
- 信息不足时标记 unknown，不编造命令、平台或依赖。作者原文负责流程事实；仓库文件负责来源和命令；流狐只补充适用场景、限制和质量判断。
skill "html-to-ugui" {
输入层 -> 用户目标 + 目标文件 + 禁止范围 + 验收标准
上下文层 -> 工作流（三步） / Step 1: 生成 UI-DSL HTML / Step 2: 烘焙 HTML → JSON
规则层 -> SKILL.md 触发条件 / 执行顺序 / 输出格式
运行层 -> Python | 读取文件、写入/修改文件 | 主要在本地完成
安全层 -> 通常不需要额外 API Key + 小任务验证 + diff / 日志复核
输出层 -> 可复制结果 + 检查清单 + 下一步迭代
}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
先判断是否适合
作者设计意图
作者的方法与取舍
边界和复核