小白怎麼把 Codex 用得更好？先裝這 10 個 Skills

作者：siuser小偉

日期：2026年5月26日下午6:14

來源：WeChat 原文

✦整理版優先睇

速讀 5 個重點高亮

掌握 Codex 嘅關鍵係 Skills 而唔係提示詞，小偉推介 10 個研發場景 Skills

整理版摘要

呢篇文章係由開發者小偉寫嘅，佢觀察到好多新手用 Codex 時只顧住掂提示詞寫得高唔高級，但其實最難嘅位係唔知點樣令 Codex 進入正確嘅工作模式。小偉認為 Skills 先係真正令 Codex 發揮作用嘅關鍵，佢整合咗一套開發用 Skills 嚟解決呢個問題。

文章提供咗 10 個研發場景嘅 Skills，每個都有安裝命令同使用例子。小偉特別強調，對新手嚟講，直接對 Codex 講出 Skill 名係最可靠嘅方法，例如『用 frontend-design』、『用 code-reviewer』。呢啲 Skills 涵蓋前後端開發、代碼審查、測試、PR、文檔更新等環節。

整體結論係：Codex 嘅能力取決於你點樣引導佢，Skills 就係嗰個導航工具。裝咗呢啲 Skills，新手都可以好快做到有質素嘅開發工作。

Codex 嘅真正關鍵係 Skills，而唔係提示詞嘅複雜程度。
直接點名 Skill（例如「用 frontend-design」）係最有效嘅使用方法。
frontend-design 要求 Codex 先確認用途同視覺氣質，避免 AI 模板感。
code-reviewer 按 diff 審查，帶文件行號同建議修法，提升代碼質量。
pr-creator 同 fix 分別幫你安全發 PR 同檢查格式，新手必裝。

值得記低

連結 github.com

Codex Skills 安裝倉庫

小偉整合嘅 Codex Skills 安裝腳本同說明，包含文章中所有 Skills 嘅安裝命令。

整理重點

Skills 先係 Codex 嘅靈魂

小偉指出，好多新手以為 Codex 嘅關鍵係提示詞寫得高唔高級，但實際用落會發現最難係唔知點樣令 Codex 進入正確嘅工作模式。例如想佢做前端，係隨手搭個頁面定係先諗清楚產品氣質？Codex 嘅 Skills 就係為咗解決呢個問題，佢可以引導 Codex 進入指定嘅角色同流程。

「Codex 嘅關鍵唔係提示詞，而係 Skills」

如果你仲未用 Skills，就好似揸住架跑車但唔識轉波。以下 10 個研發場景 Skills 可以幫你快上手。

「指定工作模式」

整理重點

安裝方法

小偉將所有 Skills 打包咗喺一個 GitHub 倉庫，你可以用以下指令一次過安裝。

程式內容 bash

curl -fsSL
https://raw.githubusercontent.com/siuserxiaowei/codex-skills-guide/main/codex-dev-skills/install.sh | bash

安裝完之後，你可以直接對 Codex 講出 Skill 名嚟叫佢做嘢，例如「用 frontend-design 幫我優化呢個頁面」。唔需要記住複雜嘅 prompt。

「一次過安裝」

「直接對 Codex 講出 Skill 名」

整理重點

10 個必裝 Skills 簡介

frontend-design

code-reviewer

pr-creator

小偉推介嘅 10 個 Skills 包括：frontend-design（避免模板感頁面）、cache-components（Next.js 緩存管理）、fullstack-developer（前後端一齊拆）、frontend-code-review（前端代碼審查）、code-reviewer（通用審查）、webapp-testing（瀏覽器測試）、pr-creator（PR 創建）、fix（格式 lint 自動修復）、update-docs（文檔更新）、find-skills（搜尋新 Skills）。

1 frontend-design：要求 Codex 先確認用途、受眾、視覺氣質，避免 AI 模板感。
2 cache-components：檢查 Next.js 緩存配置，確保 Server Components 正確使用。
3 fullstack-developer：從數據模型到部署一齊拆，適合整全功能。
4 frontend-code-review：基於 diff 審查前端改動，標明問題位置同建議。
5 code-reviewer：通用代碼審查，重點睇 bug、安全、可維護性。
6 webapp-testing：打開瀏覽器實際測試關鍵流程，截圖檢查錯誤。
7 pr-creator：檢查分支、狀態、模板後先生成 PR，避免失誤。
8 fix：自動修復格式同 lint 錯誤，列出需要手動處理嘅問題。

「每個 Skill 都有安裝命令同使用例子」

整理重點

使用小貼士

另外，涉及提交同推送嘅操作，例如 pr-creator，一定要先叫 Codex 解釋佢準備做咩，特別係檢查分支名。

「先確認分支唔係 main」

最後，find-skills 係一個好實用嘅起點，遇到新場景先搜嚇有冇專用 Skill，唔使由零開始。

「先揾 Skill 再開工」

大家好，我係siuser小偉

我見到一段說話，都幾有感觸㗎：

2003年用淘寶，就等同而家用 Codex 同 Claude Code。

好多朋友第一次用 Codex，會以為關鍵係：提示詞寫得有幾高級

但真正用起嚟會發現，最難係唔知應該俾 Codex 進入咩工作模式。

比如你想俾佢做前端，佢到底係隨便搭一個頁面，定係先諗清楚產品氣質、排版、交互狀態？

你想俾佢 review 代碼，佢到底係讚兩句「整體唔錯」，定係直接指出邊個文件邊一行可能會出 bug？

你想發 PR，佢到底係淨係寫一段總結，定係會先檢查分支、模板、測試、提交狀態？

呢個就係 Skills 嘅價值。

如果你啱開始用 Codex，我建議先裝下面呢 10 個研發場景 Skills。

先講點樣用

大家可以去我嘅 GitHub 倉庫下載。我將佢打包咗去一個倉庫，直接去倉庫度裝就得。

   
curl -fsSL https://raw.githubusercontent.com/siuserxiaowei/codex-skills-guide/main/codex-dev-skills/install.sh | bash

安裝完之後你唔需要去㩒咩掣。

你可以直接對 Codex 講：

   
用 frontend-design 幫我優化這個頁面。 
用 code-reviewer review 當前改動。 
用 webapp-testing 打開本地頁面測試關鍵流程。

有啲 Skill 喺任務描述好明確嘅時候會自動觸發，但對新手嚟講最好嘅方法係直接點名佢。

1. frontend-design：要 Codex 唔好再做模板感頁面

安裝：

   
npx -y skills add anthropics/skills -g --skill frontend-design -y --full-depth

適合場景：

你要做網頁、組件、落地頁、後台、HTML 原型，或者你覺得 Codex 做出嚟嘅頁面太AI

你可以咁樣講：

   
用 frontend-design 幫我把這個頁面做得像真實產品，不要通用 AI 風格。先確認用途、受眾、視覺氣質和技術約束，再開始改。

你要 Codex 先定方向，例如「工具型後台」「面向創作者嘅內容工作台」「高密度數據看板」。

方向越清楚越好

2. cache-components：Next.js 項目唔好亂寫緩存

安裝：

   
npx -y skills add vercel/next.js -g --skill cache-components -y --full-depth

適合場景：

你做緊 Next.js 項目，尤其係涉及 Server Components、PPR、cacheComponents: true、use cache、cacheLife、cacheTag 呢啲嘢。

你可以咁樣講：

   
這是 Next.js 項目，請先檢查 next.config 裏有沒有 cacheComponents: true。然後幫我看當前頁面的數據獲取和緩存邊界有沒有問題。

你要 Codex 先判斷：邊啲內容可以緩存，邊啲內容同用戶請求有關，邊啲地方需要 Suspense 或動態流式渲染。

3. fullstack-developer：由頁面到接口一齊拆

安裝：

   
npx -y skills add Shubhamsaboo/awesome-llm-apps -g --skill fullstack-developer -y --full-depth

適合場景：

你想做一個完整功能，但唔知前端、接口、數據庫、鑑權、部署應該點樣連起嚟。

你可以咁樣講：

   
用 fullstack-developer 幫我從數據模型、API、前端頁面、狀態管理、校驗和部署一起拆方案，然後先做一個最小可用版本。

呢個 Skill 對新手好有用，因為好多人叫 Codex 寫功能嗰陣，只會得到一個睇起嚟可以運行嘅頁面，但冇真正嘅數據閉環。佢會提醒 Codex 同時考慮前端同後端。

4. frontend-code-review：專門審前端改動

安裝：

   
npx -y skills add langgenius/dify -g --skill frontend-code-review -y --full-depth

適合場景：

你改了 .tsx、.ts、.js 文件，想喺提交前睇下有冇組件寫法、性能、樣式、業務邏輯問題。

你可以咁樣講：

   
用 frontend-code-review 審一下我當前前端改動。只列真正需要修的地方，按緊急問題和改進建議分開。

最好要求佢「基於 diff 審」，唔好俾佢對成個項目泛泛點評。

好嘅 review 應該帶文件、行號、問題原因同建議修法。

5. code-reviewer：通用代碼審查

安裝：

   
npx -y skills add google-gemini/gemini-cli -g --skill code-reviewer -y --full-depth

適合場景：

任何代碼改完都可以用，尤其係跨文件、跨模塊、涉及接口、狀態、權限、數據結構嘅改動。

你可以咁樣講：

   
用 code-reviewer review 當前改動，重點看 bug、邊界條件、安全問題、可維護性和測試缺口。發現問題先列出來，不要急着改。

呢個 Skill 嘅價值係要 Codex 進入「審查者模式」。

6. webapp-testing：唔好淨係睇代碼，要打開頁面測

安裝：

   
npx -y skills add anthropics/skills -g --skill webapp-testing -y --full-depth

適合場景：

你做咗網頁、表單、登錄、按鈕、彈窗、列表、搜索、篩選、支付、設置頁，只要係用戶會㩒嘅嘢，都應該叫 Codex 打開瀏覽器測一次。

你可以咁樣講：

   
用 webapp-testing 啓動本地項目，打開頁面，走一遍關鍵流程，截圖並檢查控制枱錯誤。

好多網頁項目最容易出現嘅問題係：代碼睇落冇錯，頁面一打開就錯位、按鈕冇反應、接口報錯。

呢個 Skill 可以將 Codex 由「讀代碼」拉到「真實使用」

7. pr-creator：叫 Codex 幫你發一個似樣嘅 PR

安裝：

   
npx -y skills add google-gemini/gemini-cli -g --skill pr-creator -y --full-depth

適合場景：

你已經改完代碼，準備提交 Pull Request。

你可以咁樣講：

   
用 pr-creator 幫我準備 PR。先確認當前分支不是 main，檢查 git status、PR 模板和測試結果，再生成 PR 標題和描述。

新手一定要記住：涉及提交、推送、創建 PR 嘅操作，要叫 Codex 先解釋佢準備做咩。特別係推送嗰陣要睇下分支名。

8. fix：提交前先掃格式同 lint

安裝：

   
npx -y skills add facebook/react -g --skill fix -y --full-depth

適合場景：

準備提交前、CI 報格式錯誤、lint 錯誤、或者你改咗好多文件但唔確定風格係咪統一。

你可以咁樣講：

   
用 fix 幫我跑格式化和 lint。能自動修的先修，剩下需要手動處理的問題列出來。

唔同項目嘅命令唔一定一樣。

React 呢個 Skill 裏面寫嘅係 yarn prettier 和 yarn linc，但你嘅項目可能係 npm run lint、pnpm lint 或者第啲命令。

所以最好係叫 Codex 先讀項目腳本再跑。

9. update-docs：代碼改咗，文檔唔好漏

安裝：

   
npx -y skills add vercel/next.js -g --skill update-docs -y --full-depth

適合場景：

你新增咗配置、API、組件、行為變化，或者一個 PR 需要補文檔、遷移說明、使用示例。

你可以咁樣講：

   
用 update-docs 看一下這次代碼變更影響哪些文檔。先根據 diff 找到相關 docs 或 mdx 文件，再給我建議更新點。

功能做出嚟只係第一步，人哋知道點樣用先算完整交付。

10. find-skills：遇到新任務先揾現成 Skill

安裝：

   
npx -y skills add vercel-labs/skills -g --skill find-skills -y --full-depth

適合場景：

你遇到一個新任務，唔確定有冇更專業嘅 Skill 可以幫你。

你可以咁樣講：

   
用 find-skills 幫我找一個適合做這個任務的 Skill。優先官方來源、高安裝量、倉庫活躍、風險低的結果，並給我安裝命令。

呢個 Skill 適合放喺第一個用。

因為你以後唔可能淨係靠呢 10 個 Skill，真正嘅用法係：遇到新場景，先叫 Codex 幫你揾更合適嘅流程卡。

大家好，我是siuser小偉

我看到一段話，還挺有感觸的：

2003年用淘寶，就等於現在用 Codex 跟 Claude Code。

很多小夥伴第一次用 Codex，會以為關鍵是：提示詞寫得多高級

但真正用起來會發現，最難的是不知道該讓 Codex 進入什麼工作模式。

比如你想讓它做前端，它到底是隨便搭一個頁面，還是先想清楚產品氣質、排版、交互狀態？

你想讓它 review 代碼，它到底是誇兩句整體不錯，還是直接指出哪個文件哪一行可能出 bug？

你想發 PR，它到底只是寫一段總結，還是會先檢查分支、模板、測試、提交狀態？

這就是 Skills 的價值。

如果你剛開始用 Codex，我建議先裝下面這 10 個研發場景 Skills。

先說怎麼用

大家可以在我的 GitHub 倉庫下載。我把它打包到一個倉庫了，直接到倉庫裏去裝就好。

   
curl -fsSL https://raw.githubusercontent.com/siuserxiaowei/codex-skills-guide/main/codex-dev-skills/install.sh | bash

安裝完後你不需要去點什麼按鈕。

你可以直接對 Codex 說：

   
用 frontend-design 幫我優化這個頁面。 
用 code-reviewer review 當前改動。 
用 webapp-testing 打開本地頁面測試關鍵流程。

有些 Skill 在任務描述很明確時會自動觸發，但對小白來最好的方法直接點名它。

1. frontend-design：讓 Codex 別再做模板感頁面

安裝：

   
npx -y skills add anthropics/skills -g --skill frontend-design -y --full-depth

適合場景：

你要做網頁、組件、落地頁、後台、HTML 原型，或者你覺得 Codex 做出來的頁面太AI

你可以這樣說：

   
用 frontend-design 幫我把這個頁面做得像真實產品，不要通用 AI 風格。先確認用途、受眾、視覺氣質和技術約束，再開始改。

你要讓 Codex 先定方向，比如“工具型後台”“面向創作者的內容工作台”“高密度數據看板”。

方向越清楚越好

2. cache-components：Next.js 項目別亂寫緩存

安裝：

   
npx -y skills add vercel/next.js -g --skill cache-components -y --full-depth

適合場景：

你在做 Next.js 項目，尤其是涉及 Server Components、PPR、cacheComponents: true、use cache、cacheLife、cacheTag 這些東西。

你可以這樣說：

   
這是 Next.js 項目，請先檢查 next.config 裏有沒有 cacheComponents: true。然後幫我看當前頁面的數據獲取和緩存邊界有沒有問題。

你要讓 Codex 先判斷：哪些內容可以緩存，哪些內容跟用戶請求有關，哪些地方需要 Suspense 或動態流式渲染。

3. fullstack-developer：從頁面到接口一起拆

安裝：

   
npx -y skills add Shubhamsaboo/awesome-llm-apps -g --skill fullstack-developer -y --full-depth

適合場景：

你想做一個完整功能，但不知道前端、接口、數據庫、鑑權、部署應該怎麼連起來。

你可以這樣說：

   
用 fullstack-developer 幫我從數據模型、API、前端頁面、狀態管理、校驗和部署一起拆方案，然後先做一個最小可用版本。

這個 Skill 對小白很有用，因為很多人讓 Codex 寫功能時，只會得到一個看起來能跑的頁面，但沒有真正的數據閉環。它能提醒 Codex 同時考慮前端和後端。

4. frontend-code-review：專門審前端改動

安裝：

   
npx -y skills add langgenius/dify -g --skill frontend-code-review -y --full-depth

適合場景：

你改了 .tsx、.ts、.js 文件，想在提交前看有沒有組件寫法、性能、樣式、業務邏輯問題。

你可以這樣說：

   
用 frontend-code-review 審一下我當前前端改動。只列真正需要修的地方，按緊急問題和改進建議分開。

最好要求它“基於 diff 審”，不要讓它對整個項目泛泛點評。

好的 review 應該帶文件、行號、問題原因和建議修法。

5. code-reviewer：通用代碼審查

安裝：

   
npx -y skills add google-gemini/gemini-cli -g --skill code-reviewer -y --full-depth

適合場景：

任何代碼改完都可以用，尤其是跨文件、跨模塊、涉及接口、狀態、權限、數據結構的改動。

你可以這樣說：

   
用 code-reviewer review 當前改動，重點看 bug、邊界條件、安全問題、可維護性和測試缺口。發現問題先列出來，不要急着改。

這個 Skill 的價值是讓 Codex 進入審查者模式。

6. webapp-testing：別隻看代碼，要打開頁面測

安裝：

   
npx -y skills add anthropics/skills -g --skill webapp-testing -y --full-depth

適合場景：

你做了網頁、表單、登錄、按鈕、彈窗、列表、搜索、篩選、支付、設置頁，只要是用戶會點的東西，都應該讓 Codex 打開瀏覽器測一遍。

你可以這樣說：

   
用 webapp-testing 啓動本地項目，打開頁面，走一遍關鍵流程，截圖並檢查控制枱錯誤。

很網頁項目最容易出現的問題是：代碼看着對，頁面一打開就錯位、按鈕沒反應、接口報錯。

這個 Skill 能把 Codex 從讀代碼拉到真實使用

7. pr-creator：讓 Codex 幫你發一個像樣的 PR

安裝：

   
npx -y skills add google-gemini/gemini-cli -g --skill pr-creator -y --full-depth

適合場景：

你已經改完代碼，準備提交 Pull Request。

你可以這樣說：

   
用 pr-creator 幫我準備 PR。先確認當前分支不是 main，檢查 git status、PR 模板和測試結果，再生成 PR 標題和描述。

小白一定要記住：涉及提交、推送、創建 PR 的操作，要讓 Codex 先解釋它準備做什麼。特別是推送的時候要看一下分支名。

8. fix：提交前先掃格式和 lint

安裝：

   
npx -y skills add facebook/react -g --skill fix -y --full-depth

適合場景：

準備提交前、CI 報格式錯誤、lint 錯誤、或者你改了很多文件但不確定風格是否統一。

你可以這樣說：

   
用 fix 幫我跑格式化和 lint。能自動修的先修，剩下需要手動處理的問題列出來。

不同項目的命令不一定一樣。

React 這個 Skill 裏寫的是 yarn prettier 和 yarn linc，但你自己的項目可能是 npm run lint、pnpm lint 或別的命令。

所以最好是讓 Codex 先讀項目腳本再跑。

9. update-docs：代碼改了，文檔別漏

安裝：

   
npx -y skills add vercel/next.js -g --skill update-docs -y --full-depth

適合場景：

你新增了配置、API、組件、行為變化，或者一個 PR 需要補文檔、遷移說明、使用示例。

你可以這樣說：

   
用 update-docs 看一下這次代碼變更影響哪些文檔。先根據 diff 找到相關 docs 或 mdx 文件，再給我建議更新點。

功能做出來只是第一步，別人知道怎麼用才算完整交付。

10. find-skills：遇到新任務先找現成 Skill

安裝：

   
npx -y skills add vercel-labs/skills -g --skill find-skills -y --full-depth

適合場景：

你遇到一個新任務，不確定有沒有更專業的 Skill 能幫你。

你可以這樣說：

   
用 find-skills 幫我找一個適合做這個任務的 Skill。優先官方來源、高安裝量、倉庫活躍、風險低的結果，並給我安裝命令。

這個 Skill 適合放在第一個用。

因為你以後不可能只靠這 10 個 Skill，真正的用法是：遇到新場景，先讓 Codex 幫你找更合適的流程卡。