下载手机 APP

Axure UI Creator —— 对 Axure 设计的UI像素级复刻创作

修改于05/07310 浏览开发交流

TapTap

设计图、线上版本游戏界面、新skill导出界面对比

horizontal line

horizontal line

注：本教程及skill针对于会使用axure进行UX编辑的用户，无UI设计经验的用户可以尝试使用AI生图拆分后，在auxre里进行拼接再导出HTML

Git 仓库: https://gitee.com/Nacchi/axure-ui-creator

后续会尝试申请skill

horizontal line

horizontal line

horizontal line

horizontal line

这是什么？

axure-ui-creator 是一个嗒啦啦 Skill，让 AI 能够将 Axure 导出的 CSS 文件精确还原为 UrhoX 游戏 UI 界面。

简单来说：你在 Axure 里画好界面原型或者正式UI界面 → 导出 CSS → 喂给 AI → 自动生成可运行的 UrhoX Lua UI 代码。

horizontal line

horizontal line

适用场景

用 Axure 设计了游戏 UI 原型，想快速转为可运行代码
需要像素级还原设计稿的位置、颜色、字号、圆角等样式
竖屏手游 UI（如修仙/RPG/卡牌类游戏主界面）
任何需要从 CSS 属性映射到 UrhoX UI 组件的场景

horizontal line

horizontal line

使用流程

第一步：准备 Axure CSS 文件

在 Axure RP 中完成界面设计
导出为 HTML（File → Export → HTML）
在导出目录中找到 CSS 文件（通常在 files/ 或 styles/ 目录下）
将 CSS 文件复制到项目的 docs/ 目录

第二步：告诉 AI 你想做什么

在嗒啦啦中这样对话：

请根据 docs/xxx （提交的CSS内容路径）中的 CSS 样式，还原这个界面的 UI

设计分辨率：1080*1920（你的分辨率，影响UI的绝对坐标）

第三步：AI 自动完成

AI 会自动：

解析 CSS 文件中的所有元素（位置、尺寸、颜色、字号等）
将 CSS 属性映射为 UrhoX UI 组件属性
生成可运行的 Lua 代码到 scripts/ 目录
调用构建工具

horizontal line

horizontal line

Skill 包含的内容

TapTap

horizontal line

horizontal line

核心踩坑记录（精华）

这些是实际项目中反复验证后总结的关键经验：

文字颜色属性不统一
颜色格式必须用 RGBA 数组
透明背景不能写 "transparent"
层级由 children 顺序决定

horizontal line

horizontal line

使用效果

输入一个 Axure CSS 文件（几百到上万行），AI 可以：

自动识别所有 UI 元素的位置、尺寸、颜色、字号
正确选择 UrhoX UI 组件（Label / Panel / Button / Image 等）
处理绝对定位布局，像素级还原设计稿
处理多屏幕界面（如设置界面的多 Tab 切换）
输出可直接运行的 Lua 代码

horizontal line

horizontal line

注意事项

目前主要针对竖屏手游 UI 优化
横屏或其他分辨率也可使用，修改设计分辨率参数即可
Axure CSS 导出格式可能因版本不同略有差异，建议使用 Axure RP 9/10
此 Skill 依赖 UrhoX 引擎的 urhox-libs/UI 组件库

#TapTap制造 #锻造与征途 #锻造与征途2 #无尽仙途：仙术转转转 #TapTap制造UI编辑

TapTap 制造应用

9.8