Axure UI Creator —— 对 Axure 设计的UI像素级复刻创作
修改于12 小时前69 浏览开发心得
设计图、线上版本游戏界面、新skill导出界面对比
注：本教程及skill针对于会使用axure进行UX编辑的用户，无UI设计经验的用户可以尝试使用AI生图拆分后，在auxre里进行拼接再导出HTML
后续会尝试申请skill
这是什么？
axure-ui-creator 是一个 嗒啦啦 Skill，让 AI 能够将 Axure 导出的 CSS 文件精确还原为 UrhoX 游戏 UI 界面。
简单来说：你在 Axure 里画好界面原型或者正式UI界面 → 导出 CSS → 喂给 AI → 自动生成可运行的 UrhoX Lua UI 代码。
适用场景
- 用 Axure 设计了游戏 UI 原型，想快速转为可运行代码
- 需要像素级还原设计稿的位置、颜色、字号、圆角等样式
- 竖屏手游 UI（如修仙/RPG/卡牌类游戏主界面）
- 任何需要从 CSS 属性映射到 UrhoX UI 组件的场景
使用流程
第一步：准备 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/ 目录
- 调用构建工具
Skill 包含的内容
核心踩坑记录（精华）
这些是实际项目中反复验证后总结的关键经验：
- 文字颜色属性不统一
- 颜色格式必须用 RGBA 数组
- 透明背景不能写 "transparent"
- 层级由 children 顺序决定
使用效果
输入一个 Axure CSS 文件（几百到上万行），AI 可以：
- 自动识别所有 UI 元素的位置、尺寸、颜色、字号
- 正确选择 UrhoX UI 组件（Label / Panel / Button / Image 等）
- 处理绝对定位布局，像素级还原设计稿
- 处理多屏幕界面（如设置界面的多 Tab 切换）
- 输出可直接运行的 Lua 代码
注意事项
- 目前主要针对竖屏手游 UI 优化
- 横屏或其他分辨率也可使用，修改设计分辨率参数即可
- Axure CSS 导出格式可能因版本不同略有差异，建议使用 Axure RP 9/10
- 此 Skill 依赖 UrhoX 引擎的 urhox-libs/UI 组件库