如何用AI开发完整的小程序<7>—让AI微调UI排版

上一节我们介绍了如何让AI修改整体UI视觉效果。

不过有时候AI调整的并不理想,一些UI的布局还是需要微调。

比如已经实现的这个开始页面,我觉得标题太高了,这时候可以自己调,也可以让AI单独调,下面详细介绍。

一、手动调整 UI 布局

1、首先在wxml中找到标题对应的class名

我们发现代码中标题的代码结果如下:

<text class="main-title">修仙太难了</text>

这代表标题-修仙太难了是一个text(文本)类型,class="main-title"相当于给它起了英文名字main-title。

注意这些class名是AI自己定义的,大概率都不一样。

我们发现修仙太难了的class="main-title"。然后它又被包括在class="title-area"里面。

同时我们发现,单机版,slogan都被包在了title-area里面。

这就好像在界面上创建了一个大的区域命名为title-area(父容器),然后又在它里面画了main-title,sub-title和slogan(子组件)。

我修改一下title-area的颜色(如下图)就会很清楚的看到这个关系。

2、调整"修仙太难了"的排版布局

我们在wxss中搜索(Ctrl+f)title-area。(标题的父容器)

搜到的代码块如下,这些代码都是控制标题的排版布局,颜色,字体相关的。

比如现在在title-area中margin-top: 80rpx;我将其改为120,代表距离顶部更远,也就是往下调整一些。

如果你想知道每个字段分别都是啥意思,直接复制丢给AI让它解释即可,这里我就不介绍了。

二、总结说明

本节主要介绍wxml和wxss的关系,两个文件主要都是控制页面布局排版和效果的。

wxml控制整个页面有哪些元素,wxss中主要控制每个元素的位置,大小,颜色等。

当然其实有可以不要wxss,将wxss中的所有代码放到wxml里面也行。但是这样就不方便管理和调整了。

注意:我们其实也完全不需要知道代码意思,只需知道哪里是控制哪里的即可,然后修改调整哪里的时候,直接将相关的代码复制给AI让它修改即可。

比如我现在觉得踏入仙途按钮里面的字体没有上下居中,就可以直接让AI修改


以下按钮(踏入仙途)代码,中的文字没有上下居中,请优化:

然后把具体的按钮相关wxss代码丢给AI


以下是我微调之后的UI。

tips:Ctrl+/ 快速注释不想要的代码段,再按取消注释,当然也可以直接删掉

--完--

相关推荐
2501_948114241 分钟前
2026年大模型API聚合平台技术评测:企业级接入层的治理演进与星链4SAPI架构观察
大数据·人工智能·gpt·架构·claude
小小工匠3 分钟前
LLM - awesome-design-md 从 DESIGN.md 到“可对话的设计系统”:用纯文本驱动 AI 生成一致 UI 的新范式
人工智能·ui
黎阳之光19 分钟前
黎阳之光:视频孪生领跑者,铸就中国数字科技全球竞争力
大数据·人工智能·算法·安全·数字孪生
小超同学你好29 分钟前
面向 LLM 的程序设计 6:Tool Calling 的完整生命周期——从定义、决策、执行到观测回注
人工智能·语言模型
墨风如雪1 小时前
玩转本地 AI 的“第 0 步”:Node.js 环境保姆级安装教程
aigc
智星云算力1 小时前
本地GPU与租用GPU混合部署:混合算力架构搭建指南
人工智能·架构·gpu算力·智星云·gpu租用
jinanwuhuaguo1 小时前
截止到4月8日,OpenClaw 2026年4月更新深度解读剖析:从“能力回归”到“信任内建”的范式跃迁
android·开发语言·人工智能·深度学习·kotlin
xiaozhazha_1 小时前
效率提升80%:2026年AI CRM与ERP深度集成的架构设计与实现
人工智能
枫叶林FYL1 小时前
【自然语言处理 NLP】7.2.2 安全性评估与Constitutional AI
人工智能·自然语言处理
AI人工智能+1 小时前
基于高精度身份证OCR识别、炫彩活体检测及人脸比对技术的人脸核身系统,为通信行业数字化转型提供了坚实的安全底座
人工智能·计算机视觉·人脸识别·ocr·人脸核身