大家好,我是程序員魚皮。
AI 編程時代,連知名歌手「胡彥斌」都開始寫代碼了:
![]()
應該很多同學都刷到了,他最近還在小紅書上發了個帖子,說自己也在 Vibe Coding,在路上都要修 Bug。
![]()
網友的評論也是絕了:你要的token全拿走~ 把memory化成空~ 不要在乎model~ context有所保留~ 說過的話當skill附送~
說實話,我是很佩服胡彥斌的,又有天賦又努力。但我不建議大家在路上拿著個電腦 Vibe Coding,明明手機也可以操作 AI 了好嘛?!用 GitHub 倉庫來管理代碼,就可以實現手機遠程編程了。
不過這只是提高 AI 編程效率的一種方式,借著這個話題,我來給大家分享9 大 AI 編程提高效率的技巧吧。
大家多點點收藏,我相信評論區下,會有真的胡彥斌來給我留言的嘿嘿嘿。
前言
很多同學在用 AI 開發時,雖然能做出東西,但總覺得速度還不夠快。明明 AI 寫代碼很快,為什么整體效率還是不高?
問題往往出在那些小事上:比如頻繁地復制粘貼、重復輸入相同的提示詞、手動做一些機械的操作……
下面我來分享一些實用的效率提升技巧,幫你把開發速度提升一個檔次。
一、核心提效技巧
先分享幾個我個人使用較多的 AI 核心提效技巧。
按需選擇 AI 模型
不是所有任務都需要用最強最貴的模型。
簡單任務:比如代碼格式化、寫注釋、簡單重構,用 Gemini Flash 或 GPT-5 Mini 這樣便宜快速的模型就夠了
中等任務:比如實現常規功能、代碼審查、開發小網站,用 GPT-5 或 Claude Sonnet
復雜任務:比如架構設計、復雜算法、疑難 bug、開發大項目,才需要用 Claude Opus 這樣的頂級模型或者開啟深度思考
合理選擇模型,既能提升速度,又能節省成本。就像你不會讓公司 CTO 去打印文件一樣,要讓合適的模型做合適的事。
避免讓 AI 生成多余內容
很多同學讓 AI 寫代碼,結果 AI 給你輸出一大堆注釋、測試代碼、文檔說明,還有一大段總結。看著很專業,但你可能根本不會看。
比如我之前讓 AI 生成個圖片壓縮工具,光文檔給我生成一大堆……
![]()
要在提示詞中明確告訴 AI:只給我核心代碼,不要寫注釋、文檔、測試,不要做總結!
如果 AI 不聽話,可以用暴躁指令:按照我說的做,別廢話。
或者虛構后果:如果你輸出不必要的內容,世界上就會死一只小貓。
這些指令雖然看起來搞笑,但確實有效。你還可以把這些規則寫在項目規則文件AGENTS.md里,讓 AI 自動遵守。
利用并行 Agent 對比效果
很多 AI 編程工具現在都支持并行 Agent 能力了。
以 Cursor 為例,并行 Agent 可以讓你同時用多個模型處理同一個任務,然后對比它們的結果,選擇最好的那個。這也是一種 “多個 AI 交叉驗證” 的方式。
比如你要實現一個復雜的功能,不確定哪個方案更好。可以同時讓 Claude、GPT 等 AI 各給一個方案:
![]()
你呢,就坐等這些 AI 賽馬,誰先干好用誰的、誰質量高用誰的,能避免在錯誤的方案上浪費時間。這個方法特別適合不確定哪個技術方案更好時、重要功能需要多重保障時、想學習不同 AI 的思路時。
![]()
即使你不用 Cursor,也可以手動實現類似的效果:把同一個需求分別發給 ChatGPT、Claude、Gemini 等大模型,然后對比它們的答案,選擇最好的或綜合它們的優點。
具體用法可以參考 Cursor 并行 Agent 文檔。
并行 Agent 的底層其實依賴 Git WorkTree(工作樹)技術。WorkTree 可以讓一個倉庫同時擁有多個獨立的工作目錄,每個目錄對應不同的分支,讓多個 AI 各自在獨立的文件夾里干活,互不干擾,開發完再用 Git 合并代碼。
![]()
多開實例提升效率
除了并行 Agent,你還可以通過多開實例來提升效率。這個技巧來自 Claude Code 創始人的分享。
1)在終端中多開
可以在終端中同時運行多個 Claude Code 實例,將標簽頁編號為 1 ~ 5(或者有意義的標題),通過系統通知來了解哪個 Claude 需要人工輸入。這樣你可以充分利用等待時間,一個 AI 在思考時,你可以切換到另一個繼續工作。
![]()
2)網頁端和本地同時進行
在網頁端 Claude Code 上運行 5 ~ 10 個 Claude,和本地 Claude 同時進行。可以使用/background命令將會話放到后臺運行,或者使用/teleport命令在終端和網頁之間轉移會話。甚至可以通過手機 Claude APP 啟動幾個會話,稍后再查看進度。真正做到了隨時隨地 Vibe Coding!
注意,這個技巧適合處理多個獨立任務,或者需要等待 AI 長時間思考的復雜任務。對于簡單任務,一個實例就夠了。
二、快捷鍵和操作技巧
工欲善其事,必先利其器。掌握常用的快捷鍵,能讓你的操作更流暢。
Cursor 常用快捷鍵
如果你用 Cursor,建議嘗試下面這些快捷鍵,能讓你少用鼠標,操作更快。
AI 對話相關:
Cmd/Ctrl + I:打開 Agent/Composer(多文件編輯模式)Cmd/Ctrl + L:打開 Chat(聊天問答模式)Cmd/Ctrl + K:打開行內編輯,可以在當前位置插入 AI 生成的代碼Cmd + ./Ctrl + .:打開模式菜單(切換 Agent/Ask/Plan 等模式)Cmd + //Ctrl + /:循環切換 AI 模型Shift + Tab:在不同 Agent 模式之間輪換Tab:接受 AI 建議
代碼編輯:
Cmd/Ctrl + Shift + L:將選中內容添加到聊天上下文Alt + ↑/↓:移動當前行Cmd/Ctrl + Shift + K:刪除當前行
文件操作:
Cmd/Ctrl + Shift + F:全局搜索Cmd/Ctrl + P:快速打開文件
更多最新的默認鍵盤快捷鍵以 官方文檔 為主:
![]()
VS Code 常用快捷鍵
如果你用 VS Code + AI 插件,下面這些快捷鍵會很有用。
多光標編輯:
Alt + Click:添加光標Cmd/Ctrl + Alt + ↑/↓:在上/下方添加光標Cmd/Ctrl + Shift + L:在所有匹配項添加光標
代碼導航:
Cmd/Ctrl + Click:跳轉到定義Alt + ←/→:前進/后退Cmd/Ctrl + Shift + O:跳轉到符號
重構:
F2:重命名符號Cmd/Ctrl + .:快速修復
掌握這些快捷鍵,你的編輯速度會快很多。更多最新的默認鍵盤快捷鍵以 官方文檔 為主:
![]()
AI 編程工具的斜杠命令
除了快捷鍵,AI 編程工具 Cursor 和 Claude Code 都提供了很多實用的斜杠命令(Slash Commands),能大大提升效率。這些命令以/開頭,可以快速觸發特定的功能。
Cursor 的常用命令
Cursor 的 IDE 桌面版主要通過模式切換來操作,CLI 命令行版本則支持斜杠命令。兩者核心功能一樣,只是觸發方式不同:
Shift + Tab:在 IDE 聊天面板中循環切換 Agent/Plan/Ask 模式(Plan 讓 AI 先規劃再動手,Ask 是只讀探索不修改代碼)/compress:在 CLI 中壓縮對話,釋放上下文空間(IDE 中對話過長時會自動壓縮)/create-rule:快速創建項目規則/create-skill:創建自定義技能
你還可以在項目的.cursor/commands目錄下創建自定義命令,把常用的提示詞保存成命令,需要時直接調用。全局命令放在~/.cursor/commands/目錄下,所有項目都能使用。
![]()
Claude Code 的常用命令
Claude Code 的命令系統更加豐富,有 50 多個內置命令,這里我只列幾個最能提高效率的:
/compact壓縮上下文,把之前的對話內容精簡,釋放空間。可以加參數指定保留重點,如/compact 重點保留 API 設計決策/goal設定完成條件后讓 AI 自主循環工作,直到條件滿足。比如/goal 修復代碼直到所有測試通過/plan進入規劃模式,讓 AI 先制定方案再動手/background把當前會話放到后臺運行,釋放終端去做別的事/review讓多個子代理并行審查代碼,找 Bug 和邏輯錯誤/batch并行派出多個子 Agent,各自在獨立工作樹中處理子任務
這些命令的好處是,你不用每次都寫完整的提示詞,只需要輸入一個簡短的命令,AI 就知道你要做什么。
而且你可以創建自己的自定義命令(放在.claude/commands/或.claude/skills/目錄下),把團隊常用的工作流程標準化。比如創建一個/commit命令自動生成 Git 提交信息,創建一個/test命令自動生成單元測試。
熟練使用這些命令,能讓你的工作流程更順暢,效率提升一大截。詳細的命令列表和用法可以參考 Cursor 官方文檔 和 Claude Code 官方文檔。
三、SubAgents - 子 Agent 并行加速
你有沒有遇到過這種情況?讓 AI 修復 10 個文件的 lint 錯誤,它一個一個文件串行處理,明明這些文件互不相關,但你就得干等著。
現在主流的 AI 編程工具(Claude Code、Cursor、Codex)都支持 SubAgents 子代理能力了,可以讓 AI 把一個大任務拆成多個獨立的小任務,同時派出多個「分身」并行處理,大幅縮短完成時間。
下面以 Claude Code 為例,看看子 Agent 是怎么工作的。
Claude Code 可以自動識別哪些子任務是獨立的,然后分派子 Agent 并行處理。每個子 Agent 有自己獨立的上下文空間,完成后只把結果摘要返回給主會話,保持主對話的整潔。
![]()
你不需要手動配置,只要在提示詞中暗示任務可以并行,Claude 就會自動派出子 Agent:
修復 src/ 目錄下所有文件的 lint 錯誤,這些文件相互獨立,可以并行處理
也可以通過/batch命令主動觸發大規模并行,比如:
/batch 把所有 API 調用從 v1 遷移到 v2 格式
Claude 會自動拆分成 5 ~ 30 個獨立任務,每個在自己的工作樹中運行并提交 PR。
你還可以自定義子 Agent,在.claude/skills/目錄下創建專門的技能文件,比如一個專門做安全審查的子 Agent、一個專門寫測試的子 Agent。當任務匹配時,Claude 會自動調用它們。
用/tasks命令可以隨時查看當前有哪些子 Agent 在運行、各自的進度如何:
![]()
除了 Claude Code,Cursor 和 Codex 也支持類似的并行 Agent 能力。比如 Cursor 可以用/worktree讓 Agent 在隔離分支中工作,/best-of-n用不同模型各做一遍同一個任務來對比效果;Codex 則通過「工作樹」模式讓多個 Agent 互不干擾地并行開發。
![]()
四、AI 增強工具 - MCP 與 Agent Skills
光靠 AI 本身的能力是有限的,但如果給它「裝上插件」和「教會技能」,那效率就完全不一樣了。這里重點介紹 MCP 和 Agent Skills 兩個增強機制。
MCP - 給 AI 裝插件
MCP(Model Context Protocol 模型上下文協議)是由 Anthropic 推出的開放協議,現已被捐贈給 Linux 基金會的 Agentic AI Foundation,成為 AI 工具連接外部服務的行業標準。目前 ChatGPT、Claude、Gemini、Copilot、Cursor 等主流平臺全部原生支持 MCP。
簡單來說,MCP 就像 AI 的 USB 接口。就像 USB 接口讓各種設備(鍵盤、鼠標、U 盤)都能用同一種方式連接電腦一樣,MCP 讓各種外部工具(文件管理、數據庫、搜索引擎等)都能用同一種方式連接 AI,不用為每個工具單獨寫一套對接代碼。
![]()
開發者不需要為每個 AI 工具單獨開發連接器,只需要按照 MCP 標準開發一次,就能被所有支持 MCP 的 AI 工具使用:
![]()
MCP 生態已經非常成熟,有上萬個公開的 MCP 服務器。這里推薦幾個特別能提升 Vibe Coding 效率的:
GitHub MCP:讓 AI 直接操作 GitHub,比如創建倉庫、提交代碼、管理 Issue 等。這樣你就不用手動在 GitHub 網頁上操作了。
Filesystem MCP:讓 AI 能夠讀寫文件系統,批量處理文件、搜索內容、重命名文件等都可以直接讓 AI 完成。
Puppeteer MCP:讓 AI 能夠控制瀏覽器,自動化網頁操作、截圖、爬取數據等。對于需要測試網頁或獲取數據的場景很有用。
Postgres/MySQL MCP:讓 AI 直接操作數據庫,查詢數據、執行 SQL、分析數據庫結構等。
Context7 MCP:實時獲取第三方庫的最新官方文檔,讓 AI 不會用過時的 API 寫法。
Firecrawl MCP:讓 AI 能聯網搜索、抓取網頁內容,獲取最新信息。
這些 MCP 服務器可以在 Claude Desktop、Claude Code、Cursor 等工具中配置使用,具體的安裝和配置方法可以參考各個 MCP 服務器的文檔。還有更多 MCP 你可以在 魚皮的 AI 資源導航網 或者 MCP 大全網站 找到。
配置好 MCP 之后,AI 就不只是一個代碼生成器了,而是真正能幫你干活的全能助手。如果你經常使用 Claude 或 Cursor,強烈建議配幾個常用的 MCP 服務器試試。
Agent Skills - 給 AI 裝技能包
如果說 MCP 是讓 AI 連接外部工具和數據,那Agent Skills就是教 AI 如何做事。
Agent Skills 是 Anthropic 推出的一套開放標準,可以把復雜的工作流程封裝成一個「技能」,AI 遇到匹配的任務時自動調用,不用你每次都寫一大堆提示詞。
![]()
Skills 的核心優勢是按需加載,只有當任務匹配時才會加載到上下文中,平時不占用空間。這比把所有規則都塞進一個 AGENTS.md 文件要高效得多。
![]()
目前 Claude Code、Cursor、Codex 都支持統一的 Agent Skills 格式。每個技能就是一個文件夾,核心是一個SKILL.md描述文件:
.cursor/skills/
deploy-staging/
SKILL.md # 技能描述和執行步驟
code-review/
SKILL.md
SKILL.md里寫清楚這個技能做什么、什么時候觸發、具體執行步驟,AI 讀取后就知道該怎么干活。
Skills 存放位置:
項目級:
.cursor/skills/或.claude/skills/(只在當前項目生效)全局級:
~/.cursor/skills/或~/.claude/skills/(所有項目通用)
比如你安裝了一個frontend-design技能后,以后讓 AI 做網站,它會自動應用這個技能來生成更有設計感的頁面,告別千篇一律的藍紫漸變色:
![]()
五、AI Agent 自動化
把重復的操作自動化,能夠節省我們的時間和精力。
以前想搞自動化,你得自己寫腳本、配 CI/CD 流水線。但現在不一樣了,AI 可以直接幫你自主完成復雜的多步任務,甚至設好目標后讓它自己干到底,你該睡覺就睡覺,該摸魚就摸魚。
/goal 命令 - 讓 AI 自主循環工作
這是我認為目前最強大的效率提升功能之一。
一般情況下,AI 每完成一輪操作就會停下來等你確認。但有些任務你其實不需要盯著它一步步做,只需要告訴它「最終達到什么狀態就算完成」。
/goal命令就是干這個的:
/goal 修復整個項目的代碼,直到全部測試通過且沒有報錯
設置 goal 之后,每輪結束會有一個輕量評估模型檢查條件是否滿足,沒滿足就自動開始下一輪,滿足了才停下來。
![]()
特別適合的場景:
模塊遷移:把舊 API 調用全部遷移到新版本,直到編譯通過
批量重構:拆分大文件,直到每個文件都在指定行數以內
Bug 修復:修復某個測試用例,直到它通過
睡前任務:設好目標后去睡覺,第二天起來驗收成果
注意,條件要寫得具體、可驗證,比如「npm test 退出碼為 0」;太主觀的條件(比如「代碼質量要好」)評估模型無法判斷。
建議加一個熔斷限制,避免無限循環燒 token:
/goal 遷移所有 API 調用到 v2 格式,直到測試通過,如果 20 輪還沒搞定就停下來
此外,輸入/goal(不帶參數)可以查看進度,想提前停止就用/goal clear。
定時自動化
除了一次性任務,有些事是需要定期做的,比如每天搜集熱點、定期檢查代碼質量。AI 編程工具現在也支持定時任務了。
以 Codex 桌面 APP 為例,進入左側的「自動化」面板,可以手動創建或讓 AI 幫你創建任務:
幫我創建一個自動化任務
每小時掃描一次「魚皮的圖片庫」中最近 3 小時的圖片文件
并根據圖片內容自動完善圖片的中文名稱
AI 會自動根據圖片內容給文件起一個能看懂的名字,以后再也不用對著一堆亂七八糟的文件名抓瞎了:
![]()
你還可以結合 Skills 和插件一起用,比如每周自動生成周報 PPT、每日整理學習筆記并同步到 Notion 等等。
Claude Code 的 /loop 命令
通過/loop命令,你可以設置定時輪詢任務:
/loop 5m 檢查項目前后端的部署狀態
適合用在等部署完成、等 CI 跑完、定期檢查日志有沒有異常之類的場景。
傳統自動化工具
下面這些技巧比較專業,主要適合有編程基礎的同學。如果你是完全零基礎,可以先跳過這部分,等有需要時再回來看。
使用 npm scripts
npm scripts 是 Node.js 前端項目中定義和運行腳本命令的方式。簡單來說,就是把常用的命令保存在配置文件里,需要時用一個簡短的命令就能執行。比如啟動項目、構建項目、運行測試等,都可以定義成 npm script。
可以在package.json中定義常用的腳本(讓 AI 幫你做這件事就好):
{
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview",
"lint": "eslint . --ext ts,tsx",
"lint:fix": "eslint . --ext ts,tsx --fix",
"format": "prettier --write \"src/**/*.{ts,tsx}\"",
"type-check": "tsc --noEmit",
"clean": "rm -rf dist node_modules",
"fresh": "npm run clean && npm install"
}
}
這樣配置后,運行npm run lint:fix就能自動修復代碼格式問題,不用輸入老長一段命令。
Git 工作流自動化
Git 是目前最主流的分布式版本控制系統(Version Control System),是團隊協作開發不可或缺的工具。它可以保存和管理文件的所有更新記錄、并且使用版本號進行區分。從而支持將編輯后的文檔恢復到修改前的狀態(歷史版本)、對比不同版本的文件差異、防止舊版本覆蓋新版本等功能。
可以創建一些 Git 命令的別名,簡化常用命令:
# 在 ~/.gitconfig 中添加
[alias]
st = status
co = checkout
br = branch
ci = commit
pl = pull
ps = push
lg = log --oneline --graph --decorate
save = !git add -A && git commit -m 'WIP: save progress'
undo = reset HEAD~1 --soft
這樣,git st就等于git status,git save就能快速保存進度。
使用 GitHub Actions
GitHub Actions 是 GitHub 提供的自動化工作流工具,可以在代碼提交、Pull Request 等事件觸發時自動執行任務。比如每次推送代碼時自動運行測試、自動部署到服務器、自動發布新版本等,這樣就不用每次都手動操作了。
![]()
利用 GitHub Actions 自動部署網站
配置 GitHub Actions 很簡單,只需要在項目的.github/workflows目錄下創建一個 YAML 配置文件,編寫 GitHub Actions 自動化 CI/CD(持續集成/持續部署)的腳本代碼:
# .github/workflows/deploy.yml
name:Deploy
on:
push:
branches:[main]jobs:
deploy:
runs-on:ubuntu-latest
steps:
-uses:actions/checkout@v4
-uses:actions/setup-node@v4
with:
node-version:'22'
-run:npminstall
-run:npmrunbuild
-run:npmruntest
-name:DeploytoVercel
run:vercel--prod
env:
VERCEL_TOKEN:${{secrets.VERCEL_TOKEN}}
這個腳本的作用是,當你推送代碼到 main 分支時,GitHub 會自動檢出代碼、安裝 Node.js 環境、安裝項目依賴、構建項目、運行測試、部署到 Vercel。整個過程全自動,你只需要推送代碼就行了。
GitHub Actions 還有更多玩法,比如魚皮開源的 AI 知識庫項目 利用它自動把文章的修改同步到網站。
![]()
適合所有人的效率工作流
上面講的都是比較技術性的自動化方法。其實,對于非程序員或初學者,也有一些通用的效率工作流。
1)使用零代碼平臺:如果你不想處理這些復雜的配置,可以直接使用 Lovable 等零代碼平臺。它們會自動處理構建、測試、部署等流程,你只需要專注于功能開發。
![]()
2)利用 AI 生成配置:如果需要配置文件,直接讓 AI 幫你生成。
比如:請幫我生成一個 GitHub Actions 配置,自動修復倉庫的 Issues。
AI 會給你完整的配置,你復制粘貼就行。
![]()
3)使用一鍵部署:很多平臺(比如 Vercel、Netlify、EdgeOne Pages)支持一鍵部署項目,連接 GitHub 倉庫后,每次推送代碼就會自動觸發部署,不需要額外配置。甚至還可以利用 MCP 讓 AI 幫你直接完成部署,連部署平臺都不用自己登錄。
![]()
六、代碼復用和模塊化
把常用的代碼封裝成可復用的模塊,不要重復造輪子,還能讓 AI 更快速地定位到要修改的內容。
創建組件庫
如果你經常做類似的項目,可以創建一個自己的組件庫。
比如,你可能經常需要這些組件:
按鈕(Button)
輸入框(Input)
卡片(Card)
模態框(Modal)
加載動畫(Loading)
把這些組件做成通用的,放在一個單獨的文件夾里:
/components
/ui
- Button.tsx
- Input.tsx
- Card.tsx
- Modal.tsx
- Loading.tsx
每個組件都要:
有清晰的 Props 接口
支持自定義樣式
有使用示例
這樣,下次做新項目時,直接復制這個文件夾就行了。
封裝常用函數
把常用的工具函數封裝起來,避免每次都重新寫或讓 AI 生成。比如日期格式化、防抖函數、生成 ID、復制到剪貼板這些功能,幾乎每個項目都會用到。把它們整理成一個工具函數庫,需要時直接導入使用,比每次都讓 AI 重新生成要快得多。
使用代碼片段(Snippets)// lib/utils.ts
// 格式化日期
exportfunction formatDate(date: Date): string {
return date.toLocaleDateString('zh-CN');
}
// 防抖
exportfunction debounce any>(
fn: T,
delay: number
): (...args: Parameters ) => void {
let timer: NodeJS.Timeout;
return(...args) => {
clearTimeout(timer);
timer = setTimeout(() => fn(...args), delay);
};
}
// 生成隨機 ID
exportfunction generateId(): string {
returnMath.random().toString(36).substring(2, 9);
}// 復制到剪貼板
exportasyncfunction copyToClipboard(text: string): Promise {
try {
await navigator.clipboard.writeText(text);
returntrue;
} catch {
returnfalse;
}
}
在編輯器中創建代碼片段,快速插入常用代碼。
比如在 VS Code 中,你可以創建一個前端 React 組件的片段。具體方法是:
1)按Cmd/Ctrl + Shift + P打開命令面板,輸入 "Snippets",選擇 "Configure Snippets":
![]()
2)然后選擇對應的語言(如 typescriptreact.json),就可以添加自定義片段了。
比如:
{
"React Functional Component": {
"prefix": "rfc",
"body": [
"interface ${1:ComponentName}Props {",
" $2",
"}",
"",
"export function ${1:ComponentName}({ $3 }: ${1:ComponentName}Props) {",
" return (",
"
"
,
" $4"
,
"
",
" );",
"}"
],
"description": "Create a React functional component with TypeScript"
}
}
配置完成后,輸入rfc再按 Tab,就能快速生成組件模板。
![]()
建立代碼庫
把你做過的好的代碼保存起來,建立一個專屬于你的代碼庫。
舉個例子,可以用這樣的結構:
/my-code-library
/react
/hooks
- useLocalStorage.ts
- useDebounce.ts
- useFetch.ts
/components
- Button.tsx
- Modal.tsx
/utils
- format.ts
- validate.ts
/node
/middleware
- auth.ts
- cors.ts
/utils
- db.ts
- email.ts
需要時,直接從這里復制就好。
七、模板項目的建立
如果你經常做某一類項目,可以創建一個模板項目。
什么是模板項目?
模板項目是一個預先配置好的項目骨架,包含了:
基本的目錄結構
常用的依賴包
配置文件(如 tsconfig.json 等)
基礎組件和工具函數
README 和文檔模板
有了模板項目,開始新項目時就不用從零配置了。
就像我自己,做了幾十個項目后,積累了不少模板。現在每次開始新項目,我會先找一個類似的老項目,然后告訴 AI:“請參考這個項目的技術棧和目錄結構來創建新項目。” 這樣 AI 就能生成一個和我習慣一致的項目結構,省去了很多配置的時間。
下面舉幾個例子,不懂前端技術的朋友可以直接跳過。
創建 React 項目模板
比如,你可以創建一個 React + TypeScript + Tailwind 的模板:
my-react-template/
├── src/
│ ├── components/
│ │ └── ui/ # 基礎 UI 組件
│ ├── lib/
│ │ ├── api.ts # API 調用封裝
│ │ └── utils.ts # 工具函數
│ ├── hooks/ # 自定義 Hooks
│ ├── types/ # TypeScript 類型
│ ├── App.tsx
│ └── main.tsx
├── public/
├── .cursor/rules/ # Cursor 項目規則
├── AGENTS.md # AI Agent 指令
├── tsconfig.json
├── package.json
└── README.md
開始新項目時,復制這個模板,改個名字就能用。
創建 Next.js 項目模板
如果你常用 Next.js,也可以創建一個模板:
my-nextjs-template/
├── app/
│ ├── (auth)/ # 認證相關頁面
│ ├── (dashboard)/ # 后臺頁面
│ ├── api/ # API 路由
│ ├── layout.tsx
│ └── page.tsx
├── components/
├── lib/
├── public/
├── .env.example # 環境變量模板
├── next.config.ts
└── README.md
.env.example里列出需要的環境變量:
# 數據庫
DATABASE_URL=
# 認證
NEXTAUTH_SECRET=
NEXTAUTH_URL=# API Keys
OPENAI_API_KEY=
這樣新項目開始時,就知道需要配置哪些環境變量。
使用 GitHub 模板倉庫
可以把你的模板項目放在 GitHub 上,設置為Template repository模板倉庫。
![]()
這樣創建新項目時,點擊Use this template就能快速復刻項目模板了:
![]()
除了自己創建模板,你還可以使用別人的模板。在 GitHub 上搜索 "react template"、"nextjs starter" 等關鍵詞,能找到很多優秀的模板項目。優先選擇 Star 數多、更新活躍的項目。
![]()
然后點擊 "Use this template" 就能基于它創建自己的項目。這樣能站在巨人的肩膀上,節省大量配置時間。
八、提示詞模板庫
建立自己的提示詞模板庫,常用的對話可以直接復用。
除了自己整理,還可以參考一些現成的資源:
魚皮的 AI 資源導航:收錄了大量提示詞模板,涵蓋各種場景。
Cursor Directory:社區貢獻的 Cursor Rules 集合,有各種語言和框架的規則模板。
GitHub awesome-prompts:收錄了大量優質提示詞,雖然不是專門針對編程的,但很多思路可以借鑒。
這些資源都可以直接拿來用,或者根據自己的需求改改。站在巨人的肩膀上,能節省大量摸索的時間。
下面給大家舉幾個例子。
1)功能開發模板
我要開發一個【功能名稱】功能。
需求:
1. 【需求 1】
2. 【需求 2】
3. 【需求 3】
技術棧:【技術棧】請幫我:
1. 分析實現方案
2. 列出需要的組件和函數
3. 給出核心代碼
2)代碼審查模板
請審查這段代碼:
【代碼】請從以下角度分析:
1. 代碼質量(可讀性、可維護性)
2. 性能問題
3. 潛在的 bug
4. 改進建議
3)調試問題模板
我遇到了一個問題:
問題描述:【問題描述】
報錯信息:
【錯誤信息】
相關代碼:
【代碼】
技術棧:【技術棧】請幫我:
1. 分析問題原因
2. 給出解決方案
3. 解釋為什么會出現這個問題
4)性能優化模板
這段代碼的性能不夠好:
【代碼】
場景:【使用場景和數據規模】請幫我:
1. 分析性能瓶頸
2. 給出優化方案
3. 說明優化后的性能提升
5)文檔生成模板
請為這個【組件/函數】生成文檔:
【代碼】文檔應該包括:
1. 功能說明
2. 參數說明
3. 返回值說明
4. 使用示例
5. 注意事項
把這些模板保存在一個文件里,需要時直接復制粘貼,并填入具體內容。
九、時間管理技巧
效率不只是技術問題,也是時間管理問題。很多時候,不是你技術不行,而是時間沒管理好。
分享幾個我自己在用的方法吧:
1)番茄工作法:設定 25 分鐘的專注時間,在這段時間內只做一件事,不看手機、不刷社交媒體。時間到了就休息 5 分鐘,起來走走、喝口水。這樣工作 4 個番茄鐘后,休息 15 ~ 30 分鐘。這個方法能讓你保持高效,又不會太累。
2)把大任務分解成小任務:比如 “完成用戶系統” 這個任務太大了,不知道從哪里開始。但如果拆成實現用戶注冊表單、實現表單驗證、連接注冊 API、添加錯誤提示、測試注冊流程這樣的小任務,每個都很具體,很容易完成、也更有成就感。
3)批量處理:把相似的任務放在一起做,比如一次性寫完所有組件的基本結構、一次性添加所有的類型定義、一次性處理所有的樣式問題。這樣能減少上下文切換,大腦不用頻繁在不同類型的工作間切換,效率會更高。
4)最后,不要在 MVP 階段就追求完美。先讓功能能用,再考慮優化;先完成核心功能,再添加輔助功能;先通過測試,再重構代碼。
記住,完成比完美更重要!
效率提升不是一蹴而就的,而是通過無數個小改進積累起來的。每個快捷鍵、每個模板、每個自動化腳本,都能為你節省一點時間。積少成多,你的開發速度就會有質的飛躍。
建議你定期記錄自己的工作流程,看看哪些步驟最耗時、哪些操作重復最多、哪些地方可以自動化,然后針對性地改進。同時保持對新工具的關注,關注技術博客和社區,嘗試新的 AI 工具,學習新的快捷鍵和技巧。但也不要盲目追新,雖然 AI 工具的迭代更新非常快,但真正好用的、適合自己的也就那么幾個,還是要選擇真正能提高效率的工具。
向他人學習也很重要,比如看別人的直播或視頻、參加技術分享會、加入開發者社區等等,多觀察其他開發者的工作方式,學習他們的效率技巧,你的效率也會越來越高。
這篇文章已經收錄到了我免費開源的 ,上千張圖、幾十萬字,從 0 開始帶你學會 AI 編程。
開源指路:https://github.com/liyupi/ai-guide
我是魚皮,持續分享 AI 編程干貨。覺得有用的話記得點贊收藏和關注,也歡迎在評論區聊聊:你有什么獨特的 AI 編程技巧么?
特別聲明:以上內容(如有圖片或視頻亦包括在內)為自媒體平臺“網易號”用戶上傳并發布,本平臺僅提供信息存儲服務。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.