关注 刘白 和我一起观察这个世界的秩序

图片编辑器真实界面

这是刘白的第 058 期分享

作者：刘白

来源：刘白（ID：organizerliubai）

我最近用 AI 编程做了一个自己的图片裁剪小工具。它可以打开图片、拖动裁剪框、做圆形裁剪、调整圆角、把图片分割成几块，还能选择 PNG、JPEG 或 WebP 保存。视频里展示的是最终效果，下面这套方法，你也可以拿去改成自己的小工具。

你不需要一开始就会写代码，也不需要先学完整的前端知识。更现实的做法是，把你想要的工具说清楚，让 AI 先生成一个能跑的版本。然后你一边测试，一边把问题反馈给 AI，让它继续改。

01

先把需求说小

很多人一开始用 AI 编程，容易把需求说得太大。比如直接说“帮我做一个图片编辑软件”，AI 很可能会生成一堆复杂功能，但不一定好用。更好的方式是先说一个很小、很明确的场景。

这次我的需求就是：我只想快速裁一张图，不想打开复杂软件，也不想被广告和收费打断。所以第一个版本只需要完成四件事：上传图片、显示图片、拖出裁剪区域、保存裁剪结果。需求越小，AI 越容易一次做出能用的东西。

你也可以先这样问自己：我每天反复遇到的一个小麻烦是什么？我希望点几下就完成什么动作？先把这个动作写清楚，再让 AI 开始写代码。

02

给 AI 一段清楚的第一版提示词

第一段提示词不需要很高级，但要具体。你要告诉 AI 工具做什么、界面有什么、用户怎么操作、最后输出什么。下面这段就可以作为这类小工具的起点。

提示词参考：

这个提示词的重点不是一次做完所有功能，而是先要一个可以运行的版本。只要能上传图片、看到画布、完成一次裁剪，后面的功能都可以继续加。AI 编程最重要的节奏是先跑起来，再慢慢修。

裁剪图片

03

跑起来以后，马上测试

拿到第一版代码后，不要急着继续加功能。先在浏览器里打开页面，上传一张普通图片，试试能不能拖出裁剪框。再点裁剪和下载，看输出的图片是不是你想要的结果。

测试时不要只说“有问题”，要把现象说具体。比如“裁剪框拖动时位置偏了”“图片太大时画布超出屏幕”“下载按钮点了没有反应”。你描述得越具体，AI 越容易修对。

可以这样继续问 AI：

提示词参考：

裁剪后的结果

04

再加真正有用的功能

第一版稳定以后，再加你真正想要的功能。这个图片工具后面增加了圆形裁剪、圆角裁剪、图片分割、单张下载、全部下载，以及 PNG、JPEG、WebP 格式选择。每次最好只让 AI 加一组相关功能，不要一次把所有想法都塞进去。

比如你想加圆形裁剪，可以单独发一段提示词。告诉 AI 保留现有功能，只新增“圆形裁剪模式”，并且按钮状态要清楚。这样做的好处是，出了问题也知道是哪一步改坏的。

可以这样说：

提示词参考：

图片分割设置

05

想日常使用，就继续打包

网页工具能用以后，如果你只是自己偶尔用，直接保存这个文件夹就够了。打开 `index.html`，上传图片，处理完下载，这已经能解决很多小问题。如果你想更像电脑软件一样使用，可以继续让 AI 帮你做成桌面应用。

这次工具后来也做了电脑应用版本，并且可以配合浏览器右键菜单使用。这个阶段可以让 AI 加 Electron 打包，或者做一个浏览器扩展，把网页里的图片发送到编辑器。对小白来说，不用一开始理解这些技术，只要知道它们分别对应“电脑应用”和“浏览器扩展”。

你可以这样继续提需求：

提示词参考：

保存格式选择

最后的话

用 AI 编程做小工具，关键不是一开始就做得多复杂。更好的方法是先找一个很小的痛点，把它说清楚，让 AI 做出第一版，然后你像普通用户一样测试。发现哪里不好用，就把问题原样告诉 AI，让它继续改。

如果你也想做自己的工具，可以从一个每天都会遇到的小麻烦开始。不要先想“我要做一个完整软件”，先想“我想把哪一个动作变简单”。只要这个动作足够清楚，你就已经有了第一个 AI 编程项目。

END

如果你也在做自己的工具系统，欢迎继续关注刘白人生架构

↓↓↓↓↓

相关推荐阅读：

我做了一个人生六维管理系统：不是记录更多任务，而是减少脑子里的混乱

如何做到：每周工作4小时

重启运动习惯有多难，我实测的几个习惯现在都怎么样了