【UI教程】更省积分，也更加精准还原布局的UI制作方案

相信各位使用嗒啦啦的maker在制作各种UI界面时，少不了跟嗒啦啦的斗智斗勇，然而这种斗智斗勇的结果往往是你盯着嗒啦啦给出的雷霆UI怀疑自己刚才到底给这个憨货交代了什么......

那么有没有一种既省积分，又还可以精确还原自己的布局意图，而且还轻松的方法呢？

（当然是有了，不然我发帖干嘛）

先展示一下嗒啦啦中实现的效果，在嗒啦啦中制作该界面效果只使用了这一次对话：

然后就是我们这次教程中真正出力的核心，deepseekV4的识图模式，先给各位看一下在deepseek中调试完成，导入嗒啦啦前的效果：

这种处理方式的好处相信各位已经看到了，不管是界面还原度上，还是积分消耗上，都要远优于你跟嗒啦啦进行反复对话得到的结果，下面我们就可以正经讲讲这到底是怎么做的。

首先，你需要一张UI布局图，可以是自己绘制的，也可以是ai跑的，总之，需要现有一张布局图。

（如果不知道怎么用ai跑出来质量相对较高的布局图，可以蹲下我后面的教程）

这次我们使用如下图片进行教学内容：

接着，登录网页版的deepseek，选择识图模式，打开深度思考，上传我们选择的这张布局图，输入“描述图片内容”：

（上面这一步其实是可以省略的，不过我在测试过程中发现如果不加这一步，D指导给出的样式代码可能无法运行或者界面与图片布局有出入）

接下来就是真正开始的环节，输入指令“根据图片反推该界面的样式代码”

这一步D指导通常就能给出一套如下图情况的可直接运行的样式代码，点击运行就可以直接看到对应的UI界面。如果出现无法运行的情况，可以直接告诉他“给你一个可以直接运行的代码版本”

其实到这里，如果D指导给出的样式代码呈现出的UI效果你基本满意的话，就可以直接复制对应的样式代码到嗒啦啦进行复现了，不过考虑到肯定有maker会有在这里进一步修改的需求，所以我们多提一嘴如何在D指导中修改这个UI界面。

简单的，可以用文字语言描述的情况，我们直接对话即可：

各位应该已经注意到了，D指导在这次修改中给出的代码只是片段，实际运行出来的效果也并非之前的完整界面。

这种情况我们只需要让他整合为完整代码就可以获得能够正常预览的可运行代码了。

可以看到修改也正常适配了。

如果是单凭文字描述无法精确表述的情况，使用任意截图工具，截图后对需要修改的部分进行标注，之后上传该图片，用文字辅助说明修改需求就行。

接下来就是如何将D指导给出的样式代码，在嗒啦啦中还原的办法了。

首先，复制我们在D指导中调整好的最终版本样式代码。在嗒啦啦中根据我们需要修改的UI页面输入以下指令，比如我这里是营地界面的UI，那么指令就是“根据以下样式代码，修改营地界面的UI布局：”

通常只需要这一次对话，就可以完整还原你之前在D指导中调试出的UI界面。

如果已经应用到自己项目中之后，因为功能调整或者增加有了修改布局的需求，那么可以通过嗒啦啦自己的截图标记功能进行修改。

圈出修改区域后正常和嗒啦啦对话就行。如果是比较大的修改，比如界面重做一类的情况，那我还是更推荐去D指导里改或者干脆重新做一份。

至于UI做到这一步后，怎么精确替换为自己做好的美术素材，这个我也还在研究，欢迎交流讨论。

（另外，求积分，孩子激活晚了没蹭到老用户的计划2，现在就还剩1万出头了，填问卷的那3000也没到账，提档的申请也还没反应，现在随便一句话基本就是几百积分没了，剩的这点估计连主要功能模块都做不完，赈灾粮什么时候才能下来啊？！）