前言
在前次"AI编程实战"分享中，我尝试了用 Cursor 搭配 Claude 4 直接实现一套 uniapp 应用，架构和功能生成的结果还是挺不错的。
《AI编程实战：Cursor+Claude4，一口气生成uniapp小程序 - 掘金》
但是前一次未重点关注 UI 方面，提示词也没有专门优化，生成的界面效果非常一般。
这次，我们就针对 UI 进行一下美化，看看 Cursor + Claude 4 在审美方面是否有所提升。
前期回顾
简单回顾下上次的主要工作：
- 完成了 uniapp 项目的初始化，包括集成 uView2.0 组件库；
- 利用 AI 快速生成了项目的整体结构和主要功能页面（暂未接入API）；
- 通过 SVG 方式自动生成了 tabbar 图标；
- 针对部分 uView 图标显示异常，进行了手动修复。
好了，进入今天的主题。
首页 UI 美化
确定风格
第一步先基于"首页"进行美化尝试，以便确定美化风格，再应用到其它页面。
UI 美化，我之前尝试过以下几种方式，给大家参考：
第一种：给出纲领性的提示词，让 Cursor 自己发挥。
这个就是纯看 AI 的审美了，适合对设计没有太多要求的场景。
第二种：描述基本要求，由 AI 帮忙生成提示词，自己修改后，再交给 Cursor 实现。
这个方式适合有一定想法，但是没有设计基础，不大好准确描述出设计效果的情况。
第三种：手写详细的提示词，让 Cursor 帮你生成预期的 UI 风格。
极其需要设计基础，因为只有恰当的用词，才能让 AI 更准确地实现出想要的效果。
第四种：找个喜欢的设计图，让 Cursor 一比一还原效果。
这个方式适合有具体设计图的情况，可以直接让 AI 按照图片进行实现。
第五种：找个喜欢的设计图，由 AI 提取设计要求，作为提示词的一部分，让然后由 Cursor 实现
这个适合有合适目标图，但是没有自己的设计师出图，不直接使用图片一比一，是防止 AI 受界面各种元素影响，无法仅仅聚焦于设计风格。
今天，我们选择"第五种"进行尝试。
下面还有很长的设计要求，大家可以根据需要删减。
这里强调一下，AI 生成的提示词一定要经过人工的确认和调整，不然很容易掺入一些 AI 自己的理解。
优化生成
提示词
markdown
请针对当前的home进行美化，但不要更改显示内容，具体要求如下：
## 色彩系统
- **主色调**: 蓝色系 (#007AFF, #4A90E2)
- **辅助色**: 绿色、橙色、红色作为功能色
- **背景色**: 纯白色 (#FFFFFF)
- **文字色**: 深灰色 (#333333) / 中灰色 (#666666)
- **分割线**: 浅灰色 (#E5E5E5)
## 布局特征
- **卡片式设计**: 圆角矩形卡片，阴影效果
- **栅格布局**: 整齐的网格排列
- **留白充足**: 元素间距合理，视觉透气
- **顶部导航**: 简洁的标题栏设计
## 组件元素
### 按钮设计
- **主按钮**: 蓝色背景，白色文字，圆角设计
- **次要按钮**: 白色背景，蓝色边框，蓝色文字
- **图标按钮**: 圆形背景，单色图标
### 卡片组件
- **文件卡片**: 缩略图 + 标题 + 副标题
- **功能卡片**: 图标 + 文字描述
- **列表卡片**: 头像 + 多行文字信息
### 图标风格
- **线性图标**: 细线条，简约风格
- **填充图标**: 圆形背景，白色图标
- **品牌图标**: 彩色，识别度高
## 交互特征
- **点击反馈**: 轻微阴影或背景色变化
- **加载状态**: 骨架屏或loading动画
- **手势操作**: 滑动、长按等移动端交互
- **导航逻辑**: 底部tab + 顶部导航的双层结构
## 文字规范
- **标题**: 16-18px，加粗，深色
- **正文**: 14-16px，常规，中灰色
- **辅助文字**: 12-14px，浅灰色
- **按钮文字**: 14-16px，中等粗细
## 视觉特色
- **现代简约**: 去除多余装饰，专注功能
- **扁平化设计**: 减少渐变和立体效果
- **一致性**: 相同功能使用统一的视觉语言
- **移动优先**: 针对触摸交互优化的尺寸和间距结果
效果
后续，又对首页做了以下优化：
- 个人感觉圆角卡片不够简洁，调整卡片横向撑满。
- 优先级等 tag 标签颜色调整，直接采用设计要求中的色值。
这些工作太过简单，就不再赘述。
整体 UI 美化
确定好风格后，我们就可以按照这个风格对整个项目进行界面美化了，也可以像我一样只针对几个需要美化的页面。
上下文
刚才美化的"首页"文件。
提示词
按照同样的设计要求，优化以下页面，注意结合各个页面的业务需求，业务优先。
页面：
速记列表（原事项列表）
我的页面结果
效果
大的风格样式已经调整完了，下面针对一些不太通用的地方进行微调。
界面微调
主要微调以下两个地方：
- 速记列表的筛选样式，这里主要展示明确修改需求的场景。
- 优先级选择样式，这里给大家展示下多个修改意见同时修改的效果。
速记列表的筛选样式
个人比较喜欢简洁的效果，直接指定了 uView2.0 的顶部标签效果。
提示词
速记列表筛选效果优化，采用uview2.0的u-tabs标签。结果
效果
优先级选择样式
提示词
markdown
1. 优先级备选项太丑了，按照统一的设计要求优化一下
2. 语音录入移到"保存速记"按钮下方，根据页面元素优化大小，并去掉卡片背景结果
效果
小结一下
"速记列表的筛选样式"由于是指定的组件，微调效果很不错。
"优先级选择样式"中调大输入框高度的需求，实现的就不是很好。
我期望的效果是：
全屏高度减去下面固定高度后自动适配，很明显，AI 这里没有理解到，后续我就保留了根据输入自动调整高度的效果。
但是类似程度的需求，在功能生成或者架构设计方面，Cursor + Claude 4 往往都能够 get 到的。
结语
其实，UI 界面还有不少细节可以继续优化，本文只是选取了几个具有代表性的场景做了展示。后续如果有更多完善和新的优化思路，会第一时间和大家分享，敬请期待！
整体体验下来，Cursor + Claude 4 在 UI 美化方面还是挺能打的，但是，尚未达到 Claude 4 在整体结构生成和思维能力提升上的程度，也可能是我使用的还不够深入，后续再研究研究。
好了，今天就到这里了，祝大家端午节快乐!