每到过节，不少小伙伴都会给自己的头像 P 个图，加点儿装饰。
比如圣诞节给自己头上 P 个圣诞帽，国庆节 P 个小红旗等等。这是一类比较简单、需求量却很大的 P 图场景，也有很多现成的网站和小程序，能帮你快速完成这件事。
这些小工具其实都是通过前端开发完成的，如果是在以前，我们想自己做个这种工具，你需要从 0 自己写代码，或者从 GitHub 上找个现成的开源项目。
但现在可是 2025 年，开发模式已经发生了巨变。利用 AI 工具，我们可以一行代码不写，制作出各种前端小网站。
首先选择一款 AI 工具，我个人日常是用 GPT 的，你也可以选择 Claude、国产 AI，在效果上有一些区别，但用法都是大同小异的。
你可以把 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 虽然替代不了程序员，但它可以帮助我们摸鱼啊！
👇🏻 点击下方阅读原文，获取鱼皮的编程学习路线、原创项目教程、求职面试宝典、编程交流圈子。
往期推荐
想当年，我也被毕业设计难倒了！
我的编程学习小圈子
我们又搞了个大事！
智能协同云图库项目，今晚加更！
讲了个免费的前端项目，小白也能学！
强烈推荐一个刷题神器，面试稳了
