一个产品经理的「AI 开发」实验报告
在我上一篇文章中《震撼！全程零代码，我用 Cursor 几小时内从零搭建了一个企业级密码管理系统》，说到了用AI全自动开发+部署了一个端到端的密码管理系统，整个过程确实是全AI实现，我只负责指挥，但是最终的系统距离实际上生产交付，还是有一定差距。因此，我再次尝试了下，完全用AI来做一个 图片处理工具（也就是下文的轻图这个网站），看看到底是不是靠谱的。
为什么做图片处理工具呢？一直想做一些自己日常工作能用到的工具网站，而图片可以算是日常工作里非常高频的处理对象，不管是 产品经理、 前端开发 还是 UI设计师，甚至包括 后端开发 ，都会或多或少的需要处理图片——图片压缩、图片格式转换、二维码生成、二维码解码、图片Base64编解码等等。
一、先问你一个问题
你有没有想过：不写一行代码，能不能做出一个功能完整的网站？
半年前，我也不信。
直到我亲手做出来了——轻图 (image.mid-life.vip/) ，一个涵盖图片裁剪、压缩、格式转换、九宫格切图、拼图、二维码、Base64 等十几种功能的在线工具站。
全程零代码。 我只负责提需求、验收效果，剩下的，全部交给 AI。
今天，我想把这段经历写下来，分享给每一个好奇「AI 到底能干什么」的人。
二、从「想法」到「上线」：我做了什么？
我的角色：需求输出 + 效果验收
在整个开发过程中，我的工作只有两件事：
-
说清楚我要什么
比如：「用户上传图片后，要在浏览器里完成压缩，不能上传到服务器」「九宫格切图要支持圆角」「证件照压缩要能调到 200KB 以内」…… -
验收效果
打开页面，点点看，功能对不对、体验好不好。不对就继续提需求，对了就进入下一项。
没有写代码。 没有配环境。没有查文档。没有 debug。
所有实现，都由 AI 根据我的需求描述，一步步完成。
AI 做了什么？
从项目架构、技术选型、到每个功能模块的实现，AI 负责：
- 设计
monorepo结构，拆分image-core、image-ui、shared等包 - 实现图片压缩、格式转换、裁剪、马赛克、文字、水印等核心逻辑
- 接入 WebAssembly（MozJPEG、OxiPNG 等）做高质量压缩
- 用 FFmpeg.wasm 在浏览器里完成视频转 Live Photo
- 搭建 Next.js 前端、SEO 优化、帮助中心、教程页……
一个正常需要 2–3 人、1–2 个月才能做完的项目，在 AI 的协助下，以「需求驱动」的方式，被拆解成一个个可验收的小任务，高效推进。
三、为什么我敢说「你的图片绝对安全」？
这是轻图最让我骄傲的一点：所有图片处理，100% 在浏览器本地完成。
技术原理（通俗版）
当你把图片拖进轻图：
- 图片只存在于你的电脑/手机内存里
- 压缩、裁剪、格式转换……全部在你的浏览器里用 Canvas、WebAssembly 完成
- 没有任何一张图片会被上传到我的服务器
换句话说：你的照片，从打开网站到下载完成，从未离开过你的设备。
为什么这很重要？
我们每天都会遇到需要处理图片的场景：
- 报名考试，证件照要压缩到 200KB
- 发朋友圈，想做九宫格切图
- iPhone 拍的 HEIC 在电脑上打不开，要转 JPG
- 电商主图、简历照片、社交头像……
很多在线工具会要求你「上传」图片。上传意味着：你的照片会经过别人的服务器。
而轻图不需要上传。 打开网页，选图，处理，下载——全程在本地完成。隐私和安全，从设计上就被保证了。
这也是我在需求里反复强调的一点：「全部在浏览器端实现，图片不上传服务端。」 AI 在实现时，严格遵循了这一点。
四、AI 开发，效率到底有多夸张？
传统开发 vs AI 协作
| 环节 | 传统方式 | 我的方式 |
|---|---|---|
| 需求沟通 | 写 PRD、开会、反复对齐 | 直接跟 AI 说「我要什么」 |
| 技术选型 | 调研、对比、写方案 | AI 给出建议，我拍板 |
| 写代码 | 程序员一行行写 | AI 按需求生成 |
| 调试修复 | 查日志、断点、改代码 | 描述问题，AI 改 |
| 文档/教程 | 单独安排人写 | AI 按结构批量生成 |
最大的变化： 我不再需要「等排期」「等开发」「等联调」。
有想法 → 提需求 → 验收 → 迭代。节奏完全掌握在自己手里。
一个具体例子
有一次，我需要加一个「图片 Base64 编解码」功能。
我对 AI 说：
「加一个工具页，用户粘贴 Base64 能预览图片，上传图片能转成 Base64，支持多种输出格式，全部本地处理。」
几分钟后，功能上线。
我打开页面，试了几种格式，确认没问题，就发布了。
没有拉会、没有排期、没有「下周才能做」。 这就是 AI 带来的效率飞跃。
五、轻图能帮你做什么？
轻图目前支持这些功能（全部免费、无需注册）：
基础编辑：裁剪、旋转、镜像、马赛克、添加文字、水印、背景
模板切图：九宫格、四宫格、六宫格、圆角裁切
模板拼图：长图拼接、多图模板拼图
格式转换：JPG、PNG、WebP、GIF、SVG 互转，视频转 Live Photo
调整尺寸：按像素、百分比或社交平台预设（微信、小红书、抖音等）
图片压缩：智能压缩，可调质量，支持证件照等场景
二维码：链接/文本转二维码、美化、解码
Base64：图片与 Base64 互转
所有功能，打开浏览器就能用，图片不会上传，隐私有保障。
六、如果你也想试试「AI 开发」
我的几点体会：
-
需求要具体
「做一个图片网站」太模糊。「做一个在浏览器里压缩图片的工具，支持 JPG/PNG，可调质量，不上传服务器」——这样 AI 才知道要做什么。 -
验收要严格
AI 生成的代码不一定一次就对。你要会「挑毛病」：这里不对、那里体验不好。迭代几次，效果会越来越好。 -
选对工具
我用的是 Cursor 等 AI 编程助手，配合结构化的需求文档（spec）和项目规范。好的工具 + 清晰的需求 = 事半功倍。 -
从一个小项目开始
不必一上来就做「大系统」。先做一个单页工具、一个小功能，验证整个流程，再慢慢扩展。
七、技术延伸：如何让 AI 更好地理解需求？（Spec Kit 工作流）
如果你对技术实现感兴趣，可以继续往下看；否则可以直接跳到结尾。
轻图从 0 到 1 的开发过程中，我采用了 GitHub Spec Kit 倡导的 Spec-Driven Development（规格驱动开发） 工作流。简单说：先写好「要做什么」，再让 AI 按规格实现「怎么做」，而不是直接让 AI 自由发挥。
Spec Kit 是什么？
Spec Kit 是 GitHub 开源的 AI 编码工具包，核心理念是：规格（spec）是可执行的——它不只是文档，而是能直接驱动 AI 生成符合预期的代码。
我的工作流：五步走
| 步骤 | 做什么 | 我的体会 |
|---|---|---|
| 1. Constitution | 建立项目原则（代码质量、测试标准、性能要求等） | 相当于给 AI 定「宪法」，后续所有决策都参考它 |
| 2. Specify | 用自然语言描述功能需求（要什么、为什么） | 只讲业务，不讲技术栈；越具体，AI 输出越准 |
| 3. Clarify | 对模糊点提问、澄清，把答案写回规格 | 在写计划前做，能大幅减少返工 |
| 4. Plan | 确定技术栈和实现方案 | 这时才谈框架、架构、依赖 |
| 5. Tasks → Implement | 拆成可执行任务，让 AI 按顺序实现 | 任务有依赖关系，AI 会按正确顺序执行 |
Spec Kit 最佳实践（我的总结）
-
先定原则，再写需求
用/speckit.constitution建立项目「宪法」，让 AI 在写代码时自动遵守（如：所有文档用中文、图片处理必须浏览器端完成）。 -
需求阶段不聊技术
在 Specify 阶段，只描述「用户要什么」「业务规则是什么」，不要提前指定「用 React 还是 Vue」。技术选型留给 Plan 阶段。 -
澄清优先于计划
用/speckit.clarify在写实现计划前，把规格里的模糊点、边界情况问清楚。否则 AI 会按自己的理解实现，容易偏离预期。 -
多步细化，不要一次到位
Spec-Driven 强调「分步求精」：先有规格 → 再澄清 → 再计划 → 再拆任务 → 再实现。每一步都有产出，可验收。 -
任务要有依赖和顺序
/speckit.tasks会生成带依赖关系的任务列表，AI 按顺序执行，避免「还没建好数据模型就先写 API」这类问题。 -
实现前做一致性检查
用/speckit.analyze在实现前检查 spec、plan、tasks 三者是否一致，减少实现阶段的返工。
这套流程让「需求 → 代码」的路径变得可预测、可追溯。如果你也在用 Cursor、Claude Code 等 AI 编程助手做从 0 到 1 的项目，不妨试试 Spec Kit。
八、最后，欢迎你来用轻图
轻图已经上线，所有功能免费开放。
无论你是要压缩证件照、做九宫格、转格式，还是生成二维码——打开浏览器，选图，处理，下载。
你的图片，全程只在你自己的设备里。
如果你觉得这篇文章有启发，欢迎转发给身边对「AI 开发」或「隐私安全」感兴趣的朋友。
也欢迎在评论区聊聊：
你用过 AI 做过什么？效率有没有飞起来？
轻松处理每一张图，在线完成裁剪、格式转换、拼图等常用操作。
轻图 · 免费在线图片处理工具
