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

每到过节，不少小伙伴都会给自己的头像 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 虽然替代不了程序员，但它可以帮助我们摸鱼啊！

更多编程学习资源

• Java前端程序员必做项目实战教程+毕设网站

• 程序员免费编程学习交流社区（自学必备）

• 程序员保姆级求职写简历指南（找工作必备）

• 程序员免费面试刷题网站工具（找工作必备）

• 最新Java零基础入门学习路线 + Java教程

• 最新Python零基础入门学习路线 + Python教程

• 最新前端零基础入门学习路线 + 前端教程

• 最新数据结构和算法零基础入门学习路线 + 算法教程

• 最新C++零基础入门学习路线、C++教程

• 最新数据库零基础入门学习路线 + 数据库教程

• 最新Redis零基础入门学习路线 + Redis教程

• 最新计算机基础入门学习路线 + 计算机基础教程

• 最新小程序入门学习路线 + 小程序开发教程

• 最新SQL零基础入门学习路线 + SQL教程

• 最新Linux零基础入门学习路线 + Linux教程

• 最新Git/GitHub零基础入门学习路线 + Git教程

• 最新操作系统零基础入门学习路线 + 操作系统教程

• 最新计算机网络零基础入门学习路线 + 计算机网络教程

• 最新设计模式零基础入门学习路线 + 设计模式教程

• 最新软件工程零基础入门学习路线 + 软件工程教程