下载 App
Axure UI Creator —— 对 Axure 设计的UI像素级复刻创作
修改于05/07314 浏览开发交流
设计图、线上版本游戏界面、新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 组件库
别再烧积分了！从每次 2000 到每次 50 的血泪经验
适用场景：所有在用 TapTap Code 开发游戏的小白
难度：★☆☆☆☆
背景最近群里总有人"炫耀"一次操作花了几千积分，说实话这不是值得高兴的事——这是在告诉所有人你的开发方式有根本性问题。我也走过这条弯路，所以来说说怎么改。
积分消耗的本质是什么积分 = AI 处理的 token 数量 = 你发给 AI 的内容 + AI 回给你的内容所以烧积分的本质只有两种：
你让 AI 做了大量无效/重
精华
@虎老大王
68 赞
21 回复
00:54
等距场景编辑器——自行编辑2D瓦片场景地图
一个可嵌入任何 UrhoX 项目的完整等距瓦片地图编辑器，适用于 RPG、策略、模拟经营等类型游戏的关卡设计。
SKILL审核已通过，各位创作者可以根据自己的需要对工具进行调整修改
声明：该工具仅作为场景编辑以及序列化，交互等功能需要用户自行在项目中定义
后续会根据实际情况补充rule tile相关逻辑，实现tile map编辑自由
目录
1. 界面总览
2. 六种编辑工具
3. 双视图模式
4.
精华
@长宁Aring
21 赞
11 回复
01:27
《大二暑假，我用AI做了一款属于自己的游戏》
本人自制游戏现已加入taptap封闭测试（仅适配安卓机型）欢迎大家前来尝试（八月十号可以正式开始游玩）
如果有建议或者bug反馈可以加入qq群928501443
#发现好游戏 #游戏日常 #浅评一下 #今天游戏圈发生了啥
@多边形幸存者
3 赞
03:06
为了不被斩杀，我只能做到这些了
之前一直申请不到计划3，之前说太花哨，后面说体量完成度不足，在我一番小作文下，编辑终于给了我解答，什么原生质感，玩家开局体验啥的。
本来计划2也够用，准备以后再优化了，结果计划2赠送的积分要砍半了，学生党实在消费不起，于是只能再冲一波计划3了
从周六中午到现在一天半时间，优化了一遍角色卡，战斗卡，还有抽卡界面，优化了新手教程，该说不说确实比之前要舒服些。
前半部分为新版，后半部分为旧版。
明天再次
@才不是帅帅
33 赞
6 回复
开发心得-界面布局心得
大家好，我正在用 TapTap 制造制作一款2D 治愈林间徒步旅行游戏《徒步荒野》。
我分享一下我的开发心得，希望能有用，下面是一些界面布局的心得。
第一步：定版式、操作
先确定游戏是横版还是竖版、需要哪些操作按钮，敲定整体玩法思路。
我的玩法灵感参考《边境之旅》，主打散步看风景、沿途触发随机事件。
原版是 3D，考虑到自己是新手，选择2D 横版街机式来做，制作更简单、好上手。
第二步：敲定全局美
@大圣
6 赞
3 回复
如何提升你游戏中的UI美术水平
一、请为你的游戏挑选一款合适的字体
很多开发者没有注意到其实UI界面中最重要的元素是字体，一款合适的字体能给整个游戏的界面感官带来蜕变。
请看案例
那么如何挑选适合自己的字体呢？
我总结出了一些小经验可供参考：
黑体：通用
宋体：古风、武侠、修仙
楷体：古风、武侠、修仙
圆体：卡通、动漫、Q版
科技：科幻、未来、电子
顺手分享一个免费可商用字体网站：
当然 如果你不知道自己的游戏适合什么风格
精华
@N3
122 赞
44 回复
永恒虚空持续开发日记1——关于游戏中的新名词：场频
写在前边：首先感谢TapTap制造版主大大@汪崽 对于作品潜力的肯定，给与了我积分计划二的权限[表情_不好意思]。这边也在加紧开发改进各种功能中，期望尽快给大家带来成熟的版本。[表情_猫咪举手]
大家好，我是永恒虚空的制作人黑猫不详，大家叫我黑猫就好。从今天开始我将以后置开发日记的形式给大家分享我在TapTap制造中制作的游戏永恒虚空的开发过程，新人希望大家多多关照！
今天先给大家介绍我作品中最重
投票
@黑猫•不详
3 赞
2D 等轴测视角：完整理论
2D 等轴测视角：完整理论
一、视角的本质
什么是等轴测
人站在高处斜着往下看地面，地面上的方格子不再是正方形，而变成了菱形。这就是等轴测的视觉本质。
俯视（正上方看下去）： 等轴测（斜上方看下去）：
┌──┬──┬──┐ ◇
├──┼──┼──┤ ◇ ◇
├──┼──┼──┤ ◇ ◇ ◇
└──┴──┴──┘ ◇ ◇
◇
正方形网格经过旋转 + 压缩，变成了菱形网格。
为什么是 2:1
@涅槃妙心 创想工作室
6 赞
关于制作出质量很高的横版战斗角色的方法
其实全篇就一句话，角色为啥做起来这么好看，因为我一帧一帧K的。
在做角色之前，我们需要一个角色的设计稿，这个东西很简单，你把人设写好剩下的交给AI就行了，所有图片，序列帧都可以让AI绘制和处理，学会绘图是你要制作高质量游戏的第一课。
这里拿我在做的角色举例，他的参考图是这样：
当你拥有了一个角色以后，就要想办法让她动起来了。
那么如何让她动起来，答案是序列帧。
在此之前你需要知道，最容易出现一个误
@𝓡𝓲𝓷𝓸𝓻𝓼𝓲
40 赞
12 回复
龙骨编辑器git自取
git clone -b 04-分享仓库 （内置公开声明txt务必阅读，内有联系方式）
解决问题如下：哒啦啦能不能正确识别龙骨，对龙骨动画的简单修改。
具体功能说明书可以git后问嗒啦啦，或者直接编辑。
这只是一个开始希望各位大佬可以在这个基础上开发出更实用的工具#游戏日常 #发现好游戏 #游戏杂谈 #
精华
@z
15 赞
5 回复