用Cursor写uni-app页面：从手动调样式到10分钟出活
上周五下午，产品扔过来一个需求：在uni-app项目里加一个“会员权益对比”页面，横向展示免费版、标准版、专业版三列，每列有功能列表、价格标签、推荐标识，还得适配不同屏幕尺寸。任务不算复杂，但我心里咯噔一下——这种多列布局加自适应，在移动端调样式经常要反复改flex比例、边距、圆角，甚至可能遇到不同机型下的像素偏差。以前我手动搞过一个类似的页面，从写结构到上线，光调试样式就花了整整一下午，最后还在某台老安卓上崩了布局。
这次我决定试试用Cursor（AI辅助编程工具）直接生成页面。结果出乎意料：从输入需求描述到拿到可用的.vue文件，只花了不到10分钟，生成的样式在真机上几乎不用改。这篇文章就聊聊这次实践的具体过程、遇到的坑，以及我对“AI写样式”这件事的真实感受。
为什么手动调样式经常翻车？我踩过的坑
在uni-app里写页面，尤其是带多列对比、自适应、卡片样式的页面，容易踩的坑有几个：
- flex布局的跨端兼容：比如在微信小程序里，某些flex属性（如gap）支持不全，需要手动用margin替代。我之前写对比列表时，因为flex-wrap和align-items的组合在不同端表现不一致，最后不得不写两套样式（H5和小程序分别调）。
- 像素级对齐：三列卡片，每列内容高度不固定，要求所有列的“购买按钮”底部对齐，同时卡片内的文字行高、间距要一致。手动设置min-height和padding很容易出现某列多一行文字就撑破布局的情况。
- 主题色和可维护性：产品要求推荐列（专业版）要有高亮边框和背景，其他两列保持普通样式。如果手动写，需要单独为推荐列加一个class，然后覆盖多个属性（border-color、box-shadow、背景渐变），改起来容易遗漏。
这些问题本质上是因为：样式本身就是“状态叠加”的结果，手动组合时很容易漏掉某个端或某个状态下的表现。而AI生成样式时，会一次性把所有相关属性都写出来，反而减少了遗漏。
我用Cursor生成页面的具体步骤
我的做法很简单：打开Cursor，在聊天窗口里输入一段描述，然后让AI生成一个完整的.vue文件。下面是我用的prompt（核心部分）：
请生成一个uni-app的.vue组件，用于展示会员权益对比页面。
要求：
- 三列横向布局：免费版、标准版、专业版，其中专业版为推荐方案，有高亮边框和背景。
- 每列包含：方案名称、价格（免费版显示“免费”，其他显示“¥XX/月”）、功能列表（至少5项，用勾选图标表示是否支持）、一个“立即开通”按钮。
- 功能列表每项文字左对齐，前面有对号/叉号图标。
- 三列卡片的按钮底部对齐。
- 适配各种屏幕宽度，在iPhone SE（小屏）上不溢出，在iPad（大屏）上三列均匀分布。
- 使用scss，变量定义主色#007AFF，推荐列高亮色#FF9500。
- 数据用页面内定义的数组模拟，方便后续改为接口调用。
Cursor生成的代码包含template、script、style三部分。我直接复制到一个新.vue文件里，导入到页面后，在HBuilder的预览里跑了一下，效果基本符合预期。但马上发现了一个问题：专业版的推荐标识（比如“推荐”标签）没有显示。检查代码后发现，AI只生成了高亮边框和背景，但没加标签元素。于是我在聊天里追加了一句：“在专业版卡片顶部加一个‘推荐’角标，使用绝对定位，背景色为#FF9500，白色文字。” 它很快就补上了。
代码思路与关键片段
生成的代码结构清晰，我挑几个关键点说一下：
-
数据定义：AI用了一个数组，每个对象包含name、price、features（数组，每个元素是{text, supported}）、recommended（布尔值）。这样后续改接口时，只需要替换数据源，样式基本不用动。
-
布局实现：外层用display: flex; justify-content: space-between;，每列用flex: 1; margin: 0 8rpx;。为了按钮对齐，AI在每列卡片内使用了display: flex; flex-direction: column;，然后让按钮区域margin-top: auto;。这个技巧很实用，避免了手动计算高度。
-
推荐列高亮：通过:class绑定，当item.recommended为true时，加上一个.recommended类，里面写border: 2px solid #FF9500; box-shadow: 0 4px 12px rgba(255,149,0,0.3);。这个做法比我之前手动加多个属性要简洁。
vue
推荐
{{ item.name }}
{{ item.price }}
{{ feat.supported ? '✓' : '✗' }}
{{ feat.text }}
立即开通 .compare-container {
display: flex;
justify-content: space-between;
padding: 20rpx;
}
.card {
flex: 1;
margin: 0 8rpx;
display: flex;
flex-direction: column;
border: 1px solid #e0e0e0;
border-radius: 16rpx;
padding: 24rpx;
background: #fff;
position: relative;
&.recommended {
border: 2px solid #FF9500;
box-shadow: 0 4px 12px rgba(255,149,0,0.3);
}
}
.btn {
margin-top: auto; / 关键：按钮自动对齐到底部 /
background: #007AFF;
color: #fff;
border-radius: 8rpx;
padding: 16rpx;
}
实际运行后我做的几处调整
虽然整体效果不错，但实际运行后我还是做了几处调整：
- 角标定位：AI生成的推荐角标用了position: absolute; top: -10rpx; right: -10rpx;，在真机上角标被卡片的overflow: hidden裁剪了一部分。我改成top: 0; right: 0;并调整了角标的border-radius和padding。
- 图标字体：AI直接用Unicode字符“✓”和“✗”，在小屏上显示正常，但在某些老旧安卓设备上，叉号符号可能显示成方框。我改成了用图片或iconfont图标，保证跨端一致性。
- 按钮点击状态：AI没有写hover-class或:active样式，导致点击按钮时没有反馈。我加了一个简单的hover-class="btn-hover"，设置透明度变化。
这些坑其实都不难修，但说明一个问题：AI生成的代码是“理想状态”下的版本，它不会自动考虑极端屏幕、老旧设备或交互细节。作为开发者，我们仍然需要根据自己的项目环境和测试结果做微调。
关于AI写样式的几点真实感受
这次尝试让我对AI辅助前端开发有了更实际的看法：
- 效率提升明显：从0到可用的页面，AI节省了至少70%的样式编写时间。特别是布局和自适应部分，AI能一次性给出完整的flex方案，避免了手动试错。
- 适合“模式化”页面：对比列表、表单、卡片布局这类有固定模式的页面，AI生成的质量很高。但如果是高度定制化的动画、复杂交互，AI目前还容易写出逻辑混乱的代码。
- 必须有人把关：AI生成的样式不会考虑你的项目已有的全局样式、组件库规范、版本兼容性。比如它用了gap属性，但在微信小程序的旧基础库上可能无效。所以，把AI当成一个“高级模板生成器”，而不是替代你的判断。
最后，建议大家在团队里可以试试这种工作流：先用AI生成页面骨架和基础样式，然后人工检查兼容性、交互细节，再接入真实数据。这样既能享受AI的效率，又不会丢掉对代码的控制权。如果你也试过类似的实践，欢迎在评论区聊聊踩过的坑。
