一口气生成 uniapp 小程序！Claude 4 + Cursor，这波真的封神了！

上个月我试了下用 Cursor 搭配 GPT-4 写小程序，整体效率还可以，但说实话，GPT-4 在多轮代码生成上有点拉胯，经常跑偏，尤其是涉及页面联动、状态管理的时候……人还得手动兜底。

但最近 Claude 4 出来了！我看网上一堆人说 Claude 4 的代码理解能力、跨文档逻辑保持能力、推理能力都牛得一批，我一琢磨，这不正好可以拿它来试试“全自动生成 uniapp 小程序”嘛！

所以，这篇文章，我就用 Cursor + Claude 4 搞了一个完整的 uniapp 项目生成实践，而且是从项目结构到页面布局、再到逻辑实现，全自动生成，中间几乎没怎么敲键盘！可以说是AI接管开发的一次实测现场。

这篇文章重点讲三个内容：

1）Claude 4 到底强在哪？和 Cursor 如何配合得上天？

2）一个“速记 + AI 助手”的 uniapp 小程序怎么一步步做出来的？

3）生成过程里踩了哪些坑？哪些还得靠人肉兜底？

走起，干货满满！！

我之前试过用 Cursor + GPT-4 写一个记账类小程序，页面结构出来得还挺快，但是有几个问题：

• 状态管理写乱了，Vue 的响应式变量它搞不明白
• 跨页面组件通信基本靠猜，有时还漏了
• uView UI 元素能认出来，但用法常常错

后来我就放下这条路线了，准备手撸。

直到 Claude 4 出来，我又重新兴奋了！这货对代码的结构感知力强了不止一点半点，它能记住我前面写的页面，后面自动接得上，而且理解 uniapp 的 DSL（vue + script setup + json 配置）非常准确。

我随便丢了一段页面结构，它立马补全了我漏掉的 tabbar 配置，还主动告诉我某个字段必须配置 pagePath，否则小程序编译会报错……这细节，GPT 真没给我过！

而且，Claude 在 Cursor 里用起来特别爽，能直接开 Markdown 多轮对话，左侧代码编辑、右侧 prompt 操作，交互极流畅！

这次我做的是一个“速记 + AI助手”的小程序，场景类似于：

• 平时记录待办事项，快速标记优先级
• 重要事项可设置提醒、重复周期
• 有个 AI 助手页面，能根据速记内容自动总结、生成日计划
• 后台还会定时推送消息，提醒你要做啥

核心功能点：

速记功能

字段设计如下：

• 内容（content）
• 优先级（priority）
• 截止时间（deadline）
• 重要程度（importance）
• 标签（tags）
• 是否重复提醒（repeat）

AI助手功能

• AI 对话：输入一句话，自动生成分析
• 知识库：存储用户历史数据，支持搜索
• 定时推送：每日推送今日任务清单

页面结构

底部 tab 分为五个页面：

• 首页（dashboard.vue）：显示今日任务卡片
• 事项（tasks.vue）：全部待办事项管理
• 速记（quicknote.vue）：快速记录入口
• 助手（assistant.vue）：AI 对话与反馈
• 我的（profile.vue）：用户资料、设置

技术栈说明

这次用的技术组合如下：

• 框架：uniapp（HBuilderX）
• UI 库：uView 2.0
• 工具链：Cursor + Claude 4
• 运行环境：HBuilderX 3.8+，macOS，本地模拟器 + 微信开发者工具

初始化流程

我这边总结了几个关键步骤，给初学者也能照着上手：

1）HBuilderX 新建 uniapp 项目，选择 uView 模板

2）进入项目根目录，执行：npm install

3）打开 /uni_modules，用 HBuilderX 插件市场引入 uView2.0（新版已经自动注册全局组件了）

4）配置主题色、按钮样式、边距等全局样式到 uni.scss

5）运行预览，确认微信开发者工具正常连接、能跑起来页面

搞定这部分，项目骨架就算成型了！

AI 协同生成过程：Claude 4 + Cursor 爆炸组合！

提示词怎么设计？

这个太关键了！Claude 4 很聪明，但前提是你得“喂得好”。

我试了几个 prompt，最后效果最好的如下：

你是一个 uniapp + uView 小程序开发专家。

现在我需要你根据以下页面功能，逐步帮我生成完整的代码结构，包括 vue 页面代码、json 配置、script setup、uView 组件使用方式等。

第一个页面是速记页面，功能如下...

接下来，我把页面字段、数据绑定、交互逻辑一条条列出来，它就能一次性给出结构、代码、配置、说明！封神！

自动化流程是这样跑的：

1）我在 Cursor 里打开项目代码，右侧开一个 Claude 4 的 chat 面板 2）输入上面 prompt，它开始生成 vue 页面结构 3）生成完后我复制粘贴到对应页面，保存自动热更新 4）如果样式对不上，就把页面截图贴过去，Claude 会识别错的地方并修正！

有个细节惊艳到我了，它识别出我用了 u-cell-group + u-cell 显示事项条目时忘了绑定 border-bottom，导致页面看起来空一块，它居然能补出来！！

生成结果与微调

自动生成的页面效果如下：

• 首页：任务卡片 + 优先级徽标 + 一键完成按钮
• 事项页：任务列表 + 筛选器（重要、未完成）
• 速记页：form 表单 + picker + switch
• 助手页：u-chat + message 组件，仿 IM 界面
• 我的页：基本信息 + 清除缓存 + 反馈建议

常见问题及解决方案

问题1：图标加载失败 解决：Claude 默认用了旧版 uView 图标名，比如 icon-task，新版本需改为 u-icon name="list"，我手动搜了一下 uView 的新版图标列表，替换了一波。

问题2：生成 layout 无响应 Claude 偶尔卡住，我就用 Continue generating 接力继续它的思路，基本能衔接上

问题3：SVG 图标无法在小程序渲染 解决：用工具批量转成 PNG，用 u-image 显示；记得设置 mode="aspectFill" 保证适配！

问题4：消息推送逻辑 Claude 没法写 这个没办法，它不会配微信云函数，我自己去后台搞定了定时任务，关联任务数据库做触发。

我这边在模拟器上录了几张图，效果如下（限于图片就不展示，读者脑补下）：

• 首页的任务卡片支持拖动排序，Claude 自动写了 sortable-list，惊了
• 助手页面支持双向聊天，Claude 提供的 JSON schema 能自动解析 response 数据
• 速记页的表单输入完后直接本地存储，页面跳转首页刷新任务卡片（用的 onShow()）

整体体验是——非常流畅、结构合理、功能完整！

Claude 4 + Cursor 这组合，确实可以封神了！

对比 GPT-4，我发现 Claude 在代码结构保持能力、前后逻辑一致性上明显胜出，而且不容易“编瞎话”，这点太重要了！

我觉得对于新手、刚学 uniapp 的朋友，这套流程可以大大提高效率，尤其是：

• 页面结构交给 AI 生，省脑力
• 表单/样式错了贴个图就能自动纠正
• 初始化环境还是手动更高效点，AI 搞配置还是偏弱

总的来说，**“AI 生成 + 人工兜底 + 轻量修复”**这套路，是真香！

感兴趣的朋友可以试试 Cursor + Claude 4 搭个小程序玩玩，哪怕不上线，练练 AI 协作开发，也很有提升！