一句话，我让AI帮我做了个P图网站！

一句话，我让AI帮我做了个P图网站！

每到节日，不少小伙伴都会给自己的头像P个图，加点儿装饰。比如圣诞节给自己头上P个圣诞帽，国庆节P个小红旗等等。这是一类比较简单、需求量却很大的P图场景，也有很多现成的网站和小程序，能帮你快速完成这件事。

这些小工具其实都是通过前端开发完成的，如果是在以前，我们想自己做个这种工具，你需要从0自己写代码，或者从GitHub上找个现成的开源项目。但现在可是2025年，开发模式已经发生了巨变。利用AI工具，我们可以一行代码不写，制作出各种前端小网站。

首先选择一款AI工具，目前市面上可以选择GPT、Claude等，效果上有一些区别，但用法都是大同小异的。你可以把AI当成一个“真人”，你想让它做事，就必须给它传递尽可能清晰明确的指令，必须要让它知道自己要做什么、要达到什么目标。至于具体怎么做，你可以完全交给它。

那现在我们要开发一个“给头像添加圣诞帽”的小网站，就需要给AI提需求，比如先来个一句话需求：

请你帮我开发一个单页面网站，用户可以上传本地图片，并且自由移动圣诞帽到图片的任何一个位置，最后点击按钮可以下载【圣诞帽合成到原图上】的新图片。

AI的回复如下，生成了一堆代码。现在GPT对交互做了升级，生成代码时会自动给你打开一个编辑器界面：

我们复制代码到一个新的HTML文件中，然后需要修改一下圣诞帽图片的地址为自己本地找的图片，因为AI并不知道你需要什么样的圣诞帽，网上找的图片也可能由于跨域或防盗链等原因无法正常加载。

<div id="editor-container">
  <img id="uploaded-image" src="" alt="Uploaded Image" style="display: none;">
  <img id="hat" src="你的圣诞帽图片地址" alt="Santa Hat" style="display: none;">
</div>

双击运行网站，效果如图：

丑是丑了点，但是功能已经可以正常使用了，整个过程不到1分钟，就完成了这款工具网站。

当然，前面也说了，在给AI提需求时，必须给它传递尽可能清晰明确的指令。它完成的效果是否符合你的预期，取决于你提需求的本领了。别拿这不当回事，程序员以后的竞争很有可能从写代码的技术转变为提需求的能力。

那我们再提一些更精确的需求：

再优化一下网站，要求如下：
1. 给整个网站增加圣诞节的氛围，可以利用Emoji表情、网络图片、以及样式代码实现
2. 优化页面的样式，使得图片不要太宽或太高，优化按钮的展示样式等
3. 将网站文案改为全中文，并优化表达为“活泼”的风格

提出新的需求后，AI会在原有代码基础上进行修改，一会儿就给出了结果：

这次的效果明显好了很多，已经能拿去给别人用了~

你还可以在此基础上，让AI帮你新增图片裁切、放大缩小、旋转角度等P图常用的功能。

目前来说，需求的上下文越少，越适合使用AI生成。这里的“上下文”可以理解为一些背景信息，比如你让AI生成“鱼皮的个人博客”，如果不指定上下文“鱼皮是指程序员鱼皮这个真正的man”，AI可能就理解成可以吃的那种鱼皮了。

所以，目前AI非常适合生成纯前端的、单页面的、单个功能的应用。当然，这不代表AI不能应用于复杂的项目中，在我们常用的开发工具比如JetBrains、VS Code中都有AI插件，有些插件会将你项目中的文件作为上下文，来帮你生成和优化代码。效果就是，AI可以预判到你接下来要写什么代码，而你只需要选择是否接受AI的答案就好了：

像现在AI开发工具Cursor、Windsurf都非常火，它们将AI和代码编辑这件事深度结合，你可以直接在开发工具中通过不断地向AI提问，让它帮你生成一个完整的大项目，而不只是一个单页面网站：

我团队同学用Cursor比较多，它是支持自主选择AI大模型的，可以根据生成效果选择：

关于Cursor就不过多介绍了，只是一个工具，界面和VS Code还很像，下载之后摸索一下就差不多了。

通过这篇文章，希望大家能get到利用AI提效的思路吧，AI虽然替代不了程序员，但它可以帮助我们摸鱼啊！