每到過節，不少小伙伴都會給自己的頭像 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教程
• 最新操作系統零基礎入門學習路線 + 操作系統教程
• 最新計算機網絡零基礎入門學習路線 + 計算機網絡教程
• 最新設計模式零基礎入門學習路線 + 設計模式教程
• 最新軟件工程零基礎入門學習路線 + 軟件工程教程