【AI编程提效案例】真实体验借助Cursor+Coze一小时内从零实现一个文生图微信小程序

本文链接：https://blog.csdn.net/vison20080808/article/details/145377600

❝
上一篇“AI助力编程领域迅猛发展，从权威榜单看2025年代码生成能力哪家强～”提到AI编程IDE界的翘楚Cursor。

本篇实际体验一下如何使用Cursor、结合字节跳动Coze平台搭建的Agent开发一个简单的文生图微信小程序。

一起来感受AI给Coding带来的效率提升吧~
❞

1、Cursor下载/安装/注册

从Cursor官网（https://www.cursor.com/）下载安装程序后，如果正在使用windows，想安装至D盘（双击exe会默认C盘），Trick如下：

在PowerShell命令行中运行：cd <安装包文件夹>继续运行以下命令即可，安装至D:\Cursor目录下：Start-Process -FilePath ".\Cursor Setup 0.44.11 - Build 250103fqxdt5u9z-x64.exe" -ArgumentList /D="D:\Cursor" -Wait

在安装界面最后会引导跳转浏览器，完成用户注册。

新用户有2周免费的pro调用权限。可在淘宝低价购买or用网上分享的免费策略延长（删除账号、重新注册）。

2、微信开发者工具+Cursor代码生成与调试

（1）微信开发者工具创建新项目

（2）Cursor打开新项目文件夹：使用快捷键 ctrl+i调出右侧composer（Cursor最核心功能），选择模型claude-3.5-sonnet。

主要快捷键：

任意界面下，ctrl+i，进入composer，修改代码，选择是否accept在代码中，ctrl+k，聊天生成在代码中，ctrl+L，进行聊天（带上上下文）在chat面板中，Ctrl/⌘ + Enter，扫描索引代码库，包含进对话上下文在chat面板中聊天时，开头@Codebase，会进行详细的搜索

在composer面板输入框中，输入以下文字需求描述：

1.你是一个经验丰富的微信小程序UI工程师，熟悉微信的UI设计，设计风格简约明朗2.你将负责设计微信小程序的UI3.你现在已经在微信小程序的项目中，不用帮我生成项目目录结构4.我需要设计一个页面：页面有一个输入框，一个按钮5.输入框中输入内容，点击按钮后，会调用coze的api，调用成功后，会返回一个图片的URL，将图片的URL显示在页面上6.所有调整备注更新至readme.md

等待代码生成后，选择“Accept all”，即可接受所有代码的更新。

（3）微信开发者工具中完成代码编译，将编译告警文字直接复制粘贴至Cursor composer面板，Cursor会自动分析并更新代码。

（4）反复执行第3步，直到编译成功（不报错）即可

3、调用Coze服务接口

（1）在Cusor右侧的composer面板输入框中，输入以下文字需求描述：

参考https://www.coze.cn/docs/developer_guides/workflow_run，配置api接口，api会返回图片URL地址。参考API 文档： curl --location --request POST 'https://api.coze.cn/v1/workflow/run' \ --header 'Authorization: Bearer pat_hfwkehfncaf****' \ --header 'Content-Type: application/json' \ --data-raw '{ "workflow_id": "73664689170551*****", "parameters": { "user_id":"12345", "user_name":"George" } }' { "code": 0, "cost": "0", "data": "{\"output\":\"北京的经度为116.4074°E，纬度为39.9042°N。\"}", "debug_url": "https://www.coze.cn/work_flow?execute_id=741364789030728****&space_id=736142423532160****&workflow_id=738958910358870****", "msg": "Success", "token": 98 }

等待代码生成并更新，需按模型返回的建议，完成一些参数的配置：