1.UI灵感

1）文字描述灵感

我们现在脑袋空空，不知道应该制作一个什么样的游戏UI。那么很简单，我们将大致的要求提供给deepseek。

描述一个武侠类RPG游戏的游戏主界面，界面中包括武侠主题背景、必要的开始游戏按钮、读取游戏按钮、设置游戏按钮，整体描述一下整个页面。

代码块：

好的，这是一个对整个武侠RPG游戏主界面的整体描述，它将各个元素融合为一个完整的画面： 《剑影江湖》主界面整体描述 整个游戏主界面宛如一幅徐徐展开的动态江湖画卷，充满了东方武侠的写意与诗意。 画面的视觉中心是一幅气势恢宏的写意山水背景。远处，层峦叠嶂的群山隐于流动的云雾之后，一轮清冷的明月高悬，为世界洒下皎洁的银辉。中景的孤峰之巅，一位侠客的剪影临风而立，衣袂飘飘，他/她背对画面，凝望着这片浩瀚的江湖，仿佛在静候着你的到来，既是画面的焦点，也是玩家自身的投射。几枝墨竹从画面左侧探出，作为前景，偶尔飘落的竹叶为整个场景增添了静谧的动感。耳边萦绕着若有若无的风声与悠远的古琴声，瞬间将玩家拉入一个充满无限可能的武侠世界。 在画面的右侧中部，主要的功能按钮以垂直序列优雅排列，它们并非生硬的现代UI，而是完全融入了这幅画卷，成为其中的一部分。 最上方是一卷半开的古籍卷轴，上面以苍劲的笔触写着“开始游戏”。当你的目光（鼠标）停留，卷轴会缓缓展开，字迹泛起金光，仿佛在邀请你书写新的传奇。 卷轴下方悬挂着一枚温润的青玉令牌，刻着“读取游戏”。鼠标轻触，它会微微摇曳，发出清鸣，好似在唤醒沉睡的往事。 最下方则是一个古朴的青铜罗盘，名为“设置游戏”。当它被关注时，盘上的指针会悄然转动，暗示着其中可精密调整的乾坤。 在画面的左上方，是铁画银钩的书法题字——“剑影江湖”，如同牌匾般点明主题，气势磅礴。 而在右下角的角落，一盏看似不起眼的古灯静静燃烧，那是“退出游戏”的入口。鼠标掠过，灯焰会轻轻摇曳，仿佛在询问你是否要暂别这片江湖。 总结而言，整个界面布局主次分明，意境深远。背景的苍茫与动态感构成了世界的广度，右侧的按钮则以其精巧的设计和交互，成为了玩家踏入这个世界的钥匙。所有元素在色调、动效和音效上高度统一，共同营造出一个引人入胜、古风盎然的武侠冒险起点，让玩家在点击之前，已然心驰江湖。

2）设计图灵感

我们将上面的提示词，给即梦AI，即梦马上就给出了我非常满意的设计图。

2.素材准备

如果我们做H5小游戏，其实可以使用AIGC UI原型设计软件的功能，直接给出HTML的UI界面代码。但是我还是熊我准备的素材和做UI的方式可以适配更多的游戏开发场景，那么我们就需要想一起没有AI时的步骤一样，从UI设计图中逐渐剥离出所需要的素材。

人工的方式，对于这些按钮UI来说，其实用PS切图是很快的一种方式，还能够保持满足设计图的要求。

这里我们尝试一下用AI进行这些工作。

1）首先是背景

最快的方式就实在设计图的基础上，通过AI擦除的方式，将按钮类的UI擦粗掉。

擦除按钮UI和多余文字

AI擦除后的背景图

还有一种方式是将整体设计图，当做参考图，让即梦AI重新图生图，也是可以的。但是这样的生图差异要比AI擦除大一些。

图生图方式

最终如何选择，就看你的喜好了！

2）剑影江湖

PS抠图是王道。。。但是AI可以帮助PS节省很多时间，比如我用参考图模式，给出提示词：

根据参考图仅保留“剑影江湖”几个汉字，写在一张纯白色的纸上。

即梦AI画出的内容，非常符合提示词（故意保留了即梦AI的水印）

• 然后再用PS的魔法棒，一下子就能够扣除文字了！

“剑影江湖”文字扣除待用

• 还有一个方式是用即梦AI的识别主体功能，这种方式会只保留黑色的文字轮廓，连字中间的颜色也变为透明色。

剑影江湖（轮廓）

喜欢用哪个，我觉得都可以，仅保留文字轮廓的在个别背景下可能辨识度不高。

3）按钮素材

素材中的按钮包括：开始游戏、读取游戏、剧情回顾、发现道具、设置游戏、退出游戏按钮。提取方式都差不多，这里以开始游戏和、读取游戏为例。

• 开始游戏

以即梦AI为例，在灵感图基础上，使用抠图功能，会自动识别出一些按钮，我们只保留“开始游戏”按钮，需要注意的是开始游戏按钮与读取游戏按钮，中间设计的时候有一个挂环，我们需要留一个窟窿出来。

再使用“局部重绘”功能，把多余的吊环消除掉。注意要多涂一些，这样AI更容易运算出补色。提示词如下：

这样我们就得到了开始按钮的素材。

• 其它按钮：

我们用同样的办法得到其他素材：

备注：有的时候，用PS其实更快，大家根据自己的喜好吧^_^

3.素材位置标注和配置文件

在前端设计领域，有一个非常成熟的设计图标注工具PxCook。

1）PxCook简介

PxCook（像素大厨）是一款专注于提升UI设计和前端开发协作效率的智能标注与切图工具。它能够自动从设计稿中获取尺寸、颜色等信息，并生成前端代码，是连接设计与开发环节的桥梁。

特性类别	具体说明
​核心定位​	UI设计与前端开发协作工具，主打智能标注和切图
​核心功能​	智能标注、一键切图、单位转换、代码生成、项目制管理
​支持输入文件​	PSD、Sketch、Adobe XD文件，以及PNG、JPG等标准图像格式
​操作系统​	支持 Windows 和 macOS 双平台
​授权方式​	提供免费版本

PxCook的功能设计紧密围绕实际工作流程，旨在减少重复劳动。

• 智能标注：这是PxCook的招牌功能。只需将PSD等设计文件拖入软件，它便能自动解析图层结构。测量间距时，通过简单的拖放操作即可自动生成标注线；测量元素尺寸或获取文字样式（字体、大小、颜色等），通常只需点击选中即可完成。更实用的是，当设计稿修改后，相关的标注信息可以自动更新，无需手动调整。

• 灵活切图：通过插件与Photoshop或Sketch等设计软件联动，前端工程师可以在PxCook中直接选择需要导出的图层，根据命名规则（如icon@2x.png）快速导出不同分辨率的切图。

• 单位转换与代码生成：支持在px, dp/sp, pt, rem等多种单位间一键切换，方便适配不同平台（iOS、Android、Web）。更强大的是，它可以根据选中的元素，在右侧属性栏中直接生成CSS、XML甚至ReactNative等语言的样式代码片段，极大提升了开发效率。•

• 项目管理模式：支持创建本地项目（.pxcp文件）或云端协作项目，便于对设计稿进行版本管理和团队共享。

2）UI位置标注

我们再PxCook中将设计图导入进去，然后可以使用区域标注工具和坐标点标注工具获得我们想要的信息。

3）配置文件准备

我们基于每一个UI位置的标注，可以编写一个UI的配置文件(节选)：

{
  "normal":{
    "bk-img":"background.png",
    "width":1280,
    "height":720
  },
  "button":{
    "gn":{
      "type":"img",
      "img":"剑影江湖.png",
      "centerX":163,
      "centerY":78,
      "layer":5  
    },
    "start":{
      "type":"img",
      "img":"开始游戏按钮.png",
      "centerX":1025,
      "centerY":180,
      "layer":5  
    }, 
    "mm":{
      "type":"img",
      "img":"读取回忆.png",
      "centerX":1225,
      "centerY":130,
      "layer":5    
    }
  },
  "txt":{
    "mm_txt":{
      "txt":"读取回忆",
      "centerX":1225,
      "centerY":185,
      "font":"微软雅黑",
      "size":20,
      "color":"#ffffff",
      "layer":5      
    }
  }
  
}

4）配置文件的说明

我们再为配置文件编写一个说明，让AI读取这个配置文件，省着每次都要把这么多说明输入给AI，很麻烦。

配置文件config.json中配置的参数含义如下：
1. normal 键值对表示UI的通用配置属性:
    1. bk-img:UI的背景图片路径(根目录为ui/png)， bk-img对应的值是图片路径;
    2. width:表示场景的宽度;
    3. height:表示场景的高度;
    4. 背景图片默认在最底层;
2. button 键值对中每一对键值对代表一个按钮UI，每个按钮的配置属性如下:
    1. type:UI的显示类型，可选值有"img"和"txt",当为img时，则显示一张图片，当为txt时，则显示文本；
    2. img:为按钮的图片路径(根目录为ui/png)，当type为"img"时有效；
    3. txt:按钮的文本内容，当type为"txt"时有效；
    4. centerX:按钮的中心X坐标；
    5. centerY:按钮的中心Y坐标；
    6. layer:按钮的层级，数值越大越靠上,最小为0,最大为5。
    7. 所有按钮组件有悬停效果、点击效果。
3. txt 键值对中每一对键值对表示一个文本UI，每个文本的配置属性如下:
    1. txt:文本内容；
    2. centerX:文本组件的中心X坐标；
    3. centerY:文本组件的中心Y坐标；
    4. layer:文本组件的层级，数值越大越靠上,最小为0,最大为5。
    5. font:文本组件的字体样式，默认为"Arial"。
    6. fontSize:文本组件的字体大小，默认为16。
    7. fontColor:文本组件的字体颜色，默认为"#000000"。
    8. fontAlign:文本组件的对齐方式，可选值有"left"、"center"、"right"，默认为"center"。

5）提示词

创建一个工程用来根据“UI”目录下的配置文件，给H5小游戏生成UI界面。

程序根据读取到的UI目录下的config.json配置文件的内容来自动生成UI。

配置文件的参数说明在config.md文件中，请详细阅读。

本工程基于phaser3.90版本创建，引用文件已经放到相应目录中。

生成全部工程文件后，不需要启动服务器。

5.代码生成及效果

我将提示词写到了“ai设计要求.md”文件中，这样只需要告诉qoder读取这个文件就可以了。

Qoder在了解了任务后，非常迅速的完成了开发工作。

工程文件下载：

AIGC助力游戏UI设计教程（工程源代码）资源-CSDN下载