第 21 卷

开始处理之后，页面会显示处理队列、可导出数量和预计节省体积。截

图里可以看到预计节省约 16.3MB。最下面是保存位置，可以选择输出

文件夹。这里我还是选择处理这些图片的文件夹。

打开输出文件夹后，就能看到刚才拖进去的一批图片已经被处理了。每

一张处理完的图片后面都会加一个后缀，比如 200K。

你也会看到，有几张图片超过了 200K，达到了 204K。原因是我们前

面在产品设计时做过取舍：如果没法在保证清晰的前提下压到 200K 以

下，就允许它稍微超出一点，而不是强行压缩到文字和二维码都看不清。

如果你的场景是绝对不许超过 200K，也可以在前面就告诉它，超过就

继续压缩。

到这里，这个小工具的基本产品流程已经跑通了：能上传、能处理、能

输出。

用设计插件放大效果

接下来问题来了：如果我们觉得它不好看怎么办？

工具是每天自己要用的，我当然希望它更好看。所以我们可以使用另一

个设计相关插件，继续优化它。

我会告诉它：

这个处理器基本的产品流程能跑通，但是界面非常不友好，显得比较传

统。我希望你作为一名视觉设计师，从用户体验的角度做出一个更适合

平常使用的工具界面，可以参考苹果部分产品的设计规则。

这就相当于找了一个设计师，让它进一步美化。

因为还是计划模式，它会先写一个计划方案。如果它写成英文，你可以

直接让它换成中文。

它会告诉你准备改哪些地方：界面更轻，更适合日常使用；重点优化导

出体验；空状态突出拖入图片即可处理。

我们先看它的原型方向，再让它通过视觉设计插件改一版。

在修改过程中，它还会检查一个我们一开始没提到的问题：如果这个网

页工具在手机上打开，会不会变形？比如手机宽度有没有横向溢出。虽

然我们一开始只说做网页小工具，没有说电脑还是手机，但 AI 会主动

补上这个检查点。这就是它能帮我们完善想法的地方。

改完一版之后，我们再看页面。第一版是产品原型，第二版就是设计优

化后的交互版本。拖入图片区域变得更大，规则展示也更清晰。

我选择几张图片试试。图片进入处理队列后，开始处理。处理完之后，

页面上有一个浮动的导出/下载区域，还加了一些小动效。这些视觉变

化看起来不大，但实际上会明显优化交互感受。

因为这是自己要用的工具，所以还可以继续叠加你喜欢的设计风格。

比如我觉得这一版不太好看，也没有个性。我可以继续说：

我觉得这个版本不太好看，并且完全没有个性。既然它是压缩器，有没

有可能做成一个铁匠铺一样的感觉，把图片一点一点压缩下去？请你从

视觉上考虑应该怎么呈现，做出 3 到 4 种完全不一样的风格，先让我看

一下。我确定之后，你再改这个工具。

这时候你就可以完全把它当作一个真实设计师。你可能不知道自己到底

想要什么风格，但可以让它先出几种不同方向给你看。

它会反问：铁匠铺这个方向，你希望视觉有多字面？是现代隐喻，还是

页面必须真的像一个铁匠铺？这里我选择现代隐喻。

接着，它会做一个预览页，展示几种不同风格：比如现代铁匠铺、精密

压铸机、暗房冲影室、玻璃工作台。每一种不只是颜色和布局不同，连

文案也会一起改。比如它会把图片送进压缩仓，或者把处理过程表达成

“锻压”。