一句话，我让 AI 帮我做了个 P 图网站！
<p class="md-end-block md-heading"><span class="md-plain">每到过节，不少小伙伴都会给自己的头像 P 个图，加点儿装饰。</span></p><p class="md-end-block md-p"><span class="md-plain">比如圣诞节给自己头上 P 个圣诞帽，国庆节 P 个小红旗等等。这是一类比较简单、需求量却很大的 P 图场景，也有很多现成的网站和小程序，能帮你快速完成这件事。</span></p>
<p class="md-end-block md-p"><span class="md-image md-img-loaded" data-src="https://pic.yupi.icu/1/image-20241226114831397.png"><img src="https://pic.yupi.icu/1/image-20241226114831397.png"></span></p>
<p class="md-end-block md-p"><span class="md-plain">这些小工具其实都是通过前端开发完成的，如果是在以前，我们想自己做个这种工具，你需要从 0 自己写代码，或者从 GitHub 上找个现成的开源项目。</span></p>
<p class="md-end-block md-p"><span class="md-plain">但现在可是 2025 年，开发模式已经发生了巨变。利用 AI 工具，我们可以一行代码不写，制作出各种前端小网站。</span></p>
<p class="md-end-block md-p"><span class="md-plain">首先选择一款 AI 工具，我个人日常是用 GPT 的，你也可以选择 Claude、国产 AI，在效果上有一些区别，但用法都是大同小异的。</span></p>
<p class="md-end-block md-p"><span class="md-plain">你可以把 AI 当成一个 “真人”，你想让它做事，就必须给它传递 <span class="md-pair-s "><strong>尽可能清晰明确的</strong><span class="md-plain"> 指令，必须要让它知道自己要做什么、要达到什么目标。至于具体怎么做，你可以完全交给它。</span></span></span></p>
<p class="md-end-block md-p"><span class="md-plain">那现在我们要开发一个 “给头像添加圣诞帽” 的小网站，就需要给 AI 提需求，比如先来个一句话需求：</span></p>
<pre class="md-fences md-end-block ty-contain-cm modeLoaded"><span>请你帮我开发一个单页面网站，用户可以上传本地图片，并且自由移动圣诞帽到图片的任何一个位置，最后点击按钮可以下载【圣诞帽合成到原图上】的新图片。</span></pre>
<p class="md-end-block md-p"><span class="md-plain">AI 的回复如下，生成了一堆代码。现在 GPT 对交互做了升级，生成代码时会自动给你打开一个编辑器界面：</span></p>
<p class="md-end-block md-p"><span class="md-image md-img-loaded" data-src="https://pic.yupi.icu/1/image-20241226110816246.png"><img src="https://pic.yupi.icu/1/image-20241226110816246.png"></span></p>
<p class="md-end-block md-p"><span class="md-plain">我们复制代码到一个新的 HTML 文件中，然后需要修改一下圣诞帽图片的地址为自己本地找的图片，因为 AI 并不知道你需要什么样的圣诞帽，网上找的图片也可能由于跨域或防盗链等原因无法正常加载。</span></p>
<pre class="md-fences md-end-block ty-contain-cm modeLoaded"><span><span class="cm-tag cm-bracket"><<span class="cm-tag">div <span class="cm-attribute">id=<span class="cm-string">"editor-container"<span class="cm-tag cm-bracket">><br><span> <span class="cm-tag cm-bracket"><<span class="cm-tag">img <span class="cm-attribute">id=<span class="cm-string">"uploaded-image" <span class="cm-attribute">src=<span class="cm-string">"" <span class="cm-attribute">alt=<span class="cm-string">"Uploaded Image" <span class="cm-attribute">style=<span class="cm-string">"display: none;"<span class="cm-tag cm-bracket">><br><span> <span class="cm-tag cm-bracket"><<span class="cm-tag">img <span class="cm-attribute">id=<span class="cm-string">"hat" <span class="cm-attribute">src=<span class="cm-string">"你的圣诞帽图片地址" <span class="cm-attribute">alt=<span class="cm-string">"Santa Hat" <span class="cm-attribute">style=<span class="cm-string">"display: none;"<span class="cm-tag cm-bracket">><br><span><span class="cm-tag cm-bracket"></<span class="cm-tag">div<span class="cm-tag cm-bracket">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></pre>
<p class="md-end-block md-p"><span class="md-plain">双击运行网站，效果如图：</span></p>
<p class="md-end-block md-p"><span class="md-image md-img-loaded" data-src="https://pic.yupi.icu/1/image-20241226111120603.png"><img src="https://pic.yupi.icu/1/image-20241226111120603.png"></span></p>
<p class="md-end-block md-p"><span class="md-plain">丑是丑了点，但是功能已经可以正常使用了，整个过程不到 1 分钟，就完成了这款工具网站。</span></p>
<p class="md-end-block md-p"><span class="md-plain">当然，前面也说了，在给 AI 提需求时，必须给它传递 <span class="md-pair-s "><strong>尽可能清晰明确的</strong><span class="md-plain"> 指令。它完成的效果是否符合你的预期，取决于你提需求的本领了。别拿这不当回事，程序员以后的竞争很有可能从写代码的技术转变为提需求的能力。</span></span></span></p>
<p class="md-end-block md-p"><span class="md-plain">那我们再提一些更精确的需求：</span></p>
<pre class="md-fences md-end-block ty-contain-cm modeLoaded"><span>再优化一下网站，要求如下：<br><span>1. 给整个网站增加圣诞节的氛围，可以利用 Emoji 表情、网络图片、以及样式代码实现<br><span>2. 优化页面的样式，使得图片不要太宽或太高，优化按钮的展示样式等<br><span>3. 将网站文案改为全中文，并优化表达为 “活泼” 的风格</span></span></span></span></pre>
<p class="md-end-block md-p"><span class="md-plain">提出新的需求后，AI 会在原有代码基础上进行修改，一会儿就给出了结果：</span></p>
<p class="md-end-block md-p"><span class="md-image md-img-loaded" data-src="https://pic.yupi.icu/1/image-20241226112250961.png"><img src="https://pic.yupi.icu/1/image-20241226112250961.png"></span></p>
<p class="md-end-block md-p"><span class="md-plain">这次的效果明显好了很多，已经能拿去给别人用了~</span></p>
<p class="md-end-block md-p"><span class="md-image md-img-loaded" data-src="https://pic.yupi.icu/1/image-20241226112219620.png"><img src="https://pic.yupi.icu/1/image-20241226112219620.png"></span></p>
<p class="md-end-block md-p"><span class="md-plain">你还可以在此基础上，让 AI 帮你新增图片裁切、放大缩小、旋转角度等 P 图常用的功能。</span></p>
<p class="md-end-block md-p"><span class="md-plain">目前来说，需求的 <span class="md-pair-s "><strong>上下文</strong><span class="md-plain"> 越少，越适合使用 AI 生成。这里的 “上下文” 可以理解为一些背景信息，比如你让 AI 生成 “鱼皮的个人博客”，如果不指定上下文 “鱼皮是指程序员鱼皮这个真正的 man”，AI 可能就理解成可以吃的那种鱼皮了。</span></span></span></p>
<p class="md-end-block md-p"><span class="md-plain">所以，目前 AI 非常适合生成纯前端的、单页面的、单个功能的应用。</span></p>
<p class="md-end-block md-p"><span class="md-plain">当然，这不代表 AI 不能应用于复杂的项目中，在我们常用的开发工具比如 JetBrains、VS Code 中都有 AI 插件，有些插件会将你项目中的文件作为上下文，来帮你生成和优化代码。效果就是，AI 可以预判到你接下来要写什么代码，而你只需要选择是否接受 AI 的答案就好了：</span></p>
<p class="md-end-block md-p"><span class="md-image md-img-loaded" data-src="https://pic.yupi.icu/1/image-20241226113607870.png"><img src="https://pic.yupi.icu/1/image-20241226113607870.png"></span></p>
<p class="md-end-block md-p"><span class="md-plain">像现在 AI 开发工具 Cursor、Windsurf 都非常火，它们将 AI 和代码编辑这件事深度结合，你可以直接在开发工具中通过不断地向 AI 提问，让它帮你生成一个完整的大项目，而不只是一个单页面网站：</span></p>
<p class="md-end-block md-p"><span class="md-image md-img-loaded" data-src="https://pic.yupi.icu/1/image-20241226114017458.png"><img src="https://pic.yupi.icu/1/image-20241226114017458.png"></span></p>
<p class="md-end-block md-p"><span class="md-plain">我团队同学用 Cursor 比较多，它是支持自主选择 AI 大模型的，可以根据生成效果选择：</span></p>
<p class="md-end-block md-p"><span class="md-image md-img-loaded" data-src="https://pic.yupi.icu/1/image-20241226114132020.png"><img src="https://pic.yupi.icu/1/image-20241226114132020.png"></span></p>
<p class="md-end-block md-p"><span class="md-plain">关于 Cursor 就不过多介绍了，只是一个工具，界面和 VS Code 还很像，下载之后摸索一下就差不多了。</span></p>
<p class="md-end-block md-p"><span class="md-plain">通过这篇文章，希望大家能 get 到利用 AI 提效的思路吧，AI 虽然替代不了程序员，但它可以帮助我们摸鱼啊！</span></p>
<p class="md-end-block md-p"> </p>
<h2 class="md-end-block md-heading"><span class="md-plain">更多编程学习资源</span></h2>
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-meta-i-cmd-link"><span class="md-plain">Java前端程序员必做项目实战教程+毕设网站</span></span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-meta-i-cmd-link"><span class="md-plain">程序员免费编程学习交流社区（自学必备）</span></span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-meta-i-cmd-link"><span class="md-plain">程序员保姆级求职写简历指南（找工作必备）</span></span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-meta-i-cmd-link"><span class="md-plain">程序员免费面试刷题网站工具（找工作必备）</span></span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-meta-i-cmd-link"><span class="md-plain">最新Java零基础入门学习路线 + Java教程</span></span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-meta-i-cmd-link"><span class="md-plain">最新Python零基础入门学习路线 + Python教程</span></span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-meta-i-cmd-link"><span class="md-plain">最新前端零基础入门学习路线 + 前端教程</span></span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-meta-i-cmd-link"><span class="md-plain">最新数据结构和算法零基础入门学习路线 + 算法教程</span></span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-meta-i-cmd-link"><span class="md-plain">最新C++零基础入门学习路线、C++教程</span></span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-meta-i-cmd-link"><span class="md-plain">最新数据库零基础入门学习路线 + 数据库教程</span></span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-meta-i-cmd-link"><span class="md-plain">最新Redis零基础入门学习路线 + Redis教程</span></span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-meta-i-cmd-link"><span class="md-plain">最新计算机基础入门学习路线 + 计算机基础教程</span></span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-meta-i-cmd-link"><span class="md-plain">最新小程序入门学习路线 + 小程序开发教程</span></span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-meta-i-cmd-link"><span class="md-plain">最新SQL零基础入门学习路线 + SQL教程</span></span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-meta-i-cmd-link"><span class="md-plain">最新Linux零基础入门学习路线 + Linux教程</span></span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-meta-i-cmd-link"><span class="md-plain">最新Git/GitHub零基础入门学习路线 + Git教程</span></span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-meta-i-cmd-link"><span class="md-plain">最新操作系统零基础入门学习路线 + 操作系统教程</span></span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-meta-i-cmd-link"><span class="md-plain">最新计算机网络零基础入门学习路线 + 计算机网络教程</span></span></p>
</li>
<li class="md-list-item">
<p class="md-end-block md-p"><span class="md-meta-i-cmd-link"><span class="md-plain">最新设计模式零基础入门学习路线 + 设计模式教程</span></span></p>
</li>
<li class="md-list-item md-focus-container">
<p class="md-end-block md-p md-focus"><span class="md-meta-i-c md-link md-expand"><span class="md-plain">最新软件工程零基础入门学习路线 + 软件工程教程</span></span></p>
</li>
</ul><br><br>
来源：https://www.cnblogs.com/yupi/p/18635135
頁:
[1]