AI 开发图片压缩小程序（1000用户）

AI 开发图片压缩小程序（1000用户） AI 开发图片压缩小程序（1000用户） Modified July 20, 2025 回到微信开发者工具，编译运行，又报错了，完全看不懂这个报错，遂截图提交给 Cursor 让它优化 bug。 这个 bug 我看不懂，总之 Cursor 成功帮我解决了。 最终页面预览效果如下： 至此第一个版本的小程序已经能使用了，于是我第一时间申请了提交代码。 这个版本的图片压缩有点 bug，如果压缩质量选择比较大，比如 90%，图片会出现反向压缩。 遂第二个版本重点优化这个 bug。 四）优化图片压缩 bug 直接截图+自然语言告知 Cursor： 出现这个 bug 的原因是：这些图片本身已经高度优化，或者格式本身就很高效。 可以理解成出现这个问题的用户不是真实用户，他们在随便测试玩，对于真实需求的用户几乎不可能出现这个问题。 所以 Cursor 给的解决方案是加个提醒：当用户尝试压缩已经很小的图片时，会收到适当的提示，避免不必要的操作和失望。 加上提醒功能，提交代码，等待审核通过。 五）Deepseek 优化小程序 UI Cursor 设计的 UI 我感觉一般，接下来我让 deepseek 给我优化下。 准备好提示词：你是一名互联网高级 UI 设计师，我在做一款图片压缩的微信小程序，只有一个页面，请在不修改原意的情况下，请优化到炫酷一些，更加符合美学。 Cursor 写的页面样式： Code block YAML Copy page { background color: f8f9fa; font family: apple system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans serif; } .container { display: flex; flex direction: column; min height: 100vh; padding: 30rpx; box sizing: border box; } / 头部样式 / .header { display: flex; flex direction: column; align items: center; margin bottom: 60rpx; padding top: 40rpx; } .logo { width: 120rpx; height: 120rpx; margin bottom: 20rpx; } .title { font size: 40rpx; font weight: 600; color: 333; margin bottom: 10rpx; } .subtitle { font size: 28rpx; color: 666; } / 内容区域 / .content { flex: 1; width: 100%; } / 上传区域 / .upload area { display: flex; flex direction: column; align items: center; justify content: center; height: 400rpx; background color: fff; border radius: 20rpx; box shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05); margin bottom: 30rpx; padding: 40rpx; box sizing: border box; border: 2rpx dashed ddd; } .upload icon { width: 100rpx; height: 100rpx; margin bottom: 30rpx; } .upload text { font size: 32rpx; font weight: 500; color: 333; margin bottom: 10rpx; } .upload desc { font size: 24rpx; color: 999; } / 图片预览区域 / .image preview { background color: fff; border radius: 20rpx; box shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05); padding: 30rpx; box sizing: border box; } .preview img { width: 100%; height: 400rpx; border radius: 10rpx; margin bottom: 30rpx; } .image info { Deepseek 优化后的 wxss： Code block YAML Copy 回到微信开发者工具，编译运行，又报错了，完全看不懂这个报错，遂截图提交给 Cursor 让它优化 bug。 这个 bug 我看不懂，总之 Cursor 成功帮我解决了。 最终页面预览效果如下： 至此第一个版本的小程序已经能使用了，于是我第一时间申请了提交代码。 这个版本的图片压缩有点 bug，如果压缩质量选择比较大，比如 90%，图片会出现反向压缩。 遂第二个版本重点优化这个 bug。 四）优化图片压缩 bug 直接截图+自然语言告知 Cursor： 出现这个 bug 的原因是：这些图片本身已经高度优化，或者格式本身就很高效。 可以理解成出现这个问题的用户不是真实用户，他们在随便测试玩，对于真实需求的用户几乎不可能出现这个问题。 所以 Cursor 给的解决方案是加个提醒：当用户尝试压缩已经很小的图片时，会收到适当的提示，避免不必要的操作和失望。 加上提醒功能，提交代码，等待审核通过。 五）Deepseek 优化小程序 UI Cursor 设计的 UI 我感觉一般，接下来我让 deepseek 给我优化下。 准备好提示词：你是一名互联网高级 UI 设计师，我在做一款图片压缩的微信小程序，只有一个页面，请在不修改原意的情况下，请优化到炫酷一些，更加符合美学。 Cursor 写的页面样式： Deepseek 优化后的 wxss： 预览效果如下： 这个页面还是有点丑，所以又回到开头说的审美设计能力了，这里小林给大家演示一下，具体大家自己实践尝试。 相信看到这里的同学能看出来，这个小程序极其简单，从始至终我一行代码都没写，能很快跑出来，个人觉得我执行力还可以，hh，就这点值得去星球给贴子点个赞。（手动狗头） 三、小程序引流变现 引流变现是结果，是解决他人需求的回报，是给他人创造价值后的产物。 一）没有流量基础怎么做出有人使用的小程序？ 周日线下局我给来的圈友分享了个思路：如果你的小程序是在解决某类人群的需求，完全可以在自媒体账号更新你做小程序的过程细节，类似于养成。 这个过程反而解决了自媒体内容创作的问题，万一哪篇笔记爆了，小程序的用户有了，你的 IP 也起来了。 据我观察，小红书目前是比较好的平台，近期小红书也在全力推独立开发大赛，有心人可以去关注一下。 二）零基础的普通人如何利用 AI 编程来变现？ 小程序变现的最简单路径是赚平台的广告费，只需要 500 个用户即可开通流量主服务。 今天 AI 编程行动营开营还有人问：上线后能搞钱么？ 后续运营需要钱和时间吗？ 变现 AI 编程行动营会教的，教练可以保证百分百的交付诚意，但是能不能百分百执行就看大家自己了。 不能指望啥也不干，没有付出就躺赚，今天这个小程序我也是熬到凌晨 3 点才做到紧急上线的，想做成事得有付出，想清楚自己的筹码是什么。 结尾： AI 编程工具确实让技术门槛断崖式下降，但真正让产品活起来的，还是那颗愿意为他人解决问题的心，以及你的超强执行力。 大家好，我是小林，上周日在北京组了个 AI 编程的线下局，当场给来的观众展示了下怎么用 Cursor 做小程序，2 分钟就做出来个图片压缩的小程序。 当时就感觉功能很好用，晚上紧急半通宵上线了，早上起来利用 IP 优势推了一下，早上起来发现已经 1059 UV 了，来给大家深度分享一下近期我关于 AI 编程的思考。 春节用了 3 天做出小程序，上上周用了 1 小时，到今天只用几分钟，这里的迭代核心是我写需求文档能力在跃迁，能很快描述出来 Cursor 能理解的文字，这背后是大量的日积月累。 一、AI 编程需要编程能力吗？ 当下如果你想做一款比较复杂的项目，多多少少还是要能看懂点代码，但是随着 Manus 之类的工具出现，我预估最多两年，编程能力几乎可以忽略了。 这里面最重要的有两个点： 一是挖掘需求的能力，你能做一款解决什么人群的什么需求，包括引流，引流的核心也一定是基于能解决用户需求，最终产生价值裂变，而不是所谓的黑科技裂变，未来各个平台对于引流都会卡的很严，因为流量越来越贵。 二是审美设计能力，不然 UI 这块没有灵魂，就像小米 su7 的模仿+创新，以及 iPhone 的划时代意义一样。 美学能力不同的人，即使同一个工具，产生的效果绝对天差地别。 腹有诗书气自华这句诗在 AI 编程格外的重要，你得拥有自己的产品灵魂。 1、AI 编程具体是什么呢？ AI 编程指的是通过 AI 工具，不写代码，或者少写代码实现你脑海里的想法。 这里面的难点是怎么将脑海里面的抽象逻辑具象化成 AI 能理解的文字。 小林我写作日更 7 年了，刚好擅长这个，发现没，元能力的积累在 AI 时代一样重要。 2、AI 编程工具推荐？ 优先推荐 Cusor，目前体验最好的 AI 编程工具，就是需要付费。 如果你是零基础，除了 Cursor，国产 AI 工具，字节旗下的 Trae 可以考虑。 3、对于零基础小白而言，需要具备哪些能力和技能才能抓住这个机遇？ 不需要特别复杂的能力和技能，要求非常简单，但是很少有人能长期坚持。 这个要求是：拉满执行力，当你有个好 idea 的时候，要立刻马上去实现，就说今天这个图片压缩的小程序，做出来那一刻我就很吃惊，当晚就折腾优化 UI、备案，部署上线，从做出来到将近 1000 UV，加起来都不到 24 小时。 未来工具的同质化会越来越严重，但是如果你能在前期就抢占生态位，就深入人心，当同质化那天来临，你已经吃到很多红利了，届时发挥你的审美设计能力，聚焦精力在微创新即可。 二、Cursor 开发图片压缩详解 灵感来源于线下组局读者提供的 idea，我当场实现。 一）项目初始化明确自己的需求 1、技术栈 前端：JavaScript+WXML+WXSS 后端：为节省成本和快速部署上线，直接砍掉后端。 2、核心功能 单独一个页面，页面要求有个上传图片的入口。 点击上传即可从相册中选择图片。 对于上传的图片要有个压缩图片的功能，压缩后的图片可以保存下载。 3、前期准备 提前注册好一个干净的微信小程序，如果可以的话，优先申请备案，备案是免费的，但是审核时间很长。 前期无需花 30 元申请认证，不认证的小程序也是可以部署上线的，但是无法搜索和转发，前期零成本试错先。 二）梳理 Cursor 能理解的需求文档 梳理好之后，我直接创建个干净的文件夹，用 Cursor 打开，创建个 md 文档，将文字描述复制进来。 三）开发实操 使用 Cursor 的引用文件功能，引用需求文档，告知请根据文档里面的要求编写代码。 Cursor 会自动创建小程序所需要的文件。 用微信开发者工具打开根目录的文件夹： 点击编译看效果，结果出现了下述报错： 看报错是 images 文件夹下缺少 logo.png 图片。 回过头来看，发现 Cursor 给了说明： 原来是缺少两张图片，于是我用 AI 绘画工具画了两张图，放到指定位置，报错解决。