无主之地2配置高吗|看真人裸体BBBBB|秋草莓丝瓜黄瓜榴莲色多多|真人強奷112分钟|精品一卡2卡3卡四卡新区|日本成人深夜苍井空|八十年代动画片

網易首頁 > 網易號 > 正文 申請入駐

胡彥斌也開始用 AI 寫代碼了,還說 “Vibe Coding 的都懂這個姿勢!” 我怒懟:“花哨,不如我來教你 9 大 AI 編程提效技巧吧!”

0
分享至

大家好,我是程序員魚皮。

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 statusgit 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 重新生成要快得多。

// 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;
}
}
使用代碼片段(Snippets)

在編輯器中創建代碼片段,快速插入常用代碼。

比如在 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.

相關推薦
熱點推薦
15分鐘滅國警告!俄羅斯攤牌:若敢碰加里寧格勒,就讓立陶宛消失

15分鐘滅國警告!俄羅斯攤牌:若敢碰加里寧格勒,就讓立陶宛消失

觀史搜尋著
2026-05-25 10:50:13
“突然讓我跳傘”!24歲女孩被逼跳傘身亡,老板為省油費讓她湊數

“突然讓我跳傘”!24歲女孩被逼跳傘身亡,老板為省油費讓她湊數

閱微札記
2026-05-23 11:36:43
減重14%、肝脂降80%!國產減重新藥上市即脫銷,或終結司美神話?

減重14%、肝脂降80%!國產減重新藥上市即脫銷,或終結司美神話?

果殼
2026-05-25 17:58:20
“扶弟魔”升級版!妻子因丈夫拒每月拿2000元幫弟還車貸,離婚了

“扶弟魔”升級版!妻子因丈夫拒每月拿2000元幫弟還車貸,離婚了

火山詩話
2026-05-26 07:27:35
美國新規:百萬華人離境十年不得入境

美國新規:百萬華人離境十年不得入境

深度解析熱點
2026-05-25 22:43:01
半導體大佬集體減持后,杭州豪宅被搶瘋了!

半導體大佬集體減持后,杭州豪宅被搶瘋了!

櫻桃大房子
2026-05-25 21:52:46
行車視頻55公里/小時,監控抓拍卻是121公里/小時;兩張抓拍照間隔0.081秒,記者現場測算發現疑點

行車視頻55公里/小時,監控抓拍卻是121公里/小時;兩張抓拍照間隔0.081秒,記者現場測算發現疑點

大風新聞
2026-05-25 22:28:10
227周戛然而止!鄭欽文將跌出世界前100,美網從資格賽打起?

227周戛然而止!鄭欽文將跌出世界前100,美網從資格賽打起?

全景體育V
2026-05-25 19:13:23
CBA總決賽迎來一大利好!籃協終于出手了:G1戰直接取消中國裁判

CBA總決賽迎來一大利好!籃協終于出手了:G1戰直接取消中國裁判

籃球快餐車
2026-05-26 05:34:55
亡國滅種,斷子絕孫?歐洲反華先鋒立陶宛,正在從地圖上消失

亡國滅種,斷子絕孫?歐洲反華先鋒立陶宛,正在從地圖上消失

賤議你讀史
2026-05-23 12:07:35
俄羅斯最大的弊病就是舍不得放下遠東!一旦放下,甚至能滿血復活

俄羅斯最大的弊病就是舍不得放下遠東!一旦放下,甚至能滿血復活

抽象派大師
2026-05-25 16:41:16
捷乙球隊主帥在奪冠后兌現諾言,Cos《浴血黑幫》主角裝束指揮比賽

捷乙球隊主帥在奪冠后兌現諾言,Cos《浴血黑幫》主角裝束指揮比賽

懂球帝
2026-05-26 01:24:19
鄭欽文淚灑發布會:這是一場沉重的失利,考慮從低級別賽事打起

鄭欽文淚灑發布會:這是一場沉重的失利,考慮從低級別賽事打起

全景體育V
2026-05-25 21:39:23
《亢奮》女主全裸出鏡!床都塌了

《亢奮》女主全裸出鏡!床都塌了

娛圈觀察員
2026-05-26 00:21:12
從低價大促到體驗盛宴,京東618重塑年中消費場

從低價大促到體驗盛宴,京東618重塑年中消費場

新立場NewPosition
2026-05-20 18:16:01
未經審批,私自賑災,河南三支救援隊造成極其惡劣的社會影響

未經審批,私自賑災,河南三支救援隊造成極其惡劣的社會影響

上觀新聞
2026-05-22 16:51:14
咋回事?跳號了?神舟二十二號乘組消失了?原因讓人肅然起敬!

咋回事?跳號了?神舟二十二號乘組消失了?原因讓人肅然起敬!

Thurman在昆明
2026-05-25 15:28:25
央媒調查多所高校學者被舉報涉學術不端:頂著耀眼頭銜,論文數據荒誕粗糙

央媒調查多所高校學者被舉報涉學術不端:頂著耀眼頭銜,論文數據荒誕粗糙

澎湃新聞
2026-05-26 08:04:05
0-11!不打了!官宣缺席生死戰

0-11!不打了!官宣缺席生死戰

籃球教學論壇
2026-05-26 08:40:07
報復升級,50枚導彈砸向基輔,普京這一巴掌打醒了全世界

報復升級,50枚導彈砸向基輔,普京這一巴掌打醒了全世界

云舟史策
2026-05-26 07:14:57
2026-05-26 09:47:00
程序員魚皮 incentive-icons
程序員魚皮
一手科技資訊和編程干貨
131文章數 118關注度
往期回顧 全部

科技要聞

今年秋季,麒麟芯片將首次落地"邏輯折疊"

頭條要聞

牛彈琴:"兩個鐵桿"來北京 一個當場落淚一個帶來喜訊

頭條要聞

牛彈琴:"兩個鐵桿"來北京 一個當場落淚一個帶來喜訊

體育要聞

如果不好好守門,他可能早就繼承家業了

娛樂要聞

李晨鄭愷跑男停宣:12年元老被邊緣化

財經要聞

走近何庭波

汽車要聞

啟境GT7定檔5月29日預售 提供三電機版本

態度原創

家居
時尚
旅游
本地
手機

家居要聞

生與命相依 舊公寓改造

彩色襯衫太適合夏天了,高級又氣質

旅游要聞

江西南昌:“夜經濟”提升消費活力

本地新聞

用云錦的方式,打開江蘇南京

手機要聞

手握幸運星,榮耀600 Pro的4K實況憑什么敢第一個這么拍?

無障礙瀏覽 進入關懷版